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

Week 3 #5

Merged
merged 5 commits into from
Jul 7, 2023
Merged

Week 3 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cafcda0
w-3 session 7 responsive css
AbhishekSRajput Jun 22, 2023
6c61728
w-3 session 9 js basics
AbhishekSRajput Jun 25, 2023
a4e329f
w-3 session 9 js basics update
AbhishekSRajput Jun 25, 2023
67ec567
w-3 session 10 JS2
AbhishekSRajput Jul 1, 2023
c1bb94f
w-3 session 11 OOPS
AbhishekSRajput Jul 2, 2023
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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"githubPullRequests.ignoredPullRequestBranches": ["master"]
}
Binary file added Week-3/Session-07/BootstrapForVacationWebsite/assets/checkmark.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.
Binary file added Week-3/Session-07/BootstrapForVacationWebsite/assets/egypt_600.jpg
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.
Binary file added Week-3/Session-07/BootstrapForVacationWebsite/assets/greece_600.jpg
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.
Binary file added Week-3/Session-07/BootstrapForVacationWebsite/assets/israel_600.jpg
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.
301 changes: 301 additions & 0 deletions Week-3/Session-07/BootstrapForVacationWebsite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,301 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Lab</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./styles.css" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"
></script>
<script src="./script.js" defer></script>
</head>
<body>
<header>
<h1>Mediterranian Vacations</h1>
</header>
<nav class="navbar my-3">
<ul class="row container-fluid">
<li class="col-md-3 col-sm-3">
<a href="#featured">Featured Packages</a>
</li>
<li class="col-md-3 col-sm-3">
<a href="#exotic">Exotic Vacations</a>
</li>
<li class="col-md-3 col-sm-3">
<a href="#historic">Historic Locations</a>
</li>
<li class="col-md-3 col-sm-3">
<a href="#contact">Contact Us</a>
</li>
</ul>
</nav>
<div id="benefits">
<div class="row">
<div class="benefits-inner-container col-md-4 col-sm-4">
<div>
<img src="./assets/checkmark.png" alt="checkmark" />
</div>
<div class="benefit">
<strong>Affordable!</strong> Our vacation packages give
you the most bang for your buck.
</div>
</div>
<div class="benefits-inner-container col-md-4 col-sm-4">
<div>
<img src="./assets/checkmark.png" alt="checkmark" />
</div>
<div class="benefit">
<strong>Quality!</strong> We use only the finest
lodgings and qualified tour guides.
</div>
</div>
<div class="benefits-inner-container col-md-4 col-sm-4">
<div>
<img src="./assets/checkmark.png" alt="checkmark" />
</div>
<div class="benefit">
<strong>Cancel Anytime!</strong> You may cancel your
trip at any time for a full refund.
</div>
</div>
</div>
</div>

<main>
<section id="featured">
<h2>Featured Packages</h2>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<img
class="rounded img-fluid"
src="./assets/egypt_600.jpg"
alt="Great Sphyinx and pyramid"
/>
</div>
<div class="col-lg-6">
<h3>Egpyt</h3>
<p>
Egpyt is a land of enduring beauty and rich
culture. Explore the capital city of
<strong>Cairo</strong>, the
<strong>Great Pyramids of Giza</strong>, and the
iconic <strong>Great Sphinx</strong>!
</p>
<p>
Packages include airfare, lodging, and several
guided tours!
</p>
</div>
</div>
</div>
</section>

<section id="exotic">
<h2>Exotic Vacations</h2>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<img
class="rounded img-fluid"
src="./assets/greece_600.jpg"
alt="Arial view of Santorini"
/>
</div>
<div class="col-lg-6">
<div>
<h3>Greece</h3>
<p>
Enjoy the scenic, peaceful Greek island of
<strong>Santorini</strong>. Take a cruise,
soak in the sun, and explore the idyllic
villages that sit atop the cliffs!
</p>
<p>
Packages include airfare, overnight cruises,
and lodging!
</p>
</div>
</div>
</div>
</div>
</section>

<section id="historic">
<h2>Historic Locations</h2>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<img
class="rounded img-fluid"
src="./assets/israel_600.jpg"
alt="Jerusalem city scape"
/>
</div>
<div class="col-lg-6">
<div>
<h3>Israel</h3>
<p>
Explore Israel's holy city of
<strong>Jerusalem</strong>. Visit the
<strong>Dome of the Rock</strong>, the
<strong>Western Wall</strong>, the
<strong>Church of the Holy Sepulchre</strong
>, and other iconic sites!
</p>
<p>
Packages include airfare, lodging, and
several guided tours!
</p>
</div>
</div>
</div>
</div>
</section>

<section id="contact">
<h2>Contact Us</h2>
<p>
Our team of travel experts is readily available to make your
dream vacation a reality!
</p>
<p>
<button
id="send-message-btn"
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#contact-modal"
>
Send a message
</button>
</p>

<!-- Add Bootstrap Alert here -->
<div
id="conf-alert"
class="alert alert-success collapse"
role="alert"
>
Thanks, we will contact you soon!
</div>

<p>
Or call us at
<a href="tel:1-800-111-2222">1-800-111-2222</a>.
</p>

<div
class="modal fade"
id="contact-modal"
tabindex="-1"
role="dialog"
aria-labelledby="contact-modal-label"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5
class="modal-title"
id="contact-modal-label"
>
Contact Us
</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label
for="contact-name"
class="col-form-label"
>Name?</label
>
<input
type="text"
class="form-control"
id="contact-name"
/>
</div>
<div class="form-group">
<label
for="contact-email"
class="col-form-label"
>Email?</label
>
<input
type="email"
class="form-control"
id="contact-email"
placeholder="email@example.com"
/>
</div>
<div class="form-group">
<label
for="contact-interest"
class="col-form-label"
>I'm interested in...</label
>
<select
class="form-control"
id="contact-interest"
>
<option>Booking a vacation.</option>
<option>
Getting more information.
</option>
<option>
Checking my vacation's status.
</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button
type="button"
class="btn btn-primary"
data-bs-dismiss="modal"
>
Send message
</button>
</div>
</div>
</div>
</div>
</section>
</main>

<footer>
<p>
<a href="mailto:travel@medvacations.com"
>travel@medvacations.com</a
>
</p>
<p>&copy; 2022 Mediterranian Vacations</p>
</footer>
</body>
</html>
12 changes: 12 additions & 0 deletions Week-3/Session-07/BootstrapForVacationWebsite/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
function showAlert(alertId) {
const bootstrapAlert = document.getElementById(alertId);
const collapse = new bootstrap.Collapse(bootstrapAlert);
collapse.show();
}

const modalYesBtn = document.querySelector("#contact-modal .btn-primary");
modalYesBtn.addEventListener("click", function () {
const sendBtn = document.getElementById("send-message-btn");
sendBtn.style.display = "none";
showAlert("conf-alert");
});
78 changes: 78 additions & 0 deletions Week-3/Session-07/BootstrapForVacationWebsite/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
:root {
--theme-color: #7395ae;
--theme-dark-color: #557a95;
--primary-font-color: #5d5c61;
--link-font-color: white;
}

body {
font-family: Helvetica, sans-serif;
color: var(--primary-font-color);
padding: 10px;
}

a {
text-decoration: none;
color: var(--theme-dark-color);
}

header {
margin: 0;
}

header > h1 {
color: var(--theme-dark-color);
font-size: 2.5rem;
margin: 10px 0;
text-shadow: 2px 2px 3px gray;
}

nav {
background-color: var(--theme-color);
}

nav ul {
list-style-type: none;
padding: 10px 0;
}

nav li {
padding: 10px 0;
}

nav li a {
color: var(--link-font-color);
}

nav li a:hover {
text-decoration: none;
color: var(--link-font-color);
background-color: var(--theme-dark-color);
}

nav {
font-size: larger;
}

main {
margin: 0;
}

main > section {
margin-top: 30px;
}

footer {
margin-top: 30px;
}

.benefits-inner-container {
display: flex;
flex-direction: row;
}

.benefit {
color: var(--theme-dark-color);
margin-left: 10px;
margin-right: 20px;
}
Binary file added Week-3/Session-07/MediaQueriesForVacationWebsite/assets/checkmark.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.
Binary file added Week-3/Session-07/MediaQueriesForVacationWebsite/assets/egypt_600.jpg
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.
Binary file added Week-3/Session-07/MediaQueriesForVacationWebsite/assets/greece_600.jpg
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.
Binary file added Week-3/Session-07/MediaQueriesForVacationWebsite/assets/israel_600.jpg
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.
Loading