From 02a94df1180e7c77ef3b4df9e68c77f692341022 Mon Sep 17 00:00:00 2001 From: Greg Jordan Date: Fri, 29 Mar 2019 11:25:11 -0400 Subject: [PATCH 01/10] Answered the questionsin the README.md --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 8ad61eb4ad..e776885250 100644 --- a/README.md +++ b/README.md @@ -34,14 +34,24 @@ Edit this document to include your answers after each question. Make sure to lea 1. What is the difference between an adaptive website and a fully responsive website? +Responsive websites respond to the size of the browser at any given size/point. Whereas, adaptive websites adapt to the size of the browser at specific breakpoints. + 2. Describe what it means to be mobile first vs desktop first. +This means that the website is design with the intentions of the user viewing it on a mobile device first as opposed to it being viewed on a desktop browser first. + 3. What does `font-size: 62.5%` in the `html` tag do for us when using `rem` units? +It gives the user accessibility options for viewing websites, like zooming in and out of the webpage. This allows the site to react to those options. + 4. How would you describe preprocessing to someone new to CSS? +Preprocessing is when CSS can be written with a special syntax that makes it easier to reuse, read and maintain. Then that syntax is translated through a translator (compiler) into regular CSS + 5. What is your favorite concept in preprocessing? What is the concept that gives you the most trouble? +My favorite concept is the ease of it's readability and reusability. The concept that has been giving me the most trouble is creating mixins and parametric mixins and using them correctly. + You are expected to be able to answer all these questions. Your responses contribute to your Sprint Challenge grade. Skipping this section *will* prevent you from passing this challenge. ## Project Set Up From f5aa4e4d76128bb47c1d150d5b1d75376aa1c6ae Mon Sep 17 00:00:00 2001 From: Greg Jordan Date: Fri, 29 Mar 2019 11:29:04 -0400 Subject: [PATCH 02/10] Answered the questions in the README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e776885250..3148f3bc7b 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ Preprocessing is when CSS can be written with a special syntax that makes it eas 5. What is your favorite concept in preprocessing? What is the concept that gives you the most trouble? -My favorite concept is the ease of it's readability and reusability. The concept that has been giving me the most trouble is creating mixins and parametric mixins and using them correctly. +My favorite concept is the ease of it's readability and reusability. The concept that has been giving me the most trouble is creating mixins and parametric mixins and using them correctly. Correct You are expected to be able to answer all these questions. Your responses contribute to your Sprint Challenge grade. Skipping this section *will* prevent you from passing this challenge. From 80c6a46b403c376cdb195b1f4b7a8fbe2efa4201 Mon Sep 17 00:00:00 2001 From: Greg Jordan Date: Fri, 29 Mar 2019 12:22:19 -0400 Subject: [PATCH 03/10] Added Nav bar --- css/index.css | 262 +++++++++++++++++++++++++++++++++++++++++++ index.html | 20 +++- less/home-page.less | 5 +- less/index.css | 223 ++++++++++++++++++++++++++++++++++++ less/index.less | 8 +- less/navigation.css | 0 less/navigation.less | 39 ++++++- less/variables.css | 0 less/variables.less | 2 + 9 files changed, 555 insertions(+), 4 deletions(-) create mode 100644 less/index.css create mode 100644 less/navigation.css create mode 100644 less/variables.css diff --git a/css/index.css b/css/index.css index e69de29bb2..1c707e5eaa 100644 --- a/css/index.css +++ b/css/index.css @@ -0,0 +1,262 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Ubuntu', sans-serif; + color: #5E6164; +} +h1, +h2, +h3, +h4, +h5 { + font-family: 'Russo One', sans-serif; + color: #23293B; +} +h2 { + font-size: 3.2rem; +} +h3 { + font-size: 2.8rem; +} +p { + font-size: 1.6rem; + line-height: 1.4; +} +.container { + max-width: 800px; + width: 100%; + margin: 0 auto; +} +.nav-header { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; +} +@media (max-width: 500px) { + .nav-header h1 { + margin-bottom: 2%; + } +} +.nav-header nav { + display: flex; + justify-content: space-around; + width: 45%; +} +@media (max-width: 500px) { + .nav-header nav { + width: 90%; + } +} +.nav-header nav a { + font-size: 1.5rem; + text-decoration: none; +} +.nav-header nav a:hover { + text-decoration: underline; + text-decoration-color: black; +} +@media (max-width: 500px) { + .nav-header { + display: flex; + width: 90%; + } +} +footer { + color: #22283B; + background: #f4f4f4; + padding: 20px 0; + border: 1px double #e0e0e0; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; +} +.container .home { + max-width: 80%; + margin: auto; +} +.container .home .intro h2 { + padding: 15px; +} +.container .home .intro p { + padding: 0 15px; +} +.container .home .space-images { + display: flex; + flex-wrap: wrap; + width: 100%; +} +.container .home .space-images img { + width: 28%; + margin: 20px 2.5%; + border-radius: 20px; + height: 100%; +} +.container .home .visit-planets { + padding: 15px; +} +.container .home .visit-planets h3 { + margin-top: 11px; +} +.container .home .visit-planets p { + margin-top: 13px; +} +.container .home .walk { + margin-top: 60px; + border-top: 1px solid #dee2e6; + padding: 50px 60px; + display: flex; + justify-content: center; +} +.container .home .walk .walk-text { + width: 50%; +} +.container .home .walk .walk-text h3 { + margin-bottom: 10px; +} +.container .home .walk .walk-text p { + margin-bottom: 26px; +} +.container .home .walk .walk-img { + width: 46%; + margin-left: 4%; +} +.container .home .walk .walk-img img { + width: 100%; + height: auto; + border-radius: 10px; +} diff --git a/index.html b/index.html index 6ba6990f3a..a1b6340f77 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + -
+
+

Lift Off

