Creative Landing Page Design using Html CSS & Javascript | Website Design Tutorial pepsi website

Creative Landing Page Design using Html CSS & Javascript , Website Design Tutorial pepsi website.

SOURCE CODE

HTML SOURCE_CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>

    <title> PEPSI COLA</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>

<div class="header">
    <a href="#">
      <img class="logo"   src="img/396-3962214_pepsi-logo-2014-png-pepsi-logo.png" alt="">
    </a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">What's New</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

  <div class="container-fluid">

    <div class="row">
      <div class="col-md-6 pip1">
        <div class="text1 text">
          <p class="te1">PEPSI</p>
          <br>
          <p class="te2">Pepsi. Diet Pepsi. Pepsi Zero Sugar.
The gang’s all here. Compare flavors, get nutritional facts and
check out ingredients for all our Pepsi products. </p>
          <p class="N">NUTRITION FACTS</p>

          <div class="nf">

            <span><span>00g</span>Total Fat</span>
            <span><span>30mg</span>Sodium</span>
            <span><span>00 </span> Protein</span>
            <span><span>41 </span>Sugars</span>
          </div>
          <br> <a href="#">
              BUY NOW</a>
      </div>
      <div class="text2 text">
        <p class="te1">
          PEPSI ZERO SUGAR</p>
        <br>
        <p class="te2">Pepsi. Diet Pepsi. Pepsi Zero Sugar
. The gang’s all here. Compare flavors, get nutritional facts
and check out ingredients for all our Pepsi products. </p>
        <p class="N">NUTRITION FACTS</p>

        <div class="nf">

          <span><span>00g</span>Total Fat</span>
          <span><span>30mg</span>Sodium</span>
          <span><span>00 </span> Protein</span>
          <span><span>00 </span>Sugars</span>
        </div>
        <br> <a href="#">
            BUY NOW</a>
    </div>
    <div class="text3 text">
      <p class="te1">DIET PEPSI</p>
      <br>
      <p class="te2">Pepsi. Diet Pepsi. Pepsi Zero Sugar.
The gang’s all here. Compare flavors, get nutritional facts
and check out ingredients for all our Pepsi products. </p>
      <p class="N">NUTRITION FACTS</p>




      <div class="nf">

        <span><span>00g</span>Total Fat</span>
        <span><span>30mg</span>Sodium</span>
        <span><span>00 </span> Protein</span>
        <span><span>41 </span>Sugars</span>
      </div>
      <br> <a href="#">
          BUY NOW</a>
  </div>
      </div>
      <div class="col-md-6 pip">

        <img id="sh1" src="img/can-pepsi-zero-sugar.png" alt="">
        <img id="sh2" src="img/can-pepsi.png" alt="">
        <img id="sh3" src="img/Diet-Pepsi-v2_12oz.png" alt="">
        <div class="lc">

          <img id="c1" class="butt" src="img/can-pepsi-zero-sugar.png" alt="">
          <img id="c2" class="butt" src="img/can-pepsi.png" alt="">
          <img id="c3" class="butt" src="img/Diet-Pepsi-v2_12oz.png" alt="">
         </div>

      </div>



    </div>
  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js" integrity="sha512-JO6JyFPJupQKZf7icgZkHwuq/rAQxH7COqvEd4WdK52AtHPedwHog05T69pIelI69jVN/zZbW6TuHfH2mS8j/Q==" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/CSSRulePlugin.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/EaselPlugin.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src='index.js'></script>
</html>

CSS SOURCE_CODE:-

*{padding: 0;
margin: 0;
box-sizing: border-box;}

.header{
  position: absolute;;
  top: 0;
  left: 0;
  width: 100%;
  padding:10px 100px;
  display: flex;
  justify-content:space-between;
  align-items: center;
  z-index: 400;

}
.logo{
  position: relative;
  max-width: 60px;
transition: 0.4s;
}
.logo:hover{
  transform: rotate(360deg);
}
.header ul{
  position: relative;
  display: flex;
}
.header ul li{
  list-style: none;
}
.header ul li a{
display: inline-block;
color: rgb(255, 255, 255);
font-weight: 400;
margin-left: 40px;
}

.pip{

  height: 100vh;
  overflow: hidden;
  ;
}
.pip1{
  height: 100vh;
  overflow: hidden;
  ;

}

