Designing a Responsive Landing Page

Landing Pages are essential to delivering unique digital experiences and content to your audience. This article provides a mobile responsive landing page design and instructions on how to assemble the design using HTML5 and customize it to meet the needs of your business.

Below is the HTML, CSS, and JavaScript required to build your mobile responsive landing page.

Step 1

Add the HTML below in between your header and footer tags

<main class="terms-wrapper">
<div class="container">
<div class="landing-section">
<div class="container">
<div class="row">
<div class="col-md-7 landing-section-firstContent">
<h2 class="ct-sectionHeader--type2">
Are you Part of the App Majority? <small>It could be time to rethink your Mobile App Strategy</small>
</h2>
<div id="article-main-content2">
<div class="row">
<div class="col-lg-6 col-lg-push-6 text-center-tablet text-center">
<img alt="Mobile App Graphic" src="https://www.solodev.com/assets/landing-page/mobile-app-graphic.png">
</div>
<div class="col-lg-6 col-lg-pull-6">
<p class="ct-u-paddingBottom20">
According to digital tracking agency comScore, a key milestone called the <b>App Majority</b> was recently reached so where the majority of digital media time spent now occurs on mobile apps. With nearly 200 million Americans expected to own smartphones by 2016, it&rsquo;s clear that having a mobile strategy is no longer an option.
</p>
<p class="ct-u-paddingBottom20">
Think about it - targeting new customers and engaging existing ones on smart phones has become more important than ever. With <b>apps now driving 7 out of every 8 minutes of mobile media consumption</b>, having a mobile strategy is imperative to reaching your key audiences.
</p>
<p class="ct-u-paddingBottom30">
Download WebCorpCo's targeted whitepaper and take <b>5 minutes</b> to learn the latest in Mobile strategy and technology.
</p>
</div>
</div>
</div>
</div>
<aside class="col-md-5 mobile-app-column">
<div class="mobile-app" id="formContainer2">
<h3 class="form-title">
<center>DOWNLOAD OUR WHITEPAPER</center>
</h3>
<form name="contentForm" enctype="multipart/form-data" method="post" action="/resources/case-studies/are-you-part-of-the-app-majoritya-.stml">
<div class="formAside">
<div class="form-group">
<label for="firstName">First Name<span class="asteriks">&nbsp;*</span></label><input type="text" name="formfields[firstName]" size="" id="firstName" class="form-control validate[required]" value="">
</div>
<div class="form-group">
<label for="lastName">Last Name<span class="asteriks">&nbsp;*</span></label> <input type="text" name="formfields[lastName]" size="" id="lastName" class="form-control validate[required]" value="">
</div>
<div class="form-group">
<label for="emailAddress">Email<span class="asteriks">&nbsp;*</span></label> <input type="text" name="formfields[emailAddress]" size="" id="emailAddress" class="form-control validate[required]" value="">
</div>
<div class="form-group">
<label for="title">Title<span class="asteriks">&nbsp;*</span></label> <input type="text" name="formfields[title]" size="" id="title" class="form-control validate[required]" value="">
</div>
<div class="form-group">
<label for="companyName">Company<span class="asteriks">&nbsp;*</span></label> <input type="text" name="formfields[companyName]" size="" id="companyName" class="form-control validate[required]" value="">
</div>
<div class="form-group">
<label for="phoneNumber">Phone</label> <input type="text" name="formfields[phoneNumber]" size="" id="phoneNumber" class="form-control" value="">
</div>
<div class="text-center ct-u-paddingTop30">
<button type="submit" class="btn btn-large btn-motive">Download Now</button>
</div>
</div>
</form>
</div>
</aside>
</div>
</div>
</div>
</div>
</main>

Step 2

Add the CSS below to the main stylesheet of your website

.ct-sectionHeader--type2 {
font-family: 'Open Sans', sans-serif;
font-size: 38px;
color: #2483c3;
font-weight: 700;
padding-bottom: 30px;
margin-bottom: 30px;
margin-top: 0;
position: relative;
}
.ct-sectionHeader--type2 small {
font-family: 'Open Sans', sans-serif;
font-size: 21.17px;
padding-top: 10px;
color: #231f20;
display: block;
}
.terms-wrapper {
margin-top: 20px;
}
.ct-sectionHeader--type2:after {
content: '';
width: 100%;
max-width: 354px;
background-color: #e1e1e1;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
}
.ct-feature_list-header {
font-size: 20px;
color: #2294a2;
font-weight: 700;
font-style: italic;
padding-bottom: 15px;
font-family: 'Open Sans', sans-serif;
padding-left: 28px;
}
.ct-feature_list {
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.ct-feature_list li {
text-align: left;
}
.ct-feature_list li {
position: relative;
padding-left: 30px;
font-weight: 700;
}
.ct-feature_list li:before {
content: '';
position: absolute;
top: 50%;
margin-top: -11px;
left: 0;
width: 19px;
height: 19px;
background-image: url('../images/Check2.png');
background-repeat: no-repeat;
background-position: center;
z-index: 1;
}
.ct-feature_list li {
text-align: left;
}
.ct-feature_list li {
position: relative;
padding-left: 30px;
font-weight: 700;
}
.mobile-app-column {
background-color: #F2F5F8;
}
div.mobile-app {
border-top: 8px solid #b0d44b;
padding: 45px 0px;
}
div.mobile-app {
display: block;
width: 100%;
border-radius: 0;
padding: 0 0 0 10px;
background-color: #F2F5F8;
}
div.mobile-app .form-group label, div.form-request .form-group label {
font-size: 15.58px;
font-weight: 400;
line-height: 0.9;
font-family: 'Open Sans', sans-serif;
}
.btn.btn-motive {
cursor: pointer;
}
.btn.btn-motive {
background-color: #33a6f3;
color: #fff;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.btn.btn-large {
font-size: 25px;
font-family: 'Open Sans', sans-serif;
padding: 16px 50px;
margin-bottom: 30px;
}
.btn {
font-family: 'Open Sans', sans-serif;
font-size: 22px;
font-weight: 600;
padding: 12px 35px;
border-radius: 0;
text-transform: uppercase;
letter-spacing: -0.5px;
}
div.mobile-app .checkbox label .checkbox-box {
background-color: #252525;
border-radius: 5px;
color: white;
content: '';
display: inline-block;
float: left;
font-size: 0px;
height: 20px;
padding: 0;
position: relative;
top: 1px;
width: 20px;
}
div.mobile-app .checkbox label span {
color: #5c5d5f;
font-size: 17px;
padding-left: 10px;
position: relative;
font-family: 'Open Sans', sans-serif;
}
p {
font-family: 'Open Sans', sans-serif;
}
div.mobile-app .checkbox {
padding-top: 20px;
text-align: center;
}
.form-title {
margin-bottom: 30px;
margin-right: 30px;
margin-left: 30px;
}
.ct-u-paddingBottom30 {
margin-bottom: 30px;
}
.form-group {
margin-bottom: 30px;
margin-right: 30px;
margin-left: 30px;
}
div.mobile-app .form-group label, div.form-request .form-group label {
font-size: 15.58px;
font-weight: 400;
line-height: 0.9;
font-family: 'Open Sans', sans-serif;
}
img {
margin-bottom: 30px;
margin-top: 30px;
}

Step 3

Add the includes below to your landing page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Demo on JSFiddle

Download from GitHub

Originally Posted here on the Solodev Web Design Blog

Get daily web design tutorials in your inbox by subscribing to the Solodev Blog at solodev.com/blog/!
Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.