Animations, Landing Page

Simple Landing page Html template free download

Hello everyone, in this post we will learn how to create a simple landing page in HTML, CSS, and javascript. Landing pages are used to represent the company and businesses. In the last post, we created a Shuffle card using CSS and javascript. In this particular post, our target is to create and develop a home page.

Simple Landing page:

As you can see in the image we have created a home page in HTML, CSS and javascript. They are front-end languages and we have used these front-end languages to create the page for our company.

This home page has different parts. On the top left side, it has a logo that represents the company. On the right top side, we have a menu button. When you click on the button then it opens up and shows a beautiful menu. The menu has the link to all the pages of the landing page. You can reach any page using this menu but at this point, we have just created a dummy menu without connecting with any pages of the landing page.

Below this, it has a beautiful background color. Then it has some text and beautiful lines related to business or company. These tag lines represent the company. Below this, it has a button that helps us to explore more things related to the company. Then we used different social media icons. If any user wants to follow the company on social media then he/she is free to follow the company on social media as well.

We have discussed the content but our focus is to create this type of landing page using Html, CSS and javascript. Let us see how to create this type of landing page for our company as well.

How do create a simple landing page in HTML and CSS?

For creating the landing page we have to follow some steps. These steps will help us to create a beautiful page without facing any errors because we will do it in steps.

Download a code editor for the Simple Landing page:

There is a lot of code editor for writing Html, CSS, and javascript but we are going to use vs code or brackets for this project.

Html source code:

We have used the Html to write content, and create buttons, social media icons, and logos. All these things are possible just because of HTML. It allows us to create the skeleton of the project.

<!DOCTYPE html>
<html>
<head>
	<title>Simple Landing page  - fantacydesigns</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

 <!-- Video Source -->
  <!--  -->
  <section class="showcase">
    <header>
      <h2 class="logo">Travel</h2>
      <div class="toggle"></div>
    </header>
    <video src="https://traversymedia.com/downloads/videos/explore.mp4" muted loop autoplay></video>
    <div class="overlay"></div>
    <div class="text">
      <h2>Never Stop To </h2> 
      <h3>Exploring The World</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
      <a href="#">Explore</a>
    </div>
    <ul class="social">
      <li><a href="#"><img src="https://i.ibb.co/x7P24fL/facebook.png"></a></li>
      <li><a href="#"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></a></li>
      <li><a href="#"><img src="https://i.ibb.co/ySwtH4B/instagram.png"></a></li>
    </ul>
  </section>
  <div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Destination</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

      
    </body>
</html>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Simple Landing page - fantacydesigns</title>

</head>

<body>

<h2 class="logo">Travel</h2>

</header>

<h2>Never Stop To </h2>

<h3>Exploring The World</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat.</p>

<a href="#">Explore</a>

</div>

</ul>

</section>

<ul>

<li><a href="#">Destination</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</body>

</html>

</body>

</html>

Source code of css:

CSS is used to design our landing page. The landing page has a beautiful design and it is responsive across all devices. All these things are possible because we have used the css properties in our project. It has a lot of properties and it allows us to design any website using its properties.

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
header
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 100px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .logo
{
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}
.toggle
{
  position: relative;
  width: 60px;
  height: 60px;
  background: url(https://i.ibb.co/HrfVRcx/menu.png);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center;
  cursor: pointer;
}
.toggle.active
{
  background: url(https://i.ibb.co/rt3HybH/close.png);
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center;
  cursor: pointer;
}
.showcase
{
  position: absolute;
  right: 0;
  width: 100%;
  min-height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111;
  transition: 0.5s;
  z-index: 2;
}
.showcase.active
{
  right: 300px;
}

.showcase video
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}
.overlay
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #03a9f4;
  mix-blend-mode: overlay;
}
.text
{
  position: relative;
  z-index: 10;
}

