diff --git a/week2/1-flexbox-froggy/readme.md b/week2/1-flexbox-froggy/readme.md index f903d8ec..29fed368 100644 --- a/week2/1-flexbox-froggy/readme.md +++ b/week2/1-flexbox-froggy/readme.md @@ -4,4 +4,4 @@ Flexbox Froggy is a really fun way of learning how Flexbox works. You should complete all the levels -https://flexboxfroggy.com/ +https://flexboxfroggy.com/ Done diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..fb452112 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,19 +1,246 @@ +/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ +* { + padding: 0; + margin: 0; +} +body, +html { + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; + margin: 0; + padding: 0; +} +/* Style the header and the navigation bar*/ +.header { + position: fixed; + display: flex; + width: 100%; + height: 10%; + justify-content: center; + align-items: center; + text-align: center; + background-color: white; +} + +.logo { + width: 40%; + height: 50%; +} + +nav > ul { + font-weight: lighter; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + padding: 50px; + border: 50px; + min-height: 20%; + flex-wrap: nowrap; + list-style: none; +} + +nav a { + text-decoration: none; + color: rgb(121, 116, 116); + font-weight: 400; + font-size: 1.3rem; +} +.nav-link1 { + color: rgb(31, 30, 30); + font-weight: 600; +} + +nav a:hover { + font-weight: bold; + color: black; +} - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ -body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; +nav > ul { + width: 35vw; + font-weight: lighter; + display: flex; + flex-direction: row; + justify-content: space-between; } -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' - */ +a { + text-decoration: none; +} + +/* Style the hero page including the main photo */ +.hero { + display: flex; + flex-direction: column; + + min-width: 100%; + min-height: 100%; +} +.hero-content { + background: url(../img/first-background.jpg) no-repeat; + padding: 16%; + color: white; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + background-size: cover; +} + +h1 { + font-weight: 300; + font-size: 4rem; +} +.hero h2 { + font-weight: 200; + font-size: 2rem; + padding-bottom: 30px; + border-bottom: 20px; +} +button { + font-weight: lighter; + font-size: 300%; + line-height: 50%; +} + +button { + background: rgb(238, 88, 34); + border-radius: 5px; + border: none; + font-size: 20px; + height: 55px; + width: 140px; + height: 54px; +} + +button:hover { + background: rgb(247, 68, 3); + border: none; +} +/* Style the icons section */ +.icons { + width: 100%; +} +.iconSection { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#sectionHeader { + text-align: center; + font-weight: lighter; + width: 100%; +} + +#sectionHeader h2 { + font-weight: lighter; + font-size: 320%; + padding: 5%; +} + +.icons { + margin-bottom: 8%; +} +.listicons { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.listicons > li { + width: 25%; + height: 25%; + text-align: center; + list-style: none; +} +.listicons { + display: flex; + justify-content: space-around; + width: 58%; + margin: auto; +} + +#iconImage { + width: 9rem; + height: 9rem; + padding-left: 10%; +} + +.cap { + width: 22rem; + height: 6rem; +} + +.listicons h4 { + width: 120%; + font-weight: 400; + font-size: 190%; + text-align: center; + padding: 10% 0; + + +} +/* Style the footer*/ + +.footer { + display: flex; + flex-direction: column; + align-items: center; +} + +hr { + font-weight: lighter; + width: 70%; + color: rgb(251, 251, 251); +} + +.footer ul { + display: flex; + flex-direction: row; +} + +.footer a { + font-size: 1.2rem; + border: 0.1rem solid rgb(218, 218, 243); + border: 5 rem; + border-radius: 5em; + padding: 50%; +} + +#twitter { + color: rgb(110, 110, 253); +} +#facebook { + padding: 90%; + border-radius: 6em; + color: rgb(75, 75, 253); +} +#instagram { + padding: 60%; + color: rgb(75, 75, 253); +} +.footerIcons { + width: 10%; + height: 15%; + justify-content: space-around; + list-style: none; +} + +h5 { + font-size: 130%; + font-weight: 400; + padding: 2%; +} + +span { + color: #6d6b6b; + padding: 2%; + font-size: 120%; +} diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..d515cdd6 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -1,21 +1,86 @@ - - - - Karma - - - - - - - - - - - - - - + + + + Karma + + + + + + + +
+ + + + +
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+
+
+

+ Everyone needs a little Karma. +

+
+
+ +
+ +
+ + +