This is a simple landing page I've created using HTML and CSS. Stylistically, it is similar to the screens I've previewed in my previous post.
First, the HTML code:
<body>
<div id="main">
<div class="navbar">
<button href="url" class="logo"></button>
<div class="menu-container">
<a href="url">Log in</a>
<a href="url">Sign up</a>
<a href="url">About</a>
<a href="url">Contact</a>
</div>
</div>
<div>
<h1 class="welcome">Welcome</h1>
<button class="start-btn">Get started</button>
</div>
</div>
<hr>
<div id="middle">
<button class="panel">
<h1>Free</h1>
<h4>
Features: <br />
- 6 skips/hour <br />
- ads <br />
- available on one device <br />
</h4>
<h2>Price: 0.00€</h2>
</button>
<button class="panel">
<h1>Standard</h1>
<h4>
Features: <br />
- 10 skips/hour <br />
- no ads <br />
- available on two devices <br />
</h4>
<h2>Price: 5.99€/month</h2>
<h4>Cancel at any time</h4>
</button>
<button class="panel">
<h1>Premium</h1>
<h4>
Features: <br />
- unlimited skips <br />
- no ads <br />
- available on three or more devices <br />
- offline availability <br />
</h4>
<h2>Price: 9.99€/month</h2>
<h4>Cancel at any time</h4>
<h4>One month trial</h4>
</button>
</div>
<hr>
<div id="bottom">
<div class="description">
<h1 class="description-title">How does it work?</h1>
<h2 class="description-items">1. Log in or create a new account (it's free!)</h2>
<h2 class="description-items">2. Choose one of our three plans. If you choose a paid plan, you need to have a valid credit/debit card</h2>
<h2 class="description-items">3. You can cancel your plan at any time</h2>
<button class="newsletter-btn">Sign up for our newsletter</button>
</div>
<footer id="footer">
<h4 class="copyright">© 2023 App. All rights reserved. Use of this site constitutes acceptance of our User Agreement and Privacy Policy and Cookie Statement and Your California Privacy Rights. The material on this site may not be reproduced, distributed, transmitted, cached or otherwise used, except with the prior written permission of the owners.</h4>
</footer>
</div>
</body>
Now, the CSS part:
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
body {
font-family: "Lato", sans-serif;
background-color: #181818;
background-image: url("https://images2.alphacoders.com/238/thumb-1920-238870.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.landing {
max-width: 1000px;
width: 100%;
margin: 0 auto;
padding-top: 28px;
height: 100vh;
}
.navbar {
width: 100%;
background-color: #2e2e2e;
font-size: 20px;
padding: 10px;
height: 70px;
display: block;
justify-content: end;
}
.menu-container {
position: absolute;
right: 10px;
top: 20px;
}
a {
color: white;
text-decoration: none;
padding: 4px;
}
a:hover {
border: 2px solid white;
border-radius: 7px;
transition: 0.3s;
margin: 4px;
}
.logo {
background-image: url("https://www.freepnglogos.com/uploads/logo-website-png/logo-website-file-globe-icon-svg-wikimedia-commons-21.png");
width: 100px;
height: 70px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: #1ed760;
border: none;
border-radius: 4px;
}
.logo:hover {
cursor: pointer;
border: 2px solid white;
}
.welcome {
color: white;
font-size: 140px;
padding: 10px;
}
.start-btn {
background-color: #1ed760;
border: none;
border-radius: 7px;
cursor: pointer;
width: 300px;
height: 15vh;
color: white;
font-family: "Lato", sans-serif;
font-weight: bold;
font-size: 20px;
position: absolute;
right: 40%;
}
.start-btn:hover {
border: 2px solid white;
margin: 10px;
transition: 0.2s;
box-shadow: 10px 10px 40px #995f99;
}
#main {
width: 100%;
height: 140vh;
}
#middle {
width: 100%;
height: 140vh;
display: flex;
justify-content: center;
}
#bottom {
position: relative;
width: 100%;
min-height: 100vh;
}
hr {
height: 4px;
background-color: black;
border: none;
width: 100%;
}
.panel {
height: 90vh;
width: 250px;
background-color: #2e2e2e;
border: 4px solid black;
border-radius: 4px;
margin: 100px;
color: white;
font-weight: bold;
text-align: center;
}
.panel:focus {
margin: 130px 110px;
box-shadow: 10px 10px 40px #995f99;
transition: 0.6s;
cursor: pointer;
}
.panel:hover {
margin: 130px 110px;
box-shadow: 10px 10px 40px #995f99;
transition: 0.6s;
cursor: pointer;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
text-align: center;
background-color: #2e2e2e;
}
.copyright {
color: white;
}
.description {
text-align: center;
}
.description-title {
color: white;
font-size: 70px;
}
.description-items {
color: white;
font-size: 20px;
}
.newsletter-btn {
background-color: #1ed760;
border: none;
border-radius: 7px;
cursor: pointer;
width: 300px;
height: 15vh;
color: white;
font-family: "Lato", sans-serif;
font-weight: bold;
font-size: 20px;
position: absolute;
right: 40%;
}
.newsletter-btn:hover {
border: 2px solid white;
margin: 10px;
transition: 0.2s;
box-shadow: 10px 10px 40px #995f99;
}
And that is all. Feel free to post your feedback.
Top comments (0)