Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sankalp-Pesto
Sankalp-Pesto authored Jun 5, 2023
1 parent 333d00e commit 3973bbe
Show file tree
Hide file tree
Showing 39 changed files with 2,158 additions and 0 deletions.
Binary file added ...siveness/Assignment/Bootstrap for a vacation website/Bootstrap for a vacation website.pdf
View file
Binary file not shown.
Binary file added ...ion-07_Responsiveness/Assignment/Bootstrap for a vacation website/checkmark.png
View file
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 ...ion-07_Responsiveness/Assignment/Bootstrap for a vacation website/egypt_600.jpg
View file
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 ...on-07_Responsiveness/Assignment/Bootstrap for a vacation website/greece_600.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
190 changes: 190 additions & 0 deletions Session-07_Responsiveness/Assignment/Bootstrap for a vacation website/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
<!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">
<script src="script.js" defer></script>
</head>
<body>
<header>
<h1>Mediterranian Vacations</h1>
</header>
<nav>
<ul>
<li><a href="#featured">Featured Packages</a></li>
<li><a href="#exotic">Exotic Vacations</a></li>
<li><a href="#historic">Historic Locations</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
<div id="benefits">
<div>
<div class="benefits-inner-container">
<div>
<img src="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">
<div>
<img src="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">
<div>
<img src="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>
<img src="egypt_600.jpg" alt="Great Sphyinx and pyramid">
</div>
<div>
<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>
<div>
<div>
<img src="greece_600.jpg" alt="Arial view of Santorini">
</div>
<div>
<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>
<div>
<div>
<img src="israel_600.jpg" alt="Jerusalem city scape">
</div>
<div>
<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-toggle="modal"
data-target="#contact-modal">Send a message</button>
</p>

<!-- Add Bootstrap Alert here -->


<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-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 protected]">
</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-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Send message</button>
</div>
</div>
</div>
</div>
</section>
</main>

<footer>
<p>
<a href="mailto:[email protected]">[email protected]</a>
</p>
<p>
&copy; 2022 Mediterranian Vacations
</p>
</footer>
</body>

</html>
Binary file added ...on-07_Responsiveness/Assignment/Bootstrap for a vacation website/israel_600.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions Session-07_Responsiveness/Assignment/Bootstrap for a vacation website/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
function showAlert(alertId) {
const bootstrapAlert = document.querySelector("#" + alertId);
const collapse = new bootstrap.Collapse(bootstrapAlert);
collapse.show();
}

const modalYesBtn = document.querySelector("#contact-modal .btn-primary");
modalYesBtn.addEventListener("click", function () {
const sendBtn = document.querySelector("#send-message-btn");
sendBtn.style.display = "none";
showAlert("conf-alert");
});
78 changes: 78 additions & 0 deletions Session-07_Responsiveness/Assignment/Bootstrap for a vacation website/styles.css
View file
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 .../Assignment/Media queries for a vacation website/Media queries for a vacation website.pdf
View file
Binary file not shown.
Binary file added ...07_Responsiveness/Assignment/Media queries for a vacation website/checkmark.png
View file
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 ...07_Responsiveness/Assignment/Media queries for a vacation website/egypt_600.jpg
View file
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 ...7_Responsiveness/Assignment/Media queries for a vacation website/greece_600.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
113 changes: 113 additions & 0 deletions Session-07_Responsiveness/Assignment/Media queries for a vacation website/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Media Query Lab</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>Mediterranian Vacations</h1>
</header>
<nav>
<ul>
<li><a href="#featured">Featured Packages</a></li>
<li><a href="#exotic">Exotic Vacations</a></li>
<li><a href="#historic">Historic Locations</a></li>
</ul>
</nav>
<div class="benefits-container">
<div class="benefits-inner-container">
<div>
<img src="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">
<div>
<img src="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">
<div>
<img src="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>
<main>
<section id="featured">
<h2>Featured Packages</h2>
<div class="vacation-container">
<img src="egypt_600.jpg" alt="Great Sphyinx and pyramid">
<div>
<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>
</section>

<section id="exotic">
<h2>Exotic Vacations</h2>
<div class="vacation-container">
<img src="greece_600.jpg" alt="Arial view of Santorini">
<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>
</section>

<section id="historic">
<h2>Historic Locations</h2>
<div class="vacation-container">
<img src="israel_600.jpg" alt="Jerusalem city scape">
<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>
</section>
</main>

<footer>
<p>
<a href="mailto:[email protected]">[email protected]</a>
</p>
<p>
&copy; 2020 Mediterranian Vacations
</p>
</footer>
</body>

</html>
Binary file added ...7_Responsiveness/Assignment/Media queries for a vacation website/israel_600.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 3973bbe

Please sign in to comment.