#2 Nav Bar Challenge {Day 2/7} - Using HTML & CSS Only

Description:-

Hey Codex, today in this blog you’ll learn "How to create a Nav Bar - Using HTML & CSS | Step by Step.

Let's see!

First, try it by following the video tutorial !

This tutorial video can help you to Create a Nav Bar - Using HTML & CSS | Step by Step.

You might also like this :-

• Social Share Button - Using HTML CSS

• Login Page - Using HTML CSS

• Neumorphism hover effect on Card

• Add To Favorites Button Hover Effect

• Profile card hover effect

Source code:-

All the source codes are available to download from here. Copy and paste the code from the text editors. First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

HTML

Create a file with the name of index.html and paste the HTML code in it.

CSS

Now create a file with the name of style.css and paste the CSS code in it.

*,
*::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  color: white;
}

.nav {
  position: relative;
  font-size: 14px;
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.nav h1 {
  font-size: 2rem;
  font-weight: normal;
  width: 50%;
}

.nav h1 span {
  content: "";
  font-size: 1rem;
  background-color: white;
  color: black;
  padding: .75rem .25rem 0 3rem;
  margin-right: .25rem;
}

.nav > ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.nav > ul > li {
  position: relative;
  margin:  0 2rem;
}

.nav > ul > li::before, .nav > ul > li::after {
  position: absolute;
  display: block;
  content: "";
  opacity: 0;
  transform: translateX(10px);
  transition: .25s;
  pointer-events: none;
}

.nav > ul > li:before {
  top: 2px;
  left: -18px;
  width: 12px;
  height: 12px;
  background-color: #32c8f4;
}

.nav > ul > li::after {
  top: 6px;
  left: -14px;
  width: 4px;
  height: 4px;
  background-color: black;
}

.nav ul li a {
  opacity: .5;
  text-decoration: none;
  color: inherit;
  transition: opacity .25s;
  color: white;
  position: relative;
  text-transform: uppercase;
  transition: --txt .4s;
  transition-timing-function: linear;
  counter-set: txt var(--txt);
}

.nav  ul li a:hover {
  color: transparent;
}

.nav > ul > li:hover a {
  opacity: 1;
}

.nav ul li a::before {
  content: counter(txt, lower-alpha);
  position: absolute;
  color: transparent;
}

.nav ul li a:hover::before {
  color: white;
}

.nav ul li:hover .believe {
  --txt:682884285;
}

.nav ul li:hover .learn {
  --txt: 5572750;
}

.nav ul li:hover .dream {
  --txt: 2147691;
}
.nav ul li:hover .connect {
  --txt: 1111615174;
}

@property --txt {
  syntax: "<integer>";
  initial-value: 2147483647;
  inherits: false;
}

Result -

You might also like this :-

• Social Share Button - Using HTML CSS

• Login Page - Using HTML CSS

• Neumorphism hover effect on Card

• Add To Favorites Button Hover Effect

• Profile card hover effect

× NOTE: Make sure that you follow us on Telegram ( our recommendation ). Some drives will be telegram exclusive.

Join Our Telegram Group of your batch and get Off-campus and Job updates.

Instagram

Join Our Instagaram channel of your batch and get Off-campus and Job updates.

~~full-width~~

Happy Coding...

#2 Nav Bar Challenge {Day 2/7} - Using HTML & CSS Only

Description:-

You might also like this :-

Source code:-

HTML

CSS

Result -

You might also like this :-

Telegram

Instagram

Post a Comment

Contact Form