Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Card assignments 5 to 8 completed... #41

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Card assignments 5 to 8 completed... #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
92364a7
updated index.html file
onkarlondhe22 Apr 11, 2024
c0ad147
Merge branch 'main' https://github.com/vilasshetkar/cms-bootstrap-com…
onkarlondhe22 Apr 11, 2024
40a67f6
Merge branch 'vilasshetkar:main' into main
onkarlondhe45 Apr 12, 2024
bbd09e7
Assignments 5 to 8 Completed...
onkarlondhe22 Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 58 additions & 33 deletions SubmittedAssignments/Onkar_Londhe/01_Card_TopImage/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,71 @@
<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 text-center shadow-lg bg-body rounded border border-dark px-3 pt-3 ms-5 mt-3" style="width: 400px;">
<div class="card ms-5 mt-5" style="width: 400px;">
<!-- Image -->
<img src="https://pbs.twimg.com/media/FxrolxPaAAArbwh.jpg" class="card-img-top shadow-lg bg-body rounded" alt="Placeholder image">



<img src="https://akm-img-a-in.tosshub.com/indiatoday/images/story/202403/rohit-sharma-16465957-16x9_4.jpeg?VersionId=qVBQjk.Qhi3J5FRE1UnSIUZJtWjS6di" class="card-img-top shadow-lg bg-body rounded" alt="Placeholder image">

<!-- Card Header -->
<div class="card-header text-center bg-info bg-gradient border border-dark px-3 d-none">
<div class="card-header d-none">
Captain Of Indian Cricket team.
</div>
<!-- Card Body -->
<div class="card-body">
<!-- Card Body -->
<div class="card-body">
<!-- Card Header -->
<h5 class="card-title">Rohit Sharma</h5>
<h5 class="card-title text-center mt-3 fs-3">Rohit Sharma</h5>
<!-- Card Body Content -->
<p class="card-text"><small class="text-muted"> (born 30 April 1987) </small></p>
<!-- Card Footer -->
<p class="card-text">He is an Indian international cricketer who currently captains the India national cricket team across all formats.</p>
<div class="card-text text-center">
<p class="fw-bold text-center fst-italic mt-2">Cricketer</p>
<p>He is an Indian international cricketer who currently captains the India national cricket team across all formats.</p>
</div>
<!-- Card Footer -->
<p class="card-text"><small class="text-muted d-none"></small></p>

</div>

<div class="row mb-2">
<div class="col-4">
<img class="img-fluid" src="https://www.svgrepo.com/show/452231/instagram.svg" width="50px"/>
</div>

<div class="col-4 ">
<img class="img-fluid" src="https://www.svgrepo.com/show/452051/linkedin.svg" width="50px"/>
</div>

<div class="col-4">
<img class="img-fluid" src="https://www.svgrepo.com/show/452211/github.svg" width="50px"/>
</div>


</div>

<div class="card-footer text-body-secondary d-none">

<ul class="list-group list-group-flush d-none">
<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 fs-3 text-center">
<a href="#" class="card-link">
<span class="d-none">Facebook</span>
<i class="bi bi-instagram text-danger" ></i>
</a>
<a href="#" class="card-link">
<span class="d-none">Twitter</span>
<span class="bi bi-twitter text-info"></span>
</a>
<a href="#" class="card-link">
<span class="d-none">LinkedIn</span>
<span class="bi bi-linkedin"></span>
</a>
</div>

<!-- Card Buttons -->
<div class="mb-3 d-none">
<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 d-none">
2 days ago
</div>

</div>
<br>
</div>
54 changes: 51 additions & 3 deletions SubmittedAssignments/Onkar_Londhe/02_Card_BottomImage/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<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 ms-5 mt-5" style="width: 400px;">
Expand All @@ -12,12 +14,58 @@
<!-- Card Header -->
<h5 class="card-title">Mahindra Thar</h5>
<!-- Card Body Content -->
<p class="card-text">The Mahindra Thar has evolved from a simple, old off-roader to a versatile and modern SUV that can take you anywhere in comfort.</p>
<div class="card-text">
<p>The Mahindra Thar has evolved from a simple, old off-roader to a versatile and modern SUV that can take you anywhere in comfort.</p>
<p class="d-none">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<!-- Card Footer -->
<p class="card-text"><small class="text-muted">🕑Avg. Waiting Period: Upto 75 Weeks</small></p>

</div>

<ul class="list-group list-group-flush d-none">
<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 d-none">

<!-- 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 d-none">
<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">
<p class="fw-bold">Rs. 11.25 - 17.60 Lakh</p>
Rs. 11.25 - 17.60 Lakh
</div>

