diff --git a/week1/1-advanced-css/Screenshot_2020-05-09 CSS Diner.png b/week1/1-advanced-css/Screenshot_2020-05-09 CSS Diner.png new file mode 100644 index 00000000..3ab36d1a Binary files /dev/null and b/week1/1-advanced-css/Screenshot_2020-05-09 CSS Diner.png differ diff --git a/week1/3-website/asteroid.jpg b/week1/3-website/asteroid.jpg new file mode 100644 index 00000000..7a3ac875 Binary files /dev/null and b/week1/3-website/asteroid.jpg differ diff --git a/week1/3-website/catgirls.jpg b/week1/3-website/catgirls.jpg new file mode 100644 index 00000000..ba07d1a7 Binary files /dev/null and b/week1/3-website/catgirls.jpg differ diff --git a/week1/3-website/coronavirus.jpg b/week1/3-website/coronavirus.jpg new file mode 100644 index 00000000..09a9631d Binary files /dev/null and b/week1/3-website/coronavirus.jpg differ diff --git a/week1/3-website/css/background.jpg b/week1/3-website/css/background.jpg new file mode 100644 index 00000000..a76f7e09 Binary files /dev/null and b/week1/3-website/css/background.jpg differ diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 75e9841e..e0841a20 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -1,8 +1,189 @@ -/** - * 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. - * - */ +@import url('https://fonts.googleapis.com/css2?family=Muli:wght@200;300;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap'); + +/* CSS for the navigation bar */ +#nav-bar +{ + position: fixed; + top: 0px; + background-color: #fff; + width: 100%; + height: 50px; + display: flex; + flex-direction: row; + justify-content: space-between; + padding-left: 50px; + font-family: "Muli:wght@200", sans-serif; +} + +#nav-bar > ul +{ + width: 50vw; + display: flex; + flex-direction: row; + justify-content: right; + padding-right: 100px; +} + +#nav-bar > ul > li +{ + padding-left: 10px; + padding-right: 10px; + list-style: none; +} + +a { + color: black; + text-decoration: none; + } + + +/* CSS for the main content */ +section +{ + margin-bottom: 100px; + margin-top: 100px; + max-width: 1200px; + text-align: center; + margin: auto; +} +h1 +{ + font-family: "Muli:wght@300", sans-serif; +} + +h2 +{ + font-family: "Muli:wght@300", sans-serif; +} + +h3 +{ + font-family: "Righteous", sans-serif; + font-size: 36px; + padding-top: 256px; + padding-bottom: 64px; +} + +p +{ + font-family: "Muli:wght@200", sans-serif; + text-align: left; +} + +/* CSS for the header */ +header +{ + color: #fff; + background-image: url("background.jpg"); + max-width: 100%; + margin-top: 50px; + padding-top: 150px; + padding-bottom: 150px; +} + +#home-box +{ + background-color: rgba(0, 0, 0, 0.5); + width: 512px; + margin: auto; + padding: 40px; +} + +#home-box > p +{ + text-align: center; +} + +/* CSS for the about section */ +#about > h3 +{ + text-align: right; +} + +#about-box +{ + background-color: #f2f2f2; + display:flex; + margin-left: 15px; + margin-right: 15px; + padding: 64px; +} + +#about-box p +{ + margin-left: 64px; +} + +.art-img +{ + width: 100%; + height: auto; +} + +/* CSS for the article section */ +#articles > h3 +{ + text-align: left; +} + +#art-box +{ + display:flex; + justify-content: center; +} + +article:first-child > a > button +{ + background-color: #daa520; +} + +button +{ + background-color: #c0c0c0; + font-family: "Muli:wght@200", sans-serif; + margin-bottom: 30px; + padding: 10px; + border: 1px solid #000; +} + +article +{ + background-color: #f2f2f2; + margin-left: 15px; + margin-right: 15px; + flex: 1 1 0; +} + +article > p +{ + margin: 20px; +} + +/* CSS for the footer */ +footer +{ + background-color: #808080; + margin-top: 256px; + padding-bottom: 10px; + text-align: center; +} + +#external +{ + display: flex; + flex-direction: row; + justify-content: center; +} + +.social-media +{ + width: 32px; + height: 32px; + padding: 20px; +} + +footer > p +{ + text-align: center; +} \ No newline at end of file diff --git a/week1/3-website/iconfinder_Circled_Facebook_svg_5279111.svg b/week1/3-website/iconfinder_Circled_Facebook_svg_5279111.svg new file mode 100644 index 00000000..4b9fc2fd --- /dev/null +++ b/week1/3-website/iconfinder_Circled_Facebook_svg_5279111.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/week1/3-website/iconfinder_Circled_Instagram_svg_5279112.svg b/week1/3-website/iconfinder_Circled_Instagram_svg_5279112.svg new file mode 100644 index 00000000..73a02f23 --- /dev/null +++ b/week1/3-website/iconfinder_Circled_Instagram_svg_5279112.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/week1/3-website/iconfinder_Circled_Twitter_svg_5279123.svg b/week1/3-website/iconfinder_Circled_Twitter_svg_5279123.svg new file mode 100644 index 00000000..99c66565 --- /dev/null +++ b/week1/3-website/iconfinder_Circled_Twitter_svg_5279123.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 67dfc7f5..b8fde3cb 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -12,11 +12,84 @@ rel="stylesheet" type="text/css" /> - - + + - - - + + + + +
+
+

