Learn how to create a compelling mobile product landing page using HTML, CSS, and JavaScript. Boost user engagement and conversions.
Table of Contents
In the rapidly evolving digital landscape, where mobile devices have become an integral part of our lives, the importance of creating a captivating mobile product landing page cannot be overstated. As consumers increasingly turn to their smartphones and tablets for everything from shopping to information-gathering, businesses must adapt and provide an optimal user experience. This comprehensive guide aims to equip you with the knowledge and skills needed to design, develop, and optimize a mobile product landing page that not only meets these evolving expectations but exceeds them.
A mobile product landing page serves as a virtual storefront, a gateway that connects potential customers to your product or service. It's not just about aesthetics; it's about functionality, user engagement, and conversions. A well-crafted mobile landing page can make the difference between a visitor bouncing away or becoming a loyal customer.
Throughout this guide, we'll walk you through the step-by-step process of creating a mobile product landing page using the powerful trio of HTML, CSS, and JavaScript. From the initial planning stages to the final touches of optimization, each aspect of the journey will be covered in detail. Whether you're a seasoned web developer looking to enhance your skills or a business owner aiming to create a strong online presence, this guide is designed to provide valuable insights, practical tips, and best practices to ensure your success.
In the upcoming sections, we'll delve into essential topics such as defining the goals of your landing page, understanding your target audience, crafting compelling calls-to-action, and optimizing for higher conversion rates. We'll explore the art of creating responsive designs that seamlessly adapt to various screen sizes, ensuring that your landing page looks and functions flawlessly on smartphones, tablets, and desktops alike. Additionally, we'll dive into the world of interactivity, learning how to leverage JavaScript to create engaging elements that capture and retain users' attention.
So, whether you're a newcomer to the world of web development or an experienced coder, get ready to embark on a journey that will empower you to create mobile product landing pages that leave a lasting impression. Let's begin the exciting process of turning your digital visions into reality, step by step.
Code by: Ahmed
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 product 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 structure and elements of this HTML code:
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used.
2. <html lang="en">: The opening <html> tag indicates the start of the HTML document. The lang attribute specifies the language of the content as English.
3. <head>: The <head> section contains metadata about the webpage, including the title, character encoding, viewport settings, and links to external resources like stylesheets and scripts.
- <title>: Sets the title of the webpage shown in the browser tab.
- <meta charset="UTF-8">: Specifies the character encoding of the document as UTF-8, which supports a wide range of characters.
- <meta name="viewport" content="width=device-width">: Defines the viewport settings for responsive design on various devices.
- <link rel="stylesheet" href="styles.css">: Links an external CSS stylesheet file named "styles.css" for styling the webpage.
4. <body>: The <body> tag contains the main content of the webpage.
- <header>: Defines the header section of the webpage, which includes the OnePlus logo, product name ("OnePlus 6"), user details icons, navigation menu, and a "Buy now" button.
- <main>: Contains the main content of the page, including various sections about the product, each represented by a <div> element with a specific class. The sections include details about the product's speed, display, camera, design, OxygenOS (the operating system), water resistance, and wireless headphones.
- <footer>: Represents the footer section of the webpage, containing a newsletter subscription form and social media links. It also includes contact information, copyright notice, and links to privacy policy, user agreement, and terms of sales.
- <a href="https://github.com/AhmedAGadir" target="_blank">: An anchor element that creates a link to the author's GitHub profile.
- <script src="script.js"></script>: Links an external JavaScript file named "script.js" for adding interactivity to the webpage.
5. Within the <main> section, each <div> with a class like "block one", "block two", etc., represents a different product feature section. Each section includes a title, a description, and sometimes an image or video related to the feature.
6. <iframe>: Embedded YouTube video frames allow users to watch videos directly on the page when clicked.
7. <form>: Represents a newsletter subscription form that users can fill out.
8. Font Awesome Icons (e.g., <i class="fa fa-user">): These icons are used for visual enhancement, representing user details, shopping bags, cameras, play buttons, social media icons, etc.
9. Various <img> tags: These tags display images of the OnePlus phone and its features.
This is the basic structure of our mobile product landing page using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the mobile product landing page is in place, the next step is to add styling to the landing pag using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our landing pag.
Let's break down the code section by section:
1. @import: This rule is used to import an external font from Google Fonts. The imported fonts are "Comfortaa" and different styles of "Open Sans".
2. * Selector: This targets all elements on the page and sets some initial styling:
- Removes padding and margin.
- Makes sure the box model includes borders and padding.
- Sets the font-family to 'Open Sans', sans-serif for all elements.
3. a Selector: This styles links (anchor tags):
- Removes the underline (text-decoration) from links.
- Makes the text color the same as the parent element's color.
4. header: This styles the header section of the webpage:
- Sets width, padding, border, and background color.
- Makes it fixed at the top of the viewport.
- Adds a transition effect for smooth changes.
- Uses flexbox to align items within the header.
- Defines styling for different screen sizes using media queries.
5. nav: This styles the navigation section of the webpage:
- Sets padding and width.
- Uses flexbox to align items horizontally.
- Defines styling for different screen sizes using media queries.
6. nav li a: This styles the navigation links within an unordered list:
- Adds margin and padding.
- Sets color and typography.
7. nav button: This styles buttons within the navigation section:
- Removes default styling.
- Sets width, height, background color, font size, and other properties.
- Defines a hover effect and uses animations for button width changes.
8. main: This styles the main content section of the webpage:
- Sets text alignment.
9. .block: This styles various blocks within the content:
- Adds padding and other styling.
10. main > img: This targets images within the main content section:
- Sets display, margin, and other properties.
11. .two: This styles a specific block with a skew effect:
- Uses the skew transformation to create a unique shape.
- Sets a background image and uses hover effects.
12. #modal: This styles a modal overlay for displaying videos:
- Sets position, background color, width, and height.
- Uses transitions for animations.
- Hides the modal by default.
13. footer: This styles the footer section of the webpage:
- Adds a border at the top and defines a flex layout.
- Defines styling for contact and bottom sections within the footer.
14. .contact form: This styles the form within the contact section:
- Sets input box styles.
15. .contact button: This styles buttons within the contact section:
- Defines button width, height, background color, and more.
- Uses a pseudo-element for a background effect.
16. .contact .social-media i: This styles social media icons in the contact section:
- Defines font size, padding, color, and hover effects.
17. .bottom: This styles the bottom section of the footer:
- Sets background color and padding.
18. img[alt="link to my github"]: This styles a GitHub logo image:
- Sets its position, size, and opacity.
- Defines a hover effect to increase opacity.
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.
@import url('https://fonts.googleapis.com/css?family=Comfortaa|Open+Sans:300,400,600,700');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* ========== header and navbar styling =========*/
header {
width: 100%;
padding: 10px 40px;
border-bottom: 1px solid #E5E5E5;
background-color: white;
position: fixed;
top: 0;
transition: all 0.25s ease;
z-index: 3;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
}
header img {
height: 30px;
}
@media (max-width: 330px) {
header img {
display: none;
}
}
header h1 {
font-size: 1.1rem;
font-weight: 600;
color: #101920;
margin-left: 185px;
}
@media (max-width: 600px) {
h1 {
display: none;
}
}
header .user-details span {
margin-left: 20px;
font-size: 1.2rem;
color: #828282;
padding: 0 15px 10px 15px;
}
header .user-details span:hover {
color: #101920;
border-bottom: 2px solid #101920;
cursor: pointer;
}
nav {
padding: 15px 15px 0 15px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
}
@media (max-width: 600px) {
nav ul {
margin: unset;
display: unset;
position: relative;
right: 30px;
}
}
nav li {
list-style-type: none;
}
nav li a {
margin: 0 15px;
padding: 10px 5px 15px 5px;
color: #828282;
text-transform: uppercase;
letter-spacing: 0.05rem;
font-size: 0.8rem;
}
nav li a:hover {
color: #EB0028;
border-bottom: 2px solid #EB0028;
}
nav button {
/*remove default styling*/
/*outline: none;*/
border: none;
box-shadow: none;
min-width: 110px;
height: 50px;
background: #EB0028;
color: white;
font-size: 0.9rem;
border-radius: 2px;
position: relative;
z-index: 1;
}
nav button span {
position: absolute;
top: 0;
left: 0;
border-radius: 2px;
background: #CE0024;
height: 100%;
z-index: -1;
/*javascript used for animation-name setting*/
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
nav button:hover {
cursor: pointer;
}
@keyframes buttonEffect {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
@keyframes buttonEffectRemoval {
0% {
width: 100%;
}
100% {
width: 0px;
}
}
@media (max-width: 1000px) {
nav li a {
padding-bottom: 0px;
}
}
/* ========== main body styling =========*/
main {
text-align: center;
}
.block {
padding: 50px;
padding-top: 50px;
}
@media (max-width: 780px) {
.block:not(.one):not(.two) {
text-align: left;
}
.d4 {
text-align: center;
}
}
.d1:nth-of-type(odd), .d2:nth-of-type(odd) {
background: linear-gradient(to right, #cda330, #73622a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.d1:nth-of-type(even), .d2:nth-of-type(even) {
background: linear-gradient(to right, #762FC4 ,black 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.d1 {
font-family: 'Comfortaa', cursive;
font-size: 1.5rem;
font-weight: 700;
margin-top: 30px;
}
.d2 {
font-family: 'Comfortaa', cursive;
font-size: 3.5rem;
font-weight: 700;
padding: 13px 0;
}
.d3 {
font-size: 1.2rem;
color: #676767;
}
.d4 {
margin: 40px auto;
width: 135px;
font-size: 1.3rem;
padding: 0 10px;
border-bottom: 2px solid #101920;
transition: 0.2s all ease-in;
position: relative;
z-index: 2;
}
.d4:hover {
width: 150px;
color: #EB0028;
padding: 0 10px;
border-bottom: 2px solid #EB0028;
}
.one .d2:first-child {
margin-top: 200px;
padding-bottom: 0;
font-size: 3.5rem;
font-weight: 400;
-webkit-text-fill-color: black;
}
.one .d2:nth-child(2) {
font-size: 4rem;
font-weight: 600;
-webkit-text-fill-color: black;
}
.one .d3 {
font-size: 2.5rem;
font-weight: 400;
margin-bottom: 20vh;
}
/* ========== images ========= */
main > img {
display: block;
margin: 60px auto;
}
img[alt="phone1"] {
width: 40%;
}
/* */
.two {
position: relative;
top: -20vh;
padding: 0;
display: flex;
height: 65vh;
transform-origin: left;
transform: skewY(-3.5deg);
overflow: hidden;
}
.two .fa-play {
font-size: 2rem;
color: white;
margin-top: 30vh;
transition: all 0.5s ease
}
.two > button > img {
width: 50vw;
visibility: hidden;
}
.two button {
/*remove default styling*/
/*outline: none;*/
border: none;
box-shadow: none;
transform: skewY(3.5deg);
transform-origin: right;
height: 100vh;
transition: all 0.5s ease;
}
.two > button:first-child {
background: url('https://res.cloudinary.com/ahmedagadir/image/upload/v1530726627/product-landing-page/block2a.jpg');
background-size: 50vw;
background-position: left 5vh;
background-attachment: fixed;
background-repeat: no-repeat;
}
.two > button:last-child {
background: url('https://res.cloudinary.com/ahmedagadir/image/upload/v1530726630/product-landing-page/block2b.jpg');
background-size: 50vw;
background-position: right 5vh;
background-attachment: fixed;
background-repeat: no-repeat;
}
.two button:hover {
background-blend-mode: hard-light;
cursor: pointer;
}
.two button:first-child:hover {
background-color: #8974C2;
}
.two button:last-child:hover {
background-color: #C6B27B;
}
@media (max-width: 900px) {
.two > button:first-child,
.two > button:last-child {
background-size: 80vw;
}
}
@media (max-width: 500px) {
.two > button:first-child,
.two > button:last-child {
background-size: 130vw;
}
}
/* ========== modal styling =========*/
#modal {
position: fixed;
background-color: rgba(0,0,0,1);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
transition: all 0.5s ease;
opacity: 0;
display: none;
}
#modal span {
font-size: 40px;
color: white;
float: right;
padding: 10px 20px 0 20px;
display: none;
transition: all 0.3s ease;
cursor: pointer;
}
#modal span:hover {
color: #EB0028;
}
#modal .video-wrapper {
clear: right;
position: relative;
padding-bottom: 56.25%;
height: 0;
display: none;
}
#modal iframe {
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 70%;
margin-left: 15vw;
}
/* ========== more images =========*/
img[alt="phone3"] {
width: 80%;
}
#block4 img[alt="phone4"],
#block5 img[alt="phone5"],
#block6 img[alt="phone6"],
#block8 img[alt="phone8"],
#block9 img[alt="phone9"] {
width: 50%;
visibility: hidden;
height: 120vh;
}
#block4 {
background: url('https://res.cloudinary.com/ahmedagadir/image/upload/v1530726612/product-landing-page/block4.png');
background-size: 80vh;
background-attachment: scroll;
background-position: center 25vh;
z-index: 1;
}
#block5 {
background: url('https://res.cloudinary.com/ahmedagadir/image/upload/v1530726621/product-landing-page/block5.png');
background-size: 80vh;
background-attachment: scroll;
background-position: center 25vh;
z-index: 1;
}
#block6 {
background: url('https://res.cloudinary.com/ahmedagadir/image/upload/v1530726605/product-landing-page/block6.jpg');
background-size: 100vw;
background-attachment: fixed;
background-position-y: -10vh;
}
#block8 {
background: url('https://res.cloudinary.com/ahmedagadir/image/upload/v1530726620/product-landing-page/block8.jpg');
background-size: 120vw;
background-attachment: fixed;
background-position: center;
}
#block9 {
background: url('https://res.cloudinary.com/ahmedagadir/image/upload/v1530726631/product-landing-page/block9.jpg');
background-size: 100vw;
background-attachment: scroll;
background-position: center;
margin-bottom: 20vh;
}
#block4,
#block5,
#block6,
#block8,
#block9 {
background-color: #674CAF;
background-repeat: no-repeat;
position: relative;
}
@media (max-width: 768px) {
#block9 {
background-size: 200vw;
}
}
@media (max-width: 425px) {
#block4, #block5 {
background-size: 50vw;
}
#block6 {
background-size: 170vw;
}
#block8 {
background-size: 230vw;
}
}
@media (max-width: 375px) {
#block9 img[src="https://res.cloudinary.com/ahmedagadir/image/upload/v1530726631/product-landing-page/block9.jpg"] {
height: 100vh
}
}
#block4:before, #block4:after,
#block5:before, #block5:after,
#block6:before, #block6:after,
#block8:before, #block8:after,
#block9:before {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 20vh;
background: white;
transform: skewY(-3.5deg);
}
#block4:before,
#block5:before,
#block6:before,
#block8:before,
#block9:before {
top: 0;
transform-origin: bottom left;
}
#block4:after,
#block5:after,
#block6:after,
#block8:after {
bottom: 0;
transform-origin: top right;
}
#block7 {
margin: 15vh auto;
width: 80%;
display: flex;
align-items: flex-start;
justify-content: space-around;
flex-direction: wrap;
}
#block7 img {
position: relative;
max-width: 30%;
}
#block7 img:nth-of-type(1) {
margin-top: 260px;
}
#block7 img:nth-of-type(2) {
margin-top: 160px;
}
#block7 img:nth-of-type(3) {
margin-top: 60px;
}
.block:not(.two) {
position: relative;
top: -45px;
z-index: 2;
animation-duration: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
visibility: hidden;
}
#block7 img {
animation-fill-mode: forwards;
animation-timing-function: ease-out;
visibility: hidden;
}
#block7 img:nth-child(1) {
animation-delay: 200ms;
animation-duration: 800ms;
}
#block7 img:nth-child(2) {
animation-delay: 100ms;
animation-duration: 900ms;
}
#block7 img:nth-child(3) {
animation-delay: 0;
animation-duration: 1000ms;
}
@keyframes fade-in-a {
0% {
top: 35px;
opacity: 0.1;
}
100% {
visibility: unset;
top: 0px;
opacity: 1;
}
}
#block4, #block5 {
animation-duration: 1s;
animation-delay: 100ms;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
visibility: hidden;
}
@keyframes fade-in-b {
0% {
background-position: center 35vh;
opacity: 0.1;
}
100% {
visibility: unset;
background-position: center 25vh;
opacity: 1;
}
}
/* ========== footer =========*/
footer {
border-top: 2px solid #E5E5E5;
display: flex;
flex-wrap: wrap;
color: #828282;
justify-content: space-between;
margin: 5vh 0;
}
.contact, .bottom {
width: 100%;
padding: 40px 20px 0 20px;
}
.contact {
display: flex;
flex-wrap: wrap;
text-align: center;
}
.contact p,
.contact button {
font-size: 1.2rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05rem;
}
.contact p {
margin-bottom: 20px;
}
.contact form,
.contact .social-media {
flex: 1 400px;
margin-bottom: 40px;
}
.contact input[type="email"] {
width: 250px;
height: 40px;
font-size: 1rem;
text-indent: 5px;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
}
.contact button {
width: 110px;
height: 40px;
font-size: 0.9rem;
background-color: #00C4ED;
color: white;
transition: all 0.3s ease;
border: 0;
outline: none;
box-shadow: none;
border-radius: 2px;
position: relative;
z-index: 1;
}
.contact button span {
position: absolute;
top: 0;
left: 0;
border-radius: 2px;
background: #00A7CA;
height: 100%;
z-index: -1;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.contact button:hover {
cursor: pointer;
}
@media (max-width: 425px) {
.contact button {
margin-top: 10px;
}
}
.contact .social-media i {
font-size: 2rem;
padding: 0px 20px;
color: #828282;
transition: all 0.3s ease;
}
.contact .social-media i:hover {
color: #EB0028;
cursor: pointer;
}
.bottom {
background-color: #F9F9F9;
}
.bottom .phone-number {
color: #49B5D9
}
.bottom p {
padding: 10px 0;
}
.bottom p:first-of-type {
float: left;
}
.bottom p:last-of-type {
float: right;
}
.bottom hr {
clear: both;
margin: 20px 0;
border-top: 1px solid #E5E5E5;
}
@media (max-width: 768px) {
.bottom p:first-of-type,
.bottom p:last-of-type {
float: initial;
}
}
.bottom > span,
.bottom > a {
font-size: 0.8rem;
margin-right: 20px;
}
/* ========== github logo =========*/
img[alt="link to my github"] {
position: fixed;
bottom: 0;
right: 0;
width: 40px;
margin: 20px;
opacity: 0.7;
transition: all 0.3s ease;
}
img[alt="link to my github"]:hover {
opacity: 1;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. This JavaScript code is responsible for adding various interactive and visual effects to a web page. Let's break down the code step by step to understand what each part does:
1. DOMContentLoaded Event Listener:
- This code block listens for the 'DOMContentLoaded' event, which is fired when the initial HTML document has been completely loaded and parsed.
- When this event occurs, the code selects an element with the class name "one" and applies a CSS animation named "fade-in-a" to it. This animation presumably fades in the element.
2. Scroll Event Listener:
- This code block listens for the 'scroll' event, which is fired when the user scrolls the page.
- If the vertical scroll position (measured by pageYOffset) is greater than 30 pixels, the code adjusts the position of a <header> element. If the window width is less than 600 pixels, the header is moved upwards to hide it, otherwise, it's moved slightly upwards.
- Next, a function named fade is defined. This function checks if an element's top position relative to the viewport is less than the inner height of the viewport. If it is, the animation named animationName (passed as an argument) is applied to the element.
- The fade function is used to apply the "fade-in-a" animation to specific elements with the class name "block" excluding those with class names "one" and "two," and to images inside the element with ID "block7." Additionally, it applies the "fade-in-b" animation to elements with IDs "block4" and "block5."
3. Array of Buttons Event Listeners:
- This code block selects all buttons within elements with class name "two" and attaches event listeners to them.
- On mouseover, the code changes the color of the text within the <span> element (presumably inside the button) to a specific color.
- On mouseout, the code changes the color back to white.
- On click, the openModal function is called with the index of the clicked button as an argument.
4. openModal Function:
- This function opens a modal dialog by modifying the display properties of various elements.
- It changes the source of an <iframe> element within a specific video wrapper to include the parameter "autoplay=1," causing the video to start playing.
- The modal itself and its contents (like a close button and the video wrapper) are displayed.
- After a short delay (100 milliseconds), the modal's opacity is increased, making it fade in.
5. Event Listeners for Modal and Close Button:
- The code attaches event listeners to both the modal itself and the close button within the modal.
- When clicked, these event listeners trigger the closeModal function.
6. closeModal Function:
- This function is responsible for closing the modal dialog and cleaning up the changes made by the openModal function.
- It gradually reduces the opacity of the modal to 0, then hides the modal, its close button, and all video wrappers.
- It also removes the "autoplay" parameter from the source of any <iframe> elements within video wrappers to stop the videos from playing.
7. Navigation Button and Contact Button Event Listeners:
- Similar to the buttons in the "two" class, these event listeners change the animation of a <span> element inside the navigation button and the contact button when the mouse hovers over or leaves the buttons.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
window.addEventListener('DOMContentLoaded', e => {
document.querySelector('.one').style.animationName = 'fade-in-a';
})
window.addEventListener('scroll', e => {
if (pageYOffset > 30) {
document.querySelector('header').style.top = (innerWidth < 600) ? '-50px' : '-45px';
} else {
document.querySelector('header').style.top = '0px';
}
// hecks whether the element is within the limits of the viewport or not
let fade = (element, animationName) => {
if (element.getBoundingClientRect()['top'] < innerHeight)
element.style.animationName = animationName;
};
Array.from(document.querySelectorAll('.block:not(.one):not(.two)')).forEach(block => fade(block, 'fade-in-a'));
Array.from(document.querySelectorAll('#block7 img')).forEach(image => fade(image, 'fade-in-a'));
fade(document.querySelector('#block4'), 'fade-in-b');
fade(document.querySelector('#block5'), 'fade-in-b');
})
Array.from(document.querySelectorAll('.two button')).forEach((button, ind) => {
button.addEventListener('mouseover', () => button.firstElementChild.style.color = '#EB0028')
button.addEventListener('mouseout', () => button.firstElementChild.style.color = '#FFF')
button.addEventListener('click', () => openModal(ind))
})
function openModal(ind) {
document.querySelectorAll('.video-wrapper iframe')[ind].src += '&autoplay=1';
document.querySelector('#modal').style.display = 'block';
document.querySelector('#modal span').style.display = 'block';
document.getElementsByClassName('video-wrapper')[ind].style.display = 'block';
setTimeout( () => document.querySelector('#modal').style.opacity = '1', 100)
}
document.querySelector('#modal span').addEventListener('click', closeModal);
document.querySelector('#modal').addEventListener('click', closeModal);
function closeModal() {
document.querySelector('#modal').style.opacity = '0';
setTimeout( () => {
document.querySelector('#modal').style.display = 'none';
document.querySelector('#modal span').style.display = 'none';
Array.from(document.getElementsByClassName('video-wrapper')).forEach(wrapper => wrapper.style.display = 'none');
}, 500)
Array.from(document.querySelectorAll('.video-wrapper iframe')).forEach(iframe => {
iframe.src = iframe.src.replace('&autoplay=1','');;
})
}
document.querySelector('nav button').addEventListener('mouseover', () => {
document.querySelector('nav button span').style.animationName = 'buttonEffect'
})
document.querySelector('nav button').addEventListener('mouseout', () => {
document.querySelector('nav button span').style.animationName = 'buttonEffectRemoval'
})
document.querySelector('.contact button').addEventListener('mouseover', () => {
document.querySelector('.contact button span').style.animationName = 'buttonEffect'
})
document.querySelector('.contact button').addEventListener('mouseout', () => {
document.querySelector('.contact button span').style.animationName = 'buttonEffectRemoval'
})Final Output:
Conclusion:
Congratulations! You've reached the end of this comprehensive guide on creating a mobile product landing page using HTML, CSS, and JavaScript. Throughout this journey, you've learned the fundamental principles and practical techniques needed to craft an effective and engaging mobile landing page that can drive user engagement and boost conversions.
By now, you understand the importance of planning your landing page, setting clear goals, and identifying your target audience. You've mastered the art of structuring your page using HTML, applying visually appealing styles with CSS, and enhancing interactivity using JavaScript. You've also discovered the significance of a mobile-first approach and the use of media queries to ensure a responsive design that caters to various devices.
Crafting compelling calls-to-action (CTAs) has become second nature to you, and you recognize the impact of strategic placement and clear messaging in guiding users towards desired actions. Moreover, you've explored the world of optimization, conducting A/B tests to fine-tune your landing page and optimizing page speed for a seamless user experience.
As you conclude this guide, remember that the world of web development is ever-evolving. Continue to explore new trends, stay updated with advancements, and always keep the user experience at the forefront of your design choices. Your mobile product landing page can be a powerful tool for connecting with your audience, showcasing your products or services, and achieving your business goals.
Feel confident in your ability to create impactful landing pages that not only meet but exceed user expectations. Whether you're promoting a product, gathering leads, or sharing information, your newfound skills will serve you well in the dynamic digital landscape.
Thank you for joining us on this learning journey. Keep experimenting, innovating, and applying the knowledge you've gained to create remarkable mobile product landing pages that leave a lasting impression and drive success.
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 😊
