Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Designing a Responsive Landing Page

Beautifully crafted landing pages are essential to delivering unique digital experiences to your audience...

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’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">
              <h2 class="form-title text-center">DOWNLOAD OUR WHITEPAPER</h2>
              <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">

Download from Github

Share on Facebook Tweet It

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev