From 3ee10727b2582848ec9a7feeb1bfeed6317a0fdc Mon Sep 17 00:00:00 2001 From: Ashish Desai Date: Sun, 4 Dec 2022 19:33:00 -0500 Subject: [PATCH 1/4] created html --- index.css | 7 +++++ index.html | 77 ++++++++++++++++++++++++++++++----------------- package-lock.json | 6 ++++ 3 files changed, 63 insertions(+), 27 deletions(-) create mode 100644 package-lock.json diff --git a/index.css b/index.css index e69de29bb..244a9a1a5 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,7 @@ +*{ + box-sizing: border-box; /* only be as big as width I' have given you */ + padding: 0; + margin: 0; + max-width: 100%; /* hey elements, you can never be bigger than your parent */ + border: 1px solid grey; + } \ No newline at end of file diff --git a/index.html b/index.html index b602ee2b0..51d4ebf05 100644 --- a/index.html +++ b/index.html @@ -2,36 +2,59 @@ - - + - Plan your Visit - Learn about the Park - Get Involved - - - "header_img.jpg" - Yosemite Park Guide - Come explore California’s beautiful wilderness. - Always open. Reservations are not available or required to enter the park. - - Not just a great valley, but a shrine to human foresight, the strength of granite, the power of glaciers, the persistence of life, and the tranquility of the High Sierra. - - First protected in 1864, Yosemite National Park is best known for its waterfalls, but within its nearly 1,200 square miles, you can find deep valleys, grand meadows, ancient giant sequoias, a vast wilderness area, and much more. - - "campfire.png" +
+ +
+
+
+ park +
+
+

Yosemite Park Guide

+

+ Come explore California’s beautiful wilderness.
+ Always open. Reservations are not
available or required to enter the
park. +

+
+
+
+
+

+ Not just a great valley, but a shrine to human foresight, the strength of granite, the
power of glaciers, the persistence of life, and the tranquility of the High Sierra. + First protected in 1864, Yosemite National Park is best known for its waterfalls, but
within its nearly 1,200 square miles, you can find deep valleys, grand meadows, ancient
giant sequoias, a vast wilderness area, and much more. +

+
+
+
+
+ campfire +

Fire is a natural and essential part of Yosemite. We manage fire carefully and study how it interacts with the park’s ecosystems. This blog provides updates about fires in Yosemite. Check for current fire restrictions. - - "camper.png" +

+
+
+ camper +

We strongly recommend that you make reservations for lodging, camping, and backpacking. You can pay the park entrance fee upon arrival (there's no need to pay it in advance). - - "footer_img.png" - - - Plan your Visit - Learn about the Park - Get Involved - +

+
+
+ diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..bd8660126 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "web-module-challenge-intro-css", + "lockfileVersion": 2, + "requires": true, + "packages": {} +} From 3cbdb8bc4880f51b7a56f6ce95b89f138475221f Mon Sep 17 00:00:00 2001 From: Ashish Desai Date: Sun, 4 Dec 2022 19:48:32 -0500 Subject: [PATCH 2/4] added id's and class's --- index.html | 58 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 30 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 51d4ebf05..696dc5588 100644 --- a/index.html +++ b/index.html @@ -6,25 +6,27 @@
-
-
-
- park -
-
-

Yosemite Park Guide

-

- Come explore California’s beautiful wilderness.
- Always open. Reservations are not
available or required to enter the
park. -

+
+
+
+ park +
+
+

Yosemite Park Guide

+

+ Come explore California’s beautiful wilderness.
+ Always open. Reservations are not
available or required to enter the
park. +

+
-
+

Not just a great valley, but a shrine to human foresight, the strength of granite, the
power of glaciers, the persistence of life, and the tranquility of the High Sierra. @@ -32,28 +34,28 @@

Yosemite Park Guide

-
-
+
+
campfire -

- Fire is a natural and essential part of Yosemite. We manage fire carefully and study how it interacts with the park’s ecosystems. This blog provides updates about fires in Yosemite. Check for current fire restrictions. +

+ Fire is a natural and essential
part of Yosemite. We manage fire
carefully and study how it
interacts with the park’s
ecosystems. This blog provides
updates about fires in Yosemite.
Check for current fire
restrictions.

-
+
camper -