<!-- Image -->
Expand Down
Binary file added SubmittedAssignments/Onkar_Londhe/02_Card_BottomImage/sample.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 68 additions & 32 deletions SubmittedAssignments/Onkar_Londhe/03_Card_LeftImage/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,85 @@
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<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 mt-5 ms-5 bg-dark text-light" style="width: 600px;">
<div class="card text-dark mt-5 ms-5" style="width: 600px;">
<div class="row">
<!-- Image -->
<div class="col-md-5">
<img src="profile.jpg" alt="img" class="card-img px-2 mt-4 pt-2 pb-2 img-fluid rounded-pill border bg-light" alt="Placeholder image">
<div class="col-md-6">
<img src="profile.jpg" alt="img" class="card-img px-2 mt-3 ms-2 pt-2 pb-2 img-fluid bg-gradient bg-light" alt="Placeholder image">
</div>

<!-- Card - Image Left -->
<div class="col-md-7">
<div class="col-md-6">
<!-- Card Body -->
<div class="card-body">
<!-- Card Header -->
<h5 class="card-title">Onkar Londhe</h5>
<!-- Card Body Content -->
<p class="card-text fst-italic">Web Developer</p>

<div class="row border border-white px-2 py-2 mb-2">
<div class="col-4">
<p class="fw-bold">Post</p>
<p class="fw-normal">15</p>
</div>
<div class="card-text">
<p class="fst-italic">Web Developer </p>


<div class="col-4">
<p class="fw-bold">Followers</p>
<p class="fw-normal">730</p>
</div>
<p class="container-fluid mb-0">

<div class="col-4 ml-3">
<p class="fw-bold">Following</p>
<p class="fw-normal">700</p>
</div>
</div>


<a href="#" class="btn btn-primary">Follow</a>

<a href="#" class="btn border border-success text-light">Message</a>


<span class="d-flex flex-direction-row">
<p class="fw-bold d-flex flex-direction-row">Post</p>
<p class="fw-bold d-flex-row">Followers</p>
<p class="fw-bold d-flex">Following</p>
<p class="fw-normal ">15</p>
<p class="fw-normal">730</p>
<p class="fw-normal">700</p>
</span>

</p>
</div>
<!-- Card Footer -->
<p class="card-text d-none"><small class="text-muted">Last updated 3 mins ago</small></p>
<p class="card-text"><small class="text-muted d-none">Last updated 3 mins ago</small></p>

</div>

<ul class="list-group list-group-flush d-none">
<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 d-none">
<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-0 mt-0">
<a href="#" class="btn btn-primary">
<span>Follow</s mt-0pan>
<span class="bi bi-facebook d-none"></span>
</a>
<a href="#" class="btn border bg-white text-dark">
<span>Message</span>
<span class="bi bi-twitter d-none"></span>
</a>
<a href="#" class="btn btn-primary d-none">
<span>LinkedIn</span>
<span class="bi bi-linkedin"></span>
</a>
</div>
</div>
</div>

</div>
</div>
</div>
57 changes: 52 additions & 5 deletions SubmittedAssignments/Onkar_Londhe/04_Card_RightImage/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<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 bg-secondary mt-5 ms-5" style="width: 600px;">
Expand All @@ -10,14 +12,59 @@
<!-- Card Header -->
<h5 class="card-title text-danger bg-gradient fs-4 fw-bold mt-5">भगत सिंग</h5>
<!-- Card Body Content -->
<p class="card-text text-white mt-3" >इस कदर वाकिफ है मेरी कलम मेरे जज़्बातों से, अगर मैं इश्क़ लिखना भी चाहूं तो इंक़लाब निकल जाता है.</p>
<div class="card-text">
<p class="text-white mt-3">इस कदर वाकिफ है मेरी कलम मेरे जज़्बातों से, अगर मैं इश्क़ लिखना भी चाहूं तो इंक़लाब निकल जाता है.</p>
<p class="text-warning">(28 सितम्बर 1907 – 23 मार्च 1931)</p>
</div>
<!-- Card Footer -->
<p class="card-text"><small class="text-warning">(28 सितम्बर 1907 – 23 मार्च 1931)</small></p>
<p class="card-text"><small class="text-muted d-none">Last updated 3 mins ago</small></p>

</div>

<ul class="list-group list-group-flush d-none">
<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 d-none">
<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 d-none">
<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 px-3 py-3">
<div class="col-md-6 px-3 py-3">
<img src="https://i.pinimg.com/236x/c0/cb/2a/c0cb2a8be5c9938dd2c60bd9a560a450.jpg" class="card-img rounded-circle" alt="Placeholder image">
</div>
</div>
</div>
</div>
Loading