From 56d8e169830f0a890e7b5592ff55de0acdf50538 Mon Sep 17 00:00:00 2001 From: StephanieCzetli Date: Wed, 9 Dec 2020 19:20:04 -0500 Subject: [PATCH 1/3] added 2 s[aces on line 17 --- HTML-CSS-Pair-Programming-Lab-1 | 1 + index.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 160000 HTML-CSS-Pair-Programming-Lab-1 diff --git a/HTML-CSS-Pair-Programming-Lab-1 b/HTML-CSS-Pair-Programming-Lab-1 new file mode 160000 index 0000000..3997ab1 --- /dev/null +++ b/HTML-CSS-Pair-Programming-Lab-1 @@ -0,0 +1 @@ +Subproject commit 3997ab11b88d41d8f4aa28a968873207b1ea6d89 diff --git a/index.html b/index.html index b71cee5..697eebb 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@

MyWebsite

Golden Gate Bridge at Sunset
-

This is a Lorem Ipsum Heading

+

This is a Lorem Ipsum Heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, asperiores. Tempore ipsam, libero eveniet amet odit ex a dicta pariatur exercitationem alias, similique molestiae non sed repellendus sit aliquid nemo!

Read More From 26f53b1537d3f7f56315750345492a404a3d1a64 Mon Sep 17 00:00:00 2001 From: StephanieCzetli Date: Fri, 11 Dec 2020 12:50:07 -0500 Subject: [PATCH 2/3] Divided html body in 3 and placed in div containers & Added stylesheet for flexbox --- flexbox.css | 3 +++ index.html | 70 +++++++++++++++++++++++++++++------------------------ 2 files changed, 42 insertions(+), 31 deletions(-) create mode 100644 flexbox.css diff --git a/flexbox.css b/flexbox.css new file mode 100644 index 0000000..ddc2c47 --- /dev/null +++ b/flexbox.css @@ -0,0 +1,3 @@ +.container { + display: flex; +} diff --git a/index.html b/index.html index 697eebb..fc412a7 100644 --- a/index.html +++ b/index.html @@ -6,42 +6,50 @@ Document + +
+ +
+
+

MyWebsite

+
+
+ +
+
+
+ Golden Gate Bridge at Sunset +
-

MyWebsite

-
-
- Golden Gate Bridge at Sunset -
-
-

This is a Lorem Ipsum Heading

-

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, asperiores. Tempore ipsam, libero eveniet amet odit ex a dicta pariatur exercitationem alias, similique molestiae non sed repellendus sit aliquid nemo!

+

This is a Lorem Ipsum Heading

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, asperiores. Tempore ipsam, libero eveniet amet odit ex a dicta pariatur exercitationem alias, similique molestiae non sed repellendus sit aliquid nemo!

- Read More -
- -
-

SideBar Links

-
- + Read More +
+
- - -
-

Other Widgets

-
+
+
+ +
+
From 02414036ec919a18f37a5db7a9aef0db2975cba8 Mon Sep 17 00:00:00 2001 From: StephanieCzetli Date: Sat, 12 Dec 2020 15:21:36 -0500 Subject: [PATCH 3/3] added flexbox layout and revised css styles --- README.md | 6 +-- flexbox.css | 3 -- index.html | 77 +++++++++++++++++------------- style.css | 132 +++++++++++++++++++++++++++++++++++++++++++++------- 4 files changed, 164 insertions(+), 54 deletions(-) delete mode 100644 flexbox.css diff --git a/README.md b/README.md index 1f629d5..777fa38 100644 --- a/README.md +++ b/README.md @@ -4,12 +4,12 @@ One partner should fork this project to their account and both partners should clone the project to their devices. ## Description -You will pair program with a partner to complete this assignemnt. One partner, the driver, should share their screen and be the one typing. The other partner, the observer, should review each line of code. Both partners should be cooperating when solving problems. When an objective has been met, the driver should push the code to the GitHub account, the observer should pull the changes, and the two partners switch roles. +You will pair program with a partner to complete this assignment. One partner, the driver, should share their screen and be the one typing. The other partner, the observer, should review each line of code. Both partners should be cooperating when solving problems. When an objective has been met, the driver should push the code to the GitHub account, the observer should pull the changes, and the two partners switch roles. ## Steps 1. Create the header and footer for the webpage. 2. Display the main content (left side of mock up) on the webpage -3. Display the Sidebar conent on the webpage +3. Display the Sidebar content on the webpage 4. The page should have the correct coloring 5. Convert main content to a 2 column layout 6. The page should have the correct spacing @@ -19,4 +19,4 @@ You will pair program with a partner to complete this assignemnt. One partner, t ![](mockup.png) ## Submission -Create a pull request from your team's repor to the class repo +Create a pull request from your team's report to the class repo diff --git a/flexbox.css b/flexbox.css deleted file mode 100644 index ddc2c47..0000000 --- a/flexbox.css +++ /dev/null @@ -1,3 +0,0 @@ -.container { - display: flex; -} diff --git a/index.html b/index.html index fc412a7..ada3597 100644 --- a/index.html +++ b/index.html @@ -4,52 +4,65 @@ - Document + MyWebsite -
- -
+
+

MyWebsite

-
-
+ +
+
Golden Gate Bridge at Sunset -
- -

This is a Lorem Ipsum Heading

-

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, asperiores. Tempore ipsam, libero eveniet amet odit ex a dicta pariatur exercitationem alias, similique molestiae non sed repellendus sit aliquid nemo!

- - Read More -
-
+ + +
-
- + Read More + +
+ +
+ + +
+
+ +
+
+ diff --git a/style.css b/style.css index a1c1676..7edc2f3 100644 --- a/style.css +++ b/style.css @@ -1,29 +1,129 @@ @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); -h1{ - color: orange; - background-color: black; + +* { + box-sizing: border-box; +} +/***flexbox styles ***/ +.container-main { /*main flex container*/ + display: flex; + flex-direction: column; + align-items: stretch; +} + +/***header styles***/ +.main-header { /*flex item*/ + background-color: #3c3c3c; + font-family: "Roboto"; + font-size: 1.25em; + color: #e68a00; + padding: 0 1em; +} + +.main-content { /*creates a flex parent container*/ + /* background-color: lightblue; */ + display: flex; + justify-content: space-between; +} + +.col-left { /*flex child item*/ + background-color:white; + flex-grow: 1; + flex-basis: 0; + padding-top: 1em; +} + +.col-middle { /*flex child item - main content*/ + background-color: white; + flex-grow: 2; + flex-basis: 0; + padding-top: 1em; + padding-right: 2em; +} + +.col-right { /*flex child item - aside content*/ + background-color: #e6e6e6; + flex-grow: 1; + flex-basis: 0; + padding-top: 1em; + padding-left: 1em; + padding-right: 1em; +} + +.links { /*sidebar links - */ + display: flex; + flex-direction: column; /*stack links vertically*/ + margin-left: 0; + padding-left: 1em; +} + +/***footer styles***/ +.main-footer { /*flex item - main footer style*/ + background-color:#3c3c3c; font-family: "Roboto"; - padding: .75em .75em .75em .75em; + color: white; + text-align: center; + padding: 0 1em; } -body{ - font-family: "Roboto"; +/***body styles***/ +body { + font-family: "Roboto"; } -img{ +img { + width: auto%; height: 100%; - width: 100%; object-fit: cover; } -.thumbnail{ + +.thumbnail { height: 200px; width: 200px; - float: left; - margin-right: 15px; + padding-top: .50em; + margin-left: 1em; + margin-right: 1em; } -.sidebar{ - display: inline-block; + +h2 { + font-size: 1.5em; +} + +h2, h3 { + color: #3c3c3c; + font-weight: 700; +} + +.text { + line-height: 1.75em; +} + +p { + color: #3c3c3c; + line-height: 1.5em; /*create space between lines of text in paragraphs*/ +} + +.read-more { + font-size: .90em; + font-weight: 600; /*increased font weight bc it appears heavier than the links*/ } -content{ - -} \ No newline at end of file + +a { /*style links & remove underline*/ + text-decoration: none; + color: #e68a00; +} + +li { /* create spacing between links */ + padding-bottom: 1.5em; + list-style-type: none; + margin: 0; + padding-left: 0; +} + +.header-widgets { /*add margin above other widgets */ + margin-top: 1em; +} + +.sidebar { /*create space at bottom of other widgets*/ + margin-bottom: 7em; +} +