diff --git a/less/home-page.less b/less/home-page.less index 4eea66100a..f072e06f06 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,6 +1,9 @@ // Home Content -.home { +.container .home { + + max-width: 80%; + margin: auto; .intro { diff --git a/less/index.css b/less/index.css new file mode 100644 index 0000000000..285f39a467 --- /dev/null +++ b/less/index.css @@ -0,0 +1,223 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Ubuntu', sans-serif; + color: #5E6164; +} +h1, +h2, +h3, +h4, +h5 { + font-family: 'Russo One', sans-serif; + color: #23293B; +} +h2 { + font-size: 3.2rem; +} +h3 { + font-size: 2.8rem; +} +p { + font-size: 1.6rem; + line-height: 1.4; +} +.container { + max-width: 800px; + width: 100%; + margin: 0 auto; +} +footer { + color: #22283B; + background: #f4f4f4; + padding: 20px 0; + border: 1px double #e0e0e0; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; +} +.home .intro h2 { + padding: 15px; +} +.home .intro p { + padding: 0 15px; +} +.home .space-images { + display: flex; + flex-wrap: wrap; + width: 100%; +} +.home .space-images img { + width: 28%; + margin: 20px 2.5%; + border-radius: 20px; + height: 100%; +} +.home .visit-planets { + padding: 15px; +} +.home .visit-planets h3 { + margin-top: 11px; +} +.home .visit-planets p { + margin-top: 13px; +} +.home .walk { + margin-top: 60px; + border-top: 1px solid #dee2e6; + padding: 50px 60px; + display: flex; + justify-content: center; +} +.home .walk .walk-text { + width: 50%; +} +.home .walk .walk-text h3 { + margin-bottom: 10px; +} +.home .walk .walk-text p { + margin-bottom: 26px; +} +.home .walk .walk-img { + width: 46%; + margin-left: 4%; +} +.home .walk .walk-img img { + width: 100%; + height: auto; + border-radius: 10px; +} diff --git a/less/index.less b/less/index.less index 798843e162..481939b47b 100644 --- a/less/index.less +++ b/less/index.less @@ -1,5 +1,11 @@ // Import your less files here: - +@import "variables"; +@import "mixins"; +@import "reset"; +@import "global"; +@import "navigation"; +@import "footer"; +@import "home-page"; diff --git a/less/navigation.css b/less/navigation.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/navigation.less b/less/navigation.less index 17779ae17a..934662efe6 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,38 @@ -// Navigation code here \ No newline at end of file +// Navigation code here +.nav-header { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + + h1 { + @media @phone { + margin-bottom: 2%; + } + } + + nav { + display: flex; + justify-content: space-around; + width: 45%; + + @media @phone { + width: 90%; + } + + a { + font-size: 1.5rem; + text-decoration: none; + &:hover { + text-decoration: underline; + text-decoration-color: black; + } + } + } + @media @phone { + display: flex; + + width: 90%; + + } + } \ No newline at end of file diff --git a/less/variables.css b/less/variables.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/variables.less b/less/variables.less index b5b3d46021..4b7fdabb49 100644 --- a/less/variables.less +++ b/less/variables.less @@ -24,3 +24,5 @@ @border-real: #dee2e6; // Mobile var +@phone: ~"(max-width: 500px)"; +@tablet: ~"( max-width: 700px)"; From 723c2d24d06f381a2576189ba181fd538c941771 Mon Sep 17 00:00:00 2001 From: Greg Jordan Date: Fri, 29 Mar 2019 12:44:18 -0400 Subject: [PATCH 04/10] Nav component completed --- css/index.css | 18 ++++++++++-------- index.html | 2 +- less/home-page.less | 27 +++++++++++++++------------ less/navigation.less | 15 ++++++++++++--- 4 files changed, 38 insertions(+), 24 deletions(-) diff --git a/css/index.css b/css/index.css index 1c707e5eaa..1c6d7b45e9 100644 --- a/css/index.css +++ b/css/index.css @@ -162,14 +162,14 @@ p { } .nav-header { display: flex; - justify-content: space-between; + justify-content: stretch; align-items: center; flex-direction: column; + margin-bottom: 1rem; } -@media (max-width: 500px) { - .nav-header h1 { - margin-bottom: 2%; - } +.nav-header h1 { + font-size: 4rem; + margin-bottom: 3rem; } .nav-header nav { display: flex; @@ -205,9 +205,11 @@ footer { justify-content: center; align-items: center; } -.container .home { - max-width: 80%; - margin: auto; +@media (max-width: 500px) { + .container .home { + max-width: 80%; + margin: auto; + } } .container .home .intro h2 { padding: 15px; diff --git a/index.html b/index.html index a1b6340f77..38f414b45c 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ -
+
diff --git a/less/home-page.less b/less/home-page.less index f072e06f06..bf027f387c 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,21 +1,24 @@ // Home Content + .container .home { + @media @phone{ + max-width: 80%; + margin: auto; + } + - max-width: 80%; - margin: auto; + .intro { - .intro { + h2 { + padding: 15px; + } - h2 { - padding: 15px; - } - - p { - padding:0 15px; - } - - } + p { + padding:0 15px; + } + + } .space-images { display: flex; diff --git a/less/navigation.less b/less/navigation.less index 934662efe6..91c5e1bc09 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1,13 +1,22 @@ // Navigation code here + .nav-header { display: flex; - justify-content: space-between; + justify-content: stretch; align-items: center; flex-direction: column; - + margin-bottom: 1rem; + + @media @phone { + + } h1 { + font-size: 4rem; + margin-bottom: 3rem; + @media @phone { - margin-bottom: 2%; + + } } From bb016ea23d7e6d7374b1ccb273cab33d247d959b Mon Sep 17 00:00:00 2001 From: Greg Jordan Date: Fri, 29 Mar 2019 14:07:16 -0400 Subject: [PATCH 05/10] Desktop view completed --- css/index.css | 52 +++++++++++++++++++++++++++++++------------- index.html | 12 +++++----- less/home-page.less | 21 +++++++++++++----- less/mixins.css | 0 less/mixins.less | 11 +++++++++- less/navigation.less | 9 +++++--- 6 files changed, 74 insertions(+), 31 deletions(-) create mode 100644 less/mixins.css diff --git a/css/index.css b/css/index.css index 1c6d7b45e9..846ebc2841 100644 --- a/css/index.css +++ b/css/index.css @@ -167,10 +167,20 @@ p { flex-direction: column; margin-bottom: 1rem; } +@media (max-width: 500px) { + .nav-header { + width: 80%; + } +} .nav-header h1 { font-size: 4rem; margin-bottom: 3rem; } +@media (max-width: 500px) { + .nav-header h1 { + width: 80%; + } +} .nav-header nav { display: flex; justify-content: space-around; @@ -178,7 +188,9 @@ p { } @media (max-width: 500px) { .nav-header nav { - width: 90%; + width: 80%; + justify-content: space-around; + align-content: center; } } .nav-header nav a { @@ -206,58 +218,68 @@ footer { align-items: center; } @media (max-width: 500px) { - .container .home { + .home { max-width: 80%; margin: auto; } } -.container .home .intro h2 { +.home .intro h2 { padding: 15px; } -.container .home .intro p { +.home .intro p { padding: 0 15px; } -.container .home .space-images { +.home .space-images { display: flex; flex-wrap: wrap; width: 100%; + border-radius: 30%; } -.container .home .space-images img { +.home .space-images img { width: 28%; margin: 20px 2.5%; border-radius: 20px; height: 100%; } -.container .home .visit-planets { +.home .visit-planets { padding: 15px; } -.container .home .visit-planets h3 { +.home .visit-planets h3 { margin-top: 11px; } -.container .home .visit-planets p { +.home .visit-planets p { margin-top: 13px; } -.container .home .walk { +.home .walk { margin-top: 60px; border-top: 1px solid #dee2e6; padding: 50px 60px; display: flex; justify-content: center; } -.container .home .walk .walk-text { +.home .walk .walk-text { width: 50%; } -.container .home .walk .walk-text h3 { +.home .walk .walk-text h3 { margin-bottom: 10px; } -.container .home .walk .walk-text p { +.home .walk .walk-text p { margin-bottom: 26px; } -.container .home .walk .walk-img { +.home .walk .walk-text .btn .btn { + width: 10px; + display: flex; + justify-content: center; + padding: 2%; + background: #22283A; + border-radius: 7px; + color: #F6F7F8; +} +.home .walk .walk-img { width: 46%; margin-left: 4%; } -.container .home .walk .walk-img img { +.home .walk .walk-img img { width: 100%; height: auto; border-radius: 10px; diff --git a/index.html b/index.html index 38f414b45c..47abd37f89 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,9 @@
+ + +