This is my test blog website

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit nam libero tellus.

+
+
+ +
+

ABOUT

+
+ random inspirational picture +
+

Test Blog

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam libero tellus, tincidunt in turpis facilisis, rutrum dignissim nisl. Nulla at enim at eros ornare viverra ac vitae nibh. Donec tellus risus, scelerisque sed purus ut, molestie dignissim quam. Duis dapibus id neque ut aliquam.

+
+
+
+ +
+

ARTICLES

+
+
+ picture of catgirls +

Catgirls!

+

Mauris vitae placerat nisi. Mauris at erat enim. Morbi lorem tortor, tempor sit amet mauris a, iaculis convallis elit. Vivamus convallis aliquet fringilla. Nam dignissim arcu non sem luctus, ut convallis diam eleifend. Morbi iaculis sem ut neque elementum, et commodo enim gravida. Nulla maximus turpis faucibus elit condimentum facilisis.

+ + + +
+ +
+ picture of an asteroid hitting earth +

The end of the world?

+

Mauris vitae placerat nisi. Mauris at erat enim. Morbi lorem tortor, tempor sit amet mauris a, iaculis convallis elit. Vivamus convallis aliquet fringilla. Nam dignissim arcu non sem luctus, ut convallis diam eleifend. Morbi iaculis sem ut neque elementum, et commodo enim gravida. Nulla maximus turpis faucibus elit condimentum facilisis.

+ + + +
+ +
+ picture of coronaviruses +

Coronavirus

+

Mauris vitae placerat nisi. Mauris at erat enim. Morbi lorem tortor, tempor sit amet mauris a, iaculis convallis elit. Vivamus convallis aliquet fringilla. Nam dignissim arcu non sem luctus, ut convallis diam eleifend. Morbi iaculis sem ut neque elementum, et commodo enim gravida. Nulla maximus turpis faucibus elit condimentum facilisis.

