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
![](https://codingtorque.com/wp-content/uploads/2024/05/image-28-1024x490.png)
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💖