CodeYourFuture · maxbmaapc · Feb 3, 2023 · Feb 4, 2023 · Feb 4, 2023 · Feb 4, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.history
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/adaptive.css b/adaptive.css
@@ -0,0 +1,57 @@
+.menu__burger {
+    display: none;
+}
+
+body {
+    max-width: none;
+}
+
+section {
+   justify-content: flex-end;
+}
+
+.menu {
+    justify-content: flex-end;
+    max-width: none;
+}
+
+nav {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 75px;
+    margin: 1.5rem;
+    background: #eae8e8;
+}
+
+.navbar {
+    display: flex;
+    column-gap: 2rem;
+    padding-right: 2rem;
+
+}
+
+.main {
+    display: flex;
+    flex-direction: row-reverse;
+    margin: 1.5rem;
+    margin-top: 3rem;
+}
+.grid__img {
+    height: 450px;
+}
+
+.grid {
+    margin: 3rem 1.5rem 0 1.5rem;
+}
+@media (min-width: 1100px) {
+
+.grid {
+    display: flex;
+    justify-content: center;
+}
+
+.grid__img {
+    height: 270px;
+}
+}
diff --git a/files/.DS_Store b/files/.DS_Store
diff --git a/files/cake.jpg b/files/cake.jpg
diff --git a/files/cake1.jpg b/files/cake1.jpg
diff --git a/files/cake2.jpg b/files/cake2.jpg
diff --git a/files/cake3.jpg b/files/cake3.jpg
diff --git a/files/cake4.jpg b/files/cake4.jpg
diff --git a/files/menu-background.jpg b/files/menu-background.jpg
diff --git a/files/menu.svg b/files/menu.svg
diff --git a/index.html b/index.html
@@ -1,16 +1,56 @@
 <!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">
     <title>Responsive Cake webpage</title>
-    <!-- Add a link to your css file here -->
-</head>
-
+    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/adaptive.css" media="(min-width: 900px)">
+    <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=Roboto&display=swap" rel="stylesheet">
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+  </head>
 <body>
-    <!-- Add your markup here -->
+    <section>
+        <div class="menu">
+                <img class="menu__burger" src="/files/menu.svg" alt="menu">
+            <h3>The best cakes in town delivered to your door</h3>
+        </div>
+    </section>
+    <nav>
+        <div class="navbar">
+            <button class="btn">HOME</button>
+            <button class="btn"><a href="#cakes">CAKES</a></button>
+            <button class="btn">ORDER</button>
+            <button class="btn">RECIPES</button>
+            <button class="btn"><a href="#contact">ABOUT</a></button>
+        </divc>
+    </nav>
+    <main>
+        <div class="main">
+            <div class="main__header">
+                <h2>Welcome</h2>
+                <p>Welcome to Sweet Delights, where cake dreams come true! Our website is a one-stop-shop for all things cake-related perfect for both beginner and experienced bakers. And for those who want the convenience of having a delicious cake delivered right to their doorstep, our online ordering and delivery service makes it easy to treat yourself or send a sweet surprise to a loved one. So, let's get baking!</>
+            </div>
+            <img class="img-cake" src="/files/cake.jpg" alt="">
+        </div>
+        <div class="grid" id="cakes" data-aos="zoom-in">
+            <img class="grid__img" src="/files/cake1.jpg" alt="cake-example">
+            <img class="grid__img" src="/files/cake3.jpg" alt="cake-example">
+            <img class="grid__img" src="/files/cake2.jpg" alt="cake-example">         
+            <img class="grid__img" src="/files/cake4.jpg" alt="cake-example">
+        </div>
+    </main>
+    <footer>
+        <div class="footer" id="contact">
+          <span>© 2023 by Maksim Lukianenko for CYF.</span>
+        </div>
+      </footer>
 </body>
-
+<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+<script>
+  AOS.init();
+</script>
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,93 @@
 /*  Add your styling here */
+body {
+    font-family: 'Roboto', sans-serif;
+    margin: 0 auto;
+    max-width: 540px; 
+}
+ section {
+    display: flex;
+    height: 200px;
+    justify-content: center;
+    background: url(/files/menu-background.jpg) no-repeat;
+    background-size: cover;
+}
+
+ .btn {
+    width: 90px;
+    height: 25px;
+    border: none;
+    background: #fff;
+}
+
+.btn:hover{
+    cursor: pointer;
+    background: #a9a9a9;
+}
+
+ nav {
+    display: none;
+ }
+
+.menu {
+    display: flex;
+    align-items: flex-end;
+    flex-direction: column;
+    justify-content: space-around;
+    padding-right: 2rem;
+    max-width: 540px;
+    width: 100%;
+}
+
+.menu__burger {
+    width: 45px;
+}
+
+.main {
+    margin: 1rem;
+}
+
+.main__header {
+    padding: 1rem;
+}
+
+.img-cake {
+    max-width: 540px;
+    width: 100%;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-gap: 1rem;
+    margin: 3rem 1rem 0 1rem;
+
+}
+
+.grid__img {
+    width: 100%;
+    height: 270px;
+    object-fit: cover;
+
+}
+
+.grid__img:hover {
+    opacity: 0.8;
+    cursor: pointer;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:visited {
+  color: initial;
+}
+.footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 3rem;
+    height: 150px;
+    border-top: #000 solid 1px;
+}