SpaceWalkers

@@ -33,13 +36,10 @@

SpaceWalkers

- - -
- + Space, The Final Frontier

Lift Off

@@ -69,9 +69,9 @@

Let's Go For A Walk

Suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth.

-
+
+
diff --git a/less/home-page.less b/less/home-page.less index bf027f387c..6df7e03744 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,17 +1,21 @@ // Home Content -.container .home { - @media @phone{ - max-width: 80%; - margin: auto; - } + .home { + + @media @phone{ + max-width: 80%; + margin: auto; + } .intro { - + + + h2 { padding: 15px; + } p { @@ -24,6 +28,8 @@ display: flex; flex-wrap: wrap; width: 100%; + border-radius: 30%; + img { width: 28%; @@ -64,6 +70,9 @@ } .btn { + .btn { + .btn(10px) + } } } diff --git a/less/mixins.css b/less/mixins.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/mixins.less b/less/mixins.less index 530984da71..98cf19eb97 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,10 @@ -// Mixins Here \ No newline at end of file +// Mixins Here +.btn(@width: 110px) { + width: @width; + display: flex; + justify-content: center; + padding: 2%; + background: @btn-bg-color; + border-radius: 7px; + color: @porcelain; +} \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index 91c5e1bc09..f427df873a 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -8,14 +8,14 @@ margin-bottom: 1rem; @media @phone { - + width: 80%; } h1 { font-size: 4rem; margin-bottom: 3rem; @media @phone { - + width: 80%; } } @@ -26,9 +26,12 @@ width: 45%; @media @phone { - width: 90%; + width: 80%; + justify-content: space-around; + align-content: center; } + a { font-size: 1.5rem; text-decoration: none; From 4e0e765035da54eb03a1d1b50b0f5684f82123a3 Mon Sep 17 00:00:00 2001 From: Greg Jordan Date: Fri, 29 Mar 2019 16:29:34 -0400 Subject: [PATCH 06/10] Desktop view completed --- css/index.css | 60 ++++++++++++++++++++++++++++++++++++++------- less/home-page.less | 59 ++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 105 insertions(+), 14 deletions(-) diff --git a/css/index.css b/css/index.css index 846ebc2841..57574df952 100644 --- a/css/index.css +++ b/css/index.css @@ -266,20 +266,62 @@ footer { .home .walk .walk-text p { margin-bottom: 26px; } -.home .walk .walk-text .btn .btn { - width: 10px; - display: flex; - justify-content: center; +.home .walk .walk-text .btn { + background-color: #22283A; + border-radius: 5px; + text-align: center; + font-size: 1.5rem; + color: white; padding: 2%; - background: #22283A; - border-radius: 7px; - color: #F6F7F8; + width: 100px; + border: 1px solid black; +} +@media (max-width: 500px) { + .home .walk .walk-text { + width: 100%; + padding: 5%; + } +} +.home .walk .btn:hover { + background: white; + color: #22283A; +} +@media (max-width: 500px) { + .home .header-img img { + width: 100%; + } + .home .sky { + display: none; + } + .home .launch { + display: none; + } + .home .home .space-imgs img { + width: 100%; + border-radius: 20px; + height: 100%; + } +} +@media (max-width: 500px) { + .home .home .gowalk { + display: flex; + flex-direction: column-reverse; + width: 100%; + padding: 2%; + } + .home .home .gowalk .walk-img { + width: 100%; + margin-left: 0; + } + .home .home .gowalk .gowalk-text { + width: 100%; + } } -.home .walk .walk-img { +.home .walk-img { width: 46%; margin-left: 4%; } -.home .walk .walk-img img { +.home .walk-img img { width: 100%; height: auto; border-radius: 10px; diff --git a/less/home-page.less b/less/home-page.less index 6df7e03744..086a567eb6 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -69,13 +69,63 @@ margin-bottom: 26px; } - .btn { + .btn { - .btn(10px) + background-color: #22283A; + border-radius: 5px; + text-align: center; + font-size: 1.5rem; + color: white; + padding: 2%; + width: 100px; + border: 1px solid black; + + } + + @media @phone{ + width: 100%; + padding: 5%; } } - } + .btn:hover { + background: white; + color: #22283A; + } + + } + @media @phone { + .header-img img { + width: 100%; + } + .sky { + display: none; + } + .launch { + display: none; + } + .home .space-imgs img { + width: 100%; + border-radius: 20px; + height: 100%; + } + } + @media @phone { + .home .gowalk { + display: flex; + flex-direction: column-reverse; + width: 100%; + padding: 2%; + } + .home .gowalk .walk-img { + width: 100%; + margin-left: 0; + } + .home .gowalk .gowalk-text { + width: 100%; + } + + } .walk-img { width: 46%; margin-left: 4%; @@ -86,5 +136,4 @@ border-radius: 10px; } } - } -}// home \ No newline at end of file + }// home From e6a2dfc83e3eff5d4c2870d84a730caea752bc05 Mon Sep 17 00:00:00 2001 From: Greg Jordan Date: Fri, 29 Mar 2019 20:50:37 -0400 Subject: [PATCH 07/10] Project completed --- css/index.css | 84 ++++++++-------- index.html | 4 +- less/home-page.less | 162 ++++++++++++++++--------------- less/index.css | 223 ------------------------------------------- less/mixins.css | 0 less/navigation.css | 0 less/navigation.less | 4 +- 7 files changed, 124 insertions(+), 353 deletions(-) delete mode 100644 less/index.css delete mode 100644 less/mixins.css delete mode 100644 less/navigation.css diff --git a/css/index.css b/css/index.css index 57574df952..40a93f3cd5 100644 --- a/css/index.css +++ b/css/index.css @@ -169,7 +169,7 @@ p { } @media (max-width: 500px) { .nav-header { - width: 80%; + width: 100%; } } .nav-header h1 { @@ -188,7 +188,7 @@ p { } @media (max-width: 500px) { .nav-header nav { - width: 80%; + width: 100%; justify-content: space-around; align-content: center; } @@ -223,6 +223,9 @@ footer { margin: auto; } } +.home .intro .banner { + max-width: 100%; +} .home .intro h2 { padding: 15px; } @@ -235,18 +238,39 @@ footer { width: 100%; border-radius: 30%; } +@media (max-width: 500px) { + .home .space-images .sky { + display: none; + } + .home .space-images .launch { + display: none; + } +} .home .space-images img { width: 28%; margin: 20px 2.5%; border-radius: 20px; height: 100%; } +@media (max-width: 500px) { + .home .space-images img { + width: 100%; + border-radius: 20px; + height: 100%; + } +} .home .visit-planets { padding: 15px; } .home .visit-planets h3 { margin-top: 11px; } +@media (max-width: 500px) { + .home .visit-planets h3 { + width: 100%; + margin: 0 auto; + } +} .home .visit-planets p { margin-top: 13px; } @@ -257,8 +281,16 @@ footer { display: flex; justify-content: center; } +@media (max-width: 500px) { + .home .walk { + flex-direction: column-reverse; + width: 100%; + padding: 2%; + } +} .home .walk .walk-text { - width: 50%; + width: 100%; + margin-top: 20px; } .home .walk .walk-text h3 { margin-bottom: 10px; @@ -277,52 +309,16 @@ footer { border: 1px solid black; } @media (max-width: 500px) { - .home .walk .walk-text { + .home .walk .walk-text .btn { width: 100%; padding: 5%; } } -.home .walk .btn:hover { +.home .walk .walk-text .btn:hover { background: white; color: #22283A; } -@media (max-width: 500px) { - .home .header-img img { - width: 100%; - } - .home .sky { - display: none; - } - .home .launch { - display: none; - } - .home .home .space-imgs img { - width: 100%; - border-radius: 20px; - height: 100%; - } -} -@media (max-width: 500px) { - .home .home .gowalk { - display: flex; - flex-direction: column-reverse; - width: 100%; - padding: 2%; - } - .home .home .gowalk .walk-img { - width: 100%; - margin-left: 0; - } - .home .home .gowalk .gowalk-text { - width: 100%; - } -} -.home .walk-img { - width: 46%; - margin-left: 4%; -} -.home .walk-img img { - width: 100%; - height: auto; - border-radius: 10px; +.home .walk .walk-img { + margin-top: 20px; + border-radius: 40px; } diff --git a/index.html b/index.html index 47abd37f89..cc3d060ffb 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ - +

SpaceWalkers

@@ -39,7 +39,7 @@

SpaceWalkers

- Space, The Final Frontier +

Lift Off

diff --git a/less/home-page.less b/less/home-page.less index 086a567eb6..a8fa6c9745 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -3,26 +3,32 @@ .home { - @media @phone{ + @media @phone { max-width: 80%; margin: auto; } .intro { + .banner{ + max-width: 100%; + - + } + h2 { padding: 15px; - } + } p { padding:0 15px; - } + } + + } + - } .space-images { display: flex; @@ -30,13 +36,30 @@ width: 100%; border-radius: 30%; + @media @phone{ + .sky { + display: none; + } + + .launch { + display: none; + } + + } img { width: 28%; margin: 20px 2.5%; border-radius: 20px; height: 100%; - } + + @media @phone { + width: 100%; + border-radius: 20px; + height: 100%; + } + + } } .visit-planets { @@ -44,6 +67,10 @@ h3 { margin-top: 11px; + @media @phone { + width: 100%; + margin: 0 auto; + } } p { @@ -58,82 +85,53 @@ display: flex; justify-content: center; - .walk-text { - width: 50%; - - h3 { - margin-bottom: 10px; - } - - p { - margin-bottom: 26px; - } - - - .btn { - background-color: #22283A; - border-radius: 5px; - text-align: center; - font-size: 1.5rem; - color: white; - padding: 2%; - width: 100px; - border: 1px solid black; - - } - - @media @phone{ + @media @phone { + flex-direction: column-reverse; width: 100%; - padding: 5%; + padding: 2%; } - } + .walk-text { + width: 100%; + margin-top: 20px; + + h3 { + margin-bottom: 10px; + } + + p { + margin-bottom: 26px; + } + + + .btn { + background-color: #22283A; + border-radius: 5px; + text-align: center; + font-size: 1.5rem; + color: white; + padding: 2%; + width: 100px; + border: 1px solid black; + + + @media @phone{ + width: 100%; + padding: 5%; + } + } + .btn:hover { + background: white; + color: #22283A; + } + + + } + + .walk-img { + margin-top: 20px; + border-radius: 40px; + } + } - .btn:hover { - background: white; - color: #22283A; - } - - } - @media @phone { - .header-img img { - width: 100%; - } - .sky { - display: none; - } - .launch { - display: none; - } - .home .space-imgs img { - width: 100%; - border-radius: 20px; - height: 100%; - } - } - @media @phone { - .home .gowalk { - display: flex; - flex-direction: column-reverse; - width: 100%; - padding: 2%; - } - .home .gowalk .walk-img { - width: 100%; - margin-left: 0; - } - .home .gowalk .gowalk-text { - width: 100%; - } - - } - .walk-img { - width: 46%; - margin-left: 4%; - - img { - width: 100%; - height: auto; - border-radius: 10px; - } - } - }// home + + } diff --git a/less/index.css b/less/index.css deleted file mode 100644 index 285f39a467..0000000000 --- a/less/index.css +++ /dev/null @@ -1,223 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -embed, -figure, -figcaption, -footer, -header, -hgroup, -menu, -nav, -output, -ruby, -section, -summary, -time, -mark, -audio, -video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { - display: block; -} -body { - line-height: 1; -} -ol, -ul { - list-style: none; -} -blockquote, -q { - quotes: none; -} -blockquote:before, -blockquote:after, -q:before, -q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -* { - box-sizing: border-box; -} -html { - font-size: 62.5%; -} -html, -body { - font-family: 'Ubuntu', sans-serif; - color: #5E6164; -} -h1, -h2, -h3, -h4, -h5 { - font-family: 'Russo One', sans-serif; - color: #23293B; -} -h2 { - font-size: 3.2rem; -} -h3 { - font-size: 2.8rem; -} -p { - font-size: 1.6rem; - line-height: 1.4; -} -.container { - max-width: 800px; - width: 100%; - margin: 0 auto; -} -footer { - color: #22283B; - background: #f4f4f4; - padding: 20px 0; - border: 1px double #e0e0e0; - border-radius: 10px; - display: flex; - justify-content: center; - align-items: center; -} -.home .intro h2 { - padding: 15px; -} -.home .intro p { - padding: 0 15px; -} -.home .space-images { - display: flex; - flex-wrap: wrap; - width: 100%; -} -.home .space-images img { - width: 28%; - margin: 20px 2.5%; - border-radius: 20px; - height: 100%; -} -.home .visit-planets { - padding: 15px; -} -.home .visit-planets h3 { - margin-top: 11px; -} -.home .visit-planets p { - margin-top: 13px; -} -.home .walk { - margin-top: 60px; - border-top: 1px solid #dee2e6; - padding: 50px 60px; - display: flex; - justify-content: center; -} -.home .walk .walk-text { - width: 50%; -} -.home .walk .walk-text h3 { - margin-bottom: 10px; -} -.home .walk .walk-text p { - margin-bottom: 26px; -} -.home .walk .walk-img { - width: 46%; - margin-left: 4%; -} -.home .walk .walk-img img { - width: 100%; - height: auto; - border-radius: 10px; -} diff --git a/less/mixins.css b/less/mixins.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/less/navigation.css b/less/navigation.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/less/navigation.less b/less/navigation.less index f427df873a..3bbd445537 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -8,7 +8,7 @@ margin-bottom: 1rem; @media @phone { - width: 80%; + width: 100%; } h1 { font-size: 4rem; @@ -26,7 +26,7 @@ width: 45%; @media @phone { - width: 80%; + width: 100%; justify-content: space-around; align-content: center; } From a3cc6ee13c11b53d83670763b2aceeb532be43e3 Mon Sep 17 00:00:00 2001 From: Greg Jordan Date: Sun, 31 Mar 2019 00:17:57 -0400 Subject: [PATCH 08/10] Cleaned up the code --- less/home-page.less | 214 ++++++++++++++++++++----------------------- less/navigation.less | 40 ++++---- 2 files changed, 121 insertions(+), 133 deletions(-) diff --git a/less/home-page.less b/less/home-page.less index a8fa6c9745..63fa4e81d3 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -2,136 +2,124 @@ .home { - - @media @phone { - max-width: 80%; - margin: auto; - } - - - .intro { - .banner{ - max-width: 100%; - + @media @phone { + max-width: 80%; + margin: auto; + } + + .intro { + .banner{ + max-width: 100%; + } - } - - h2 { - padding: 15px; - - } + padding: 15px; + } p { - padding:0 15px; - } - + padding:0 15px; } - - - - .space-images { - display: flex; - flex-wrap: wrap; - width: 100%; - border-radius: 30%; - - @media @phone{ - .sky { - display: none; - } + } // .intro + + .space-images { + display: flex; + flex-wrap: wrap; + width: 100%; + border-radius: 30%; - .launch { + @media @phone{ + .sky { display: none; - } + } - } + .launch { + display: none; + } + } - img { - width: 28%; - margin: 20px 2.5%; - border-radius: 20px; - height: 100%; + img { + width: 28%; + margin: 20px 2.5%; + border-radius: 20px; + height: 100%; @media @phone { - width: 100%; - border-radius: 20px; - height: 100%; - } + width: 100%; + border-radius: 20px; + height: 100%; + } + } // img + } // .space-img - } - } + .visit-planets { + padding: 15px; - .visit-planets { - padding: 15px; + h3 { + margin-top: 11px; - h3 { - margin-top: 11px; - @media @phone { + @media @phone { width: 100%; margin: 0 auto; - } - } - - p { - margin-top: 13px; - } - } - - .walk { - margin-top: 60px; - border-top: 1px solid @main-border-color; - padding: 50px 60px; - display: flex; - justify-content: center; - - @media @phone { - flex-direction: column-reverse; - width: 100%; - padding: 2%; + } + } // h3 + + p { + margin-top: 13px; } - .walk-text { - width: 100%; - margin-top: 20px; - - h3 { - margin-bottom: 10px; - } - - p { - margin-bottom: 26px; - } - - - .btn { - background-color: #22283A; - border-radius: 5px; - text-align: center; - font-size: 1.5rem; - color: white; - padding: 2%; - width: 100px; - border: 1px solid black; - - - @media @phone{ - width: 100%; - padding: 5%; - } - } - .btn:hover { - background: white; - color: #22283A; - } - + } // .visit-planets - } + .walk { + margin-top: 60px; + border-top: 1px solid @main-border-color; + padding: 50px 60px; + display: flex; + justify-content: center; - .walk-img { - margin-top: 20px; - border-radius: 40px; - } - } + @media @phone { + flex-direction: column-reverse; + width: 100%; + padding: 2%; + } - - } + .walk-text { + width: 100%; + margin-top: 20px; + + h3 { + margin-bottom: 10px; + } + + p { + margin-bottom: 26px; + } + + + .btn { + background-color: #22283A; + border-radius: 5px; + text-align: center; + font-size: 1.5rem; + color: white; + padding: 2%; + width: 100px; + border: 1px solid black; + + + @media @phone{ + width: 100%; + padding: 5%; + } + } // .btn + + .btn:hover { + background: white; + color: #22283A; + } // .btn:hover + } //.walk-text + + .walk-img { + margin-top: 20px; + border-radius: 40px; + } // walk-img + } // .walk + } // .home diff --git a/less/navigation.less b/less/navigation.less index 3bbd445537..2d543a339c 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -9,16 +9,16 @@ @media @phone { width: 100%; - } + } + h1 { font-size: 4rem; margin-bottom: 3rem; @media @phone { - width: 80%; - - } - } + width: 80%; + } + } // h1 nav { display: flex; @@ -26,25 +26,25 @@ width: 45%; @media @phone { - width: 100%; - justify-content: space-around; - align-content: center; - } + width: 100%; + justify-content: space-around; + align-content: center; + } a { font-size: 1.5rem; text-decoration: none; + &:hover { - text-decoration: underline; - text-decoration-color: black; + text-decoration: underline; + text-decoration-color: black; + } + } // a + } // nav + + @media @phone { + display: flex; + width: 90%; } - } - } - @media @phone { - display: flex; - - width: 90%; - - } - } \ No newline at end of file + } // .nav-header \ No newline at end of file From c4cfbd2cb33dfacef451d2d573ddddb6e56bbaa7 Mon Sep 17 00:00:00 2001 From: Greg Jordan Date: Sun, 31 Mar 2019 02:07:52 -0400 Subject: [PATCH 09/10] Added mixins, parameters, about, contact, sign in and blog pages --- about.html | 49 +++++++++++ blog.html | 49 +++++++++++ contact.html | 49 +++++++++++ css/index.css | 35 ++++---- index.html | 11 ++- less/about-page.less | 1 + less/blog-page.less | 1 + less/contact-page.less | 1 + less/global.less | 4 +- less/home-page.less | 185 +++++++++++++++++++---------------------- less/index.less | 12 ++- less/mixins.less | 33 ++++++-- less/navigation.less | 25 +++--- less/signin-page.less | 1 + less/variables.css | 0 less/variables.less | 3 + signin.html | 49 +++++++++++ 17 files changed, 360 insertions(+), 148 deletions(-) create mode 100644 about.html create mode 100644 blog.html create mode 100644 contact.html create mode 100644 less/about-page.less create mode 100644 less/blog-page.less create mode 100644 less/contact-page.less create mode 100644 less/signin-page.less delete mode 100644 less/variables.css create mode 100644 signin.html diff --git a/about.html b/about.html new file mode 100644 index 0000000000..f18f507330 --- /dev/null +++ b/about.html @@ -0,0 +1,49 @@ + + + + + + + SpaceWalkers + + + + + + + + + +
+ + + + +
+ +

SpaceWalkers

+ + + +
+ +
+

About Us

+
+
+

Copyright SpaceWalkers 2018

+
+ +
+ + \ No newline at end of file diff --git a/blog.html b/blog.html new file mode 100644 index 0000000000..1ffb17a117 --- /dev/null +++ b/blog.html @@ -0,0 +1,49 @@ + + + + + + + SpaceWalkers + + + + + + + + + +
+ + + + +
+ +

SpaceWalkers

+ + + +
+ +
+

Blog

+
+
+

Copyright SpaceWalkers 2018

+
+ +
+ + \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000000..a88988c517 --- /dev/null +++ b/contact.html @@ -0,0 +1,49 @@ + + + + + + + SpaceWalkers + + + + + + + + + +
+ + + + +
+ +

SpaceWalkers

+ + + +
+ +
+

Contact

+
+
+

Copyright SpaceWalkers 2018

+
+ +
+ + \ No newline at end of file diff --git a/css/index.css b/css/index.css index 40a93f3cd5..85c419add6 100644 --- a/css/index.css +++ b/css/index.css @@ -156,8 +156,8 @@ p { line-height: 1.4; } .container { - max-width: 800px; width: 100%; + max-width: 800px; margin: 0 auto; } .nav-header { @@ -201,12 +201,6 @@ p { text-decoration: underline; text-decoration-color: black; } -@media (max-width: 500px) { - .nav-header { - display: flex; - width: 90%; - } -} footer { color: #22283B; background: #f4f4f4; @@ -279,7 +273,8 @@ footer { border-top: 1px solid #dee2e6; padding: 50px 60px; display: flex; - justify-content: center; + align-items: center; + justify-content: space-evenly; } @media (max-width: 500px) { .home .walk { @@ -290,7 +285,7 @@ footer { } .home .walk .walk-text { width: 100%; - margin-top: 20px; + margin: 2rem; } .home .walk .walk-text h3 { margin-bottom: 10px; @@ -299,26 +294,34 @@ footer { margin-bottom: 26px; } .home .walk .walk-text .btn { - background-color: #22283A; - border-radius: 5px; + font-size: 1.8rem; text-align: center; - font-size: 1.5rem; + border-radius: 0.5rem; + padding: 1rem; color: white; - padding: 2%; - width: 100px; - border: 1px solid black; + background: #22283A; + width: 10rem; + font-weight: 700; } @media (max-width: 500px) { .home .walk .walk-text .btn { width: 100%; - padding: 5%; + max-width: 800px; + padding: 2.7rem; } } .home .walk .walk-text .btn:hover { background: white; color: #22283A; + border: 1px solid #454A59; } .home .walk .walk-img { margin-top: 20px; border-radius: 40px; } +@media (max-width: 500px) { + .home .walk .walk-img { + display: flex; + width: 100%; + } +} diff --git a/index.html b/index.html index cc3d060ffb..0d94297740 100644 --- a/index.html +++ b/index.html @@ -27,11 +27,11 @@

SpaceWalkers

@@ -73,7 +73,6 @@

Let's Go For A Walk

Sign Up
-
Space walking astronaut
diff --git a/less/about-page.less b/less/about-page.less new file mode 100644 index 0000000000..5713c43603 --- /dev/null +++ b/less/about-page.less @@ -0,0 +1 @@ +// About \ No newline at end of file diff --git a/less/blog-page.less b/less/blog-page.less new file mode 100644 index 0000000000..59e9f6a117 --- /dev/null +++ b/less/blog-page.less @@ -0,0 +1 @@ +// Blog \ No newline at end of file diff --git a/less/contact-page.less b/less/contact-page.less new file mode 100644 index 0000000000..916bd97172 --- /dev/null +++ b/less/contact-page.less @@ -0,0 +1 @@ +// Contact \ No newline at end of file diff --git a/less/global.less b/less/global.less index 359bc1af8a..09f59d9e68 100644 --- a/less/global.less +++ b/less/global.less @@ -31,8 +31,8 @@ p { } .container { - max-width: 800px; - width: 100%; + .width(); margin: 0 auto; } + diff --git a/less/home-page.less b/less/home-page.less index 63fa4e81d3..089ac57ce4 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -2,124 +2,113 @@ .home { - @media @phone { - max-width: 80%; - margin: auto; - } - - .intro { - .banner{ - max-width: 100%; - } - - h2 { - padding: 15px; - } - - p { - padding:0 15px; - } - } // .intro + @media @phone { + max-width: 80%; + margin: auto; + } + + .intro { + .banner{ + max-width: 100%; + } + + h2 { + padding: 15px; + } + + p { + padding:0 15px; + } + } - .space-images { - display: flex; - flex-wrap: wrap; - width: 100%; - border-radius: 30%; - - @media @phone{ - .sky { - display: none; - } + .space-images { + display: flex; + flex-wrap: wrap; + width: 100%; + border-radius: 30%; + + @media @phone{ + .sky { + display: none; + } - .launch { + .launch { display: none; - } - } + } + } - img { - width: 28%; - margin: 20px 2.5%; - border-radius: 20px; - height: 100%; + img { + width: 28%; + margin: 20px 2.5%; + border-radius: 20px; + height: 100%; - @media @phone { + @media @phone { width: 100%; border-radius: 20px; height: 100%; - } - } // img - } // .space-img + } + } // img + } // .space-img - .visit-planets { - padding: 15px; + .visit-planets { + padding: 15px; - h3 { - margin-top: 11px; + h3 { + margin-top: 11px; - @media @phone { + @media @phone { width: 100%; margin: 0 auto; - } - } // h3 - - p { - margin-top: 13px; - } - } // .visit-planets - - .walk { - margin-top: 60px; - border-top: 1px solid @main-border-color; - padding: 50px 60px; - display: flex; - justify-content: center; + } + } + + p { + margin-top: 13px; + } + } // .visit-planets + + .walk { + margin-top: 60px; + border-top: 1px solid @main-border-color; + padding: 50px 60px; + display: flex; + align-items: center; + justify-content: space-evenly; + - @media @phone { + @media @phone { flex-direction: column-reverse; width: 100%; padding: 2%; - } + } - .walk-text { + .walk-text { width: 100%; - margin-top: 20px; - - h3 { - margin-bottom: 10px; - } + margin: 2rem; - p { + h3 { + margin-bottom: 10px; + } + + p { margin-bottom: 26px; - } - - - .btn { - background-color: #22283A; - border-radius: 5px; - text-align: center; - font-size: 1.5rem; - color: white; - padding: 2%; - width: 100px; - border: 1px solid black; - - - @media @phone{ - width: 100%; - padding: 5%; - } - } // .btn - - .btn:hover { - background: white; - color: #22283A; - } // .btn:hover - } //.walk-text - - .walk-img { + } + + .btn { + .btn(); + } + } //.walk-text mixin:.btn() + + .walk-img { margin-top: 20px; border-radius: 40px; - } // walk-img - } // .walk - } // .home + + @media @phone { + display: flex; + width: 100%; + } + + } + } // .walk +} //.home diff --git a/less/index.less b/less/index.less index 481939b47b..2ee870d976 100644 --- a/less/index.less +++ b/less/index.less @@ -1,14 +1,20 @@ // Import your less files here: +// Variables and Mixins @import "variables"; @import "mixins"; + +// Global @import "reset"; @import "global"; + +// Components @import "navigation"; @import "footer"; @import "home-page"; - - - +@import "about-page"; +@import "blog-page"; +@import "contact-page"; +@import "signin-page"; diff --git a/less/mixins.less b/less/mixins.less index 98cf19eb97..2a031bc444 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1,10 +1,27 @@ // Mixins Here -.btn(@width: 110px) { - width: @width; - display: flex; - justify-content: center; - padding: 2%; - background: @btn-bg-color; - border-radius: 7px; - color: @porcelain; + +.btn(@color:@btn-bg-color,@font:white){ + font-size:1.8rem; + text-align:center; + border-radius:.5rem; + padding:1rem; + color:@font; + background: @color; + width:10rem; + font-weight:700; + @media @phone{ + .width(); + padding:2.7rem; + } + + &:hover{ + background:white; + color:@color; + border:1px solid @river-bend; + } +} + +.width(@w: @width, @m: @max){ + width: @w; + max-width: @m; } \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index 2d543a339c..6ce5baa3e5 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -9,16 +9,16 @@ @media @phone { width: 100%; - } + } h1 { font-size: 4rem; margin-bottom: 3rem; @media @phone { - width: 80%; - } - } // h1 + width: 80%; + } + } nav { display: flex; @@ -29,7 +29,7 @@ width: 100%; justify-content: space-around; align-content: center; - } + } a { @@ -37,14 +37,9 @@ text-decoration: none; &:hover { - text-decoration: underline; - text-decoration-color: black; - } - } // a - } // nav - - @media @phone { - display: flex; - width: 90%; + text-decoration: underline; + text-decoration-color: black; } - } // .nav-header \ No newline at end of file + } + } // nav +} // .nav-header \ No newline at end of file diff --git a/less/signin-page.less b/less/signin-page.less new file mode 100644 index 0000000000..8dc6fb0f3a --- /dev/null +++ b/less/signin-page.less @@ -0,0 +1 @@ +// Sign-In \ No newline at end of file diff --git a/less/variables.css b/less/variables.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/less/variables.less b/less/variables.less index 4b7fdabb49..e4f01f242e 100644 --- a/less/variables.less +++ b/less/variables.less @@ -1,4 +1,7 @@ // Variables +@max: 800px; +@width: 100%; + // Color pointers @nav-bg: @wild-sand; diff --git a/signin.html b/signin.html new file mode 100644 index 0000000000..53c29191d2 --- /dev/null +++ b/signin.html @@ -0,0 +1,49 @@ + + + + + + + SpaceWalkers + + + + + + + + + +
+ + + + +
+ +

SpaceWalkers

+ + + +
+ + +
+

Copyright SpaceWalkers 2018

+
+ +
+ + \ No newline at end of file From f72ce14fe87a49c0a709d6dc1ad74023b1a3add0 Mon Sep 17 00:00:00 2001 From: Greg Jordan Date: Sun, 31 Mar 2019 02:19:46 -0400 Subject: [PATCH 10/10] Fixed naming culture --- about.html | 2 +- blog.html | 2 +- contact.html | 2 +- index.html | 2 +- less/index.css | 327 +++++++++++++++++++++++++++++++++++++++++++++++++ signin.html | 2 +- 6 files changed, 332 insertions(+), 5 deletions(-) create mode 100644 less/index.css diff --git a/about.html b/about.html index f18f507330..9a895273b5 100644 --- a/about.html +++ b/about.html @@ -31,7 +31,7 @@

SpaceWalkers

About Us Blog Contact - Sign In + Sign In diff --git a/blog.html b/blog.html index 1ffb17a117..103039c3b0 100644 --- a/blog.html +++ b/blog.html @@ -31,7 +31,7 @@

SpaceWalkers

About Us Blog Contact - Sign In + Sign In diff --git a/contact.html b/contact.html index a88988c517..698af6304e 100644 --- a/contact.html +++ b/contact.html @@ -31,7 +31,7 @@

SpaceWalkers

About Us Blog Contact - Sign In + Sign In diff --git a/index.html b/index.html index 0d94297740..92df777bb9 100644 --- a/index.html +++ b/index.html @@ -31,7 +31,7 @@

SpaceWalkers

About Us Blog Contact - Sign In + Sign In diff --git a/less/index.css b/less/index.css new file mode 100644 index 0000000000..55820755a0 --- /dev/null +++ b/less/index.css @@ -0,0 +1,327 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Ubuntu', sans-serif; + color: #5E6164; +} +h1, +h2, +h3, +h4, +h5 { + font-family: 'Russo One', sans-serif; + color: #23293B; +} +h2 { + font-size: 3.2rem; +} +h3 { + font-size: 2.8rem; +} +p { + font-size: 1.6rem; + line-height: 1.4; +} +.container { + width: 100%; + max-width: 800px; + margin: 0 auto; +} +.nav-header { + display: flex; + justify-content: stretch; + align-items: center; + flex-direction: column; + margin-bottom: 1rem; +} +@media (max-width: 500px) { + .nav-header { + width: 100%; + } +} +.nav-header h1 { + font-size: 4rem; + margin-bottom: 3rem; +} +@media (max-width: 500px) { + .nav-header h1 { + width: 80%; + } +} +.nav-header nav { + display: flex; + justify-content: space-around; + width: 45%; +} +@media (max-width: 500px) { + .nav-header nav { + width: 100%; + justify-content: space-around; + align-content: center; + } +} +.nav-header nav a { + font-size: 1.5rem; + text-decoration: none; +} +.nav-header nav a:hover { + text-decoration: underline; + text-decoration-color: black; +} +footer { + color: #22283B; + background: #f4f4f4; + padding: 20px 0; + border: 1px double #e0e0e0; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; +} +@media (max-width: 500px) { + .home { + max-width: 80%; + margin: auto; + } +} +.home .intro .banner { + max-width: 100%; +} +.home .intro h2 { + padding: 15px; +} +.home .intro p { + padding: 0 15px; +} +.home .space-images { + display: flex; + flex-wrap: wrap; + width: 100%; + border-radius: 30%; +} +@media (max-width: 500px) { + .home .space-images .sky { + display: none; + } + .home .space-images .launch { + display: none; + } +} +.home .space-images img { + width: 28%; + margin: 20px 2.5%; + border-radius: 20px; + height: 100%; +} +@media (max-width: 500px) { + .home .space-images img { + width: 100%; + border-radius: 20px; + height: 100%; + } +} +.home .visit-planets { + padding: 15px; +} +.home .visit-planets h3 { + margin-top: 11px; +} +@media (max-width: 500px) { + .home .visit-planets h3 { + width: 100%; + margin: 0 auto; + } +} +.home .visit-planets p { + margin-top: 13px; +} +.home .walk { + margin-top: 60px; + border-top: 1px solid #dee2e6; + padding: 50px 60px; + display: flex; + align-items: center; + justify-content: space-evenly; +} +@media (max-width: 500px) { + .home .walk { + flex-direction: column-reverse; + width: 100%; + padding: 2%; + } +} +.home .walk .walk-text { + width: 100%; + margin: 2rem; +} +.home .walk .walk-text h3 { + margin-bottom: 10px; +} +.home .walk .walk-text p { + margin-bottom: 26px; +} +.home .walk .walk-text .btn { + font-size: 1.8rem; + text-align: center; + border-radius: .5rem; + padding: 1rem; + color: white; + background: #22283A; + width: 10rem; + font-weight: 700; +} +@media (max-width: 500px) { + .home .walk .walk-text .btn { + width: 100%; + max-width: 800px; + padding: 2.7rem; + } +} +.home .walk .walk-text .btn:hover { + background: white; + color: #22283A; + border: 1px solid #454A59; +} +.home .walk .walk-img { + margin-top: 20px; + border-radius: 40px; +} +@media (max-width: 500px) { + .home .walk .walk-img { + display: flex; + width: 100%; + } +} diff --git a/signin.html b/signin.html index 53c29191d2..d3b9b9128e 100644 --- a/signin.html +++ b/signin.html @@ -31,7 +31,7 @@

SpaceWalkers

About Us Blog Contact - Sign In + Sign In