Skip to content

Instantly share code, notes, and snippets.

@pascal-codecat

pascal-codecat/index.html

Created July 5, 2016 12:47
Show Gist options
  • Save pascal-codecat/18eb9908bc33bc30c5ae3379c9195328 to your computer and use it in GitHub Desktop.
Save pascal-codecat/18eb9908bc33bc30c5ae3379c9195328 to your computer and use it in GitHub Desktop.
Download ZIP
ilikerocket file
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SpaceX</title>
<!-- links -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Comfortaa:400,700' rel='stylesheet' type='text/css'>
</head>
<!--START NAVBAR -->
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="projectName navbar-brand">
<a href="#">Pascal Zwicker</a>
</div> <!-- end project-name -->
</div> <!-- end navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#carousel1">Home</a></li>
<li><a href="#work-nav">Work</a></li>
<li><a href="#learn-nav">Faq</a></li>
<li><a href="#aboutme-nav">About</a></li>
<li><a href="#contact-nav">Contact</a></li>
<li><a href="#video-nav">Video</a></li>
</ul>
</div> <!-- nav -->
</div> <!-- end nav container -->
</nav> <!-- end navbar -->
<!-- END NAVBAR -->
<!--START CAROUSELL -->
<div id="carousel1" class="container-fluid">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/slide1.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/slide2.jpg" alt="...">
<div class="carousel-caption">
<h3>Falcon 9 launch</h3>
</div>
</div>
<div class="item">
<img src="img/slide3.jpg" alt="...">
<div class="carousel-caption">
<h3>Dragon v2</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- END CAROUSELL -->
<!-- START TEXT -->
<div class="index-title">
<h1 id="index-title">Falcon 9</h1>
</div>
<div class="row index-cont">
<div class="col-md-6 col-xs-12">
<img id="falcon9" src="img/falcon9.jpg" class="img-responsive">
</div>
<div class="index-text">
<div class="index-list col-md-6 col-xs-12">
<li>70m height 549'054kg mass</li>
<li>Two-stage rocket</li>
<li>First stage 9 merlin engines</li>
<li>secoond stage 1 merlin engine</li>
<li>payload to leo 22'800kg</li>
<li>payload to gto 8'300kg</li>
</div>
<div class="col-lg-6 col-md-12 col-xs-12">
<p>Falcon 9 is a two-stage rocket designed and manufactured by SpaceX for the reliable and safe transport of satellites and the Dragon spacecraft into orbit. As the first rocket completely developed in the 21st century, Falcon 9 was designed from the ground up for maximum reliability. Falcon 9’s simple two-stage configuration minimizes the number of separation events -- and with nine first-stage engines, it can safely complete its mission even in the event of an engine shutdown.<br><br>
Falcon 9 made history in 2012 when it delivered Dragon into the correct orbit for rendezvous with the International Space Station, making SpaceX the first commercial company ever to visit the station. Since then SpaceX has made multiple flights to the space station, both delivering and returning cargo for NASA. Falcon 9, along with the Dragon spacecraft, was designed from the outset to deliver humans into space and under an agreement with NASA, SpaceX is actively working toward that goal.
</p>
<div id="work-nav">
</div>
</div>
</div>
</div>
<!-- END TEXT -->
<!-- START WORK -->
<div id="work-title" class="index-title">
<h1 id="index-title">Work</h1>
</div>
<div id="work-h1" class="container">
<div class="row" id="work">
<!-- javascript work.js replace -->
</div>
<div id="learn-nav"></div>
</div>
<!-- END WORK -->
<!-- START LEARN MORE -->
<div class="row index-title-learn">
<h1 id="index-title-learn">Learn more + FAQ</h1>
<!-- Small modal button -->
<div class="modal-button">
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Klick here</button>
</div>
</div>
<!-- Small modal -->
<div data-backdrop="static" data-keyboard="false" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<div class="modal-body">
<embed id="modalembed" src="pdf/lamm.pdf">
</div>
</div>
</div>
</div>
<!-- END LEARN MORE -->
<!-- START FAQ -->
<div id="faq" class="container faq-accordion">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span>
What is the Falcon 9 ?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Falcon 9 is the most modern build rocket. Able to reuse the first rocket stage.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-plus"></span>
What is SpaceX?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
SpaceX is a space agency. She uses the Falcon 9 to transport satelites and cargo into orbit.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div id="aboutme-nav"></div>
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-plus"></span>
Why are they special?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Because they want to bring down the cost of rocket flight for humans.
</div>
</div>
</div>
</div>
<!-- END FAQ -->
<!-- START ABOUT -->
<div id="aboutme-nav"></div>
<div class="index-title-about">
<h1 id="index-title-about">About me</h1>
</div>
<div id="aboutme"
class="aboutme container"data-stellar-background-ratio="0.1">
<h1>This is a Spacex website made by Pascal Zwicker.</h1>
<div class="row">
<div class="col-md-7 col-xs-7 aboutme-text">
<h3><a href="#rocket" title="More information" id="item1">I love rockets!</a></h3>
<p>I'm a member in the codecats summercamp.<br>
I currenty make a course at careerfoundry and made this website for fun and because it's my dream to fly in a rocket.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button>
</div>
<div class="col-md-3 col-xs-12">
<img id="kitten" src="img/kitten.png">
</div>
</div>
<div id="contact-nav"></div>
</div>
<!-- END ABOUT -->
<!-- START CONTACT -->
<div class="index-title-contact">
<h1 id="index-title-contact">Contact</h1>
</div>
<div id="contact" class="container row"
data-stellar-background-ratio="0.1">
<div class=" contact col-lg-6 col-md-12">
<li><span class="glyphicon glyphicon-home"></span> Pascal Zwicker </li>
<li><span class="glyphicon glyphicon-file"></span> Email: max.mustermann@email.com</li>
<li><span class="glyphicon glyphicon-map-marker"></span> Adress: ZU Uni Friedrichhafen</li>
<li><span class="glyphicon glyphicon-earphone"></span> Phone: 999/999/99/99</li>
<div>
<div id="map"></div>
</div>
</div>
<!-- END CONTACT -->
<!-- START FORM -->
<div class="col-lg-6 col-md-12">
<form id="form" action=”/login” method=”post” name=”login”>
<h1>Say hello</h1>
<div class="form-group">
<label for="email">Email address *</label>
<input title="E-mail" id="email" placeholder="Your e-mail." class="form-control" type="email" name="email">
</div>
<div class="form-group">
<label for="name">Name Surname *</label>
<input title="Name Surname" id="name" placeholder="Your name." class="form-control" type="name" name="name">
</div>
<div class="form-group">
<label for="date">Birthday date *</label>
<input title="Birthday date" id="date" placeholder="Your birthday date." class="form-control" type="date" name="bday" max="2000-12-31">
</div>
<label id="message" for="text">Message *</label>
<textarea title="Message" id="text" placeholder="Your message here." class="form-control message-box" style="resize:none" cols="40" rows="5"></textarea>
<!-- js comment -->
<p id="visible-comment"></p>
<p id="char-count"></p>
<!-- button -->
<button id="button-submit" type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
<!-- END FORM -->
<!-- START FOOTER -->
<footer class="index-title-footer">
<div class="footer"><span id="copyright">&copy; Pascal Zwicker 2016
<div id="fb-tw">
<!-- twitter -->
</span>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="PasZw" data-size="large">Tweet</a>
</span>
<!-- facebook -->
<div class="fb-like" data-href="https://www.facebook.com/codecats/?fref=ts" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<!-- youtube -->
<div id="video-nav"></div>
<div id="video" class="embed-responsive embed-responsive-16by9">
<iframe width="750" height="505" src="https://www.youtube.com/embed/ANv5UfZsvZQ" allowfullscreen></iframe>
</div>
</div>
</footer>
<!-- END FOOTER -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<!-- START LINKS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/work.js"></script>
<script src="js/scripts.js"></script>
<!-- stellar -->
<script src="js/jquery.stellar.min.js"></script>
<!-- maps -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSpTnoRfkzsnuvmfos-UL-DOAfC7lqjfk&callback=initMap">
</script>
<!-- END LINKS -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment