Beruflich Dokumente
Kultur Dokumente
html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<!-- The above 3 meta tags *must* come first in the
head; any other head content must come *after* these tags
-->
<title>App Landing Page</title>
</head>
<body>
<div class="jumbotron">
<div class="container">
<!--create logo-->
<div>
<img src="images/plane.png"
class="logo">
</div>
<!--create featured part-->
<div class="featured">
<!--create a row to use the grid system
and limit space taken by featured content-->
<div class="row">
<!--Use only 9 columns out of 12 for
medium and large devices-->
<div class="col-md-9">
<h1>Best Holiday Finder
App.</h1>
<p>Find your next holiday
destination using our App!<br />Compare offers and save
your hard earned money for your trip!</p>
<p>
<a class="btn btn-default
btn-lg" href="#">Find out more</a>
<a class="btn btn-default
btn-lg" href="#">Download</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!--create a footer-->
<div class="footer">
<div class="container">
<p>© Develop with Sam.</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript
plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/j
query.min.js"></script>
<!-- Include all compiled plugins (below), or include
individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
/*styling.css*/
/*Add a cover background picture for the featured part
with a fixed height*/
.jumbotron{
background:
url(http://freenaturestock.s3.amazonaws.com/166.jpg);
background-size: 100% 100%;
height: 600px;
}
/*style links*/
.featured .btn-default{
font-weight: bold;
color: white;
background-color: rgba(145, 82, 58, 0.5);
border-radius: 10px;
margin-top: 20px;
width: 160px;
margin-right: 15px;
}
.featured .btn-default:hover{
background-color: rgb(145, 82, 58);
}
/*style footer*/
.footer{
background-color: #eee;
font-size: 15px;
padding: 10px 0;
}
/*Add styling for devices between 480px and 768px*/
@media (min-width: 480px) and (max-width: 768px){
.jumbotron{
height: 410px;
margin: 0;
}
.logo{
width: 50px;
height: 50px;
}
.featured h1{
padding-top: 30px;
}
.featured p{
font-size: 17px;
}
.featured{
text-align: center;
}
}