Nothing Special   »   [go: up one dir, main page]
Scribd Logo
Upload

Welcome to Scribd!

  • 8 views

    Index

    Uploaded by

    gonzalezfanna23
    This document describes a responsive landing page for a mobile app. It includes sections for the header, home, features, about, reviews, pricing, and contact. Each section contains descriptive text, images, and formatting to showcase the app and allow users to learn more about its features and purchase options. Navigation links are provided to easily move between the different sections of the page.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    Index

    Uploaded by

    gonzalezfanna23
    8 views7 pages
    This document describes a responsive landing page for a mobile app. It includes sections for the header, home, features, about, reviews, pricing, and contact. Each section contains descriptive text, images, and formatting to showcase the app and allow users to learn more about its features and purchase options. Navigation links are provided to easily move between the different sections of the page.

    Original Description:

    Original Title

    index

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document describes a responsive landing page for a mobile app. It includes sections for the header, home, features, about, reviews, pricing, and contact. Each section contains descriptive text, images, and formatting to showcase the app and allow users to learn more about its features and purchase options. Navigation links are provided to easily move between the different sections of the page.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    8 views7 pages

    Index

    Uploaded by

    gonzalezfanna23
    This document describes a responsive landing page for a mobile app. It includes sections for the header, home, features, about, reviews, pricing, and contact. Each section contains descriptive text, images, and formatting to showcase the app and allow users to learn more about its features and purchase options. Navigation links are provided to easily move between the different sections of the page.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    of 7

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>complete responsive app landing page website design tutorial</title>

    <!-- font awesome cdn link -->


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
    awesome/5.15.3/css/all.min.css">

    <!-- custom css file link -->


    <link rel="stylesheet" href="css/style.css">

    </head>
    <body>

    <!-- header section starts -->

    <header>

    <a href="#" class="logo"><span>best</span>App</a>

    <input type="checkbox" id="menu-bar">


    <label for="menu-bar" class="fas fa-bars"></label>

    <nav class="navbar">
    <a href="#home">home</a>
    <a href="#features">features</a>
    <a href="#about">about</a>
    <a href="#review">review</a>
    <a href="#pricing">pricing</a>
    <a href="#contact">contact</a>
    </nav>

    </header>

    <!-- header section ends -->

    <!-- home section starts -->

    <section class="home" id="home">

    <div class="content">
    <h3>best mobile app <span>showcase</span></h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus
    suscipit porro nam libero natus error consequatur sed repudiandae eos quo?</p>
    <a href="#" class="btn">download now</a>
    </div>

    <div class="image">
    <img src="images/home-img.png" alt="">
    </div>

    </section>

    <!-- home section ends -->

    <!-- features section starts -->


    <section class="features" id="features">

    <h1 class="heading"> app features </h1>

    <div class="box-container">

    <div class="box">
    <img src="images/f-icon1.png" alt="">
    <h3>amazing UI design</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam
    minus recusandae autem, repellendus fugit quaerat provident voluptatum non officiis
    ratione.</p>
    <a href="#" class="btn">read more</a>
    </div>

    <div class="box">
    <img src="images/f-icon2.png" alt="">
    <h3>soft and smooth animations</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam
    minus recusandae autem, repellendus fugit quaerat provident voluptatum non officiis
    ratione.</p>
    <a href="#" class="btn">read more</a>
    </div>

    <div class="box">
    <img src="images/f-icon3.png" alt="">
    <h3>freindly interactions</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam
    minus recusandae autem, repellendus fugit quaerat provident voluptatum non officiis
    ratione.</p>
    <a href="#" class="btn">read more</a>
    </div>

    </div>

    </section>

    <!-- features section ends -->

    <!-- about section starts -->

    <section class="about" id="about">

    <h1 class="heading"> about the app </h1>

    <div class="column">

    <div class="image">
    <img src="images/about-img.png" alt="">
    </div>

    <div class="content">
    <h3>Easy And Perfect Solution For Your Business App</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla
    placeat deserunt saepe repudiandae veniam soluta minima dolor hic aperiam iure.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Laudantium, quaerat. Dolorem ratione saepe magni quo inventore porro ab voluptates
    eos, nam eius provident accusantium, quia similique est, repellendus et
    reiciendis.</p>
    <div class="buttons">
    <a href="#" class="btn"> <i class="fab fa-apple"></i> app store
    </a>
    <a href="#" class="btn"> <i class="fab fa-google-play"></i> google-
    play </a>
    </div>
    </div>

    </div>

    </section>

    <!-- about section ends -->

    <!-- newsletter -->

    <div class="newsletter">

    <h3>Subscribe For New Features</h3>


    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sed aliquam
    quibusdam neque magni magnam est laborum doloribus, facere dolores.</p>
    <form action="">
    <input type="email" placeholder="enter your email">
    <input type="submit" value="Subscribe">
    </form>

    </div>

    <!-- review section starts -->

    <section class="review" id="review">

    <h1 class="heading"> people's review </h1>

    <div class="box-container">

    <div class="box">
    <i class="fas fa-quote-right"></i>
    <div class="user">
    <img src="images/pic1.png" alt="">
    <h3>john deo</h3>
    <div class="stars">
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    </div>
    <div class="comment">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    Possimus et, perspiciatis nisi tempore aspernatur accusantium sed distinctio
    facilis aperiam laborum autem earum repellat, commodi eum. Ullam cupiditate
    expedita officiis obcaecati?
    </div>
    </div>
    </div>

    <div class="box">
    <i class="fas fa-quote-right"></i>
    <div class="user">
    <img src="images/pic2.png" alt="">
    <h3>john deo</h3>
    <div class="stars">
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star-half-alt"></i>
    </div>
    <div class="comment">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    Possimus et, perspiciatis nisi tempore aspernatur accusantium sed distinctio
    facilis aperiam laborum autem earum repellat, commodi eum. Ullam cupiditate
    expedita officiis obcaecati?
    </div>
    </div>
    </div>

    <div class="box">
    <i class="fas fa-quote-right"></i>
    <div class="user">
    <img src="images/pic3.png" alt="">
    <h3>john deo</h3>
    <div class="stars">
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="far fa-star"></i>
    </div>
    <div class="comment">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    Possimus et, perspiciatis nisi tempore aspernatur accusantium sed distinctio
    facilis aperiam laborum autem earum repellat, commodi eum. Ullam cupiditate
    expedita officiis obcaecati?
    </div>
    </div>
    </div>

    </div>

    </section>

    <!-- review section ends -->

    <!-- pricing section starts -->

    <section class="pricing" id="pricing">

    <h1 class="heading"> Our Pricing Plans </h1>

    <div class="box-container">

    <div class="box">
    <h3 class="title">basic</h3>
    <div class="price">$10<span>/monthly</span></div>
    <ul>
    <li> <i class="fas fa-check"></i> 1000+ downloads </li>
    <li> <i class="fas fa-check"></i> No transaction fees </li>
    <li> <i class="fas fa-times"></i> unlimited storage </li>
    <li> <i class="fas fa-times"></i> 5 downloads </li>
    </ul>
    <a href="#" class="btn">check out</a>
    </div>

    <div class="box">
    <h3 class="title">standard</h3>
    <div class="price">$15<span>/monthly</span></div>
    <ul>
    <li> <i class="fas fa-check"></i> 1000+ downloads </li>
    <li> <i class="fas fa-check"></i> No transaction fees </li>
    <li> <i class="fas fa-check"></i> unlimited storage </li>
    <li> <i class="fas fa-times"></i> 5 downloads </li>
    </ul>
    <a href="#" class="btn">check out</a>
    </div>

    <div class="box">
    <h3 class="title">premium</h3>
    <div class="price">$25<span>/monthly</span></div>
    <ul>
    <li> <i class="fas fa-check"></i> 1000+ downloads </li>
    <li> <i class="fas fa-check"></i> No transaction fees </li>
    <li> <i class="fas fa-check"></i> unlimited storage </li>
    <li> <i class="fas fa-check"></i> 5 downloads </li>
    </ul>
    <a href="#" class="btn">check out</a>
    </div>

    </div>

    </section>

    <!-- pricing section ends -->

    <!-- contact section starts -->

    <section class="contact" id="contact">

    <div class="image">
    <img src="images/contact-img.png" alt="">
    </div>

    <form action="">

    <h1 class="heading">contact us</h1>

    <div class="inputBox">
    <input type="text" required>
    <label>name</label>
    </div>

    <div class="inputBox">
    <input type="email" required>
    <label>email</label>
    </div>
    <div class="inputBox">
    <input type="number" required>
    <label>phone</label>
    </div>

    <div class="inputBox">
    <textarea required name="" id="" cols="30" rows="10"></textarea>
    <label>message</label>
    </div>

    <input type="submit" class="btn" value="send message">

    </form>

    </section>

    <!-- contact section edns -->

    <!-- footer section starts -->

    <div class="footer">

    <div class="box-container">

    <div class="box">
    <h3>about us</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
    pariatur rerum consectetur architecto ad tempora blanditiis quo aliquid inventore
    a.</p>
    </div>

    <div class="box">
    <h3>quick links</h3>
    <a href="#">home</a>
    <a href="#">features</a>
    <a href="#">about</a>
    <a href="#">review</a>
    <a href="#">pricing</a>
    <a href="#">contact</a>
    </div>

    <div class="box">
    <h3>follow us</h3>
    <a href="#">facebook</a>
    <a href="#">instagram</a>
    <a href="#">pinterest</a>
    <a href="#">twitter</a>
    </div>

    <div class="box">
    <h3>contact info</h3>
    <div class="info">
    <i class="fas fa-phone"></i>
    <p> +123-456-7890 <br> +111-2222-333 </p>
    </div>
    <div class="info">
    <i class="fas fa-envelope"></i>
    <p> example@gmail.com <br> example@gmail.com </p>
    </div>
    <div class="info">
    <i class="fas fa-map-marker-alt"></i>
    <p> mumbai, india - 400104 </p>
    </div>
    </div>

    </div>

    <h1 class="credit"> &copy; copyright @ 2021 by mr. web designer </h1>

    </div>

    <!-- footer section ends -->

    </body>
    </html>

    You might also like