vilasshetkar · Anjali1106 · Apr 20, 2024
diff --git a/SubmittedAssignments/Anjali_Babar/01_Card_TopImage/01_card_dictionary.jpg b/SubmittedAssignments/Anjali_Babar/01_Card_TopImage/01_card_dictionary.jpg
diff --git a/SubmittedAssignments/Anjali_Babar/01_Card_TopImage/index.html b/SubmittedAssignments/Anjali_Babar/01_Card_TopImage/index.html
@@ -0,0 +1,72 @@
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+
+<!-- Card - Image Top -->
+<div class="card" style="width: 400px;">
+    <!-- Image -->
+    <img src="01_card_dictionary.jpg" class="card-img-top" alt="Placeholder image">
+
+    <!-- Card Header -->
+    <div class="card-header">
+        Featured
+    </div>
+     <!-- Card Body -->
+     <div class="card-body">
+        <!-- Card Header -->
+        <h5 class="card-title">Dictionary</h5>
+        <!-- Card Body Content -->
+        <div class="card-text">
+            <p>a reference book listing alphabetically terms or names important to a particular subject or activity along with discussion of their meanings and applications</p>
+            <p>a computerized list (as of items of data or words) used for reference (as for information retrieval or word processing)</p>
+        </div>
+        <!-- Card Footer -->
+        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+
+    </div>
+
+    <ul class="list-group list-group-flush">
+		<h4 >Top Dictionaries are</h4>
+        <li class="list-group-item">Oxford English Dictionary (OED)</li>
+        <li class="list-group-item">Collins Dictionary</li>
+        <li class="list-group-item">Google Dictionary</li>
+    </ul>
+
+    <div class="card-body">
+
+        <!-- Card Links -->
+        <div class="mb-3">
+            <a href="#" class="card-link">
+                <span>Facebook</span>
+                <span class="bi bi-facebook"></span>
+            </a>
+            <a href="#" class="card-link">
+                <span>Twitter</span>
+                <span class="bi bi-twitter"></span>
+            </a>
+            <a href="#" class="card-link">
+                <span>LinkedIn</span>
+                <span class="bi bi-linkedin"></span>
+            </a>
+        </div>
+
+        <!-- Card Buttons -->
+        <div class="mb-3">
+            <a href="#" class="btn btn-primary">
+                <span>Facebook</span>
+                <span class="bi bi-facebook"></span>
+            </a>
+            <a href="#" class="btn btn-primary">
+                <span>Twitter</span>
+                <span class="bi bi-twitter"></span>
+            </a>
+            <a href="#" class="btn btn-primary">
+                <span>LinkedIn</span>
+                <span class="bi bi-linkedin"></span>
+            </a>
+        </div>
+    </div>
+    <div class="card-footer text-body-secondary">
+        2 days ago
+    </div>
+</div>
diff --git a/SubmittedAssignments/Anjali_Babar/02_Card_BottomImage/index.html b/SubmittedAssignments/Anjali_Babar/02_Card_BottomImage/index.html
@@ -0,0 +1,74 @@
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+
+<!-- Card - Image Top -->
+<div class="card" style="width: 400px;">
+
+    <!-- Card Header -->
+    <div class="card-header">
+        Featured
+    </div>
+    <!-- Card Body -->
+    <div class="card-body">
+        <!-- Card Header -->
+        <h5 class="card-title">Pen</h5>
+        <!-- Card Body Content -->
+        <div class="card-text">
+            <p>The Parker Pen Company is an American manufacturer of luxury writing pens, founded in 1888 by George Safford Parker in Janesville, Wisconsin, United States.</p>
+            <p>In 2011 the Parker factory at Newhaven, East Sussex, England, was closed, and its production transferred to Nantes, France.</p>
+        </div>
+        <!-- Card Footer -->
+        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+
+    </div>
+
+    <ul class="list-group list-group-flush">
+        <li class="list-group-item">An item</li>
+        <li class="list-group-item">A second item</li>
+        <li class="list-group-item">A third item</li>
+    </ul>
+
+    <div class="card-body">
+
+        <!-- Card Links -->
+        <div class="mb-3">
+            <a href="#" class="card-link">
+                <span>Facebook</span>
+                <span class="bi bi-facebook"></span>
+            </a>
+            <a href="#" class="card-link">
+                <span>Twitter</span>
+                <span class="bi bi-twitter"></span>
+            </a>
+            <a href="#" class="card-link">
+                <span>LinkedIn</span>
+                <span class="bi bi-linkedin"></span>
+            </a>
+        </div>
+
+        <!-- Card Buttons -->
+        <div class="mb-3">
+            <a href="#" class="btn btn-primary">
+                <span>Facebook</span>
+                <span class="bi bi-facebook"></span>
+            </a>
+            <a href="#" class="btn btn-primary">
+                <span>Twitter</span>
+                <span class="bi bi-twitter"></span>
+            </a>
+            <a href="#" class="btn btn-primary">
+                <span>LinkedIn</span>
+                <span class="bi bi-linkedin"></span>
+            </a>
+        </div>
+    </div>
+
+    <div class="card-footer text-body-secondary">
+        2 days ago
+    </div>
+
+    <!-- Image -->
+    <img src="pen.jpg" class="card-img-bottom" alt="Placeholder image">
+
+</div>
diff --git a/SubmittedAssignments/Anjali_Babar/02_Card_BottomImage/pen.jpg b/SubmittedAssignments/Anjali_Babar/02_Card_BottomImage/pen.jpg
diff --git a/SubmittedAssignments/Anjali_Babar/03_Card_LeftImage/index.html b/SubmittedAssignments/Anjali_Babar/03_Card_LeftImage/index.html
@@ -0,0 +1,74 @@
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+
+<!-- Card - Image Left -->
+<div class="card"  style="width: 600px;" >
+    <div class="row">
+        <!-- Image -->
+        <div class="col-md-6">
+            <img src="ratan_tata_img.jpg" class="card-img " alt="Placeholder image">
+        </div>
+
+        <!-- Card - Image Left -->
+        <div class="col-md-6">
+            <!-- Card Body -->
+            <div class="card-body">
+                <!-- Card Header -->
+                <h5 class="card-title">Ratan Tata</h5>
+                <!-- Card Body Content -->
+                <div class="card-text">
+                    <p>Ratan Naval Tata is an Indian industrialist, philanthropist and former chairman of Tata Sons. 
+                    </p>
+                    <p>He was a chairman of the Tata Group from 1990 to 2012, and interim chairman from October 2016 through February 2017. He continues to head its charitable trusts.
+                    </p>
+                </div>
+                <!-- Card Footer -->
+                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+
+            </div>
+
+            <ul class="list-group list-group-flush">
+                <li class="list-group-item">Indian industrialist</li>
+                <li class="list-group-item">philanthropist</li>
+                <li class="list-group-item">former chairman of Tata Sons</li>
+            </ul>
+
+            <div class="card-body">
+
+                <!-- Card Links -->
+                <div class="mb-3">
+                    <a href="#" class="card-link">
+                        <span>Facebook</span>
+                        <span class="bi bi-facebook"></span>
+                    </a>
+                    <a href="#" class="card-link">
+                        <span>Twitter</span>
+                        <span class="bi bi-twitter"></span>
+                    </a>
+                    <a href="#" class="card-link">
+                        <span>LinkedIn</span>
+                        <span class="bi bi-linkedin"></span>
+                    </a>
+                </div>
+
+                <!-- Card Buttons -->
+                <div class="mb-3">
+                    <a href="#" class="btn btn-primary">
+                        <span>Facebook</span>
+                        <span class="bi bi-facebook"></span>
+                    </a>
+                    <a href="#" class="btn btn-primary">
+                        <span>Twitter</span>
+                        <span class="bi bi-twitter"></span>
+                    </a>
+                    <a href="#" class="btn btn-primary">
+                        <span>LinkedIn</span>
+                        <span class="bi bi-linkedin"></span>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
diff --git a/SubmittedAssignments/Anjali_Babar/03_Card_LeftImage/ratan_tata_img.jpg b/SubmittedAssignments/Anjali_Babar/03_Card_LeftImage/ratan_tata_img.jpg
diff --git a/SubmittedAssignments/Anjali_Babar/04_Card_RightImage/Lotus.jpg b/SubmittedAssignments/Anjali_Babar/04_Card_RightImage/Lotus.jpg
diff --git a/SubmittedAssignments/Anjali_Babar/04_Card_RightImage/index.html b/SubmittedAssignments/Anjali_Babar/04_Card_RightImage/index.html
@@ -0,0 +1,72 @@
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+
+<!-- Card - Image Right -->
+<div class="card" style="width: 600px;">
+    <div class="row">
+        <!-- Card - Image Right -->
+        <div class="col-md-6">
+            <!-- Card Body -->
+            <div class="card-body">
+                <!-- Card Header -->
+                <h5 class="card-title">Lotus</h5>
+                <!-- Card Body Content -->
+                <div class="card-text">
+                    <p>Lotus is India's national flower. The 'Lotus' or water lily, an aquatic plant of the Nymphaea family, has the honour of being India's National Flower. 
+                    </p>
+                    <p>The large, appealing pink blossoms feature symmetrically arranged petals and broad floating petals that give the impression of serenity and elegance.
+                    </p>
+                </div>
+                <!-- Card Footer -->
+                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+
+            </div>
+
+            <ul class="list-group list-group-flush">
+                <li class="list-group-item">An item</li>
+                <li class="list-group-item">A second item</li>
+                <li class="list-group-item">A third item</li>
+            </ul>
+
+            <div class="card-body">
+
+                <!-- Card Links -->
+                <div class="mb-3">
+                    <a href="#" class="card-link">
+                        <span>Facebook</span>
+                        <span class="bi bi-facebook"></span>
+                    </a>
+                    <a href="#" class="card-link">
+                        <span>Twitter</span>
+                        <span class="bi bi-twitter"></span>
+                    </a>
+                    <a href="#" class="card-link">
+                        <span>LinkedIn</span>
+                        <span class="bi bi-linkedin"></span>
+                    </a>
+                </div>
+
+                <!-- Card Buttons -->
+                <div class="mb-3">
+                    <a href="#" class="btn btn-primary">
+                        <span>Facebook</span>
+                        <span class="bi bi-facebook"></span>
+                    </a>
+                    <a href="#" class="btn btn-primary">
+                        <span>Twitter</span>
+                        <span class="bi bi-twitter"></span>
+                    </a>
+                    <a href="#" class="btn btn-primary">
+                        <span>LinkedIn</span>
+                        <span class="bi bi-linkedin"></span>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <!-- Image -->
+        <div class="col-md-6">
+            <img src="Lotus.jpg" class="card-img" alt="Placeholder image">
+        </div>
+    </div>
+</div>