Gaming-Cpu-Landing-Page-Using-HTML-CSS-GSAP

Gaming CPU Landing Page Design Using GSAP | HTML, CSS And GSAP

"Landing page designs" are an important part of every website homepage. Because every user attraction is a landing page. The website landing page must be informative and we'll design. You can add animations for extra effect user experience. There are a number of animation libraries to create animation. But our favorite is 'gsap'.

This "landing page animation" is designed by Using HTML CSS and gsap.

We have already created a lot of animation using the gsap. We have also created a dedicated playlist of gsap animation. You must visit that playlist.

In this gsap animation, we have one image on the screen left side and in the main heading, a small description with a call to action button. Apart from this, we have a navigation bar that contains a logo and inquiry button, that's it. We include the font-awesome links in the HTML document. All the required links and content links are given below.

You can read interesting articles on web development. The link is given below.

READ ALSO:

01. All Web Development Tutorials

If you want to learn animation using javascript, gsap and plugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. You can visit gsap animations playlist.

01. html structure

<!DOCTYPE html>
<html>
<head>
 <title>Gaming Cpu Landing Page Using GSAP | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>

<body>

  main content.

<script src="script.js"></script>
</body>
</html>

02. HTML

Before writing HTML code let's include some important plugins inside HTML document.

'font-awesome'

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

Add gsap plugins at the bottom of the HTML document.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

Now it's time to include content into the HTML body that is visible to the user. You can see below the complete HTML code.

<!DOCTYPE html>
<html>
<head>
 <title>Gaming Cpu Landing Page Using GSAP | Rustcode</title>
 <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>

<body>

<div class="header-container">
  <div class="menu-container">
    <nav>
      <div>
        <h2>LiveCore.</h2>
      </div>
      <div>
        <button class="btn">Enquiry</button>
      </div>
    </nav>
  </div>

  <div class="header-content-container">
    <div class="header-image-container">
      <img src="cpu.png">
    </div>
    <div class="header-heading-container">
      <h2>BUILD YOUR GAMING CPU</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor gravida dapibus. Aenean lobortis eu tellus eu auctor. Donec a sapien tincidunt, molestie eros id, congue velit. In id augue porta, eleifend nulla vitae, finibus libero. Integer eu odio venenatis, finibus.</p>
      <div class="btn-container">
        <button class="btn">Buy Now</button>
        <button class="btn">Details</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

03. CSS

Download CPU image from the Github link.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');

*{
  margin: 0px;
  padding: 0px;
  font-family: "Poppins", sans-serif;
}

body{
  background: #A2E3C4;
  overflow: hidden;
}

.menu-container{
  height: 100px;
  background: #111;
}

nav{
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100px;
  padding: 0px 20px;
  color: white;
  align-items: center;
}

.header-content-container{
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 20px;
  flex-wrap: wrap;
  align-items: center;
  width: 80%;
  margin: auto;
}

.btn{
  border: 0px;
  padding: 10px 20px;
  background: #214DFE;
  color: white;
  cursor: pointer;
}

.header-heading-container{
  width: 500px;
  max-width: 100%;
}

.header-heading-container > h2{
  font-size: 5rem;
  line-height: 4.9rem;
}

.header-heading-container > p{
  text-align: justify;
}

.header-image-container{
  width: 400px;
}

.header-image-container img{
  width: 100%;
}

.btn-container > button{
  margin-top: 20px;
  padding: 16px 32px;
  margin-right: 10px;
}

.btn-container > button:hover{
  box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px 0px,
 rgba(17, 17, 26, 0.1) 0px 16px 56px 0px,
 rgba(17, 17, 26, 0.1) 0px 24px 80px 0px;
}

04. GSAP SCRIPT

Gsap code to create animation. This is a very simple and basic animation code of 'tweenmax'.

TweenMax.staggerFrom("nav > div", 1, {
  y: 10,
  opacity: 0,
  delay: 0.1,
  ease: Expo.easeInOut
}, 0.1);


TweenMax.staggerFrom(".header-heading-container > *", 2.4, {
  x: 200,
  opacity: 0,
  delay: 0.4,
  ease: Expo.easeInOut
}, 0.1);

TweenMax.from("img", 2, {
  x: -200,
  opacity: 0,
  delay: 0.5,
  ease: Expo.easeInOut
}, 0.1);

05. Youtube Video

Here we are attaching a Youtube video from our channel so that you can understand this article better and you can create a better web user interface. We have a lot of videos on our Youtube channel which is related to the user interface and web development. You can also, learn about web development from there.

06. Source Code

After reading this article and watching a Youtube video, if you want to download the source code, you can download it from here and change this according to your need.

Archive