Develop Your App Landing Page using HTML and CSS (Source Code)

By Faraz - January 17, 2024

Learn HTML & CSS for mobile app landing pages. Step-by-step guide with source code. Create stunning designs and boost user engagement.

Join us on Telegram

Develop Your App Landing Page using HTML and CSS.jpg

Read Also Quiz Application with HTML, CSS, and JavaScript.jpg

Build a Quiz Application with HTML, CSS, and JavaScript | Step-by-Step Guide

Welcome to the world of web development! In this tutorial, we'll guide you through the process of creating your very own App Landing Page using HTML and CSS. Whether you're a beginner or someone looking to enhance your coding skills, this step-by-step guide will help you understand the basics of web development and empower you to showcase your app in a visually appealing way. So, let's dive in and start building your app's online presence!

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our landing page.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Let's break down the code:

1. <!DOCTYPE html>: This is a declaration specifying the document type and version of HTML being used. In this case, it's HTML5.

2. <html lang="en">: This is the root element of the HTML document, indicating that the content is in English (lang="en").

3. <head>: This section contains meta-information about the HTML document, such as character set, viewport settings, and the title of the page.

<meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8.
<meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag sets the X-UA-Compatible header to ensure Internet Explorer uses the latest rendering engine.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport settings for responsive design.
<title>App Landing Page</title>: Sets the title of the web page.
<link rel="stylesheet" href="styles.css">: Links an external stylesheet (styles.css) to apply styles to the HTML document.

4. <body>: The main content of the HTML document is contained within this tag.

<div class="hero">: This represents a section with a class of "hero" and contains navigation and information about an app.
<nav class="nav">: The navigation bar with links like "About," "Features," and "Support."
<div class="hero__inner">: The inner content of the hero section.
<div class="hero__info">: Information about the app, including a heading, a subheading, and download buttons for iOS and Android.
<div class="hero__mockups">: Displays mockups of the app on different devices.
Two instances of <div class="screen">: Each represents a screen mockup with a header, a question or statement, and some options or information.
Within each screen, there are nested <div> elements containing various textual content and lists.

5. <div class="more-info">: Another section below the hero section with additional information.

<div class="image">: An image related to Taylor Swift's album.
<p>: A paragraph providing information about the image and a link to a collection of UI designs inspired by Taylor Swift Album Covers.

6. </body>: Closes the body section.

7. </html>: Closes the HTML document.

This is the basic structure of our landing page using HTML, and now we can move on to styling it using CSS.

<!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.0">
    <title>App Landing Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
<div class="hero">
  <div class="container">
    <nav class="nav">
      <div class="nav__inner">
        <div class="nav__logo">SPARKS</div>
        <div class="nav__item">About</div>
        <div class="nav__item">Features</div>
        <div class="nav__item">Support</div>
      </div>
    </nav>
    <div class="hero__inner">
      <div class="hero__info">
        <h1>Let your sparks of joy <span>fly.</span></h1>
        <h2>Life tips and advice to get you going, no matter how you're feeling.</h2><img class="download" src="https://assets.codepen.io/567707/badge-ios-download.png" alt="Download Button"/><img class="download" src="https://assets.codepen.io/567707/badge-android-download.png" alt="Download Button"/>
      </div>
      <div class="hero__mockups">
        <div class="screen"><img src="https://assets.codepen.io/567707/mockup-iphone.png"/>
          <div class="screen__inner">
            <div class="screen__header logo">Sparks</div>
            <div class="screen__middle bg-red">
              <p class="question">Hi Ash, how are you today?</p>
              <ul class="choices">
                <li>Happy</li>
                <li>Optimistic</li>
                <li>Motivated</li>
                <li>Neutral</li>
                <li>Demotivated</li>
                <li>Sad</li>
                <li>Jaded</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="screen"><img src="https://assets.codepen.io/567707/mockup-iphone.png"/>
          <div class="screen__inner">
            <div class="screen__header logo">Sparks</div>
            <div class="screen__middle bg-yellow">
              <p class="question">So you are feeling sad today?</p>
              <p class="subheader">62 resources found.</p>
              <div class="bg-purple">
                <ul class="items">
                  <li>8 Quick Actions</li>
                  <li>15 Articles</li>
                  <li>25 Music Playlists</li>
                  <li>5 Podcast Episodes</li>
                  <li>9 Videos</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="more-info">
  <div class="image"><img src="https://assets.codepen.io/567707/palette-speaknow.png" alt="Taylor Swift album"/></div>
  <p>Part of the <a href="https://codepen.io/collection/XPxJmz">UI Designs inspired by Taylor Swift Album Covers</a> collection. This is <em>Speak Now (2010)</em>.</p>
</div>
</body>
</html>

Read Also Creating a Youtube Sidebar with HTML, CSS, and JavaScript.jpg