- We strongly recommend that you make reservations for lodging, camping, and backpacking. You can pay the park entrance fee upon arrival (there's no need to pay it in advance). +

+ We strongly recommend that you make
reservations for lodging, camping,
and backpacking. You can pay the
park entrance fee upon arrival
(there's no need to pay it in
advance).

-
+ From a73f363b8de66bc98e963b9511b73d53bb997ba7 Mon Sep 17 00:00:00 2001 From: Ashish Desai Date: Mon, 5 Dec 2022 15:06:01 -0500 Subject: [PATCH 3/4] updated html and css file --- index.css | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 94 ++++++++++++++++++++++++++++-------------------------- 2 files changed, 137 insertions(+), 48 deletions(-) diff --git a/index.css b/index.css index 244a9a1a5..2098891d2 100644 --- a/index.css +++ b/index.css @@ -3,5 +3,92 @@ padding: 0; margin: 0; max-width: 100%; /* hey elements, you can never be bigger than your parent */ - border: 1px solid grey; - } \ No newline at end of file + /* border: 1px solid grey; */ + } +body{ + font-family: 'Roboto Mono', monospace; +} + +/* common nav */ +nav.nav a{ + display: inline-block; + width: 10%; + margin:0 11%; + text-align: center; + color: white; + border: none; + border-radius: 6%; + text-decoration: none; + padding: 1%; +} +nav.topnav{ + margin: 2% 0; +} +a.visit{ + display: block; + background-color: #FF764E ; + } + a.park{ + display: block; + background-color: #5ED3EB; + } + a.involved{ + display: block; + background-color: #FFCD69; + } + + /* Plan Section */ + #plan{ + font-family: 'Chelsea Market', cursive; + margin-top: 3%; + } +.planbox{ + display: inline-block; + margin: 0% 7%; + width: 34%; +} +.planbox img{ + border-radius: 50%; + width: 45%; + margin-left: 25%; +} +.planbox h1, p{ + text-align: center; +} + /* about section */ + #about{ + margin: 5% 8% +} + #about p{ + display: block; + background-color: #DDB9A3; + text-align: justify; + color: whitesmoke; +} +/* get involved section */ +#get{ + margin: 3% 40% + +} +#get p{ + text-align: center; +} +#get img{ + width: 30%; + margin: 0 35% +} + /* footer section */ + + #bottom{ + background-color:#F9E7DC; + /* height: 30%; */ + padding: 2%; +} + .bottomimg img{ + width: 100%; + height: 30vh; + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + background-position: right; +} \ No newline at end of file diff --git a/index.html b/index.html index 696dc5588..345b40401 100644 --- a/index.html +++ b/index.html @@ -3,60 +3,62 @@ + + -
- -
-
-
+
+ +
+
+
+ park +
+
+

Yosemite Park Guide

+
+
+

+ Come explore California’s beautiful wilderness. +

Always open. Reservations are not +
available or required to enter the +
park. +

+
+
+
+

+ Not just a great valley, but a shrine to human foresight, the strength of granite, the power of glaciers, the persistence of life, and the tranquility of the High Sierra. +

First protected in 1864, Yosemite National Park is best known for its waterfalls, but within its nearly 1,200 square miles, you can find deep valleys, grand meadows, ancient giant sequoias, a vast wilderness area, and much more. +

+
+
- park + campfire +

+ Fire is a natural and essential part of Yosemite. We manage fire carefully and study how it interacts with the park’s ecosystems. This blog provides updates about fires in Yosemite. Check for current fire restrictions. +

-

Yosemite Park Guide

+ camper

- Come explore California’s beautiful wilderness.
- Always open. Reservations are not
available or required to enter the
park. + We strongly recommend that you make reservations for lodging, camping, and backpacking. You can pay the park entrance fee upon arrival (there's no need to pay it in advance).

-
-
-
-
-

- Not just a great valley, but a shrine to human foresight, the strength of granite, the
power of glaciers, the persistence of life, and the tranquility of the High Sierra. - First protected in 1864, Yosemite National Park is best known for its waterfalls, but
within its nearly 1,200 square miles, you can find deep valleys, grand meadows, ancient
giant sequoias, a vast wilderness area, and much more. -

-
-
-
-
- campfire -

- Fire is a natural and essential
part of Yosemite. We manage fire
carefully and study how it
interacts with the park’s
ecosystems. This blog provides
updates about fires in Yosemite.
Check for current fire
restrictions. -

-
-
- camper -

- We strongly recommend that you make
reservations for lodging, camping,
and backpacking. You can pay the
park entrance fee upon arrival
(there's no need to pay it in
advance). -

-
-
-
-
+
+
wilderness -
- - +
+ From 4660db7a3aeda65db2bcb41f06232332633fe748 Mon Sep 17 00:00:00 2001 From: Ashish Desai Date: Mon, 5 Dec 2022 18:36:56 -0500 Subject: [PATCH 4/4] updated file with solution --- index.css | 170 ++++++++++++++++++++++++++++++++++++----------------- index.html | 41 +++++++------ 2 files changed, 137 insertions(+), 74 deletions(-) diff --git a/index.css b/index.css index 2098891d2..824326c68 100644 --- a/index.css +++ b/index.css @@ -1,3 +1,47 @@ +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; + 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; +} + +/* general styling */ *{ box-sizing: border-box; /* only be as big as width I' have given you */ padding: 0; @@ -5,71 +49,91 @@ max-width: 100%; /* hey elements, you can never be bigger than your parent */ /* border: 1px solid grey; */ } +html{ + font-size: 62.5%; +} body{ + font-size: 1.6rem; + line-height: 1.5; font-family: 'Roboto Mono', monospace; } -/* common nav */ -nav.nav a{ - display: inline-block; +section{ + padding: 4% 0; + width: 90%; + margin: 0 auto; +} + + +/* nav section */ +nav{ + /* tb lr */ + padding: 2% 0; +} +nav a{ + display: inline-block; + padding: 1% 0; width: 10%; - margin:0 11%; text-align: center; - color: white; - border: none; - border-radius: 6%; + border-radius: 10px; text-decoration: none; - padding: 1%; -} -nav.topnav{ - margin: 2% 0; -} -a.visit{ - display: block; - background-color: #FF764E ; - } - a.park{ - display: block; - background-color: #5ED3EB; - } - a.involved{ - display: block; + color: whitesmoke; + width: 10%; + margin:0 11%; +} +a.orange{ + background-color: #FF764E; +} +a.blue{ + background-color:#5ED3EB ; +} +a.yellow{ background-color: #FFCD69; - } +} - /* Plan Section */ - #plan{ - font-family: 'Chelsea Market', cursive; - margin-top: 3%; - } -.planbox{ +/* plan section */ +.planimg, .plantext{ display: inline-block; - margin: 0% 7%; - width: 34%; } -.planbox img{ - border-radius: 50%; - width: 45%; - margin-left: 25%; +.planimg{ + width: 30%; + margin-left: 5%; } -.planbox h1, p{ +#plan{ + position: relative; +} +.plantext{ + width: 55%; + margin-left: 5%; text-align: center; + line-height: 3; + position: absolute; + top: 100px; +} +.round{ + border-radius: 50%; } - /* about section */ - #about{ - margin: 5% 8% +#plan{ +font-family: 'Chelsea Market', cursive;; } +h1{ + font-size: 4rem; +} + +/* about section */ #about p{ - display: block; background-color: #DDB9A3; - text-align: justify; + padding: 3% 0; + width: 90%; + margin: 0 auto; + text-align: center; color: whitesmoke; } /* get involved section */ -#get{ - margin: 3% 40% -} +#get{ + width: 30%; +} #get p{ text-align: center; } @@ -77,18 +141,18 @@ a.visit{ width: 30%; margin: 0 35% } - /* footer section */ - - #bottom{ - background-color:#F9E7DC; - /* height: 30%; */ - padding: 2%; -} - .bottomimg img{ + +.bottomimg img{ width: 100%; + height: 20%; height: 30vh; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; - background-position: right; + background-position: right; + margin-bottom: 0; +} +/* footer section */ +#bottom{ + background-color:#F9E7DC; } \ No newline at end of file diff --git a/index.html b/index.html index 345b40401..d22129c22 100644 --- a/index.html +++ b/index.html @@ -3,31 +3,30 @@ - - + +
-
-
- park +
+ park
-
-

Yosemite Park Guide

-
-
-

- Come explore California’s beautiful wilderness. -

Always open. Reservations are not -
available or required to enter the -
park. -

+
+
+

Yosemite Park Guide

+
+
+

+ Come explore California’s beautiful wilderness.
Always open. Reservations are not available or required to enter the
park. +

+
@@ -55,9 +54,9 @@

Yosemite Park Guide