diff --git a/css/main.css b/css/main.css index 0f99f36..cb1489b 100644 --- a/css/main.css +++ b/css/main.css @@ -1,94 +1,131 @@ -html, body{ +html, body { margin: 0; padding: 0; } -body{ +html { + font-size: 62.5%; +} + +body { + align-items: center; + background: #fee13d; display: flex; flex-direction: column; - justify-content: center; - align-items: center; - background: #fee13d url(../img/woman.jpg) no-repeat bottom right; - height: 100vh; - min-height: 575px; font-family: 'Source Sans Pro', sans-serif; - font-size: 16px; + font-size: 100%; + justify-content: center; + min-height: 57.5rem; } -@media only screen and (max-width: 1024px) { - body{ - background: #fee13d; - } +body * { + box-sizing: border-box; } -header{ +header { box-sizing: border-box; flex: 0 1 auto; + text-align: center; } -section{ - width: 100%; - box-sizing: border-box; - flex: 2 auto; +h1 { + font-size: 3.5rem; + margin: 0 3.5rem; } -footer { - width: calc( 100% - 60px); - background-color: #000000; - font-family: Georgia,serif; - color: #ffffff; - text-decoration: none; - font-size: 0.9rem; - padding: 0 30px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; +h2 { + font-size: 3rem; + margin: 0 3rem; } img { width: 100%; - max-width: 500px; + max-width: 64rem; } -h1, #logo{ - text-align: center; +a { + color: inherit; + text-decoration: none; +} + +abbr { + text-decoration: none; } -h1{ - margin: 0 50px 50px 50px; - font-size: 35px; +main { + flex: 2 auto; + width: calc(100% - 4rem); } -.settings { +main > div { margin: 0 auto; - max-width: 600px; + max-width: 64rem; } -.settings > p { - font-size: 26px; +main p { + font-size: 2.6rem; } -footer > ul { +main a { + font-weight: 800; +} + +footer { + background-color: black; + padding: 1rem 1rem 2rem; + width: 100%; +} + +footer > div { + background-color: black; + color: white; + display: flex; + flex-direction: row; + font-family: Georgia, serif; + font-size: 1.4rem; + justify-content: space-between; + margin: 0 auto; + padding: 0 2rem; + max-width: 64rem; +} + +footer ul { list-style: none; - -webkit-padding-start: 0; + margin: 0; + padding: 0; } footer li { - padding: 5px; + padding: .25rem; +} + +footer span { + display: block; } footer a { - text-decoration: none; color: #9E9E9E; font-style: italic; + text-decoration: none; } footer a:hover { - color: #ffffff; + color: white; } #surprise { color: red; - font-size: 35px; + font-size: 2.25rem; +} + +@media only screen and (min-width: 640px) { + footer span { + display: inline; + } +} + +@media only screen and (min-width: 1024px) { + body { + background: #fee13d url(../img/woman.jpg) no-repeat bottom right; + } } diff --git a/index.html b/index.html index 35c6913..1702770 100644 --- a/index.html +++ b/index.html @@ -1,48 +1,52 @@ - - - NodeGirls JavaScript Workshop - - - - + + + NodeGirls JavaScript Workshop + + + + +
+ +

Hello everyone.

+

Let's do some interactive coding today!

+
-
- -
- -
-

Hello everyone. Let's do some interactive coding today!

-
-

To open the browser console, double click on the screen (or press - 'Command+Option+J' on mac and 'F12' on Windows) and console - will appear at the bottom or on the right side of the screen. It will work - for Chrome and Firefox after selecting 'Inspect'. -

-

For Safari, go to 'Safari > Preferences > Advanced > - and tick the box Show Develop menu in menu bar', restart Safari, and now you can - double click on the page and select 'Inspect Element' to see the console. -

-
-
- - - - - +
+
+

On Chrome and Firefox, to open the Browser Console, invoke the context/right click menu and select 'Inspect'. The console will appear at the bottom or on the right side of the screen.

+

If you're ready for a shortcut, press 'CMD+OPT+J' on Mac, or 'F12' on Windows

+

On Safari, go to 'Safari > Preferences > Advanced >' and tick the box Show Develop Menu in menu bar, restart Safari, and now you can double click on the page and select 'Inspect Element' to see the console.

+
+
+ + +