Follow Us On Instagram
We use cookies to ensure that we give you the best experience on our website.

How To Create Starbucks Landing Page with HTML, CSS, and JavaScript

img

Creating a Starbucks-inspired landing page was an insightful web development venture. Here’s a concise overview of the process:

Designing Starbucks Vibes:
Selected earthy tones and Starbucks’ iconic green for a warm and inviting ambiance.

HTML and CSS Essentials:
Structured content with HTML and achieved responsive design with CSS.

JavaScript for Interactivity:
Used JavaScript for subtle animations upon page load, enhancing user engagement.

Prioritizing User Experience:
Ensured responsiveness across devices through CSS media queries.

Streamlined Navigation:
Added smooth scrolling and a sticky navigation bar for effortless user navigation.

Conclusion:
This project underscored the importance of detail, responsiveness, and immersive user experiences in web development. Like a perfectly brewed cup of coffee, a well-crafted landing page can leave a lasting impression. Whether you’re a seasoned developer or a beginner, embrace the chance to brew your creativity, one webpage at a time.

Steps To Create Starbucks Landing Page with HTML, CSS, and JavaScript

To build a Starbucks Landing Page using HTML and CSS, and javascript follow these steps

1: Create a folder. Create a folder inside with these names Named css img and js.

2: Create an index.html file. The file name must be index and its extension .html ( in main folder )

3: Create a style.css file. The file name must be style and its extension .css ( in css folder )

4:Create a script.js . in js file

5:click here to download images and store it in img file.

Download images

Here is index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <!-- codebyrolex visit our website https://codebyrolex.com   -->
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Viga&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
    <title>Starbucks Landing Page</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>

    <header>
      <div class="left-side">
        <a href="#"> <img src="img/logo.png" alt=""> </a>
      </div>
      <div class="right-side">
        <div class="nav-link-wrapper"> <a href="">Home</a> </div>
        <div class="nav-link-wrapper"> <a href="">Menu</a> </div>
        <div class="nav-link-wrapper"> <a href="">What's New</a> </div>
        <div class="nav-link-wrapper"> <a href="">Contact</a> </div>
      </div>
    </header>

    <div class="container">

      <div class="left-side">
        <h1>It's not just Coffee <br>
          It's <span class = "green"> Starbucks </span>
        </h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque
           sunt cumque pariatur sint dignissimos odio sit facilis porro veritatis
           earum itaque similique voluptatem dolores est ipsum, sequi non temporibus,
           quae.</p>
        <a href="">Learn More</a>
      </div>
      <div class="right-side">
        <img src="img/img1.png" alt="" class = "starbucks">
        <div class="box">
          <a href="#"> <img class = "facebook" src="img/facebook.png" alt=""></a>
          <a href="#"> <img src="img/instagram.png" alt=""></a>
          <a href="#"> <img src="img/twitter.png" alt=""></a>
        </div>
      </div>
    </div>
    <div class="thumb">
      <a href = "#bottom"><img id = "bottom" src="img/thumb1.png" onclick="imgSlider('img/img1.png');"> </a>
      <a href="#bottom"><img src="img/thumb2.png" onclick="imgSlider('img/img2.png');"> </a>
      <a href="#bottom"><img src="img/thumb3.png" onclick="imgSlider('img/img3.png');"> </a>
    </div>

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

Here is style.cs

*{
  margin: 0px;
  padding: 0px;
}
/* codebyrolex visit our website https://codebyrolex.com    */
body{
  overflow-x: hidden;
}

header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 10px auto;
}

header .left-side a img{
  width: 80px;
}

header .right-side{
  display: flex;
}

header .right-side .nav-link-wrapper a{
  padding: 10px;
  margin: 10px;
  text-decoration: none;
  color: black;
}

.container{
  max-width: 80%;
  margin: 50px auto;
}

.container .left-side{
  text-align: center;
}

.container .left-side h1{
  font-size: 60px;
  letter-spacing: 2px;
}

.container .left-side h1 .green{
  color: green;
  font-family: 'Viga', serif;
}

.container .left-side p{
  font-size: 20px;
  letter-spacing: 0.5px;
}

.container .left-side a{
  display: inline-block;
  background: green;
  padding: 12px 18px 12px 18px;
  text-decoration: none;
  border-radius: 25px;
  color: white;
  margin-top: 15px;
  font-size: 17px;
  font-weight: bold;
}

.container .right-side{
  text-align: center;
  margin-top: 60px;
}

.container .right-side img{
  max-width: 50%;
}

.container .right-side .box{
  position: absolute;
  display: grid;
  right: 0%;
  bottom: 0%;
}

