Skip to content

Instantly share code, notes, and snippets.

@hesersu

hesersu/index.html

Created February 6, 2025 16:59
Show Gist options
  • Save hesersu/943e6d3139eba8409a7a53d1b791fa66 to your computer and use it in GitHub Desktop.
Save hesersu/943e6d3139eba8409a7a53d1b791fa66 to your computer and use it in GitHub Desktop.
Download ZIP
IronSkyDive
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Iron SkyDive</title>
</head>
<body>
<nav class="nav-bar">
<ul class="nav-bar-ul">
<li><a href="#structure">Day Structure</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#schedule">Schedule</a></li>
</ul>
</nav>
<header class="header">
<h1><img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironhack-skydive-logo.png" alt="IronSkydive Logo">IronSkydive</h1>
<h2>Let the trip begin</h2>
<aside class="quote">
<p><em>"The best experience of our lifes!"</em><br>Ariel Quinones & Gonzalo Manrique, Ironhack Founders</p>
</aside>
</header>
<!-- Section 1 -->
<section id="general-information" class="dark-background">
<article class="container">
<h3>Hello!</h3>
<p class="text">Welcome to IronSkydive, the best adventure you will ever have.</p>
<a href="#" class="link-btn">Learn More</a>
</article>
<article class="container">
<h3>About us</h3>
<p class="text">We like a lot programming website, but we also love to practice sport.</p>
<a href="#" class="link-btn">Watch Video</a>
</article>
<article class="container">
<h3>Wanna join?</h3>
<p class="text">Join our fitness program to be in a good shape while learning.</p>
<a href="#" class="link-btn">Register</a>
</article>
</section>
<!-- Section 2 -->
<section id="structure">
<h3>How do you wanna structure your day?</h3>
<div>
<article class="service-box">
<img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironskydive-training.png" alt="Icon of books on a shelve">
<h4>1. Training</h4>
<p>We teach all the necessary things to jump from the place without any kind of problem.</p>
</article>
<article class="service-box">
<img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironskydive-get-ready.png" alt="Icon of a head">
<h4>2. Get ready</h4>
<p>You are already prepared, you just need the suit and a parachute. All sizes available.</p>
</article>
<article class="service-box">
<img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironskydive-fly.png" alt="Icon of an airplane">
<h4>3. Fly</h4>
<p>You are ready, and the plane is waiting for us in the hanger. Let's fly!</p>
</article>
<article class="service-box">
<img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironskydive-jump.png" alt="Icon of a parachute">
<h4>4. Jump!</h4>
<p>You have done the most complicated. Just one step left... jump!</p>
</article>
</div>
</section>
<!-- Section 3 -->
<section id="team" class="dark-background">
<h3>Team</h3>
<p class="section-text">Our team collectively has 75 years of experience. Odds are, when you jump out of the plane with these professionals, you won't go splat.</p>
<hr>
<div>
<article>
<h4 class="member-name">Harold Rothstein,</h4>
<img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_c18b1c463b80090894237a262dfdfbad.jpg" alt="Photo of a group of skydivers">
</article>
<article>
<h4 class="member-name">Susan Philips,</h4>
<img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_a18d6123a7c8e75f7e70a4e59b941093.jpg" alt="Photo of two skydivers">
</article>
<article>
<h4 class="member-name">Taylor Roberts,</h4>
</article>
<img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7104a331530d1b0611da55093b7dc421.jpg" alt="Photo of a skydriver with a plane and sunset in the background">
</div>
</section>
<!-- Section 4 -->
<section id="schedule" class="container">
<h3>Schedule</h3>
<table class="schedule-table" cellpadding="0" cellspacing="0">
<!-- Header of the Table -->
<thead>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<!-- Body of the table -->
<tbody>
<tr>
<td>9:00 - 11:00</td>
<td></td>
<td></td>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>12:00 - 14:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>15:00 - 17:00</td>
<td></td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
</tbody>
</table>
<h3>Schedule a Time Slot</h3>
</section>
<!-- Footer -->
<footer class="dark-background footer">
<h5>Contact Information</h5>
<address class="address">
IronSkydive
<br>33 Rue la Fayette,
<br>75009 Paris,
<br>France
<br>+33 (0) 619 193 088
</address>
<h5>Follow us.</h5>
<ul>
<a href="#">
<li>Twitter</li>
</a>
<a href="#">
<li>Facebook</li>
</a>
<a href="#">
<li>Instagram</li>
</a>
</ul>
</footer>
</body>
</html>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto:100,300,700');
/* Overall Properties */
html,
body {
margin: 0;
padding: 0;
font-family: Roboto;
font-size: 10px;
line-height: 3.5em;
weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Roboto;
}
/* Header Properties */
h1 {
font-size: 9em;
text-align: center;
text-transform: uppercase;
}
h2 {
font-size: 5em;
color: white;
text-shadow: #020819 8px -20px 9px;
text-align: center;
text-transform: uppercase;
line-height: 4em;
}
h3 {
font-size: 4.2em;
text-align: center;
line-height: 1em;
}
h4 {
font-size: 1.5em;
letter-spacing: 0.4px;
line-height: 1em;
margin-bottom: 15px;
}
h5 {
font-size: 1.2em;
line-height: 1em;
margin-top: 0;
margin-bottom: 0;
}
/* Nav Bar Properties */
.nav-bar {
background-color: rgb(25, 33, 41);
padding-top: 10px;
padding-bottom: 10px;
}
.nav-bar a {
color: white;
text-decoration: none;
font-size: 2em;
}
.nav-bar-ul {
width: 1200px;
margin: 0 auto;
}
.nav-bar-ul li {
list-style-type: none;
text-align: center;
}
/* Header Properties */
.header {
height: 650px;
background-image: url("https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironhack-skydive-background.jpg");
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
padding-top: 50px;
}
.quote {
font-size: 2.5em;
}
/* Section 1 Properties */
.container {
width: 1200px;
margin: 0 auto;
padding: 75px 0px;
}
.dark-background {
background-color: rgb(25, 33, 41);
color: white
}
.text {
font-size: 2em;
font-weight; 100;
text-align: center;
margin: 20px 0px 20px;
}
.link-btn {
background-color: rgb(67, 163, 230);
color: white;
font-family: Roboto Condensed;
font-size: 2em;
letter-spacing: 0.5px;
text-align: center;
text-decoration: none;
}
.service-box {
font-size: 1.7em;
text-align: center;
border: 2px solid #eee;
border-radius: 20px;
box-sizing: border-box;
box-shadow: 2px 2px 10px 0 #eee;
margin: 50px 5% 0 5%;
padding: 20px;
width: 40%;
}
.service-box img {
width: 125px;
}
/* Team Properties */
#team {
padding: 75px 0px;
margin: 0 auto;
}
#team p {
width: 60%;
margin: 10px auto;
}
#team hr {
margin: 20x auto 30px auto;
width: 40%
}
#team .section-text {
font-size: 1.9em;
text-align: center;
}
#team .member-name {
font-size: 1.5em;
font-weight: 700;
}
#team img {
width: 250px;
height: 180px;
}
/* Table Properties */
.schedule-table {
margin: 0 auto 40px auto;
font-size: 1.5em;
}
.schedule-table th, td{
border-bottom: 1px solid black;
padding: 5px 10px 0px 10px;
text-align: center;
}
/* Footer Properties */
.footer {
font-size: 1.9em;
text-align: center;
padding: 40px 100px 40px 100px;
margin-bottom: 25px;
}
.address {
font-style: normal;
font-size; 0.8em;
margin-bottom: 30px;
}
.footer a {
color: rgb(67, 163, 230);
text-decoration: none;
}
.footer ul {
list-style: none;
padding: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment