CodeYourFuture · munozirianni1988 · Feb 9, 2023 · Feb 15, 2023 · Feb 15, 2023 · Feb 18, 2023
diff --git a/images/alexandra-gornago-_B7shfNUXEA-unsplash.jpg b/images/alexandra-gornago-_B7shfNUXEA-unsplash.jpg
diff --git a/images/brooke-lark-V4MBq8kue3U-unsplash.jpg b/images/brooke-lark-V4MBq8kue3U-unsplash.jpg
diff --git a/images/bryam-blanco-nXKWLn8y9qE-unsplash.jpg b/images/bryam-blanco-nXKWLn8y9qE-unsplash.jpg
diff --git a/images/deva-williamson-S2jw81lfrG0-unsplash.jpg b/images/deva-williamson-S2jw81lfrG0-unsplash.jpg
diff --git a/images/heather-ford-Fq54FqucgCE-unsplash.jpg b/images/heather-ford-Fq54FqucgCE-unsplash.jpg
diff --git a/images/icons8-facebook-64.png b/images/icons8-facebook-64.png
diff --git a/images/icons8-hamburger-menu-24.png b/images/icons8-hamburger-menu-24.png
diff --git a/images/icons8-instagram-64.png b/images/icons8-instagram-64.png
diff --git a/images/icons8-tiktok-64.png b/images/icons8-tiktok-64.png
diff --git a/images/katie-rosario-QNyRp21hb5I-unsplash.jpg b/images/katie-rosario-QNyRp21hb5I-unsplash.jpg
diff --git a/index.html b/index.html
@@ -1,16 +1,89 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Responsive Cake webpage</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
     <!-- Add a link to your css file here -->
-</head>
+  </head>
 
-<body>
+  <body>
     <!-- Add your markup here -->
-</body>
 
-</html>
+    <header class="grid">
+      <div class="header-image">
+        <img
+          src="images/bryam-blanco-nXKWLn8y9qE-unsplash.jpg"
+          alt="Multicolour cupcake"
+        />
+      </div>
+      <div class="header-text">
+        <p>Dreaming of cupcakes? Let us <i>bake</i> it happen for you.</p>
+      </div>
+      <div class="hamb-menu">
+        <img src="images/icons8-hamburger-menu-24.png" />
+      </div>
+    </header>
+
+    <main>
+      <nav class="grid">
+        <ul>
+          <li class="one"><a href="#">Home</a></li>
+          <li class="two"><a href="#">Cakes</a></li>
+          <li class="three"><a href="#">Place an order</a></li>
+          <li class="four"><a href="#">Lessons</a></li>
+          <li class="five"><a href="#">About</a></li>
+        </ul>
+      </nav>
+      <section class="welcome grid">
+        <h1>Welcome to Oh My Goodies</h1>
+        <div class="welcome-text">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia ipsum
+            officia eveniet asperiores sit voluptas, quibusdam voluptate velit
+            nihil quod? Nobis adipisci tenetur numquam cupiditate illo minus
+            fugit rerum quisquam. Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Quia ipsum officia eveniet asperiores sit
+            voluptas, quibusdam voluptate velit nihil quod? Nobis adipisci
+            tenetur numquam cupiditate illo minus fugit rerum quisquam.
+          </p>
+        </div>
+
+        <div class="welcome-image">
+          <img
+            src="images/katie-rosario-QNyRp21hb5I-unsplash.jpg"
+            alt="Birthday Cake"
+          />
+        </div>
+      </section>
+
+      <section class="gallery grid">
+        <img src="images/brooke-lark-V4MBq8kue3U-unsplash.jpg" />
+        <img src="images/alexandra-gornago-_B7shfNUXEA-unsplash.jpg" />
+        <img src="images/deva-williamson-S2jw81lfrG0-unsplash.jpg" />
+        <img src="images/heather-ford-Fq54FqucgCE-unsplash.jpg" />
+      </section>
+    </main>
+
+    <footer class="grid">
+      <div class="socialmedia-icons">
+        <a href="#"
+          ><img src="images/icons8-facebook-64.png" alt="Facebook"
+        /></a>
+        <a href="#"
+          ><img src="images/icons8-instagram-64.png" alt="Instagram"
+        /></a>
+        <a href="#"><img src="images/icons8-tiktok-64.png" alt="Tik Tok" /></a>
+      </div>
+      <p class="footer-text">&copy; Made by Irianni Munoz, 2023</p>
+    </footer>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -1 +1,292 @@
 /*  Add your styling here */
+/*General Style*/
+
+:root {
+  --melon: #ffa8a9;
+  --pink: #f786aa;
+  --magenta: #a14a76;
+}
+
+body,
+p,
+ul,
+a,
+li {
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  font-family: "Playfair Display", sans-serif;
+}
+
+body {
+  background-color: var(--melon);
+}
+
+li {
+  list-style-type: none;
+}
+
+header {
+  background-color: var(--magenta);
+}
+
+.header-image {
+  width: 160px;
+  padding: 0;
+  background-size: cover;
+  margin: 5px;
+}
+
+header img {
+  width: 100%;
+  padding: 0;
+  border: none;
+  border-radius: 10px;
+  align-self: center;
+}
+
+/*Mobile version*/
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 10px;
+}
+
+nav ul {
+  display: none;
+}
+
+.header-image {
+  grid-column: 1/4;
+  grid-row: span 2;
+  margin-left: 5px;
+  margin-bottom: 0;
+}
+
+.header-text {
+  grid-column: 5/9;
+  grid-row: 2;
+  color: white;
+  padding: 5px;
+}
+
+.hamb-menu {
+  grid-column: 8;
+  width: 40px;
+}
+
+.welcome h1 {
+  grid-column: 2/6;
+  grid-row: 1;
+  font-size: 2.5rem;
+}
+
+.welcome-text {
+  grid-column: 2/8;
+  grid-row: 2;
+  margin-bottom: 10px;
+}
+
+.welcome-image {
+  grid-column: 1/9;
+  grid-row: 3;
+  /*width: 540px;*/
+}
+
+.welcome-image img {
+  width: 100%;
+}
+
+.gallery {
+  /*width: 500px;*/
+  grid-column: 1/9;
+  margin: 10px auto;
+}
+
+.gallery img {
+  width: 100%;
+  grid-column: span 4;
+  align-self: center;
+  border-radius: 20px;
+}
+
+footer {
+  background-color: var(--pink);
+}
+
+.socialmedia-icons {
+  grid-column: 4/7;
+  grid-row: 1;
+  margin-top: 10px;
+}
+
+.socialmedia-icons img {
+  width: 40px;
+}
+
+footer p {
+  grid-column: 3/9;
+  grid-row: 2;
+  margin-bottom: 10px;
+  margin-left: 15px;
+}
+
+/*Tablet version 540px to 900px*/
+
+@media screen and (min-width: 540px) {
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 10px;
+  }
+
+  .header-text {
+    grid-column: 5/13;
+    font-size: large;
+  }
+
+  .hamb-menu {
+    grid-column: 12;
+  }
+
+  .welcome-text {
+    grid-column: 7/13;
+    grid-row: 2;
+    margin-right: 15px;
+    text-align: right;
+    padding-top: 25px;
+    font-size: large;
+  }
+
+  .welcome-image {
+    grid-column: 1/7;
+    grid-row: 2;
+    margin: 10px;
+  }
+
+  .welcome-image img {
+    border-radius: 20px;
+  }
+
+  .gallery {
+    /*width: 500px;*/
+    grid-column: 1/13;
+    margin: 10px 10px;
+  }
+
+  .gallery img {
+    width: 100%;
+    grid-column: span 3;
+    align-self: center;
+    border-radius: 20px;
+  }
+
+  .socialmedia-icons {
+    grid-column: 6/11;
+    grid-row: 1;
+    margin-top: 10px;
+  }
+
+  footer p {
+    grid-column: 5/12;
+    grid-row: 2;
+    margin-bottom: 10px;
+    margin-left: 15px;
+  }
+}
+
+/*Desktop version min 900 px*/
+
+@media screen and (min-width: 900px) {
+  .header-image {
+    grid-row: 1;
+  }
+
+  .header-text {
+    grid-column: 7/13;
+    grid-row: 1;
+    font-size: larger;
+    padding-top: 15px;
+    align-self: center;
+  }
+
+  .hamb-menu {
+    display: none;
+  }
+
+  .welcome h1 {
+    grid-column: 9/13;
+    grid-row: 1;
+    font-size: 2rem;
+    text-align: center;
+    align-self: center;
+    margin-right: 15px;
+    margin-top: 20px;
+    height: fit-content;
+  }
+
+  .welcome-image {
+    grid-column: 1/8;
+    grid-row: span 2;
+  }
+
+  .welcome-text {
+    grid-column: 9/13;
+    grid-row: 2;
+    margin-top: 15px;
+  }
+
+  .welcome-text p {
+    font-size: large;
+  }
+
+  nav ul {
+    display: grid;
+    grid-column: 5/13;
+    align-items: center;
+    text-align: center;
+  }
+
+  .one {
+    grid-column: 5;
+  }
+  .two {
+    grid-column: 6;
+  }
+  .three {
+    grid-column: 7;
+  }
+  .four {
+    grid-column: 8;
+  }
+  .five {
+    grid-column: 9;
+  }
+
+  li {
+    padding-top: 15px;
+    padding-bottom: 20px;
+  }
+
+  a {
+    color: black;
+    font-size: larger;
+  }
+
+  a:hover {
+    font-size: x-large;
+    text-decoration: underline 2px;
+    text-decoration-color: var(--magenta);
+    transition: 1s;
+  }
+
+  .socialmedia-icons img {
+    padding-left: 10px;
+  }
+
+  footer p {
+    grid-column: 5/12;
+    padding-left: 90px;
+  }
+}