In this tutorial, we’ll walk through the process of creating a stylish landing page using HTML and CSS. We’ll break down each portion of the code to help you understand how it all comes together. Let’s get started!
HTML Structure
First, let’s look at the HTML structure of our landing page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started | theuicode.com</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="gradient-bg"></div>
<div class="gloss-effect"></div>
<div class="col">
<div class="play">
<div class="curve-1"></div>
<div class="curve-2"></div>
<div class="curve-3"></div>
<div class="dot"></div>
</div>
<div class="action">
<h1>Video collaboration on the go</h1>
<button>Get started</button>
</div>
</div>
</div>
</body>
</html>Explanation:
- DOCTYPE Declaration: The
<!DOCTYPE html>declaration defines the document type and version of HTML. - HTML Tag: The
<html>tag is the root element of an HTML page. - Head Section: The
<head>section contains meta-information about the document, including the character set, viewport settings, title, and link to the CSS file. - Body Section: The
<body>section contains the content of the HTML document. Here, we have adivwith the classcontainerthat holds all the elements of our landing page.
CSS Styling
Now, let’s dive into the CSS styling that brings our HTML structure to life.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
background: radial-gradient(#5F2F69, #332149, #151422);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
Explanation:
- Font Import: We import the ‘Poppins’ font from Google Fonts.
- Global Styles: We reset the margin and padding for all elements and set the
box-sizingtoborder-boxfor consistent sizing. - Body Styles: We set the height and width to 100% of the viewport, apply a radial gradient background, and center the content using Flexbox.
Container Styling
.container {
width: 300px;
height: 620px;
background: linear-gradient(to bottom right, black, #1d1d1d);
border-radius: 20px;
box-shadow: 0 0 30px 0px black;
position: relative;
overflow: hidden;
display: flex;
}Explanation:
- Container: The
.containerclass defines the main container’s size, background gradient, border radius, box shadow, and positioning.
Gradient Background and Gloss Effect
.gradient-bg {
width: 500px;
height: 900px;
background: linear-gradient(#ff7d69 0%, #FF6650 40%, #E055C2 60%, #7D4DF5 80%, #7D4DF5 100%);
position: absolute;
transform: rotate(30deg);
filter: blur(40px);
left: 80px;
bottom: -200px;
border-radius: 45%;
}
.gloss-effect {
width: 320px;
height: 800px;
bottom: -125px;
left: 130px;
border-radius: 130px;
box-shadow: inset -20px 0px 50px 0px rgba(255, 255, 255, 0.25);
position: absolute;
transform: rotate(28deg);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 1) 100%);
}
Explanation:
- Gradient Background: The
.gradient-bgclass creates a colorful gradient background with a blur effect and rotation. - Gloss Effect: The
.gloss-effectclass adds a glossy overlay with a shadow and mask effect.
Play Button and Action Section
.play {
padding-top: 30px;
padding-left: 30px;
display: flex;
align-items: center;
}
.curve-1, .curve-2, .curve-3 {
width: 4px;
height: 30px;
border: solid 2px white;
border-color: transparent white transparent transparent;
border-radius: 50%;
}
.dot {
width: 3px;
height: 3px;
background: white;
border-radius: 50%;
margin-left: 4px;
}
.action {
display: flex;
flex-direction: column;
margin-top: auto;
z-index: 0;
padding-left: 35px;
padding-bottom: 30px;
padding-right: 30px;
align-items: start;
}
.action h1 {
color: #F5DCF1;
}
.action button {
background: rgba(255, 255, 255, 0.1);
border: none;
padding: 10px 20px;
color: #F5DCF1;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Poppins';
}
Explanation:
- Play Button: The
.playclass styles the play button with padding and alignment. The.curve-1,.curve-2, and.curve-3classes create the curved lines, and the.dotclass adds a small dot. - Action Section: The
.actionclass styles the section containing the heading and button, with padding, alignment, and color settings.
By following this guide, you can create a visually appealing landing page with a gradient background, gloss effect, and stylish play button. Feel free to customize the styles to match your design preferences. Happy coding!
0 Comments