+ + + +
+
+
+ + - + \ No newline at end of file diff --git a/week1/3-website/inspirational.jpg b/week1/3-website/inspirational.jpg new file mode 100644 index 00000000..28fb0455 Binary files /dev/null and b/week1/3-website/inspirational.jpg differ diff --git a/week2/1-flexbox-froggy/Screenshot_2020-05-20 Flexbox Froggy.png b/week2/1-flexbox-froggy/Screenshot_2020-05-20 Flexbox Froggy.png new file mode 100644 index 00000000..64dfab01 Binary files /dev/null and b/week2/1-flexbox-froggy/Screenshot_2020-05-20 Flexbox Froggy.png differ diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..040fb75b 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -17,3 +17,174 @@ body { */ +/*navbar CSS */ +.navbar { + position: fixed; + top: 0px; + background-color: #fff; + height: 4.375rem; + width: 100%; + border-bottom: 1px solid #ddd; + display: flex; + justify-content: center; +} + +nav > .content { + height: 100%; + width: 60%; + display: flex; + justify-content: space-between; + align-items: center; +} +.logo { + width: 26px; +} + +.navbar ul { + display: flex; + align-items: center; + list-style: none; +} + +.navbar ul li { + margin-left: 1.563rem; +} + +.navbar ul li a { + color: #000; + text-decoration: none; +} + + /*TODO: MAKE THE ACTIVE LINK WORK */ + #active a { + color: #4c5058; + font-weight: bold; +} + +/* Header CSS */ +header { + height: 46rem; + background-image: url("../img/first-background.jpg"); + background-position: center bottom; + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; +} + +header > .content { + color: #fff; + text-align: center; +} + +h1 { + font-weight: 300; + font-size: 3rem; +} + +h3 { + font-weight: 300; + font-size: 1.375rem; +} + +#header-button { + background-color: #f15a29; + font-size: 1.125rem; + padding: 1rem 1.5rem; + border-style: none; + border-radius: 4px; +} + +#header-button:hover { + background-color: #d9400e; +} + +/* Features section CSS */ +#section-1 { + display:flex; + justify-content: center; + padding-top: 5rem; + padding-bottom: 5rem; +} + +h2 { + font-size: 2.5rem; + font-weight: 300; +} + +#section-1 > .content { + text-align: center; + width: 60%; +} + +.features { + display: flex; + justify-content: center; +} + +.features > figure { + width: 33.33%; + font-size: 1.375rem; + font-weight: 400; +} + +.feature-img { + width: 127px; + height: 127px; + margin-bottom: 2.5rem; +} + +/* footer CSS */ +footer +{ + display: flex; + flex-direction: column; + align-items: center; +} + +footer > .content { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 9.25rem; +} + +#horizontal { + width: 60%; + border: 0; + border-top: 1px solid #eaebec; + margin: 1.313rem 0; + +} + +h4 { + font-weight: 300; + font-size: 1rem; +} + +.social { + display: flex; +} + +.social > a { + display: flex; + justify-content: center; + align-items: center; + width: 2.5rem; + height: 2.5rem; + border: 1px solid #eaebec; + border-radius: 1.25rem; + margin-left: 5px; + margin-right: 5px; + } + +.social > a > img { + width: 16px; + height: 16px; +} + +.copyright { + font-size: 0.875rem; + color: #a9adb5; +} \ No newline at end of file diff --git a/week2/2-website/img/iconfinder_1_Facebook2_colored_svg_5296500.svg b/week2/2-website/img/iconfinder_1_Facebook2_colored_svg_5296500.svg new file mode 100644 index 00000000..4a1a412b --- /dev/null +++ b/week2/2-website/img/iconfinder_1_Facebook2_colored_svg_5296500.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/week2/2-website/img/iconfinder_1_Instagram_colored_svg_1_5296765.svg b/week2/2-website/img/iconfinder_1_Instagram_colored_svg_1_5296765.svg new file mode 100644 index 00000000..a0ff1ec5 --- /dev/null +++ b/week2/2-website/img/iconfinder_1_Instagram_colored_svg_1_5296765.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/week2/2-website/img/iconfinder_1_Twitter_colored_svg_5296514.svg b/week2/2-website/img/iconfinder_1_Twitter_colored_svg_5296514.svg new file mode 100644 index 00000000..6d4e417d --- /dev/null +++ b/week2/2-website/img/iconfinder_1_Twitter_colored_svg_5296514.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..9774bba5 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -1,21 +1,78 @@ + - - - - Karma - - - - - - - - - - - - - - + + + + Karma + + + + + + + + + + + + + + + +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+ +
+ +
+
+

Everyone needs a little Karma.

+
+
+ Internet for all devices image +
Internet for all devices
+
+
+ Boost your productivity image +
Boost your productivity
+
+
+ Pay as You Go image +
Pay as You Go
+
+
+
+
+ + + + diff --git a/week3/2-website/Old sample website/index.html b/week3/2-website/Old sample website/index.html new file mode 100644 index 00000000..22e4f2c2 --- /dev/null +++ b/week3/2-website/Old sample website/index.html @@ -0,0 +1,94 @@ + + + + + + + Responsive Cake webpage + + + + + +
+
+ Let Them Eat Cake logo + + +
+ + +
+ +
+
+

Let Them Eat Cake

+ +

Feeding the cake deprived since 2020

+ + Cupcakes with sprinkles +
+ +
+

Just a small sample of our bakes:

+ +
+
+ + + + diff --git a/week3/2-website/Old sample website/style.css b/week3/2-website/Old sample website/style.css new file mode 100644 index 00000000..42ed132b --- /dev/null +++ b/week3/2-website/Old sample website/style.css @@ -0,0 +1,196 @@ +/* Universal styles */ + +* { + font-family: "Pacifico", cursive; + background-color: rgb(188, 243, 226); +} + +li { + list-style: none; +} + +a { + text-decoration: none; + color: rgb(200, 144, 233); +} + +/* Header styles */ + +.top-header { + display: flex; + flex-direction: column; + align-items: center; +} + +.top-header .header-image { + height: 200px; + width: 200px; + padding: 20px; +} + +.contact-button { + color: rgb(200, 144, 233); + font-size: 25px; + border-color: rgb(252, 251, 253); + border-radius: 20px; + border-width: medium; + width: 125px; + height: 50px; +} + +.navigation ul { + display: flex; + flex-direction: column; + padding-left: 5px; +} + +.navigation li { + padding-top: 25px; + padding-right: 50px; + font-size: 25px; +} + +/* About section styles */ + +.about { + padding-top: 50px; +} + +.about h1 { + font-size: 40px; + color: rgb(255, 128, 153); + text-align: center; +} + +.about h3 { + font-size: 25px; + color: rgb(255, 128, 153); + text-align: center; + padding-bottom: 50px; +} + +.about .cupcakes { + display: flex; + justify-content: center; + width: 100%; + border: 2px solid rgb(252, 251, 253); + margin: 0; +} + +/* Example cake styles */ + +.example-cakes h3 { + font-size: 25px; + color: rgb(255, 128, 153); + text-align: center; + padding-top: 50px; + padding-bottom: 20px; +} + +.example-cakes ul { + padding-left: 0; +} + +.example-cakes li { + display: flex; + justify-content: center; + flex-wrap: wrap; + padding-bottom: 20px; +} + +.images { + border: 2px solid rgb(252, 251, 253); +} + +/* Footer styles */ + +.footer { + display: flex; + padding: 50px; + justify-content: center; +} + +.footer li { + padding-right: 50px; + font-size: 25px; +} + +/* Media queries */ + +@media only screen and (min-width: 650px) { + .navigation ul { + display: flex; + flex-direction: row; + justify-content: center; + padding-left: 20px; + } + + .example-cakes ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .example-cakes li { + width: 45%; + height: 45%; + } + + .footer ul { + display: flex; + flex-direction: row; + } +} + +@media only screen and (min-width: 1000px) { + .top-header .header-image { + display: flex; + flex-direction: column; + align-self: start; + height: 250px; + width: 250px; + } + + .contact-button { + display: flex; + flex-direction: column; + align-self: flex-end; + width: 175px; + height: 75px; + font-size: 30px; + padding-left: 30px; + padding-top: 8px; + margin-right: 5px; + } + + .navigation li { + font-size: 30px; + } + + .about h1 { + font-size: 60px; + } + + .about h3 { + font-size: 30px; + } + + .example-cakes h3 { + font-size: 30px; + } + + .example-cakes ul { + display: flex; + justify-content: space-evenly; + } + + .example-cakes li { + width: 20%; + height: 20%; + } + + .footer li { + font-size: 30px; + } +} diff --git a/week3/2-website/images/The-Vintage-Cake-Company-Logo.png b/week3/2-website/images/The-Vintage-Cake-Company-Logo.png new file mode 100644 index 00000000..8625e3c6 Binary files /dev/null and b/week3/2-website/images/The-Vintage-Cake-Company-Logo.png differ diff --git a/week3/2-website/index.html b/week3/2-website/index.html index 22e4f2c2..5dd6aba4 100644 --- a/week3/2-website/index.html +++ b/week3/2-website/index.html @@ -1,94 +1,112 @@ - - - - + + + + + Responsive Cake webpage - - - + + - +
-
- Let Them Eat Cake logo - - -
+
+ + +
- +
-
-

Let Them Eat Cake

- -

Feeding the cake deprived since 2020

+
+
+
+

The Vintage Cake Company

+

Providing our customers with the top quality cakes since 2020

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elit sem, pulvinar eu ligula quis, bibendum gravida mi. Aenean bibendum, nisi at venenatis ultrices, sapien arcu vehicula ligula, at commodo lacus eros quis quam. Phasellus in viverra quam, non aliquet risus. Suspendisse ac pulvinar lorem.

+
+
+ image of cupcakes +
    +
  • + cake image +
    • +
  • + cake image +
    • +
  • + cake image +
    • +
  • + cake image +
    • +
+
+
- Cupcakes with sprinkles -
+
+

We offer a wide variety of products:

+ +
+
-
-

Just a small sample of our bakes:

+
- - - - - + + + + \ No newline at end of file diff --git a/week3/2-website/style.css b/week3/2-website/style.css index 42ed132b..1b1710c9 100644 --- a/week3/2-website/style.css +++ b/week3/2-website/style.css @@ -1,196 +1,284 @@ -/* Universal styles */ +/*general style */ -* { - font-family: "Pacifico", cursive; - background-color: rgb(188, 243, 226); +@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); + +body { + background-color: #e9c46a; + font-family: 'Lobster', cursive; + color: #264653; + text-align: center; } -li { - list-style: none; +ul { + list-style: none; + margin: 0; + padding: 0; } a { - text-decoration: none; - color: rgb(200, 144, 233); + text-decoration: none; + color: inherit; +} + +.about, .products, .navigation, .header-top { + margin-bottom: 64px; } -/* Header styles */ +section, header, footer { + max-width: 1700px; + margin: auto; +} -.top-header { - display: flex; - flex-direction: column; - align-items: center; + +/* header style*/ + +.header-top { + background-color: #f4a261; + display: flex; + flex-direction: column; + align-items: center; + padding: 16px 0; } -.top-header .header-image { - height: 200px; - width: 200px; - padding: 20px; +.logo { + max-width: 50%; + max-height: 250px; } .contact-button { - color: rgb(200, 144, 233); - font-size: 25px; - border-color: rgb(252, 251, 253); - border-radius: 20px; - border-width: medium; - width: 125px; - height: 50px; + margin-top: 24px; + font-size: 1.5rem; + padding: 1rem; + font-family: inherit; + color: inherit; + background-color: #e76f51; + border: medium solid #2a9d8f #264653 #264653 #2a9d8f; + border-radius: 24px; +} + +.navigation { + background-color: #f4a261; + width: 100%; +} + +.navigation > ul { + display: flex; + flex-direction: column; + align-items: left; + padding: 16px 0; + margin: 10px; } -.navigation ul { - display: flex; - flex-direction: column; - padding-left: 5px; +.navigation > ul > li { + padding: 1rem; + background-color: #e76f51; + border-radius: 10px; + width: 100px; + margin: 10px 0; } -.navigation li { - padding-top: 25px; - padding-right: 50px; - font-size: 25px; +.navigation > ul > li > a { + font-size: 1.5rem; + padding: 1rem 0; } -/* About section styles */ + +/* about section style */ .about { - padding-top: 50px; + display: flex; + flex-direction: column; } -.about h1 { - font-size: 40px; - color: rgb(255, 128, 153); - text-align: center; +.description { + background-color: #f4a261; + padding: 1rem 5%; + margin-bottom: 1rem; } -.about h3 { - font-size: 25px; - color: rgb(255, 128, 153); - text-align: center; - padding-bottom: 50px; +.title { + background-color: #e76f51; + padding: 1rem 5%; + border-radius: 10px; } -.about .cupcakes { - display: flex; - justify-content: center; - width: 100%; - border: 2px solid rgb(252, 251, 253); - margin: 0; +.image-carousel { + max-width: 100%; + display: flex; + flex-direction: column; + background-color: #e76f51; + padding: 5%; } -/* Example cake styles */ +.main-image { + width: 100%; + border: 5px solid #264653; + border-radius: 10px; +} +.minor-images { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-left: 6px; +} -.example-cakes h3 { - font-size: 25px; - color: rgb(255, 128, 153); - text-align: center; - padding-top: 50px; - padding-bottom: 20px; +.minor-images > li { + max-width: 22.5%; + padding-top: 16px; } -.example-cakes ul { - padding-left: 0; +.minor-images > li > img { + max-width:100%; + border: 1px solid #264653; + border-radius: 2px; } -.example-cakes li { - display: flex; - justify-content: center; - flex-wrap: wrap; - padding-bottom: 20px; + +/* product section style */ + +.products > ul { + display: flex; + flex-direction: column; + align-items: center; } -.images { - border: 2px solid rgb(252, 251, 253); +.products > ul > li { + background-color: #f4a261; + margin: 1rem 0; + padding: 1rem; + width: 66.6%; + border-radius: 10px; } -/* Footer styles */ +.products > ul > li > img { + max-width: 60%; + border: 2px solid #264653; + border-radius: 5px; +} -.footer { - display: flex; - padding: 50px; - justify-content: center; + +/* footer style */ + +#footer { + padding: 16px 0; + margin-bottom: 0; } -.footer li { - padding-right: 50px; - font-size: 25px; +#footer > ul { + max-width: 1000px; + margin: auto; } -/* Media queries */ +#footer > ul > li { + padding: 0.5rem; +} -@media only screen and (min-width: 650px) { - .navigation ul { - display: flex; - flex-direction: row; - justify-content: center; - padding-left: 20px; - } +#footer > ul > li > a { + font-size: 1rem; + padding: 0.5rem 0; +} - .example-cakes ul { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - } +#footer > p { + text-align: left; + padding: 0 1rem; +} - .example-cakes li { - width: 45%; - height: 45%; - } - .footer ul { - display: flex; - flex-direction: row; - } -} +/* styles for larger screens */ -@media only screen and (min-width: 1000px) { - .top-header .header-image { - display: flex; - flex-direction: column; - align-self: start; - height: 250px; - width: 250px; - } +@media screen and (min-width: 400px) { + #footer > ul { + flex-direction: row; + justify-content: space-around; + } - .contact-button { - display: flex; - flex-direction: column; - align-self: flex-end; - width: 175px; - height: 75px; - font-size: 30px; - padding-left: 30px; - padding-top: 8px; - margin-right: 5px; - } - - .navigation li { - font-size: 30px; - } - - .about h1 { - font-size: 60px; - } - - .about h3 { - font-size: 30px; - } - - .example-cakes h3 { - font-size: 30px; - } - - .example-cakes ul { - display: flex; - justify-content: space-evenly; - } + #footer > p { + text-align: center; + } +} - .example-cakes li { - width: 20%; - height: 20%; - } +@media screen and (min-width: 600px) { + .navigation > ul { + align-items: center; + } + + .products > ul { + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: stretch; + } + + .products > ul > li { + max-width: 40%; + margin: 10px; + } +} + +@media screen and (min-width: 750px) { + .header-top { + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + padding: 24px 32px; + } + + .contact-button { + font-size: 2rem; + padding: 2rem; + } + + .navigation > ul { + flex-direction: row; + justify-content: space-around; + padding: 6px; + } +} - .footer li { - font-size: 30px; - } +@media screen and (min-width: 1000px) { + + .about { + flex-direction: row; + } + + .description { + padding: 1rem; + margin-bottom: 0; + margin-right: 1rem; + width: 33%; + } + + .image-carousel { + width: 66%; + } + + .products > ul { + flex-wrap: nowrap; + } } + +@media screen and (min-width: 1500px) { + .description h1 { + font-size: 2.5rem; + } + + .description h3 { + font-size: 1.75rem; + } + + .description p { + font-size: 1.25rem; + } + + .products h2 { + font-size: 2rem; + } + + .products p { + font-size: 1.5rem; + } + + #footer p { + font-size: 1.25rem; + } +} \ No newline at end of file