In this web development tutorial we are going to create a website landing page and deploy it to GitHub pages using HTML5 CSS3 and JavaScript. We will also use Font awesome for Icons, CSS variables for different color combinations and google fonts for the website main font style.

HTML code

The website will consist of just a container, a navigation and heading tag that will embody some basic information about the protagonist.

We will try to keep this page as simple as possible.

HTML Navigation

 <nav class="nav">
        <a href="https://norbertbm.com/" target="_blank">Menyhart Media</a>
        <ul class="nav-links">
          <li><a href="#">Home</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <button class="btn">Sign Up</button>
          <button class="btn">Login</button>
        </ul>
        <i class="fas fa-bars" id="menu-btn_open"></i>
        <i class="fas fa-times" id="menu-btn_close"></i>
      </nav>

HTML Header

<header>
        <h2>Hi,</h2>
        <h2>I'm Norbert!</h2>
        <h4>Welcome to my webpage</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam
          neque pariatur officia repellat necessitatibus, animi itaque
          laboriosam iste, laborum tempora quibusdam voluptatem. Consequuntur
          ipsam similique, id aperiam numquam aspernatur magni.
        </p>
        <button class="btn">Read more...</button>
      </header>

CSS code

config CSS

First you will need to do some basic configuration to the website in order to remove any unwonted margin and padding and also add preferred font family to the website.

Furder more you will need to remove any imbadet styling for a and li tags.

The last setting is to add a couple of css variables to the root, in order to be able to use them later in the site.

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

:root {
  --blue: #1c19e4;
  --pink: #b81edb;
  --text: #fbfbfb;
}
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;900&display=swap");
body {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(90deg, var(--blue), var(--pink));
  color: var(--text);
  text-shadow: 1px 1px 1px #333;
  overflow-wrap: break-word;
}
a,
li {
  text-decoration: none;
  list-style: none;
  color: var(--text);
}

container CSS

Using the container class you will add some general boundaries to the content that will live in the container in order to differentiate itself from the body.

.container {
  max-width: 1440px;
  height: 80vh;
  background: rgba(255, 255, 255, 0.15);
  margin: auto;
  margin-top: 10vh;
  border-radius: 10px;
  box-shadow: 10px 10px 25px 2px #111;
  animation: fadeIn 4s ease-out;
}
@keyframes fadeIn {
  0% {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.05);
  }
  100% {
  }
}

Button CSS

Using the btn class you will add some general styling to all of the buttons on the website and also a hover effect.

/* Buttons */
.btn {
  font-weight: 700;
  color: var(--blue);
  font-family: inherit;
  background-color: var(--text);
  border-color: var(--pink);
  display: inline-block;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  transition: 0.3s ease;
  box-shadow: 2px 2px 7px 1px #333;
}
.btn:hover {
  background: rgba(255, 255, 255, 0.5);
  transition: 0.3s ease;
}

Navigation CSS

.nav {
  font-size: 1.4rem;
  padding-top: 4rem;
  padding-left: 6rem;
  display: flex;
  align-items: center;
}

.nav-links {
  position: relative;
  right: -400px;
  display: flex;
  align-items: center;
}

.nav-links.active {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  background: rgba(3, 3, 3, 0.7);
  padding: 15vh 0;
  font-size: 2rem;
  z-index: 2;
}

.fa-bars.close {
  display: none;
}
.fa-times.open {
  display: flex;
  position: relative;
  justify-content: flex-end;
  width: 100%;
  margin-right: 4rem;
  z-index: 2;
}

.nav-links li {
  margin-left: 2rem;
}

.nav-links li a:hover {
  opacity: 0.5;
}
.nav-links .btn {
  margin-left: 2rem;
}
.fa-bars,
.fa-times {
  cursor: pointer;
  display: none;
}

Header CSS

* Header */

header {
  position: relative;
  margin-left: 6rem;
  margin-top: 4rem;
  max-width: 700px;
}

h2 {
  font-size: 4rem;
}

h4 {
  font-weight: 100;
  font-size: 2.5rem;
}
p {
  margin: 4rem 0;
}

Responsive CSS

/* Responsive */

@media (max-width: 1440px) {
  .nav-links {
    display: none;
  }
  .fa-bars {
    display: flex;
    position: relative;
    justify-content: flex-end;
    width: 100%;
    margin-right: 4rem;
  }
  h2 {
    font-size: 2.5rem;
  }
  h4 {
    font-size: 2rem;
  }
  p {
    margin: 2rem 0;
  }
}

JavaScript for the navigation

In order to make the navigation work you will need to access the DOM via using querySelector and grab on to the navigation links, the hamburger icons and the times icon.

Then by using click events you can toggle the open and close classes on them. This will render the navigation and the icons to apeare and disappear by clicking on them.

// console.log("nav");
const nav_links = document.querySelector(".nav-links");
const menuBtn_open = document.querySelector("#menu-btn_open");
const menuBtn_close = document.querySelector("#menu-btn_close");
// console.log(nav_links, menuBtn_open, menuBtn_close);
menuBtn_open.onclick = () => toggler();
menuBtn_close.onclick = () => toggler();
function toggler() {
  nav_links.classList.toggle("active");
  menuBtn_open.classList.toggle("close");
  menuBtn_close.classList.toggle("open");
}

Web Development Courses