.text a{
  display: inline-flex;
    padding: 10px 20px;
    background: #ec2828;
    border-radius: 24px;
    margin-top: 5px;
    text-decoration:none;
    font-weight: 600;
    color: #fff;
    transition: 0.5s;


}
.text{
  position: absolute;
  width: 80%;
  height: 70%;
  top: 15%;
  left: 30%;
  display: inline-block;
  justify-content: center;
  align-items: center;
}
.text2 .te1{
  font-size: 62px;
  width: 90%;
}
.N{
  font-size: 25px;
  color: #fff;
}
.text a:hover{
  text-decoration:none;
  color: #fff;
  background: #2835ec;
}
.pip:after{
  content: "PEPSI";
  position: absolute;
  top: 15%;
  left: 20%;
  font-size: 12em;
  font-weight: 800;
  font-style: italic;
  color: #ffffff ;
  opacity: 0.1;
}
.pip img{
  position: absolute;
  height: 390px;
  width:cover;
  top: 15%;
  right: 30%;
  z-index: 330;

}
#sh3{
  height: 390px;

}
.lc img{
  position: absolute;
  height: 70px;
  width:cover;
  top: 85%;
  left: 30%;
}
#c1{
  left: 10%;
  transition: 1s;
}

#c2{
  left: 20%;
  transition: 1s;
}

#c3{

  transition: 1s;
  left: 30%;
}
#c1:hover,#c2:hover,#c3:hover{
  top: 82%;
}
.te1{

  display: inline-block;
  justify-content: center;
  align-items: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: rgb(255, 254, 254);
  font-size: 80px;
  z-index: 100;

}
.te2{

  display: inline-block;
  justify-content: center;
  align-items: center;
  font-family: 'Courier New', Courier, monospace ;
  color: rgb(255, 250, 250);
  font-size: 10px;
  width: 60%;
  z-index: 100;

}

.nf span{
  position: relative;
  padding: 20px 5px;
  display:inline-block;
border: solid 1px #fff;
  border-radius: 50px;
  height: 130px;
  color: rgb(255, 255, 255);
}
.nf span span{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0px;
  background: rgb(255, 255, 255);
height: 60px;
color: #000;


}

Javascript (.js file) SOURCE_CODE:-

$(".butt").click(function() {
   $('.container').attr("color-center", this.id);
   if (this.id == "c1") s1();
   if (this.id == "c2") s2();
   if (this.id == "c3") s3();



});

function s1() {
   var tl = new TimelineMax()
   .to("#sh2",0.5,{xPercent:400,opacity: "0"},0)
   .to("#sh3",0.5,{xPercent:500,opacity: "0"},0)
   .to("#sh1",0.5,{xPercent:0, ease: "back.out(2)",opacity: "1"},0)
  .from("#sh1",1,{rotation: -27,},0)
  .to(".text2",0.5,{xPercent:0, opacity: "1"},0)
  .to(".text1",0.5,{xPercent:-400,opacity: "0"},0)
   .to(".text3",0.5,{xPercent:-500,opacity: "0"},0)
  .to(".pip1",1,{backgroundColor:"rgb(34, 34, 34)"},0)
  .to(".pip",1,{backgroundColor:"rgb(34, 34, 34)"},0) ;

}

function s2() {
   var tl = new TimelineMax()
   .to("#sh1",0.5,{xPercent:530,opacity: "0"},0)
   .to("#sh3",0.5,{xPercent:400,opacity: "0"},0)
   .from("#sh2",1,{rotation: -27,},0)
   .to("#sh2",0.5,{xPercent:0, ease: "back.out(2)",opacity: "1"},0)
   .to(".pip",1,{backgroundColor:"rgb(0, 101, 195)"},0)
   .to(".pip1",1,{backgroundColor:"rgb(0, 101, 195)"},0)
   .to(".text1",0.5,{xPercent:0, opacity: "1"},0)
  .to(".text2",0.5,{xPercent:-400,opacity: "0"},0)
   .to(".text3",0.5,{xPercent:-500,opacity: "0"},0)
;
}

function s3() {
   var tl = new TimelineMax()
   .to("#sh2",0.5,{xPercent:630,opacity: "0"},0)
   .to("#sh1",0.5,{xPercent:600,opacity: "0"},0)
   .from("#sh3",1,{rotation: -27,},0)
   .to("#sh3",0.5,{xPercent:0,ease: "back.out(2)",opacity: "1"},0)
   .to(".pip1",1,{backgroundColor:"rgb(135, 135, 135)"},0)
   .to(".pip",1,{backgroundColor:"rgb(135, 135, 135)"},0)
   .to(".text3",0.5,{xPercent:0, opacity: "1"},0)
  .to(".text1",0.5,{xPercent:-400,opacity: "0"},0)
   .to(".text2",0.5,{xPercent:-500,opacity: "0"},0);

}



$(function() {
   s2();
})

web design video

part-1

👇

part-2

👇

Comments