Bootstrap Grid Part 2

happyao · Oct 11, 2018 · 75f5a0e · 75f5a0e
1 parent ec1f0e0
commit 75f5a0e
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 25 deletions.
diff --git a/conFusion/css/style.css b/conFusion/css/style.css
@@ -0,0 +1,31 @@
+.row-header{
+    margin: 0px auto;
+    padding: 0px;
+}
+
+
+.row-content {
+    margin: 0px auto;
+    padding: 50px 0px 50px 0px;
+    border-bottom: 1px ridge;
+    min-height: 400px;
+}
+
+.footer{
+    background-color: #d1c4e9;
+    margin: 0px auto;
+    padding: 20px 0px 20px 0px;
+}
+
+.jumbotron{
+    padding: 70px 30px 70px 30px;
+    margin: 0px auto;
+    background: #9575cd;
+    color:floralwhite;
+}
+
+address{
+    font-size: 80%;
+    margin:0px;
+    color:#0f0f0f
+}
diff --git a/conFusion/index.html b/conFusion/index.html
@@ -9,71 +9,73 @@
 
         <!-- Bootstrap CSS -->
         <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+        <link rel="stylesheet" href="css/style.css" >
     <title>Ristorante Con Fusion</title>
 </head>
 
 <body>
 
-    <header>
-        <div>
-            <div>
-                <div>
+    <header class="jumbotron">
+        <div class="container">
+            <div class="row row-header">
+                <div class="col-12 col-sm-6"> 
                     <h1>Ristorante con Fusion</h1>
                     <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
                 </div>
-                <div>
+                <div class="col-12 col-sm">
+                    logo
                 </div>
             </div>
         </div>
     </header>
 
-    <div>
-        <div>
-            <div>
+    <div class="container">
+        <div class="row row-content align-items-center">
+            <div class="col-12 col-sm-4 col-md-3">
                 <h3>Our Lipsmacking Culinary Creations</h3>
             </div>
-            <div>
+            <div class="col col-sm col-md">
                 <h2>Uthappizza</h2>
                 <p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
             </div>
         </div>
 
 
-        <div>
-            <div>
+        <div class="row row-content align-items-center">
+            <div class="col-12 col-sm-4 col-md-3">
                 <h3>This Month's Promotions</h3>
             </div>
-            <div>
+            <div class="col col-sm col-md">
                 <h2>Weekend Grand Buffet</h2>
                 <p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
             </div>
         </div>
 
-        <div>
-            <div>
+        <div class="row row-content align-items-center">
+            <div class="col-12 col-sm-4 col-md-3">
                 <h3>Meet our Culinary Specialists</h3>
             </div>
-            <div>
+            <div class="col col-sm col-md">
                 <h2>Alberto Somayya</h2>
                 <h4>Executive Chef</h4>
                 <p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
             </div>
         </div>
     </div>
 
-    <footer>
-        <div>
-            <div>             
-                <div>
+    <footer class="footer">
+        <div class="container">
+            <div class="row">             
+                <div class="col-4 col-sm-2">
                     <h5>Links</h5>
-                    <ul>
+                    <ul class="list-unstyled">
                         <li><a href="#">Home</a></li>
                         <li><a href="#">About</a></li>
                         <li><a href="#">Menu</a></li>
                         <li><a href="#">Contact</a></li>
                     </ul>
                 </div>
-                <div>
+                <div class="col-7 col-sm-5">
                     <h5>Our Address</h5>
                     <address>
 		              121, Clear Water Bay Road<br>
@@ -84,8 +86,8 @@ <h5>Our Address</h5>
 		              Email: <a href="mailto:[email protected]">[email protected]</a>
 		           </address>
                 </div>
-                <div>
-                    <div>
+                <div class="col-12 col-sm-4 align-self-center">
+                    <div class="text-center">
                         <a href="http://google.com/+">Google+</a>
                         <a href="http://www.facebook.com/profile.php?id=">Facebook</a>
                         <a href="http://www.linkedin.com/in/">LinkedIn</a>
@@ -95,8 +97,8 @@ <h5>Our Address</h5>
                     </div>
                 </div>
            </div>
-           <div>             
-                <div>
+           <div class="row justify-content-center">             
+                <div class="col-auto">
                     <p>© Copyright 2018 Ristorante Con Fusion</p>
                 </div>
            </div>