Learn to create a stunning music streaming app landing page with HTML and CSS. Source code included for easy implementation.
Table of Contents
Music streaming has become increasingly popular, and having an enticing landing page is crucial for attracting users to your platform. A well-designed landing page not only showcases your app's features but also creates a seamless user experience. In this tutorial, we'll walk you through the process of creating a captivating landing page for a music streaming app using HTML and CSS. Whether you're a beginner or an experienced developer, this guide will provide step-by-step instructions along with source code snippets to help you build an impressive landing page that leaves a lasting impression on your audience. Let's dive in!
Source Code
Step 1 (HTML Code):
To begin, create the basic structure of your landing page using HTML. Let's break down the HTML code section by section:
1. <!DOCTYPE html>: This declaration specifies the HTML version being used, in this case, HTML5.
2. <html lang="en">: This tag defines the document type and language. "en" denotes English.
3. <head>: This section contains meta-information about the HTML document, such as character encoding, viewport settings, and the page title.
- <meta charset="UTF-8">: This meta tag specifies the character encoding for the document, ensuring proper interpretation of special characters.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag sets the compatibility mode for Internet Explorer to the latest version.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag configures the viewport properties for responsive design, ensuring proper scaling on various devices.
- <title>Music Streaming App Landing Page</title>: This tag sets the title of the webpage displayed in the browser's title bar or tab.
- <link href="https://fonts..." rel="stylesheet">: This link tag imports a font called "Work Sans" with a weight of 200 from Google Fonts.
- <link rel="stylesheet" href="styles.css">: This link tag links an external CSS file named "styles.css" to style the HTML content.
4. <body>: This section contains the visible content of the webpage.
- <div class="wrapper">: This div serves as a container for the entire content of the page.
- <div class="header">: This div represents the header section of the webpage.
- <ul class="menu">: This unordered list represents the navigation menu of the webpage.
- <li>: These list items represent individual menu items like "News," "Features," "How it works," and "Blog."
- <div class="content">: This div contains the main content of the landing page.
- <h2>: This heading tag displays a headline promoting the music streaming app.
- <div class="buttons">: This div contains buttons for downloading the app from the App Store and Google Play.
- <a>: These anchor tags represent links for downloading the app from the App Store and Google Play.
- <img>: These image tags include logos and graphical elements for the landing page.
- <div class="background"></div>: This div represents a background element, used for styling purposes.
Step 2 (CSS Code):
Next, style your HTML elements to enhance the visual appeal of your landing page using CSS. Let's break down the CSS code section by section:
1. Global Styles (body):
- width: 100%; height: 100%; min-height: 100vh;: This sets the width and height of the body to occupy the entire viewport, ensuring it fills the screen. min-height: 100vh ensures that the body takes at least the full height of the viewport.
- margin: 0;: This removes any default margins from the body element.
- font-family: 'Work Sans', sans-serif;: Sets the font family to 'Work Sans' with a fallback to the generic sans-serif font family.
- font-weight: 400;: Sets the font weight to normal (400).
2. Background Styling (.background):
- width: 100%; height: 100%; min-height: 100vh;: Similar to the body styling, this ensures the background covers the entire viewport.
- position: fixed; top: 0; left: 0;: Fixes the background position at the top-left corner of the viewport.
- z-index: -1;: Sets the z-index to a negative value so that it appears below other content.
- background: Applies a gradient background, starting from #a741ff at the top and ending with #5480fd at the bottom.
3. Wrapper Styling (.wrapper):
- width: 80%;: Sets the width of the wrapper to 80% of its containing element.
- height: 100%; min-height: 800px;: Sets the height of the wrapper to at least 800 pixels.
- background: #fff;: Sets the background color of the wrapper to white.
- position: absolute; left: 50%; top: 0;: Positions the wrapper absolutely, with its left edge centered horizontally and its top edge at the top of its containing element.
- margin: 60px 0;: Sets top and bottom margins to 60 pixels and left and right margins to 0.
- transform: translate(-50%, 0);: Moves the wrapper left by 50% of its width, effectively centering it horizontally.
- box-shadow: Applies a box shadow effect for a raised appearance.
4. Header Styling (.wrapper .header):
- Applies styling specific to the header inside the wrapper.
- background: Applies a gradient background to the header, similar to the background but with different colors.
- overflow: hidden;: Hides any content that overflows the header.
5. Logo and Menu Styling (.wrapper .header .logo, .wrapper .header .menu):
- Positions the logo and menu elements within the header and styles them accordingly.
6. Content Styling (.wrapper .header .content):
- Positions the content within the header and styles it accordingly.
- transform: translate(-50%, -85%);: Vertically centers the content and shifts it upwards slightly.
7. Button Styling (.wrapper .header .content .button):
- Styles the buttons within the content section, including size, colors, borders, shadows, and hover effects.
8. Wave and Curve Styling (.wrapper .header .waves, .wrapper .header .curve):
- Both the wave and curve elements are positioned absolutely within the header, allowing for precise control of their placement.
- They are both given a width slightly larger than the header's width to ensure they extend beyond the header's edges for decorative purposes.
- bottom: -3px; and bottom: -1px; position the elements just below the header, giving them a seamless appearance with the rest of the design.
- The display: none; property ensures that these elements are initially hidden and won't be visible until explicitly made visible through CSS or JavaScript. This suggests they might be used for animation or dynamic effects.
body {
width: 100%;
height: 100%;
min-height: 100vh;
margin: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.background {
width: 100%;
height: 100%;
min-height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background: #a741ff;
background: -moz-linear-gradient(top, #a741ff 0%, #5480fd 100%);
background: -webkit-linear-gradient(top, #a741ff 0%, #5480fd 100%);
background: linear-gradient(to bottom, #a741ff 0%, #5480fd 100%);
}
.wrapper {
width: 80%;
height: 100%;
min-height: 800px;
background: #fff;
position: absolute;
left: 50%;
top: 0;
margin: 60px 0;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.15);
box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.15);
}
.wrapper .header {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #81a2ff;
background: -moz-linear-gradient(top, #81a2ff 0%, #c1e1ff 100%);
background: -webkit-linear-gradient(top, #81a2ff 0%, #c1e1ff 100%);
background: linear-gradient(to bottom, #81a2ff 0%, #c1e1ff 100%);
overflow: hidden;
}
.wrapper .header .logo {
width: 50px;
height: auto;
position: absolute;
top: 50px;
left: 100px;
}
.wrapper .header .menu {
list-style: none;
margin: 0;
padding: 0;
line-height: 33px;
position: absolute;
top: 50px;
right: 100px;
text-align: right;
width: auto;
}
.wrapper .header .menu li {
display: inline-block;
margin: 0 10px;
color: #fff;
}
.wrapper .header .content {
position: absolute;
width: 100%;
height: auto;
max-width: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -85%);
}
.wrapper .header .content h2 {
color: #fff;
margin: 0;
font-size: 2.3em;
line-height: 1.2em;
width: 100%;
text-align: center;
}
.wrapper .header .content .buttons {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
.wrapper .header .content .button {
display: inline-block;
width: 150px;
height: 50px;
padding-left: 20px;
background: #000;
color: #fff;
font-size: 1.2em;
text-decoration: none;
text-align: center;
line-height: 50px;
margin: 40px 5px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 12px 20px -10px rgba(0,0,0,0.65);
-moz-box-shadow: 0px 12px 20px -10px rgba(0,0,0,0.65);
box-shadow: 0px 12px 20px -10px rgba(0,0,0,0.65);
transition: box-shadow 0.5s;
}
.wrapper .header .content .button:hover {
-webkit-box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.65);
-moz-box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.65);
box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.65);
transition: box-shadow 0.5s;
}
.wrapper .header .content .button.apple {
background-image: url("http://vignette2.wikia.nocookie.net/respawnables/images/2/2f/Apple-logo-white-md.png/revision/latest?cb=20160224124036");
background-size: 20px auto;
background-repeat: no-repeat;
background-position: 20px center;
}
.wrapper .header .content .button.google {
background-image: url("http://vignette3.wikia.nocookie.net/starwars/images/e/ee/Google_Play_logo.png/revision/latest?cb=20141119230612");
background-size: 20px auto;
background-repeat: no-repeat;
background-position: 20px center;
}
.wrapper .header .waves {
width: calc(100% + 10px);
height: auto;
position: absolute;
bottom: -3px;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
z-index: 0;
}
.wrapper .header .curve {
display: none;
width: calc(100% + 10px);
height: auto;
position: absolute;
bottom: -1px;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
z-index: 1;
} Final Output:
Conclusion:
By following this tutorial, you can create a stunning music streaming app landing page using HTML and CSS. Experiment with different design elements and functionalities to craft a unique user experience. Don't forget to optimize for responsiveness and test thoroughly before deployment.
Code by: Nick Lewis
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 😊
