CodeYourFuture · OleksChep · Nov 9, 2022 · Nov 9, 2022 · Nov 9, 2022 · Nov 9, 2022
diff --git a/img/img1.jpg b/img/img1.jpg
diff --git a/img/img2.jpg b/img/img2.jpg
diff --git a/img/img3.jpg b/img/img3.jpg
diff --git a/img/img4.jpg b/img/img4.jpg
diff --git a/img/istockphoto-1079817466-612x612.jpg b/img/istockphoto-1079817466-612x612.jpg
diff --git a/img/istockphoto-1346881405-612x612.jpg b/img/istockphoto-1346881405-612x612.jpg
diff --git a/img/istockphoto-1351933727-612x612.jpg b/img/istockphoto-1351933727-612x612.jpg
diff --git a/img/istockphoto-1365399021-612x612.jpg b/img/istockphoto-1365399021-612x612.jpg
diff --git a/img/istockphoto-1397569076-612x612.jpg b/img/istockphoto-1397569076-612x612.jpg
diff --git a/index.html b/index.html
@@ -7,10 +7,79 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Responsive Cake webpage</title>
     <!-- Add a link to your css file here -->
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" href="/style.css" />
 </head>
+ <body>
+        <header class="header">
+            <nav class="navbar">
+                <img src="img/istockphoto-1079817466-612x612.jpg" class="nav-logo" alt="logo"/>
+                <ul class="nav-menu">
+                    <li class="nav-item">
+                        <a href="#" class="nav-link">HOME</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="#" class="nav-link">CAKES</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="#" class="nav-link">ORDERIN</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="#" class="nav-link">LESSONS</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="#" class="nav-link">ABOUT</a>
+                    </li>
+                </ul>
+                <div class="hamburger">
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                </div>
+               </nav> 
+               <p class="slogan">The best cakes in town<br> delivered to your door!</p>
+        </header>
+        <main class="main">
+            <section class="welcome">
+                <div>
+                    <h1 class="h1">Welcome</h1>
+                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
+                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+                     when an unknown printer took a galley of type and scrambled it to make a 
+                     type specimen book. It has survived not only five centuries, but also 
+                     the leap into electronic typesetting, remaining essentially
+                    unchanged.</p>
+                </div>
+            </section>
+            <section class="bigImage">
+                <img class="cake" src="img/istockphoto-1351933727-612x612.jpg" alt="Cake"/>
+            </section>
+            <section class="images">
+                <img src="img/img1.jpg" alt="1" />
+                <img src="img/img2.jpg" alt="1" />
+                <img src="img/img3.jpg" alt="1" />
+                <img src="img/img4.jpg" alt="1" />
+            </section>
+        </main>
+        <footer>
+                <p>Lorem Ipsum is simply</p>
+                <p>Lorem Ipsum is simply</p>
+                <p>Lorem Ipsum is simply</p>
+                <p class="footer">Lorem Ipsum is simply</p>
+        </footer>
+        <!-- js for Hamburger -->
+   <script>
+    const hamburger = document.querySelector(".hamburger");
+        const navMenu = document.querySelector(".nav-menu");
 
-<body>
-    <!-- Add your markup here -->
+        hamburger.addEventListener("click", mobileMenu);
+
+        function mobileMenu() {
+            hamburger.classList.toggle("active");
+            navMenu.classList.toggle("active");
+        }
+   </script>
+
 </body>
 
 </html>
diff --git a/istockphoto-1079817466-612x612.jpg b/istockphoto-1079817466-612x612.jpg
diff --git a/istockphoto-1346881405-612x612.jpg b/istockphoto-1346881405-612x612.jpg
diff --git a/istockphoto-1351933727-1024x1024.jpg b/istockphoto-1351933727-1024x1024.jpg
diff --git a/istockphoto-1351933727-612x612 (1).jpg b/istockphoto-1351933727-612x612 (1).jpg
diff --git a/style.css b/style.css
@@ -1 +1,243 @@
-/*  Add your styling here */
+/*  basic CSS */
+
+
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');
+
+
+
+.nav-link:hover {
+    color: #00a911;
+}
+
+.nav-logo {
+    width: 30%;
+    margin-top: 5rem;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+html {
+    font-size: 62.5%;
+    font-family: 'Roboto', sans-serif;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}
+/*  header and navbar*/
+.header {
+    border-bottom: 1px solid #E2E8F0;
+    background-image: linear-gradient(lightgreen, lightblue);
+   height: 30em;
+}  
+
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
+
+}
+/* hamburger styles */  /*
+.hamburger {
+    display: none;
+}
+*/ 
+.bar {
+
+    display: block;
+    width: 45px;
+    height: 4px;
+    border-radius: 5px;
+    margin: 6px auto;
+    -webkit-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+    background-color: #1d1d1d;
+}
+/* basic styles for our other elements 11/11/22 */
+
+/*
+.nav-menu {
+    position: fixed;
+    left: -100%;
+    top: 5rem;
+    flex-direction: column;
+    background-color: #fff;
+    width: 100%;
+    border-radius: 10px;
+    text-align: center;
+    transition: 0.3s;
+    box-shadow:
+        0 10px 27px rgba(0, 0, 0, 0.05);
+}
+*/
+.nav-menu.active {
+    left: 0;
+}
+
+.nav-item {
+    margin: 2.5rem 0;
+}
+
+.hamburger {
+    display: block;
+    cursor: pointer;
+    margin-top: -60px;
+}
+
+.slogan {
+    font-size: 2em;
+    display: block;
+    text-align: right;
+    margin: 0 2.5em;
+    justify-self: start;
+}
+
+footer {
+    background-color: lightgray;
+}
+
+.footer {
+    text-align: center;
+}
+
+img {
+    width: 200px;
+    height: 150px;
+}
+
+.cake {
+    width: 100%;
+    height: 100%;
+}
+
+
+/*css for hamburger with added some js*/  
+.hamburger.active .bar:nth-child(2) {
+    opacity: 0;
+}
+
+.hamburger.active .bar:nth-child(1) {
+    transform: translateY(8px) rotate(45deg);
+}
+
+.hamburger.active .bar:nth-child(3) {
+    transform: translateY(-8px) rotate(-45deg);
+}
+
+
+/*-- media query--- @media (min-width:540px) {} */
+
+@media (min-width:540px) { 
+.nav-menu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.nav-item {
+    margin-left: 5rem;
+    background-color: #ccf1dd;
+    padding: .5em;
+    border-radius: 5px;
+}
+
+.nav-link {
+    font-size: 1.6rem;
+    font-weight: 400;
+    color: #20487f;
+
+}
+
+.nav-link:hover {
+    color: #00a911;
+}
+
+.nav-logo {
+    width: 30%;
+    margin-top: 5rem;
+}
+
+
+.header {
+    border-bottom: 1px solid #E2E8F0;
+    background-image: linear-gradient(lightgreen, lightblue);
+    height: 30em;
+}
+
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
+}
+.welcome {
+    font-size: 2rem;
+}
+/* hamburger styles */
+.hamburger{
+    display: none;
+}
+}
+/*
+.bar {
+
+    display: block;
+    width: 45px;
+    height: 4px;
+    border-radius: 5px;
+    margin: 6px auto;
+    -webkit-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+    background-color: #1d1d1d;
+}      */
+
+/* basic styles for our other elements 11/11/22 */
+/*
+.nav-menu {
+    position: fixed;
+    left: -100%;
+    top: 5rem;
+    flex-direction: column;
+    background-color: #fff;
+    width: 100%;
+    border-radius: 10px;
+    text-align: center;
+    transition: 0.3s;
+    box-shadow:
+        0 10px 27px rgba(0, 0, 0, 0.05);
+}    */
+/*
+.nav-menu.active {
+    left: 0;
+}
+
+.nav-item {
+    margin: 2.5rem 0;
+}
+
+.hamburger {
+    display: block;
+    cursor: pointer;
+    margin-top: -60px;
+}
+html {
+    font-size: 62.5%;
+    font-family: 'Roboto', sans-serif;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}