Apple Watch Landing Page using HTML and CSS

Share your love

Creating a landing page that captures the elegance and innovation of the Apple Watch requires attention to detail and a sleek design. A well-crafted landing page can showcase the features and aesthetics of the product, enticing visitors to learn more and make a purchase.

In this blog post, we’ll walk you through the steps to design an Apple Watch landing page using HTML and CSS. We’ll focus on creating a clean and modern layout that highlights the key features of the Apple Watch, complete with stunning visuals and responsive design.

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

See the Pen Apple Product Landing Page by isurojit (@isurojit) on CodePen.

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Apple Watch Landing Page using HTML and CSS - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your <body> tag.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple iwatch</title>
    <link rel="icon" href="https://i.ibb.co/6tX379h/favicon.jpg" type="image/gif" sizes="16x16"> 
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&family=Heebo:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<div id="page-wraper">
    <header id="header">
        <nav id="nav-bar">
            <ul>
            <li><a href="#email" class="nav-link">Pre-Book</a></li>
            <li><a href="#product-block" class="nav-link">Pricing</a></li>
            <li><a href="#video" class="nav-link">Launch</a></li>    
            <li><a href="#water-container" class="nav-link">Features</a></li>
            </ul>
        </nav>
        <a href="https://www.apple.com/watch/" target="_blank">
            <img id="header-img" src="https://i.ibb.co/vHp0qK0/icon.jpg" alt="apple logo">
        </a>
    </header>
    <div id="main-img">
        <img id="m-img" src="https://i.ibb.co/hmLwZLD/mainimg.jpg" alt="Apple watches">
    </div>
    <div class="intro">
        <h4>Introducting<img src="https://i.ibb.co/vHp0qK0/icon.jpg" alt="Apple" id="appiwatch"> Watch Serise 5 </h4>
    </div>
    
    <div id="water-container"> 
        <div class="waterbox-1">
            <img src="https://i.ibb.co/D5NSFgw/water.jpg" alt="iwatch waterproof">
        </div>
        <div class="waterbox-2">
            <h1>Wear Your Watch In Rain </h1>
            <h4>Apple serise 5 watches comes with 50mm water resistance support.
                <br>Means more fun in water without worring.
                Its durable silicon coating keeps water away from iWatchs. 
            </h4>
        </div>
        <div class="waterbox"></div>
    </div>

    <div id="display-container">
        <div class="display"></div>
        <div class="display-1">
            <h1>Super OLED Display</h1>
            <h4>The display on the Apple Watch rises to the challenge with an excellent state-of-the-art Flexible OLED display covered by a sapphire crystal, or by an Ion-X strengthened cover glass for the Sport model</h4>
        </div>
        <div class="display-2">
            <img src="https://i.ibb.co/10rkZKt/display.jpg" alt="Amoled Display">
        </div>
    </div>

    <div id="process-container">
        <div class="process"></div>
        <div class="process-2">
            <h1>Dual-Core Processor</h1>
            <h4>Apple Watch Series 5 comes with 64-bit dual-core S5 processor, that is up to 2x faster than S4 processor.</h4>
        </div>
        <div class="process-1">
            <img src="https://i.ibb.co/xschbZB/processor.jpg" alt="processor">
        </div>
    </div>

    <section id="launch">
        <div id="headlaunch">
            <h1>Ready For Future?</h1>
        </div>
        <video id="video" width="768" height="650" controls>
            <source src="https://www.apple.com/105/media/us/apple-watch-series-5/2019/a3cf23d2_ce87_47f5_9668_f6c325b9bb65/films/reveal/aws5-reveal-tpl-cc-us-2019_1280x720h.mp4" type="video/mp4">
            <source src="https://www.apple.com/105/media/us/apple-watch-series-5/2019/a3cf23d2_ce87_47f5_9668_f6c325b9bb65/films/reveal/aws5-reveal-tpl-cc-us-2019_1280x720h.mp4" type="video/ogg">
         Your browser does not support the video tag.
        </video> 
    </section>
    <div id="product-block">
        <h1>Products</h1>
    </div>
    <div id="product-contain">
        <div class="grey">
            <a href="https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT52LL/A&option.watch_bands=MXMW2AM/A&preSelect=false&product=Z0YQ&step=detail" target="_blank"><img id="space" src="https://i.ibb.co/Fx4gHXq/spacegrey.jpg" alt="space grey apple watch"></a>
            <div class="grey-note">
                <h2>Space Gray Aluminum Case <br> with Sport Loop</h2>
                <h3 id="threenine">From $399</h3>
                <button id="space-button"><a href="https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT52LL/A&option.watch_bands=MXMW2AM/A&preSelect=false&product=Z0YQ&step=detail" target="_blank">Know More</a></button>
            </div>
        </div>
        <div class="nikes">
            <a href="https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT62LL/A&option.watch_bands=MX812AM/A&preSelect=false&product=Z0YQ&step=detail" target="_blank"><img id="nike" src="https://i.ibb.co/k3gjT9j/nike.jpg" alt="nike apple watch"></a>
            <div class="nike-note">
                <h2>Silver Aluminum Case <br> with Nike Sport Loop</h2>
                <h3 id="three-nike">From $399</h3>
                <button id="nike-button"><a href="https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT62LL/A&option.watch_bands=MX812AM/A&preSelect=false&product=Z0YQ&step=detail" target="_blank">Know More</a></button>
            </div>
        </div>
        <div class="herm">
            <a href="https://www.apple.com/shop/buy-watch/apple-watch/44mm-cellular-silver-stainless-steel-fauvebarenia-single-tour-deployment-buckle-onesize" target="_blank"><img id="hermes" src="https://i.ibb.co/nzczsHk/hermes.jpg" alt="hermes apple watch"></a>
            <div class="hermes-note">
                <h2 id="steel-case">Stainless Steel Case <br> with Single Tour Buckle</h2>
                <h3 id="forteen-nine">From $1499</h3>
                <button id="hermes-button"><a href="https://www.apple.com/shop/buy-watch/apple-watch/44mm-cellular-silver-stainless-steel-fauvebarenia-single-tour-deployment-buckle-onesize" target="_blank">Know More</a></button>
            </div>
        </div>
    </div>
    <section id="hero">
        <h1>Wanna Pre-Order?</h1>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input
            name="email"
            id="email"
            type="email"
            placeholder="Enter your email address"
            required
          /><br>
          <input id="submit" type="submit" value="Pre-Order" class="btn" />
        </form>
      </section>