.container .right-side .box img{
  width: 25px;
  margin: 10px;
}

.container .right-side .box img.facebook{
  width: 18.5px;
}

.thumb{
  display: flex;
  margin-top: -60px;
  justify-content: center;
}

.thumb a:hover{
  margin-top: -15px;
  transition: 0.2s;
}

.thumb img{
  width: 54px;
  margin: 20px;
}

@media (min-width: 1140px){
  *{
    margin: 0px;
    padding: 0px;
  }

  body{
    overflow-x: hidden;
  }

  header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: 10px auto;
  }

  header .left-side a img{
    width: 80px;
  }

  header .right-side{
    display: flex;
  }

  header .right-side .nav-link-wrapper a{
    padding: 10px;
    margin: 10px;
    text-decoration: none;
    color: black;
  }

  .container{
    max-width: 90%;
    margin: 50px auto;
    display: flex;
  }

  .container .left-side{
    text-align: left;
    flex: 1;
  }

  .container .left-side h1{
    font-size: 60px;
    letter-spacing: 2px;
  }

  .container .left-side h1 .green{
    color: green;
    font-family: 'Viga', serif;
  }

  .container .left-side p{
    font-size: 20px;
    letter-spacing: 0.5px;
  }

  .container .left-side a{
    display: inline-block;
    background: green;
    padding: 12px 18px 12px 18px;
    text-decoration: none;
    border-radius: 25px;
    color: white;
    margin-top: 15px;
    font-size: 17px;
    font-weight: bold;
  }

  .container .right-side{
    flex: 1;
    text-align: center;
  }

  .container .right-side img{
    width: 330px;
    margin-left: 150px;
    margin-top: -30px;
  }

  .container .right-side .box{
    display: grid;
    position: absolute;
    bottom: 40%;
    right: 1%;
  }

  .container .right-side .box img{
    width: 25px;
    margin: 10px;
  }

  .container .right-side .box img.facebook{
    width: 18.5px;
  }

  .thumb{
    position: absolute;
    bottom: 0%;
    left: 40%;
  }

  .thumb a:hover{
    margin-top: -15px;
    transition: 0.2s;
  }

  .thumb img{
    width: 54px;
    margin: 20px;
  }
}

@media only screen and (max-width: 650px){
  header{
    display: block;
  }

  header .left-side a img{
    width: 80px;
    margin: auto;
    display: block;
  }

  header .right-side{
    display: flex;
    justify-content: center;
    margin-top: 35px;
  }

  header .right-side .nav-link-wrapper a{
    padding: 10px;
    margin: 10px;
    text-decoration: none;
    color: black;
  }
  .container{
    max-width: 80%;
    margin: 50px auto;
  }

  .container .left-side{
    text-align: center;
  }

  .container .left-side h1{
    font-size: 50px;
    letter-spacing: 2px;
  }

  .container .left-side h1 .green{
    color: green;
    font-family: 'Viga', serif;
  }

  .container .left-side p{
    font-size: 18px;
    letter-spacing: 0.5px;
  }

  .container .left-side a{
    display: inline-block;
    background: green;
    padding: 12px 18px 12px 18px;
    text-decoration: none;
    border-radius: 25px;
    color: white;
    margin-top: 15px;
    font-size: 16.2px;
    font-weight: bold;
  }
}

@media only screen and (max-width: 404px){
  header{
    display: block;
  }

  header .left-side a img{
    width: 80px;
    margin: auto;
    display: block;
  }

  header .right-side{
    display: flex;
    justify-content: center;
    margin-top: 35px;
  }

  header .right-side .nav-link-wrapper a{
    padding: 5px;
    margin: 5px;
    text-decoration: none;
    color: black;
  }
  .container .right-side img{
    width: 330px;
    margin-top: -30px;
  }
  .container .right-side img{
    max-width: 50%;
  }

  .container .right-side .box{
    display: none;
    position: absolute;
    bottom: 250px;
    right: 25px;
  }

  .container .right-side .box img{
    width: 25px;
    margin: 10px;
  }

  .container .right-side .box img.facebook{
    width: 18.5px;
  }

  .thumb{
    display: flex;
    margin-top: -30px;
    justify-content: center;
  }

  .thumb a:hover{
    margin-top: -15px;
    transition: 0.2s;
  }

  .thumb img{
    width: 45px;
    margin: 20px;
  }
}
CSS

Here is script.js

function imgSlider(anything){
  document.querySelector('.starbucks').src = anything;
}
// codebyrolex visit our website https://codebyrolex.com
JavaScript

Output

Share your love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *