grid layout completed

developer-shourav · developer-shourav · commit 4274fb951a9b · 2023-01-21T21:22:23.000+06:00
diff --git a/index.html b/index.html
@@ -12,8 +12,56 @@
 <!-- -----------------Vanilla CSS-------------------- -->
     <link rel="stylesheet" href="style.css">
 </head>
-<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis cum consequatur voluptatum ratione quod qui alias dolorum assumenda, corporis voluptatem natus fuga inventore nostrum, rerum adipisci nihil aperiam harum provident.</p>
-<body>
+ <div class="container-fluid">
+    <div class="row  g-3">
+        <div  class="col-12 col-lg-12 col-xl-12 col-xxl-12   ">
+            <div class="p-5 bg-danger-subtle"></div>
+        </div>
+
+        <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3">
+            <div class="bg-pink p-5"></div>
+         </div>
+ 
+         <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3">
+            <div class="bg-pink p-5"></div>
+         </div>
+ 
+         <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3">
+            <div class="bg-pink p-5"></div>
+         </div>
+ 
+         <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3">
+            <div class="bg-pink p-5 "></div>
+         </div>
+
+
+         <div  class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
+            <div class="bg-info-subtle p-5 "></div>
+         </div>
+
+
+         <div  class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
+            <div class="bg-info-subtle p-5 "></div>
+         </div>
+
+         <div  class="col-12 col-sm-12 col-md-12 col-lg-9 col-xl-9 col-xxl-9">
+            <div class="bg-light-green p-5 "></div>
+         </div>
+
+         <div  class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3">
+            <div class="bg-drown p-5 "></div>
+         </div>
+
+
+        
+        
+
+      </div>
+
+
+
+    </div>
+ </div>
     
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -1,3 +1,11 @@
-p{
-    color:rebeccapurple;
+.bg-pink{
+    background-color: #ff4cb4be;
+}
+
+.bg-light-green{
+    background-color: #57d457d7;
+}
+
+.bg-drown{
+    background-color: rgba(255, 145, 82, 0.897);
 }
