CodeYourFuture · DianaSavchuk · Feb 8, 2023 · Feb 8, 2023 · Feb 10, 2023 · Feb 10, 2023
diff --git a/bread on wicker backet.jpg b/bread on wicker backet.jpg
diff --git a/bread ready.jpg b/bread ready.jpg
diff --git a/dough bread.jpg b/dough bread.jpg
diff --git a/fon.jpg b/fon.jpg
diff --git a/icons8-facebook.svg b/icons8-facebook.svg
diff --git a/icons8-instagram.svg b/icons8-instagram.svg
diff --git a/icons8-twitter.svg b/icons8-twitter.svg
diff --git a/index.html b/index.html
@@ -1,16 +1,86 @@
 <!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>
-    <!-- Add a link to your css file here -->
-</head>
+    <link rel="stylesheet" href="/style.css" />
+  </head>
+
+  <body>
+    <nav class="class_nav">
+      <img class="nav_image" src="/pngwing.com (3).png" alt="logo image" />
+      <ul class="nav-links">
+        <li><a href="/">Home</a></li>
+        <li><a href="/">Order</a></li>
+        <li><a href="/">Family history</a></li>
+      </ul>
+    </nav>
+    <header>
+      <img class="header_image" src="/fon.jpg" alt="background image" />
+      <div id="text_area_header">
+        <h1>The best pastries in town <br />delivered to your door</h1>
+        <button class="order_button" type="button">order now</button>
+      </div>
+    </header>
 
-<body>
-    <!-- Add your markup here -->
-</body>
+    <main>
+      <h2>Welcome</h2>
+      <p id="welcome_text">
+        We make bread and rolls by hand in our Family Bakery in Glasgow. We
+        prepare our pastries with great care and love in our bakery, using
+        quality and local ingredients to ensure the highest standard of products
+        for all our customers, and we are constantly adding new flavors and
+        ranges.
+      </p>
+      <p id="guarantee_text">
+        "We guarantee safety at every step of the <br />
+        preparation of our products"
+      </p>
+    </main>
+    <div id="section1">
+      <img
+        class="main_image"
+        src="/main_bread.jpg"
+        alt="bread pastry on white textile"
+      />
+    </div>
 
