From 5e60f1d12a0c20cad14887df8d65d749dc0b60d3 Mon Sep 17 00:00:00 2001 From: mister-corn Date: Mon, 2 Apr 2018 14:40:10 -0700 Subject: [PATCH 1/5] Challenge #1 Update 2:39PM 4/2/2018 --- great-idea/css/index.css | 102 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 11a690045..7c0b68a9a 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -62,3 +62,105 @@ h1, h2, h3, h4, h5 { letter-spacing: 1px; margin-bottom: 15px; } + +/* A nice little margin around the entire thing */ +.container { + margin: 2rem; +} + +/* Top Navigation Bar */ + +header { + position: relative; + display: block; + height: 4rem; +} + +header nav { + display: inline-block; + vertical-align: middle; + width: 80%; +} + + /* Link styles */ +nav a { + position: relative; + margin: 2rem; + text-align: justify; + font-size: 1rem; + text-decoration: none; +} + +nav a:link { + color: gray; +} + +nav a:hover { + color: black; +} + /* End Link Styles */ + +header img { + vertical-align: middle; + right: 0%; +} + +/* Call to Action */ + +.cta { + display: block; + margin-bottom: 2rem; +} + +.cta-text { + display: inline-block; + font-size: 4rem; + text-align: center; + width: 50%; +} + +/* Main Body */ + +.main-content { + border-top: 2px solid black; + border-bottom: 2px solid black; +} + +.top-content .text-content { + display: inline-block; + width: 49%; + padding: 1rem; + text-align: justify; +} + +.middle-img { + width: 100% +} + +.bottom-content .text-content { + display: inline-block; + width: 32%; + padding: 1rem; + text-align: justify; +} + +/* Contact */ + +.contact { + margin: 2rem 0rem; +} + +.contact p { + margin-bottom: 1rem; +} + +footer { + text-align: center; + font-style: italic; +} + + + + + + From c162d4b8861c02eeb2c7740e818d998db483cd8a Mon Sep 17 00:00:00 2001 From: mister-corn Date: Mon, 2 Apr 2018 15:15:17 -0700 Subject: [PATCH 2/5] Update Challenge #1 3:14 PM 4/2/2018 --- great-idea/css/index.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 7c0b68a9a..0ecf62489 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -114,11 +114,18 @@ header img { .cta-text { display: inline-block; - font-size: 4rem; + font-size: 5rem; text-align: center; width: 50%; } +.cta-text button { + font-size: 1.5rem; +} + +.cta image { + height: auto; +} /* Main Body */ .main-content { From 140046989471a7e6b370376f14d14262aa0d5a8b Mon Sep 17 00:00:00 2001 From: mister-corn Date: Mon, 2 Apr 2018 15:28:39 -0700 Subject: [PATCH 3/5] Challenge #1 3:28 PM 4/2/2018 --- great-idea/css/index.css | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 0ecf62489..4b0d7344a 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -116,16 +116,13 @@ header img { display: inline-block; font-size: 5rem; text-align: center; - width: 50%; + width: 60%; } .cta-text button { font-size: 1.5rem; } -.cta image { - height: auto; -} /* Main Body */ .main-content { @@ -141,7 +138,7 @@ header img { } .middle-img { - width: 100% + width: 100%; } .bottom-content .text-content { From 41bae58b2ae5873c15d4ce604001d52b0fd0aaeb Mon Sep 17 00:00:00 2001 From: mister-corn Date: Mon, 2 Apr 2018 15:33:56 -0700 Subject: [PATCH 4/5] Challenge #1 3:33PM 4/2/2018 --- great-idea/css/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 4b0d7344a..eb684d65e 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -139,6 +139,7 @@ header img { .middle-img { width: 100%; + margin: 1rem 0rem; } .bottom-content .text-content { From 9c23e29948c8706ac3eac0caa9ffabff182cb6a6 Mon Sep 17 00:00:00 2001 From: mister-corn Date: Tue, 3 Apr 2018 12:55:20 -0700 Subject: [PATCH 5/5] Challenge #2 Update 12:55 PM PDT 4-3-2018 --- great-idea/css/index.css | 132 ++++++++++++++++++++------------------- 1 file changed, 68 insertions(+), 64 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index eb684d65e..bbc65a767 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -63,109 +63,113 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* A nice little margin around the entire thing */ -.container { - margin: 2rem; -} - -/* Top Navigation Bar */ +/* Student Inputted CSS Below This Comment */ +/* Header Styling */ header { - position: relative; - display: block; - height: 4rem; + margin: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; } header nav { - display: inline-block; - vertical-align: middle; - width: 80%; + display: flex; + justify-content: space-evenly; + width: 70%; } - /* Link styles */ -nav a { - position: relative; - margin: 2rem; - text-align: justify; - font-size: 1rem; - text-decoration: none; -} - -nav a:link { - color: gray; -} -nav a:hover { - color: black; -} - /* End Link Styles */ + /* Link Styling in Header */ -header img { - vertical-align: middle; - right: 0%; -} + header nav a { + text-decoration: none; + color: #BBB; + } -/* Call to Action */ + header nav a:hover { + color: black; + } -.cta { - display: block; - margin-bottom: 2rem; -} + /* End Link Styling */ -.cta-text { - display: inline-block; - font-size: 5rem; +/* Call-to-Action Styling */ + +.cta { + margin-top: 3rem; + display: flex; + justify-content: space-around; +} + +.cta .cta-text { + /* Positioning */ + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + /* Font Styling */ + font-size: 4.5vw; text-align: center; - width: 60%; } -.cta-text button { - font-size: 1.5rem; -} + /* CTA Button Styling */ + .cta button { + /* Button Styling */ + background: transparent; + border-radius: 0.5rem; + padding: 0rem 1.5rem; + /* Button Text Styling */ + font-size: 1vw; + } -/* Main Body */ + + .cta button:hover { + background: gray; + color: white; + } + /* End Button Styling */ +/* Main Body */ .main-content { + margin: 3rem 1rem; border-top: 2px solid black; border-bottom: 2px solid black; } -.top-content .text-content { - display: inline-block; - width: 49%; - padding: 1rem; +.main-content .text-content { + padding: 0rem 1rem; /*Horizontal padding around each .text-content*/ +} + +.top-content { + margin-top: 2rem; + display: flex; text-align: justify; } .middle-img { + margin-top: 2rem; width: 100%; - margin: 1rem 0rem; } -.bottom-content .text-content { - display: inline-block; - width: 32%; - padding: 1rem; +.bottom-content { + margin: 2rem 0rem; + display: flex; text-align: justify; } +/* End Main Body */ -/* Contact */ - +/* Closing Section */ .contact { - margin: 2rem 0rem; + margin-top: 2rem; + margin-left: 1rem; } .contact p { - margin-bottom: 1rem; + margin: 1rem 0rem; } footer { text-align: center; font-style: italic; } - - - - - - +/* End Closing Section */ \ No newline at end of file