How I made my first landing page (with some JS)

#webdev #tutorial #css #html

Introduction

During the week I've been making a responsive landing page. This tutorial is more CSS than HTML since I thought showing both all the time would be too much. I'm sorry if this is long, I just had to cover each part! Here it is down below, but if you want to see how I made it, keep scrolling down! This was just a project for me to practice my skills, but if you want to add something go to the Github page!

Responsive nav meu
Header
Storage-section
Developer-section
New features section
prices-section
footer
Conclusion

Responsive Nav Menu

I used flex to align all the items in the nav element. I then gave them a gap of 10% so they're always separated equally no matter what width the website is at. I gave the nav's children a hover animation with the text being underlined and the button changing color. I got the logo from css.gg so if you want any icons go there!

HTML

<nav id="navbar">
        <i class="gg-cloud"></i>
<!--Gave each element an id for the javascript later-->
        <p id="menuContent">Docs</p>
        <p id="menuContent" >Pricing</p>
        <p id="menuContent">Get started</p>
        <p id="menuContent">Demo</p>
        <button id="menuContent">Sign up</button>
    </nav>
<!--Will be used later-->
    <ion-icon name="menu-outline" class="menu-toggle" id="menu-toggle"></ion-icon>

CSS

nav {
    display: flex;
    gap: 10%;
    align-items: center;
    justify-content: center;
    background-color: #030303; 
    color: white;
    font-family: 'Poppins', sans-serif;
    width: 100%;
   /*To make it stay on top of the screen*/
    position: fixed;
    z-index: 10;
  }
/*When text is hovered*/
nav > p {
    cursor: pointer;
}

nav > p:hover {
    text-decoration: underline;
}

nav > button {
    font-size: 15px;
    background-color: var(--green);
    border-radius: 5px;
    transition: 0.3s ease;
    border: solid 1px black;
    padding: 7px;
}
/*When button is hovered*/
nav > button:hover {
color: black; 
background-color: white;
}

To make it responsive I made a media query where if the width of the page is below 600px the nav won't display, but instead, an icon will be shown. This icon is going to be the button that'll display the nav menu horizontally.

First, we make a class called navbar which will be for the nav element to be set it vertically. We'll center its children by giving it the right margin property.

.navbar {
  display: flex;
  flex-direction: column;
/* Inset is how much it covers, so it's covering 50% of the left side*/
  inset: 0 0 0 50%;
  gap: 10%;
}

.navbar > p {
  margin-right: 50%;
} 

.navbar > button {
  margin-right: 50%;
}

Now with Javascript, we'll use an Event listener that toggles the CSS classes to the nav and its children whenever the menu button is clicked.

var toggle = document.getElementById('menu-toggle');
var menu = document.getElementById('navbar');
var contents = document.querySelectorAll('menuContent');

toggle.addEventListener('click', function() {
    menu.classList.toggle('navbar');
    contents.classList.toggle('center');
})

Now for small screens, whenever you click the menu button the nav menu will open!

Landing page heading

The landing page headline is the first thing that should grab the user's attention, its usual text describing the company and an image, so I did exactly that. I put the text and the button in a singular div while I made the image separate. Then I gave the header element a display value of grid making the div and the image share the space 50/50. I made one of the words a span element and I stylized it to have a gradient color!

HTML

<header>
<div class="showcase-section">
<h1>Launch and manage apps, games, and websites at <span>ease!</span></h1>
<p>Cloudware is a software that can store any data while
keeping it available to the user at high speeds</p>
<button>Get started</button>
</div>
        <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80">
    </header>

CSS

header {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 30px;
    align-items: center;
    padding-left: 5rem;
}

/*Gradient text*/
span {
    color: transparent; 
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(to left, #ed8936, #ed64a6);
}

You probably saw this first section on the image on top of the blog title, pretty cool right?

Storage-section

For the storage section, I used flex making it a row, then I gapped the image and text. I put the clouds in the same div as the image and translated them to be near the image giving the image a cool look.

CSS

.storage-section {
  display: flex;
  padding-right: 10rem;
  overflow: hidden;
}
/*Positioning the image*/
.storage-section > div > img {
  position: relative;
  top: 40px;
    width: 250px;
    border-radius: 10px;
    box-shadow: 10px 10px var(--green);
}
/*Stylizing the clouds*/
ion-icon {
  z-index: 3;
  font-size: 130px;
  color: blue;
}
/*Positioning the clouds*/
ion-icon:nth-child(3) {
  transform: translate(32px, -520px);
}

Dev-section

For the dev section, I put the text and icons in 3 separate divs, I contained the in another div which I call the container. The container uses flex to separate them in a row, but using a media query, if the width of the page is below 600px it'll become a column. I also made some of the words for the heading gradient.

CSS

.Developer-part {
  font-family: 'Poppins';
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #FFE19C;
}

/*Gradient text*/
.devSpan {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
}

.devContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 45rem;
  gap: 10%;
}

New features section

This section is the same as the dev section, but the section uses grid to separate each article as a column. The container for the articles uses flex, the reason I put them all in a container is so it can be separate from the header. I also put it in the 600px media query where the div's that contain the text and image for the articles become a column giving more space.

.Extras-section {
  font-family: 'Poppins';
  display: grid;
  column-gap: 30px;
  grid-template-rows: 30% auto;
  background-color: var(--green);
  place-items: center;
  align-content: center;
  width: 100%;
}
/*Used to separate the text from the images*/
div > main {
  display: flex;
  flex-direction: column;
}
/*Separates the articles*/
.Extras-section > div {
  display: flex;
  gap: 10px;
}

Prices section

The prices section was made the same way as the developer section, with a div containing three other divs. Except now in the media query, their width becomes 100%. Inside each price, there's the name of the option, the price, and what you'll get in an unordered list. I also used grid instead of flex so it wouldn't overflow (for some reason it was doing that).

.priceContainer {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
width: 100%;
padding-bottom: 10px;
margin-inline: 8%;
}
/* Style for each price option */
.priceOptions {
  width: 20rem;
  border-radius: 5px;
  font-family: 'Poppins';
  height: 98%;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  transition: 0.3s ease-out;
}

/* Different color for each option!*/
.priceOptions:nth-child(1) {
  background-color: #FFE19C;
}

.priceOptions:nth-child(2) {
  background-color: #FCF6B1;
}

.priceOptions:nth-child(3) {
  background-color: #A9E5BB;
}

.priceOptions > h2 {
  text-decoration: underline;
  text-underline-offset: 10px;

}

/*Hover animation for pc and tablet*/
.priceOptions:hover {
  margin-bottom: 10px;
box-shadow: 10px 20px #e4d9ff;
}

Footer

Each of the children in the footer are ul elements making them vertical. The follow me and company parts do have actual links.

footer {
  font-family: 'Poppins';
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
}

footer > ul {
  list-style-type: none;
}

footer > ul > li:nth-child(1) {
  font-weight: bold;
}

/*Hover animation*/
footer > ul > li:hover {
 color: var(--green);
 cursor: pointer;
}

Conclusion

Even though I made it responsive it doesn't look so good on wide desktops because of how stretched out the text is. Overall, it looks pretty good to me. I feel like I could've made the code shorter, but I just don't have the experience for it, so hopefully next year I can make an even better landing page! If you have any suggestions on changes, just comment on them. Merry Christmas!