CodeYourFuture · Pat-On · Nov 26, 2020 · Nov 26, 2020 · Nov 26, 2020
diff --git a/images/Carousel1.jpeg b/images/Carousel1.jpeg
diff --git a/images/Carousel2.jpeg b/images/Carousel2.jpeg
diff --git a/images/Carousel3.jpeg b/images/Carousel3.jpeg
diff --git a/images/Carousel4.jpg b/images/Carousel4.jpg
diff --git a/images/bakery-logo.jpg b/images/bakery-logo.jpg
diff --git a/images/cake1.jpeg b/images/cake1.jpeg
diff --git a/images/cake2.jpeg b/images/cake2.jpeg
diff --git a/images/cake3.jpeg b/images/cake3.jpeg
diff --git a/images/cake4.jpeg b/images/cake4.jpeg
diff --git a/images/logo.jpeg b/images/logo.jpeg
diff --git a/images/pexels-photo-1854652.jpeg b/images/pexels-photo-1854652.jpeg
diff --git a/images/pexels-photo-2062883.jpeg b/images/pexels-photo-2062883.jpeg
diff --git a/images/pexels-photo-4099127.jpeg b/images/pexels-photo-4099127.jpeg
diff --git a/images/pexels-photo-4110012.jpeg b/images/pexels-photo-4110012.jpeg
diff --git a/index.html b/index.html
@@ -3,14 +3,146 @@
 
 <head>
     <meta charset="UTF-8">
+    <!-- crating the viewport at te same size like screen -->
     <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>
+
+    <!-- El Bootstrap -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+
     <!-- Add a link to your css file here -->
+    <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
     <!-- Add your markup here -->
+    <header class="header">
+        <div class="div-header1">
+            <div class="logo-container">
+                <a href='https://www.freepik.com/vectors/logo'><img class="logo" src="images/bakery-logo.jpg"
+                        alt="logo of Company"></a>
+            </div>
+            <div class="contact">
+                <h2>Contact US</h2>
+                <p>Country: United Kingdom</p>
+                <p> City: XXXXXXXX</p>
+                <p> Street: XXXXXXXX</p>
+                <p> Post Code: XXXXXX</p>
+                <p> Tel: XXXX XXX XXX</p>
+                </p>
+            </div>
+        </div>
+        <!-- <hr> -->
+        <div class="div-header2">
+            <nav>
+                <ul class="menu-list">
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#">Cakes</a></li>
+                    <li><a href="#">Ordering</a></li>
+                    <li><a href="#">Lessons</a></li>
+                    <li><a href="#">About</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <article class="first-article">
+            <section class="first-column">
+                <h1>The Hottest Bakery</h1>
+                <h2>Welcome!</h2>
+                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum."</p>
+            </section>
+
+            <section class="second-column">
+                <div class="container">
+                    <h2>Carousel Example</h2>
+                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
+                        <!-- Indicators -->
+                        <ol class="carousel-indicators">
+                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+                            <li data-target="#myCarousel" data-slide-to="1"></li>
+                            <li data-target="#myCarousel" data-slide-to="2"></li>
+                            <li data-target="#myCarousel" data-slide-to="3"></li>
+                        </ol>
+
+                        <!-- Wrapper for slides -->
+                        <div class="carousel-inner">
+                            <div class="item active">
+                                <img src="images/Carousel1.jpeg" alt="Two floors Cake" style="width:100%;">
+                            </div>
+
+                            <div class="item">
+                                <img src="images/Carousel2.jpeg" alt="Tiramisu" style="width:100%;">
+                            </div>
+
+                            <div class="item">
+                                <img src="images/Carousel3.jpeg" alt="Peach Cake" style="width:100%;">
+                            </div>
+                            <div class="item">
+                                <img src="images/Carousel4.jpg" alt="Wedding Cake" style="width:100%;">
+                            </div>
+                        </div>
+                        <!-- Left and right controls -->
+                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+                            <span class="glyphicon glyphicon-chevron-left"></span>
+                            <span class="sr-only">Previous</span>
+                        </a>
+                        <a class="right carousel-control" href="#myCarousel" data-slide="next">
+                            <span class="glyphicon glyphicon-chevron-right"></span>
+                            <span class="sr-only">Next</span>
+                        </a>
+                    </div>
+                </div>
+
+            </section>
+
+        </article>
+
+        <section class="galerry-of-pictures ">
+            <div class="cake-list-foto try">
+                <figure class="cake">
+                    <img class="cake-img" alt="" src="images/cake1.jpeg">
+                    <figcaption>Stawbery Cake</figcaption>
+                </figure>
+            </div>
+            <div class="cake-list-foto try">
+                <figure class="cake">
+                    <img class="cake-img" alt="" src="images/cake2.jpeg">
+                    <figcaption>Pink Cakes</figcaption>
+                </figure>
+            </div>
+            <div class="cake-list-foto try">
+                <figure class="cake">
+                    <img class="cake-img" alt="" src="images/cake3.jpeg">
+                    <figcaption>Browne</figcaption>
+                </figure>
+            </div>
+            <div class="cake-list-foto try">
+                <figure class="cake">
+                    <img class="cake-img" alt="" src="images/cake4.jpeg">
+                    <figcaption>Birthday Cake</figcaption>
+                </figure>
+            </div>
+        </section>
+
+    </main>
+
+    <footer class="page-footer">
+        <ul class="footer-list">
+            <li><a>Site Maps</a></li>
+            <li><a>Contact</a></li>
+            <li><a>Delivery</a></li>
+        </ul>
+    </footer>
+
 </body>
 
 </html>