Scribd
Upload
183 views6 pages

App Landing Page Source Code

The document contains the code for an app landing page. It includes HTML markup for the page structure and CSS styling. The page features a header section with the app logo and description, a call to action to download the app, and links to download the app on mobile app stores. It is responsive for different screen sizes using CSS media queries.

Uploaded by

malik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
183 views6 pages

App Landing Page Source Code

The document contains the code for an app landing page. It includes HTML markup for the page structure and CSS styling. The page features a header section with the app logo and description, a call to action to download the app, and links to download the app on mobile app stores. It is responsive for different screen sizes using CSS media queries.

Uploaded by

malik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

<!--index.

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>

<!-- Bootstrap -->


<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="styling.css" rel="stylesheet">

</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 the trial section-->


<div class="trial">
<div class="container">
<h2>Try it now</h2>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/
5/5d/Available_on_the_App_Store_%28black%29.png/799px-
Available_on_the_App_Store_%28black%29.png">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/
c/cd/Get_it_on_Google_play.svg/170px-
Get_it_on_Google_play.svg.png">
</div>
</div>

<!--create a footer-->
<div class="footer">
<div class="container">
<p>&copy; 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;
}

/*set the size of the logo*/


.logo{
width: 75px;
height: 75px;
}

/*set text color of featured content*/


.featured{
color: #fff;
}

/*create space between the title and the logo*/


.featured h1{
padding-top: 60px;
}

/*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);
}

/*center align elements in the trial section and add


padding*/
.trial{
text-align: center;
padding: 20px 0 40px 0;
color: black;
}

/*set size of images and add space between them*/


.trial img{
width: 200px;
height: 70px;
margin: 20px;
}

/*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;
}
}

/*Add styling for devices under 480px*/


@media (max-width: 480px){
.jumbotron{
height: 410px;
margin: 0;
}
.logo{
width: 40px;
height: 40px;
}
.featured h1{
padding-top: 10px;
}
.featured p, .featured a{
font-size: 13px;
}
.featured{
text-align: center;
}
.trial img{
width: 100px;
height: 35px;
margin: 10px;
}
}

You might also like