.text h2
{
  font-size: 5em;
  font-weight: 800;
  color: #fff;
  line-height: 1em;
  text-transform: uppercase;
}
.text h3
{
  font-size: 4em;
  font-weight: 700;
  color: #fff;
  line-height: 1em;
  text-transform: uppercase;
}
.text p
{
  font-size: 1.1em;
  color: #fff;
  margin: 20px 0;
  font-weight: 400;
  max-width: 700px;
}
.text a
{
  display: inline-block;
  font-size: 1em;
  background: #fff;
  padding: 10px 30px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #111;
  letter-spacing: 2px;
  transition: 0.2s;
}
.text a:hover
{
  letter-spacing: 6px;
}
.social
{
  position: absolute;
  z-index: 10;
  bottom: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social li
{
  list-style: none;
}
.social li a
{
  display: inline-block;
  margin-right: 20px;
  filter: invert(1);
  transform: scale(0.5);
  transition: 0.5s;
}
.social li a:hover
{
  transform: scale(0.5) translateY(-15px);
}
.menu
{
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu ul
{
  position: relative;
}
.menu ul li
{
  list-style: none;
}
.menu ul li a
{
  text-decoration: none;
  font-size: 24px;
  color: #111;
}
.menu ul li a:hover
{
  color: #03a9f4; 
}

@media (max-width: 991px)
{
  .showcase,
  .showcase header
  {
    padding: 40px;
  }
  .text h2
  {
    font-size: 3em;
  }
  .text h3
  {
    font-size: 2em;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

header

{

position: absolute;

top: 0;

left: 0;

width: 100%;

padding: 40px 100px;

z-index: 1000;

display: flex;

justify-content: space-between;

align-items: center;

}

header .logo

{

color: #fff;

text-transform: uppercase;

cursor: pointer;

}

.toggle

{

position: relative;

width: 60px;

height: 60px;

background: url(https://i.ibb.co/HrfVRcx/menu.png);

background-repeat: no-repeat;

background-size: 30px;

background-position: center;

cursor: pointer;

}

.toggle.active

{

background: url(https://i.ibb.co/rt3HybH/close.png);

background-repeat: no-repeat;

background-size: 25px;

background-position: center;

cursor: pointer;

}

.showcase

{

position: absolute;

right: 0;

width: 100%;

min-height: 100vh;

padding: 100px;

display: flex;

justify-content: space-between;

align-items: center;

background: #111;

transition: 0.5s;

z-index: 2;

}

.showcase.active

{

right: 300px;

}

.showcase video

{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

opacity: 0.8;

}

.overlay

{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #03a9f4;

mix-blend-mode: overlay;

}

.text

{

position: relative;

z-index: 10;

}

.text h2

{

font-size: 5em;

font-weight: 800;

color: #fff;

line-height: 1em;

text-transform: uppercase;

}

.text h3

{

font-size: 4em;

font-weight: 700;

color: #fff;

line-height: 1em;

text-transform: uppercase;

}

.text p

{

font-size: 1.1em;

color: #fff;

margin: 20px 0;

font-weight: 400;

max-width: 700px;

}

.text a

{

display: inline-block;

font-size: 1em;

background: #fff;

padding: 10px 30px;

text-transform: uppercase;

text-decoration: none;

font-weight: 500;

margin-top: 10px;

color: #111;

letter-spacing: 2px;

transition: 0.2s;

}

.text a:hover

{

letter-spacing: 6px;

}

.social

{

position: absolute;

z-index: 10;

bottom: 80px;

display: flex;

justify-content: center;

align-items: center;

}

.social li

{

list-style: none;

}

.social li a

{

display: inline-block;

margin-right: 20px;

filter: invert(1);

transform: scale(0.5);

transition: 0.5s;

}

.social li a:hover

{

transform: scale(0.5) translateY(-15px);

}

.menu

{

position: absolute;

top: 0;

right: 0;

width: 300px;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

.menu ul

{

position: relative;

}

.menu ul li

{

list-style: none;

}

.menu ul li a

{

text-decoration: none;

font-size: 24px;

color: #111;

}

.menu ul li a:hover

{

color: #03a9f4;

}

@media (max-width: 991px)

{

.showcase,

.showcase header

{

padding: 40px;

}

.text h2

{

font-size: 3em;

}

.text h3

{

font-size: 2em;

}

Javascript source code:

It is a dynamic programming language and we have used it to add functionality to our landing page. When we click on the menu then it opens up because we have used javascript in it and it helps us to add click-to-action functionality to our website.

<script type="text/javascript">
   const menuToggle = document.querySelector('.toggle');
      const showcase = document.querySelector('.showcase');

      menuToggle.addEventListener('click', () => {
        menuToggle.classList.toggle('active');
        showcase.classList.toggle('active');
      })
</script>

const menuToggle = document.querySelector('.toggle');

const showcase = document.querySelector('.showcase');

menuToggle.addEventListener('click', () => {

menuToggle.classList.toggle('active');

showcase.classList.toggle('active');

})

</script>

Download source code:

Sometimes it is hard for learners to copy this code and use it in their HTML, CSS, and javascript files and then connect these files with each other. For those learners, we have a solution. We have created a file with HTML, CSS, and javascript code files. Download that file from below.

I hope it was a helpful post related to this landing page. If you have learned anything or find it interesting then you can like and share this post.

Thanks for your precious time.

Go to top

Download Source CodeClick to Download