Skip to content

Instantly share code, notes, and snippets.

@ippaiva

ippaiva/index.html

Created September 4, 2018 15:33
Show Gist options
  • Save ippaiva/759bc0c3ec4a9aded7c574f9e43453d6 to your computer and use it in GitHub Desktop.
Save ippaiva/759bc0c3ec4a9aded7c574f9e43453d6 to your computer and use it in GitHub Desktop.
Download ZIP
IronHack - PreWork
Raw
index.html
<nav class ="nav-bar">
<ul class="nav-bar-ul">
<li class="nav-bar-li"><a class="nav-bar-item" href='#structure'>Day Structure</a></li>
<li class="nav-bar-li"><a class="nav-bar-item" href='#team'>Team</a></li>
<li class="nav-bar-li"><a class="nav-bar-item" 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"><i>"The best experience of our lives”</i><div>Ariel Quiónes & Gonzalo Manrique, Ironhack Founders</div></aside>
</header>
<section id="general-information" class="dark-background">
<div class="container">
<article class="col col-3">
<h3>Hello!</h3>
<p class="text">Welcome to IronSkydive, the best adventure you will ever have.</p>
<a href='#Learn More' class="link-btn">Learn More</a>
</article>
<article class="col col-3">
<h3>About us</h3>
<p class="text">We like a lot programming websites, but we also love to pratice sport.</p>
<a href='#Watch Video' class="link-btn">Watch Video</a>
</article>
<article class="col col-3">
<h3>Wanna Join?</h3>
<p class="text"> Join our fitness program to be in good shape while learning.</p>
<a href='#Register' class="link-btn">Register</a>
</article>
<div class="clearfix"></div>
</div>
</section>
<section id="structure" class="container">
<div>
<h3>How do we structure the day?</h3>
<article class="service-box col">
<img src='https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironskydive-training.png'alt='trainning'>
<h4>1. Trainning</h4>
<p>We teach all the necessary things to jump from the plane without any kind of problem.</p>
</article>
<article class="service-box col">
<img src='https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironskydive-get-ready.png'alt='ready'>
<h4>2. Get Ready!</h4>
<p>You are ready prepared, you just nedd the suit and parachute. All size available.</p>
</article>
<article class="service-box col">
<img src='https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironskydive-fly.png'alt='fly'>
<h4>3. Fly</h4>
<p>You are ready, and the plane is waiting for us in the hangar. Let´s fly!</p>
</article>
<article class="service-box col">
<img src='https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironskydive-jump.png'alt='jump'>
<h4>4. Jump!</h4>
<p> You have done the most complicated. Just one step left...jump!</p>
</article>
<div class="clearfix"></div>
</div>
</section>
<section id="team" class="dark-background">
<div class="container">
<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 theese professionals, you won´t go splat.</p><hr>
<article class="col col-3">
<p><b class="member-name"> Harold Rothstein </b><img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/team-1.jpg" alt='harold rothstein'></p><hr>
</article>
<article class="col col-3 col-middle">
<p><b class="member-name"> Susan Phillips </b><img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/team-2.jpg" alt='susan phillips'></p><hr>
</article>
<article class="col col-3">
<p><b class="member-name"> Taylor Roberts </b><img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/team-3.jpg"alt='taylor roberts'></p><hr>
</article>
<div class="clearfix"></div>
</div>
</section>
<section id="schedule""container">
<h3>Schedule</h3>
<table class="schedule-table" cellspacing="0" cellpadding="0">
<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>
<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><form class="slot-form" action="/register">
<div class="slot-form-container">
<label for="email" class="label">Email</label>
<input id="email" class="input-select" placeholder="Enter your email" type="email">
</div>
<div class="slot-form-container">
<label for="participants" class="label">Number of participants</label>
<input id="participants" class="input-select" placeholder="Number of participants" type="number">
</div>
<div class="slot-form-container">
<label for="date" class="label">Date</label>
<input id="date" class="input-select" type="date">
</div>
<div class="slot-form-container">
<label for="time" class="label">Time</label>
<select name="time" class="input-select">
<option value="early">09:00 - 11:00</option>
<option value="mid">12:00 - 14:00</option>
<option value="late">15:00 - 17:00</option>
</select>
</div>
<div class="slot-form-container">
<input value="Reserve Your Slot!" class="button" type="submit">
</div>
</form>
<div class="clearfix"></div>
</section>
<footer class="footer dark-background">
<div class="container">
<section class="col col-3">
<h5>Contact Information</h5>
<adress class= "adress">IronSkydive<br> 33 Rue la Fayette,<br> 75009 Paris,<br> France<br>+33 (0) 619 193 088</adress>
<h5>Follow Us</h5>
<ul class="footer-ul">
<li><a href='#facebook'>Facebook</a></li>
<li><a href='#twitter'>Twitter</a></li>
<li><a href='#instagram'>Instagram</a></li>
</ul>
</section>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.142047744348!2d2.3354330160472316!3d48.87456857928921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e38f817b573%3A0x48d69c30470e7aeb!2sIronhack!5e0!3m2!1sen!2ses!4v1495208746099" class="map-frame" frameborder="0" style="border:0" allowfullscreen></iframe>
<div class="clearfix"></div>
</div>
</footer>
Raw
style.scss
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto:100,300,700');
* {
margin: 0;
padding: 0;
}
body{
font-family:Roboto;
font-size:10px;
line-height:3.5em;
font-weight:300;
}
h1, h2, h3, h4, h5{
font-family:Roboto Condensed;
}
h1{
font-size:9em;
text-align:center;
text-transform: uppercase;
}
h2{
font-size:5em;
text-align:center;
text-transform: uppercase;
line-height:4em;
color:white;
text-shadow: #020819 8px -20px 9px;
}
h3{
font-size:4.2em;
text-align:center;
}
h4{
font-size:1.5em;
letter-spacing:0.4px;
margin:15px;
}
h5{
font-size:1.2em;
}
.nav-bar{
background-color:rgb(25, 33, 41);
color:white;
padding: 14px 14px;
height:40px;
}
.nav-bar-ul{
width: 1200px;
margin: 0 auto;
}
.nav-bar-li{
list-style-type: none;
text-align: center;
float: left;
width:33%;
}
.nav-bar-item {
color: white;
text-decoration: none;
font-size: 2em;
}
.header{
background-image: url("https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironhack-skydive-background.jpg");
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
height: 650px;
padding:50px;
position: relative;
}
.quote {
font-size: 2.5em;
position: absolute;
left: 10%;
bottom: 15%;
}
.dark-background{
background-color: rgb(25, 33, 41);
color: white;
padding:0 0 75px 0;
}
#general-information .text{
font-size: 2em;
font-weight: 100;
text-align: center;
margin: 20px 20px;
}
#general-information .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;
display: block;
width: 150px;
margin: 40px auto 0;
padding: 14px 20px;
border: 2px solid rgba(0, 0, 0, 0.2);
}
.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 0px #eee;
margin: 50px 5% 0;
padding: 20px;
width: 40%;
}
.service-box img{
width:125px;
}
#team .section-text{
font-size:1.9em;
text-align:center;
width: 60%;
margin: 10px auto;
}
#team .member-name{
font-size: 1.5em;
font-weight: 700;
}
#team hr{
margin:20px auto 30px auto;
width:40%;
}
#team img{
width: 100%;
height:250px;
overflow: hidden;
}
footer{
text-align:center;
font-size:1.9em;
padding: 100px;
margin-bottom:25px;
}
.adress{
font-style: normal;
font-size:0.8em;
margin-bottom:30px;
}
.footer li{
color: rgb(67, 163, 230);
text-decoration: none;
}
.footer-ul {
color: rgb(67, 163, 230);
list-style: none;
text-decoration:none;
}
.container {
width: 1200px;
margin: 0 auto;
padding: 75px 0px;
}
.col { float: left; }
.col-3{
width: 30%;
}
.col-middle{
margin: 0 5% 0 5%;
}
.clearfix { clear: both; }
.map-frame{
height:375px;
float:right;
width:60%;
}
.schedule-table{
margin:0 auto 40px auto;
font-size:1.5em;
color: black;
padding: 5px 10px;
}
.schedule-table th, .schedule-table td {
border-bottom: 1px solid black;
padding: 5px 10px;
}
.slot-form-container {
width: 40%;
margin: 18px auto 0;
font-size: 1.5em;
text-align: center;
}
.label {
display: block;
margin-bottom: 5px;
line-height: 15px;
}
.slot-form-container .input-select {
height: 20px;
outline: none;
padding: 3px;
width: 100%;
}
.slot-form-container .button {
border: 1px solid black;
color: black;
background-color: white;
padding: 9px;
margin-top: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment