DEV Community

Cover image for How I made my first landing page (with some JS)
Lens
Lens

Posted on • Updated on

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

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!



Table of contents

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>
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode



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%;
}
Enter fullscreen mode Exit fullscreen mode



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');
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode



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);
}
Enter fullscreen mode Exit fullscreen mode

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%;
}

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (3)

Collapse
 
shrit1401 profile image
Shrit Shrivastava

It's really great buddy not gonna lie or do anything for promotion, I have seen you have mentioned your design doesn't look that good

dev.to/shrit1401/how-you-make-your...

check this blog, I have devoted all my design knowledge

Apart from that Good Work Kiddo

Collapse
 
lensco825 profile image
Lens

Thank you! Your blog gave me a refresher and ideas on what i should put on my next project, i didn't even know what UX and UI meant 😅.

Collapse
 
shrit1401 profile image
Shrit Shrivastava

lmao glad I was of some help