</div>  
<footer id="footer">
    <p class="foot1">All copyrights reseved by <a id="footlink" href="https://www.apple.com/" target="_blank">Apple</a></p>
    <p class="foot2">For educational-created by <a id="footlink" href="https://www.linkedin.com/in/surojit-manna" target="_blank">iSURO</a></p>
</footer>  
</body>
</html>

CSS Code 

Create a file style.css and paste the code below.

body {
    color: white;
    background-repeat: no-repeat;
    background-color: black;
    font-family: 'Baloo Tammudu 2', cursive;
}

#header {
    width: 100%;
    height: 50px;
    background-color: black;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    color: white;
    text-decoration: none;
}

li {
    display: inline;
    padding: .7%;
    float: right;
    font-size: medium;
}

li a:hover {
    background-color: white;
    color: black;
    border-radius: 12px 0px 12px 0px;
    text-decoration: underline;
}

#main-img {
    text-align: center;
    transform: translateY(10%);
}

#m-img {
    max-width: 100%;
    height: auto;
    padding-left: 23%;
}

.intro {
    text-align: center;
    margin-top: 8%;
}

#appiwatch {
    width: 30px;
    height: 30px;
    padding-left: 1%;
    transform: translateY(20%);
}

.intro {
    transform: translateY(-140%);
}

#water-container {
    display: flex;
    margin-bottom: 3%;
}

.waterbox {
    border: 20px solid black;
    flex: 1;
}

.waterbox-1 {
    flex: 1;
    padding: 0% 5% 0% 5%;
}

.waterbox-2 {
    flex: 3;
    line-height: 1.5;
    padding: 0% 0% 0% 5.5%;
}

#display-container {
    display: flex;
    margin-bottom: 3%;
}

.display {
    flex: 1;
    border: 20px solid black;
}

.display-1 {
    flex: 2;
    padding-left: 10%;
    line-height: 1.5;
}

.display-2 {
    flex: 1;
    padding: 0% 0% 0% 5%;
}

#process-container {
    display: flex;
    margin-bottom: 3%;
}

.process {
    flex: 1;
    border: 10px solid black;
    order: 3;
}

.process-1 {
    flex: 1;
    order: 1;
}

.process-2 {
    flex: 1;
    order: 2;
    line-height: 1.5;
}

#launch {
    text-align: center;
    margin-bottom: 5%;
}

#headlaunch {
    font-size: x-large;
    text-decoration: underline;
    padding-top: 10%;
}

#video {
    width: 100% !important;
    height: auto !important;
}

#product-block {
    text-align: center;
    padding: 3%;
    font-size: x-large;
    text-decoration: underline;
}

#product-contain {
    display: flex;
    justify-content: space-between;
    padding: 3%;
}

.grey-note {
    text-align: center;
    line-height: 1.5;
}

button {
    width: 40%;
    height: 50px;
    font-family: 'Baloo Tammudu 2', cursive;
    font-size: larger;
    font-weight: 550;
    background-color: black;
    color: white;
    border: 5px solid black;
    transform: translateY(-25%);
}

button:hover {
    width: 40%;
    height: 50px;
    font-family: 'Baloo Tammudu 2', cursive;
    font-size: larger;
    font-weight: 550;
    background-color: white;
    color: black;
    border: 5px solid black;
}

#threenine {
    transform: translateY(-55%);
    text-decoration: underline;
}

a {
    text-decoration: none;
    color: white;
}

a:hover {
    color: black;
}

.nike-note {
    text-align: center;
    line-height: 1.5;
}

#three-nike {
    transform: translateY(-55%);
    text-decoration: underline;
}

#hermes-note {
    text-align: center;
    line-height: 1.5;
}

#forteen-nine {
    transform: translateY(-55%);
    padding-left: 30%;
    text-decoration: underline;
}

#steel-case {
    line-height: 1.5;
}

#hermes-button {
    transform: translateY(-55%);
    position: relative;
    left: 27%;
}

#hero {
    text-align: center;
    font-size: xx-large;
    text-decoration: underline;
}

#email {
    width: 40%;
    height: 5px;
    border-radius: 25px;
    border: 2px solid white;
    padding: 18px;
    transform: translateY(-125%);
    font-size: large;
}

#submit {
    font-size: 25px;
    font-family: 'Baloo Tammudu 2', cursive;
    height: 45px;
    border-radius: 25px;
    transform: translateY(-125%);
    border: 2px solid white;
    color: white;
    background-color: black;
}

#submit:hover {
    color: black;
    background-color: white;
}

#footer {
    display: flex;
}

.foot1 {
    flex: 1;
}

.foot1:hover {
    color: red;
}

#footlink:hover {
    background-color: white;
    border-radius: 25px;
    padding: 2px;
}

.foot2 {
    flex: 1;
    text-align: right;
}

.foot2:hover {
    color: red;
}

#steel-case {
    text-align: center;
}


/*For Mobile*/

@media only screen and (min-device-width: 360px) and (max-device-width: 600px) {
    #m-img {
        transform: translateY(25%);
        position: relative;
        right: 23%;
    }
    .intro {
        text-align: center;
        margin-top: 38%;
    }
    #header {
        width: 100%;
        height: 50px;
        background-color: black;
    }
    li {
        transform: translateX(-10%);
        padding: 2%;
        text-align: left;
        font-size: medium;
    }
    #water-container {
        display: block;
    }
    .waterbox-1 {
        text-align: center;
    }
    #display-container {
        display: block;
    }
    .display-2 {
        text-align: center;
    }
    #process-container {
        display: block;
    }
    #headlaunch {
        font-size: large;
    }
    #video {
        width: auto;
        height: auto;
    }
    #product-block {
        font-size: large;
    }
    #product-contain {
        display: block;
    }
    #steel-case {
        text-align: center;
    }
    #hero {
        font-size: x-large;
    }
    #space {
        transform: translateX(8%);
    }
    #nike {
        transform: translateX(8%);
    }
    #hermes {
        transform: translateX(8%);
    }
    #email {
        width: 60%;
        margin-top: 5%;
    }
    #submit {
        font-size: 20px;
        height: 35px;
        border-radius: 25px;
    }
    #footer {
        font-size: x-small;
    }
}


/*For Tablet*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    #nav-bar {
        transform: translateX(-8%);
    }
    #product-contain {
        padding: 0;
        flex-wrap: wrap;
    }
    #main-img {
        transform: translateX(-11%);
    }
    .herm {
        transform: translateX(75%);
    }
}

Final Output

Written by: Piyush Patil

Code Credits: https://codepen.io/isurojit/pen/JjYEBdG

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Share your love

Related Posts