Creating a YouTube Sidebar with HTML, CSS, and JavaScript: A Step-by-Step Guide

Step 2 (CSS Code):

Once the basic HTML structure of the landing page is in place, the next step is to add styling to the website using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our landing page. Let's go through it section by section:

1. Custom Properties (:root):

The :root selector is used to define global CSS variables (custom properties).
These variables are defined with names like --maroon, --purple, etc., and assigned specific color values.

2. Body Styles (body):

Sets the background color to white (#fff).
Specifies the font family as "Sora", a cursive font.
Sets font weight to 300.
Sets the line height to 1.5.

3. Universal Box Sizing (*):

Applies box-sizing to all elements, making sure padding and border values are included in the element's total width and height.

4. Italic Emphasis (em):

Applies italic font style to the <em> (emphasis) elements.

5. Container Styles (.container):

Defines styles for a container class with a maximum width of 80rem, centered margin, and padding on the top and bottom.

6. Logo Styles (.logo):

Applies styles to elements with the class "logo," setting the font family to "McLaren," making text uppercase.

7. Navigation Styles (.nav, .nav__logo, .nav__item):

Sets margin-top for the navigation.
Defines styles for navigation logo, items, and hover effects.

8. Hero Section Styles (.hero, .hero__info, .hero__mockups, .hero .download):

Defines styles for the hero section, including background image, padding, and minimum height.
Styles for download button with hover effect.
Responsive adjustments using media queries for larger screens.

9. Screen Styles (.screen, .screen__inner, .screen img, .screen__header, .screen__middle):

Styles for screen elements, including size, positioning, and backgrounds.
Applies a gradient background to the <h1> element.

10. Heading Styles (h1, h2):

Custom styles for h1 and h2 headings, including font family, color, and size.
Background image for a span element within an h1.

11. Background Color Classes (.bg-red, .bg-purple, .bg-yellow):

Sets background colors for specific elements.

12. Question and Subheader Styles (.question, .subheader):

Styles for question and subheader elements, including font size, weight, and margins.

13. Choices Styles (.choices, .choices li):

Styles for a list of choices, setting background colors for individual list items.

14. Items Styles (.items, .items li):

Styles for a list of items with a maroon background and yellow-lighter text.

15. More Info Section Styles (.more-info, .more-info a, .more-info .image, .more-info p):

Defines styles for a section with additional information, including a flex container layout and specific styling for links, images, and paragraphs.

This will give our landing page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

:root {
  --maroon: #a83874;
  --purple: #7e3a77;
  --purple-dark: #3f284e;
  --black: #001524;
  --gray: #e7eaee;
  --yellow-lighter: #fdf1cd;
  --yellow-light: #f0d88f;
  --yellow: #f8c630;
  --orange: #e67e49;
  --orange-red: #dd5a56;
  --red: #d43562;
}

body {
  background: #fff;
  font-family: "Sora", cursive;
  font-weight: 300;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

em {
  font-style: italic;
}

.container {
  max-width: 80rem;
  margin: auto;
  padding: 1.2rem 0;
}

.logo {
  font-family: "McLaren", cursive;
  text-transform: uppercase;
}

.nav {
  margin-top: 2rem;
}
.nav__logo {
  font-family: "McLaren", cursive;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  color: var(--yellow);
  background: var(--purple);
  display: inline-block;
  padding: 0.3rem 1.2rem;
  margin: 0 1rem;
}
.nav__item {
  display: inline-block;
  font-size: 1.3rem;
  margin: 0 0.5rem;
  color: #f8ecc9;
  cursor: pointer;
}
.nav__item:hover {
  text-decoration: underline;
}

.hero {
  background: url("https://assets.codepen.io/567707/illustration-mountains.jpg") center center/cover;
  padding: 2rem;
  min-height: 100vh;
}
.hero .download {
  margin: 0.6rem;
  width: 80%;
  max-width: 14rem;
  cursor: pointer;
  position: relative;
  top: 0;
  transition: 0.3s ease;
}
.hero .download:hover {
  top: -4px;
}
@media (min-width: 800px) {
  .hero {
    padding: 0 5rem;
  }
}
@media (min-width: 1024px) {
  .hero__inner {
    display: flex;
  }
}
.hero__info {
  line-height: 1.5;
  flex: 1;
  padding-top: 5rem;
  text-align: center;
}
@media (min-width: 1024px) {
  .hero__info {
    padding-right: 3rem;
    text-align: left;
  }
}
.hero__mockups {
  flex: 1;
  position: relative;
  padding-top: 2rem;
  padding-bottom: 3rem;
}
@media (min-width: 1024px) {
  .hero__mockups {
    transform: translate(1.5rem, -2rem);
  }
}

.screen {
  width: 20rem;
  margin: 2rem;
  position: relative;
}
.screen:nth-child(2) {
  position: absolute;
  top: 2rem;
  right: 0;
  z-index: 20;
}
@media (max-width: 740px) {
  .screen:nth-child(2) {
    top: 10%;
  }
}
@media (min-width: 1024px) {
  .screen:nth-child(2) {
    top: 10%;
  }
}
.screen__inner {
  background: white;
  position: absolute;
  width: 90%;
  height: 80%;
  top: 10%;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0.6rem 0.7rem;
}
.screen img {
  position: relative;
  width: 100%;
  z-index: 1;
}
.screen__header {
  background: var(--purple);
  color: var(--yellow-light);
  text-align: center;
  padding: 0.5rem 0.2rem 0.15rem;
}
.screen__middle {
  padding: 0.1rem 0 0;
  color: var(--black);
  position: relative;
}

h1 {
  color: var(--yellow-lighter);
  font-family: "Homemade Apple";
  font-size: clamp(2.5rem, 4vw, 4rem);
  margin: 1rem;
}
h1 span {
  background-repeat: no-repeat;
  background-position: 100% 80%;
  background-size: 80%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 126.24 17.71'%3E%3Cpath d='M76.41.07c11,.32,22.06.71,33.07,1.68,5.33.47,9.92,2.61,14.48,5,1.74.92,2.64,3.69,2.14,5.61-.27,1-1,1.31-1.93,1.65-4.58,1.69-9.25,1.76-14,1.32C94.59,14,79,12.93,63.42,12.76a297.76,297.76,0,0,0-51.74,3.71c-2.1.35-4.18.78-6.27,1.15a4.2,4.2,0,0,1-4.71-2c-1.16-1.89-.91-3.45.94-4.71a28.39,28.39,0,0,1,6.59-3c7.76-2.78,15.84-4.17,24-5.41C46.84.23,61.61-.19,76.41.07Z' style='fill: %23fdf1cd;'/%3E%3C/svg%3E");
}

h2 {
  color: var(--yellow-light);
  font-weight: 600;
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 1.3;
  margin: 3rem 1rem 2.5rem;
}

.bg-red {
  background: var(--red);
}

.bg-purple {
  background: var(--purple-dark);
}

.bg-yellow {
  background: #f6ca43;
}
.bg-yellow .question {
  color: var(--purple-dark);
}

.question {
  color: var(--yellow-lighter);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
  margin: 1.5rem 2rem 1.5rem;
}

.subheader {
  margin: -0.3rem 2rem 3rem;
  line-height: 1.2;
}

.choices {
  font-size: 1.2rem;
  list-style: none;
}
.choices li {
  padding: 0.8rem 2rem;
}
.choices li:nth-child(1) {
  background: var(--yellow-light);
}
.choices li:nth-child(2) {
  background: #f2d47c;
}
.choices li:nth-child(3) {
  background: #f3d169;
}
.choices li:nth-child(4) {
  background: #f5cd56;
}
.choices li:nth-child(5) {
  background: #f6ca43;
}
.choices li:nth-child(6) {
  background: #f8c630;
}
.choices li:nth-child(7) {
  background: #f7c326;
}

.items {
  margin: 0 2rem 1.5rem;
  transform: translateY(-1.5rem);
}
.items li {
  margin: 0.8rem 0;
  background: var(--maroon);
  color: var(--yellow-lighter);
  line-height: 1.1;
  padding: 0.8rem 0.8rem;
}

.more-info {
  display: flex;
  align-items: center;
  background: var(--yellow-lighter);
  color: var(--maroon);
}
.more-info a {
  color: var(--maroon);
}
.more-info .image {
  flex: 0 0 30%;
  max-width: 10rem;
  line-height: 0;
}
.more-info .image img {
  width: 100%;
}
.more-info p {
  flex: 1;
  padding: 0 1.5rem;
}

Final Output:

Develop Your App Landing Page using HTML and CSS.gif

Read Also creating stunning neubrutalism cards with html and css.jpg

Creating Stunning Neubrutalism Cards with HTML and CSS

Conclusion:

Congratulations! You've successfully crafted your App Landing Page using HTML and CSS. Through this journey, you've learned essential skills in web development, allowing you to present your app to the world professionally and engagingly. Remember, the world of coding is vast, and there's always more to explore. Keep practicing, experimenting, and refining your skills. Your newly acquired knowledge will serve as a solid foundation for future web projects. Best of luck, and happy coding!

Code by: Olivia Ng

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: app landing page, html, css, source code, web development, mobile app, responsive design, user interface, code optimization, cross-browser compatibility, mobile optimization, call to action

End of the article

Latest Post

Creating a Responsive Bootstrap Dashboard: Source Code Included

by Faraz - May 14, 2024

Learn how to design, customize, and implement interactive Bootstrap dashboards with our comprehensive guide. Source code included for easy development.