-</html>
+    <div id="section2">
+      <img class="section_images" src="/wheat.jpg" alt="brown whey" />
+    </div>
+    <div id="section3">
+      <img class="section_images" src="/dough bread.jpg" alt="white dough" />
+    </div>
+    <div id="section4">
+      <img
+        class="section_images"
+        src="/bread ready.jpg"
+        alt="bread on the wooden board"
+      />
+    </div>
+    <div id="section5">
+      <img
+        class="section_images"
+        src="/bread on wicker backet.jpg"
+        alt="bread on wicker backet"
+      />
+    </div>
+    <footer>
+      <p id="join-us">Join us on</p>
+      <div class="networks">
+        <a href="#" class="sm-icon">
+          <img src="/icons8-twitter.svg" alt="twitter-icon"
+        /></a>
+        <a href="#" class="sm-icon">
+          <img src="/icons8-facebook.svg" alt="facebook-icon"
+        /></a>
+        <a href="#" class="sm-icon">
+          <img src="/icons8-instagram.svg" alt="instagram-icon"
+        /></a>
+      </div>
+      <p id="copyright">© 2023 by Diana Savchuk.</p>
+    </footer>
+  </body>
+</html>
diff --git a/main_bread.jpg b/main_bread.jpg
diff --git a/pngwing.com (3).png b/pngwing.com (3).png
diff --git a/style.css b/style.css
@@ -1 +1,227 @@
-/*  Add your styling here */
+@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@500&display=swap");
+:root {
+  --dark-green: #081c15;
+  --light-green: #606c38;
+  --beige: #fefae0;
+  --dark-beige: #dda15e;
+  --brown: #bc6c25;
+  --white: #fff;
+}
+
+body {
+  background-color: var(--beige);
+  display: grid;
+  grid-template-columns: 2fr 2fr;
+  grid-template-rows: 0.5fr auto auto auto auto 0.5fr;
+  grid-template-areas:
+    "n n"
+    "h h"
+    "m m"
+    "s1 s1"
+    "s2 s3"
+    "s4 s5"
+    "f f";
+  margin: 0;
+  font-family: "Satisfy", cursive;
+}
+
+nav {
+  grid-area: n;
+  font-family: "Rajdhani", sans-serif;
+}
+
+.class_nav {
+  display: flex;
+  justify-content: space-between;
+}
+.nav_image {
+  max-height: 12vh;
+}
+
+.nav-links {
+  list-style-type: none;
+  padding-right: 1rem;
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+  grid-gap: 0.9rem;
+  justify-items: center;
+  align-items: center;
+  padding: 1rem;
+}
+a {
+  text-decoration: none;
+  color: var(--dark-green);
+  font-size: 20px;
+}
+.nav-links a {
+  transition-duration: 0.4s;
+}
+
+.nav-links a:hover {
+  color: var(--brown);
+}
+
+header {
+  grid-area: h;
+  position: relative;
+}
+.header_image {
+  width: 100%;
+}
+
+h1 {
+  color: var(--dark-beige);
+  font-weight: lighter;
+  font-size: 30px;
+}
+
+#text_area_header {
+  position: absolute;
+  top: 23%;
+  right: 12%;
+  text-align: center;
+}
+
+.order_button {
+  background-color: var(--light-green);
+  border-radius: 5px;
+  border: none;
+  color: var(--beige);
+  font-family: "Rajdhani", sans-serif;
+  font-size: 20px;
+  text-transform: uppercase;
+}
+
+.order_button {
+  transition-duration: 0.4s;
+}
+
+.order_button:hover {
+  background-color: var(--beige);
+  color: var(--light-green);
+}
+main {
+  background-color: var(--beige);
+  grid-area: m;
+}
+h2 {
+  color: var(--dark-green);
+  font-size: 35px;
+  font-weight: lighter;
+  text-align: center;
+  margin-bottom: 0;
+  margin-top: 10px;
+}
+
+#welcome_text {
+  text-indent: 3vw;
+  margin: 16px;
+  text-align: justify;
+  color: var(--dark-green);
+  padding-bottom: 8px;
+  font-family: "Rajdhani", sans-serif;
+}
+
+/* section1 */
+
+#section1 {
+  grid-area: s1;
+}
+.main_image {
+  width: 100%;
+  height: auto;
+}
+#guarantee_text {
+  text-align: center;
+  font-size: 25px;
+}
+
+#section2 {
+  grid-area: s2;
+}
+
+.section_images {
+  margin: 0.3rem;
+  width: 47vw;
+  height: 30vh;
+  object-fit: cover;
+}
+#section3 {
+  grid-area: s3;
+}
+#section4 {
+  grid-area: s4;
+}
+#section5 {
+  grid-area: s5;
+}
+footer {
+  background-color: var(--dark-beige);
+  grid-area: f;
+}
+#join-us {
+  color: black;
+  text-align: center;
+  font-size: 1.5rem;
+}
+.networks {
+  width: 6rem;
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+  margin: 0 auto;
+}
+.sm-icon > img {
+  width: 2rem;
+  margin: 0 16px;
+}
+#copyright {
+  text-align: center;
+  font-size: small;
+}
+@media (min-width: 540px) {
+  body {
+    margin: 10px;
+  }
+  .nav-links {
+    grid-gap: 2rem;
+  }
+
+  #text_area_header {
+    position: absolute;
+    top: 30%;
+    left: 20%;
+    text-align: center;
+  }
+}
+
+@media (min-width: 900px) {
+  body {
+    display: grid;
+    grid-template-columns: 2fr 2fr;
+    grid-template-rows: 0.5fr auto auto auto auto 0.5fr;
+    grid-template-areas:
+      "n n"
+      "h h"
+      "m s1"
+      "s2 s3"
+      "s4 s5"
+      "f f";
+    margin: 15px;
+    font-family: "Satisfy", cursive;
+  }
+  .main_image {
+    width: 100%;
+    min-height: 150px;
+  }
+  #text_area_header {
+    position: absolute;
+    top: 30%;
+    left: 20%;
+    text-align: center;
+  }
+  h1 {
+    font-size: 40px;
+  }
+}
diff --git a/wheat.jpg b/wheat.jpg