Amazon Prime Video Website Clone in HTML5 CSS3 & JavaScript

0Shares

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="container">
        <div class="navbar" >
          
            <a href="#home"><img src="primelogo.png" class="p"></a>
            <a href="#news"><i class="fa fa-globe g" aria-hidden="true" ></i></a>
            <div class="dropdown">
              <button class="dropbtn">EN
                <i class="fa fa-caret-down"></i>
              </button>
              <div class="dropdown-content">
                <a href="#">Bahasa Indonesia</a>
                <a href="#">Dansk</a>
                <a href="#">Deutsch</a>
                <a href="#">English</a>
                <a href="#">Espanol</a>
                <a href="#">Francais</a>
                <a href="#">Italiano</a>
                <a href="#">Nederlands</a>
                <hr class="l"> </hr>
                <div class="d1">
                  <a href="#">Norsk</a>
                  <a href="#">Polski</a>
                  <a href="#">Portuhues(Brasil</a>
                  <a href="#">Suomi</a>
                  <a href="#">Svenska</a>
                  <a href="#">Turkce</a>
                  <a href="#">Pyccknn</a>
                  <a href="#">   हिन्दी</a>
                </div>
               
             
            </div> 
           
          </div>
          <a href="#news" class="e">Sign In</a>
          </div>
          <img src="amazon1.png" class="s" data-aos="flip-up">
          <p class="k" data-aos="zoom-in">Welcome to Prime Video</p>
          <p class="t">Join Prime to watch the latest movies, TV shows<br> and award-winning Amazon Originals</p>
          <button class="button button2">Login to join Prime</button>
          
    </div>
    <div class="w">
      <img src="https://m.media-amazon.com/images/G/01/digital/video/Magellan_MLP/IN-Living-Room-V2._CB524587855_SY1200_FMJPG_.jpg" >
      <div class="w1">
      <p class="k2" data-aos="fade-up-left">Great Entertainment</p>
      <p class="t2">With your Prime membership, you have access to <br>exclusive Amazon Originals, blockbuster Bollywood movies, regional movies and more.</p><br><br>
      <button class="button button2" style="margin-left: 10px;">Get started</button>
      </div>

    </div>
    <div class="y">
      <img src="https://m.media-amazon.com/images/G/01/digital/video/Magellan_MLP/PRIME_multi-benefit_MAGNET_2X._CB1519820207_SY1200_FMJPG_.jpg" >
      <div class="y1">
      <p class="k3" data-aos="fade-up-right">One membership, many benefits</p>
      <p class="t3">Your Prime membership now also includes ad-free music along <br>with  unlimited free, fast delivery on eligible items, exclusive <br> access to deals & more.</p><br><br>
      <button class="button button2" >Get started</button><br>
      <p class="t4">*Go to amazon.in/prime for more information</p>
      </div>

    </div>
    <div class="z">
      <img src="https://images-na.ssl-images-amazon.com/images/G/01/digital/video/Magellan_MLP/MLP_Template_Image_Left._SY1200_FMJPG_.jpg" >
      <div class="z1">
      <p class="k4" data-aos="fade-up-left">Even better with Fire TV Stick</p>
      <p class="t5">The biggest movies and TV shows are always better on a big <br>screen. Simply plug in your Amazon Fire TV Stick and stream on<br> any HDTV. Press the voice button on the remote and say the name <br> of the title you want to watch to find it in seconds.</p><br><br>
      <button class="button button2" style="margin-left: 740px;" >Get started</button><br>
      
      </div>

    </div>
    <div class="r">
     
      <img src="https://images-na.ssl-images-amazon.com/images/G/01/digital/video/Magellan_MLP/PV_Benefits_Devices.jpg" class="i2 " data-aos="flip-left">
      <img src="https://images-na.ssl-images-amazon.com/images/G/01/digital/video/Magellan_MLP/PV_Benefits_Download_IN.jpg" class="i3" data-aos="fade-down">
   <img src="https://images-na.ssl-images-amazon.com/images/G/01/digital/video/Magellan_MLP/300x300_Tile_1.png" class="i4" data-aos="fade-right">
    

    <div class="o">
           <p>Watch anywhere
             <br>
             <span class="g7">Enjoy from the web or with the Prime Video<br> app  on your phone, tablet, or <br>select Smart TVs — <br>on up to 3 devices at once.</span>
           </p>
           <p class="o1">Download and go
            <br>
            <span class="g1">Watch offline on the Prime Video app<br> when you download titles to <br>your iPhone, iPad, Tablet,<br> or Android device.</span>
           </p>
           <p class="o2">
             Data Saver
             <br>
             <span class="g2">Control data usage while downloading <br>and watching videos on select phones <br>or tablets.</span>
            </p>
    </div>
    <div>
      <img src="https://m.media-amazon.com/images/G/01/digital/video/Magellan_MLP/IN-kids-30Jan._CB1517304519_SY1200_FMJPG_.jpg" class="h">
      <div class="z1">
        <p class="k8" data-aos="fade-up-right">Family Friendly</p>
        <p class="t8">With easy to use Parental Controls and a dedicated <br>kids page, enjoy secure, ad-free kids entertainment.<br> Kids can enjoy popular TV shows like Peppa Pig,<br> Powerpuff Girls, and Chhota Bheem.</p><br><br>
        <button class="button button2" style="margin-left: 140px;" >Get started</button><br>
        
        </div>
    </div>
    <div class="gr">
      <img src="primelogo.png" class="p1">
 <a href="#" style="color:rgb(39, 182, 201);margin-left: -300px;;"  >Terms and Privacy Notice &nbsp &nbsp &nbsp &nbsp Send us feedback &nbsp &nbsp &nbsp Help </a>
 <p style="color:#fff;margin-left: 490px;margin-top: 20px;">© 1996-2020, Amazon.com, Inc. or its affiliates</p>
    </div>
    </div>
   
     
    
    <script src="script8.js"></script>
</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
   
    list-style-type: none;
    text-decoration: none;
    box-sizing: border-box;
    outline: none;
}


