Simple Startup Landing Page Using HTML CSS With Source Code
Introduction
Hey coders, today in this article we’ve build a Simple Startup Landing Page Using HTML CSS. This is a simple landing page which build using the core concepts of HTML and CSS. As we all know that HTML sets up the basic structure for any website, Our HTML also do the same. CSS styles our landing page and add make our landing page interactive.
To create this type of landing page, you just need the knowledge of HTML and CSS. HTML and CSS are the frontend technologies which creates a frontend page for the user. Using this project’s source code you can also build this type of landing pages and the interesting thing is that you can customize them according to your preference.
Let’s see and understand our code.
index.html
This HTML code creates a fun travel themed website to attract people looking for an exciting group tour. The page begins with a bold headline with the catchy title “Life is a Party!” and links to different parts of the site, such as visit, information and contact.
At the top is a large image with a large header and buttons that invite visitors to interact. The goal is to capture attention and get people excited about the journey they can take.
Next, the “Destinations” section discusses some interesting places you can visit. There are little pictures of these places arranged in grids that make them eye-catching, along with text that mocks how boring this trip is.
The “Packages” section describes the different types of tours offered by the company. There are guided tours for those who want the full experience, photography tours for those who want to enjoy the views, bike tours for the brave and running tours for the competitive. Each package has its own cute icon to make it more attractive and understandable.
This is followed by a “Testimonials” section where previous travelers share their experiences. This section helps attract new visitors by showing how happy other people were on the tour.
Finally, there is a “Communications” section where visitors can subscribe to the company’s newsletter to get the latest information about upcoming trips and events. The page ends with a bright footer that links to the company’s social media and adds a humorous touch to make it fun and casual.
In short, this site is designed to be engaging and engaging, with plenty of ways to engage visitors, get them excited to take a tour or stay in touch with upcoming events.
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<!-- Forked from a template on Tutorialzine: https://tutorialzine.com/2016/06/freebie-landing-page-template-with-flexbox -->
<header>
<h2><a href="#">Life is a party!</a></h2>
<nav>
<li><a href="#">Tours</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</nav>
</header>
<section class="hero">
<div class="background-image"></div>
<div class="hero-content-area">
<h1>Life is a party!</h1>
<h3>Unmissable Adventure Tours With Your Friends</h3>
<a href="#" class="btn">Contact Us Now</a>
</div>
</section>
<section class="destinations">
<h3 class="title">Some of our destinations:</h3>
<p>Tired of the beach alone? Are the plains too plain? Come along with us on one of our unusual adventures with yout friends. Here are some pictures from people who have had elevated experiences with us.</p>
<hr>
<ul class="grid">
<li class="small image-1"></li>
<li class="large image-2"></li>
<li class="large image-3"></li>
<li class="small image-4"></li>
</ul>
</section>
<section class="packages">
<h3 class="title">Tour Packages</h3>
<p>We offer a variety of group (minimum 5 people) packages. Whether you've spent some summers together or this might be your first adventure, we've got the perfect vacation for you.</p>
<hr>
<ul class="grid">
<li>
<i class="fa fa-compass fa-4x"></i>
<h4>Guided Trips</h4>
<p>Looking for the complete experience? Take a tour with one of our experts. They'll show you secrets that you're likely to miss otherwise.</p>
</li>
<li>
<i class="fa fa-camera-retro fa-4x"></i>
<h4>Photo Trips</h4>
<p>Want to experience nature's beauty without all of that annoying exercise? Take a photo tour on one of our <em>Life is a party!</em> buses.</p>
</li>
<li>
<i class="fa fa-bicycle fa-4x"></i>
<h4>Biking Trips</h4>
<p>If bicycles are more your speed, consider taking a tour through one of our mountain or city bike paths. We'll provide the bikes, and lunch too!</p>
</li>
<li>
<i class="fa fa-flag-checkered fa-4x"></i>
<h4>Racing Trips</h4>
<p>Got a competitive spirit? Sign up for one of our challenge-based marathons! Try to reach the summit before any other group.</p>
</li>
</ul>
</section>
<section class="testimonials">
<h3 class="title">Testimonials from our adventurers:</h3>
<hr>
<p class="quote">Wow! This tour made me realize how much I love being outside with my friends. After going on one of these tours, I can safely say that beer pong is my favorite game all time, also the cultural programs were really interesting!</p>
<p class="author">- Albert Herter</p>
<p class="quote">Wow, this really blew my mind. We had so much fun at the beach, and also some hidden secrets revealed. Come on, I'm living in this city for 5 years. Amazing!</p>
<p class="author">- Sharon Rosenberg</p>
<p class="quote">If you want to understand your friends better, head to the mountains. I mean, seriously. It's like sitting next to a campfire and just talk in the sunset, woah. You know? It's like that.</p>
<p class="author">- Luis Mendoza</p>
</section>
<section class="contact">
<h3 class="title">Learn more</h3>
<p>Want to know about our upcoming events, or come to one of our mixers? Just sign up for our mailing list. No spam from us, we promise! Except for the spam we give you to keep up your energy while you're having fun with your friends. Have a blast! We have tons of that.</p>
<hr>
<form>
<input type="email" placeholder="Email">
<a href="#" class="btn">Subscribe now</a>
</form>
</section>
<footer>
<p>Images courtesy of <a href="http://unsplash.com/" target="_blank" rel="noopener">unsplash</a>.</p>
<p>Why are you even reading this?! There's never anything interesting in the footer!</p>
<ul>
<li><a href="#"><i class="fa fa-twitter-square fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-facebook-square fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-snapchat-square fa-2x"></i></a></li>
</ul>
</footer>
style.css
This CSS code is used to make web pages clean, tidy and easy to use. It controls the appearance of the page, from its layout to text and images. It starts by defining the site and everything, so it looks the same on all devices and browsers. The code defines a new font, Raleway, and sets the text color to gray for ease of use.
The links on this page are designed to download notes, which are often found while browsing. The buttons are designed to be visual and interactive, with a slight color change when activated. This makes the page look good and makes it easier for users to read.
All parts of the page, such as the header and content area, use a layout style called **flexbox**. Flexbox helps to insert content and make sure that the content is correct, whether it is text, image or button. For page content, grid layout organizes content into columns that can be arranged according to screen size. For example, on a small phone screen, multiple columns collapse into one column for easy reading.
The code will make the page appear, which means the image will change depending on the screen size. A special guide called **media query** will make the font smaller, reduce space, and adjust the layout so that the web page looks good on large computer screens and small mobile phones.
The web page also has interesting animations, such as the header and shop that appear when the page is opened, which is nice.
In short, this CSS code creates beautiful, easy-to-use web pages that work well on any device and includes interactive features like hover effects and animations to keep users engaged.
/*General Styles*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
font-family: "Raleway", sans-serif;
color: #555;
}
ul,
nav {
list-style: none;
}
a {
text-decoration: none;
opacity: 0.75;
color: #fff;
}
a:hover {
opacity: 1;
}
a.btn {
border-radius: 4px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
background-color: #e07e7b;
opacity: 1;
transition: all 400ms;
}
a.btn:hover {
background-color: #ce5856;
}
section {
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 80px;
}
section:not(.hero):nth-child(even) {
background-color: #f5f5f5;
}
.grid {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
hr {
width: 250px;
height: 3px;
background-color: #e07e7b;
border: 0;
margin-bottom: 50px;
}
.image-1 {
background-image: url("https://images.unsplash.com/photo-1505852903341-fc8d3db10436?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=e2f72e62d5f4f04256dd9305d5f51f3c");
}
.image-2 {
background-image: url("https://images.unsplash.com/photo-1475483768296-6163e08872a1?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=20b3b1c3caef8c619ac3c75c07a7eafb");
}
.image-3 {
background-image: url("https://images.unsplash.com/photo-1490576198307-6ff97609a0cc?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=a0dbd168637edc2cfdac3715ab23d519");
}
.image-4 {
background-image: url("https://images.unsplash.com/photo-1505483531331-fc3cf89fd382?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=4f305bbc0243f81f1bf6053a62d76297");
}
section h3.title {
text-transform: capitalize;
font: bold 48px "Amatic SC", sans-serif;
margin-bottom: 30px;
text-align: center;
}
section p {
max-width: 775px;
line-height: 2;
padding: 0 20px;
margin-bottom: 30px;
text-align: center;
}
@media (max-width: 800px) {
section {
padding: 50px 20px;
}
}
/*Header Styles*/
header {
position: absolute;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 35px 100px 0;
animation: 1s fadein 0.5s forwards;
opacity: 0;
color: #fff;
z-index: 2;
}
@keyframes fadein {
100% {
opacity: 1;
}
}
header h2 {
font-family: "Amatic SC", sans-serif;
}
header nav {
display: flex;
margin-right: -15px;
}
header nav li {
margin: 0 15px;
}
@media (max-width: 800px) {
header {
padding: 20px 50px;
flex-direction: column;
}
header h2 {
margin-bottom: 15px;
}
}
/*Hero Styles*/
.hero {
position: relative;
justify-content: center;
text-align: center;
min-height: 100vh;
color: #fff;
}
.hero .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://images.unsplash.com/photo-1505535162959-9bbcb4ab22d6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=2feeaf89ad55829f92c4bbc6ca8e83ce");
background-size: cover;
z-index: -1;
background-color: #80a3db;
}
.hero h1 {
font: 72px "Amatic SC", sans-serif;
text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
margin-bottom: 15px;
}
.hero h3 {
font: 28px "Raleway", sans-serif;
font-weight: 300;
text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
margin-bottom: 40px;
}
.hero a.btn {
padding: 20px 46px;
}
.hero-content-area {
opacity: 0;
margin-top: 100px;
animation: 1s slidefade 1s forwards;
}
@keyframes slidefade {
100% {
opacity: 1;
margin: 0;
}
}
@media (max-width: 800px) {
.hero {
min-height: 600px;
}
.hero h1 {
font-size: 48px;
}
.hero h3 {
font-size: 24px;
}
.hero a.btn {
padding: 15px 40px;
}
}
/*Destinations Section*/
.destinations .grid li {
height: 350px;
padding: 20px;
background-clip: content-box;
background-size: cover;
background-position: center;
}
.destinations .grid li.small {
flex-basis: 30%;
}
.destinations .grid li.large {
flex-basis: 70%;
}
@media (max-width: 1100px) {
.destinations .grid li.small,
.destinations .grid li.large {
flex-basis: 50%;
}
}
@media (max-width: 800px) {
.destinations .grid li.small,
.destinations .grid li.large {
flex-basis: 100%;
}
}
/*Packages Section*/
.packages .grid li {
padding: 50px;
flex-basis: 50%;
text-align: center;
}
.packages .grid li i {
color: #e07e7b;
}
.packages .grid li h4 {
font-size: 30px;
margin: 25px 0;
}
@media (max-width: 800px) {
.packages .grid li {
flex-basis: 100%;
padding: 20px;
}
}
/*Testimonials Section*/
.testimonials .quote {
font-size: 22px;
font-weight: 300;
line-height: 1.5;
margin: 40px 0 25px;
}
@media (max-width: 800px) {
.testimonials .quote {
font-size: 18px;
margin: 15px 0;
}
.testimonials .author {
font-size: 14px;
}
}
/*Contact Section*/
.contact form {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 60%;
}
.contact form .btn {
padding: 18px 42px;
}
.contact form input {
padding: 15px;
margin-right: 30px;
font-size: 18px;
color: #555;
flex: 1;
}
@media (max-width: 1000px) {
.contact form input {
flex-basis: 100%;
margin: 0 0 20px 0;
}
}
/*Footer Section*/
footer {
display: flex;
align-items: center;
justify-content: space-around;
background-color: #555;
color: #fff;
padding: 20px 0;
}
footer ul {
display: flex;
}
footer ul li {
margin-left: 16px;
}
footer p {
text-transform: uppercase;
font-size: 14px;
opacity: 0.6;
align-self: center;
}
@media (max-width: 1100px) {
footer {
flex-direction: column;
}
footer p {
text-align: center;
margin-bottom: 20px;
}
footer ul li {
margin: 0 8px;
}
}