body {
    font-family: Arial, Helvetica, sans-serif;
  background-color: black;

  }
  
  .navbar {
    overflow: hidden;
    background-color: rgba(22, 31, 53, 0.97);
  
  }
  
  .navbar a {
    float: left;
    font-size: 20px;
    color: #fff;
    text-align: center;
  
    text-decoration: none;
   
  }
  
  .dropdown {
    float: left;
    overflow: hidden;
  
  }
  
  .dropdown .dropbtn {
    font-size: 20px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
   margin: 0;
  }
  
  
  
  .dropdown-content {
    display: none;
    position: relative;
    background-color: rgba(22, 31, 53, 0.97);
    min-width: 560px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    height:400px;
   float:right;
  }
  
  .dropdown-content a {
    float: none;
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .p{
      width: 150px;
      height: 60px;
      mix-blend-mode: lighten;
     
  }
  .g{
      font-size: 24px;
     margin-top: 14px;
   margin-left: 1150px;
  }

  
.s{
  margin-left: 670px;
}

.k{
  color:#fff;
  font-size: 45px;
  margin-top: -370px;
  margin-left: 40px;
}
.t{
  color:#fff;
  font-size: 30px;
margin-top: 20px;
  margin-left: 40px;
  font-family: Sanchez;
}
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 92px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button2 {
  background-color: #026f94;
   margin-left: 45px;
   margin-top: 20px;
} 


.e{
  margin-top: 15px;
}
.l{
  background-color: #222; 
  margin-left: 100px;
  transform: rotate(90deg);
 width:50%;
 margin-top: -190px;
 

}
.d1{
  margin-top: -190px;
  margin-left: 300px;
}
.w{
  margin-top: 200px;
}

.w1{
  margin-left: 880px;
  margin-top: -130px;
}
.k2{
  color: #fff;
  font-size: 45px;
  margin-top: -570px;
 
}
.t2{
  color: #fff;
  font-size: 25px;
margin-top: 20px;
 
  font-family: Sanchez;
}
.y{
  margin-top: 230px;
}
.k3{
  color: #fff;
  font-size: 45px;
  margin-top: -520px;
  margin-left: 40px;
}
.t3{
  color: #fff;
  font-size: 25px;
margin-top: 20px;
margin-left: 40px;
  font-family: Sanchez;
}
.t4{
  color: #fff;
  font-size: 15px;
margin-top: 20px;
margin-left: 40px;
  font-family: Sanchez;
}
.z{
  margin-top: 130px;
}
.k4{
  color: #fff;
  font-size: 45px;
  margin-top: -520px;
  margin-left: 740px;
}
.t5{
  color: #fff;
  font-size: 25px;
margin-top: 20px;
margin-left: 740px;
  font-family: Sanchez;
}

.r{
  margin-top: 240px;
  background-color: white;
height:600px;
  width: 1550px;
}
.i2{
  margin-left: 130px;
  margin-top: 40px;
}
.i3{
  margin-left: 130px;
}
.i4{
  margin-left: 130px;
}
.o{
  margin-left: 150px;
 font-size: 40px;
}

.o1{
  margin-left: 410px;
  margin-top: -230px;
}
.o2{
  margin-left: 890px;
  margin-top: -230px;
}
.g7{
  margin-left: -90px;
  font-size: 20px;
}
.g1{
  margin-left: -30px;
  font-size: 20px;
}
.g2{
  margin-left: -10px;
  font-size: 20px;
}
.h{
  margin-top: 60px;
  width: 1520px;
  height: 600px;
}
.k8{
  color: #fff;
  font-size: 45px;
  margin-top: -520px;
  margin-left: 140px;
}
.t8{
  color: #fff;
  font-size: 25px;
margin-top: 20px;
margin-left: 140px;
  font-family: Sanchez;
}
.gr{
  background-color: rgb(41, 40, 40);
  height:400px;
  width: 1550px;
}
.p1{
  width: 150px;
  height: 60px;
  mix-blend-mode: lighten;
  margin-top: 250px;
  margin-left: 600px;
}
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .navbar a.icon {
    float: right;
    display: block;
  }
}

script.js

$(function(){
   
    AOS .init({
        easing:'ease',
        duration:1000,
    })
})
0Shares

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.