#17. M.E.R.N Stack | React Front-end Setup | Creating Navbar | React-Router-Dom Routes

Source Code Links

Project-1
#1. Light-Dark Theme ReactJs Project

Project-2
#2. HunkNews ReactJs Project

Project-2
#3. M.E.R.N Stack Project Todo-list With Authentication

Subscribe my channel

body{
font-family: 'Itim', cursive;

}
nav,Link{
font-size: larger;
}

.bg-nav{
background-color: #7f53ac;
background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);

}

.btn-primary {
color: #fff;
background-color: #7f53ac;
background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);
font-size: 25px;
}
.btn-primary:hover {

background-color: #7f53ac;
background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);
color:black ;
font-size: 25px;
}

#hero {
width: 100%;
height: 10vh;
overflow: hidden;
background-color: #7f53ac;
background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);

}

.box div {
position: absolute;
width: 3%;
height: 45px;
border-radius: 50px;
background-color: transparent;
border: 6px solid rgba(255, 255, 255, 0.8);
}

.box div:nth-child(1) {
top: 12%;
left: 42%;
animation: animate 10s linear infinite;
}

.box div:nth-child(2) {
top: 70%;
left: 50%;
animation: animate 7s linear infinite;
}

.box div:nth-child(3) {
top: 17%;
left: 6%;
animation: animate 9s linear infinite;
}

.box div:nth-child(4) {
top: 20%;
left: 60%;
animation: animate 10s linear infinite;
}

.box div:nth-child(5) {
top: 67%;
left: 10%;
animation: animate 6s linear infinite;
}

.box div:nth-child(6) {
top: 80%;
left: 70%;
animation: animate 12s linear infinite;
}

.box div:nth-child(7) {
top: 60%;
left: 80%;
animation: animate 7s linear infinite;
}

.box div:nth-child(8) {
top: 32%;
left: 25%;
animation: animate 16s linear infinite;
}

.box div:nth-child(9) {
top: 90%;
left: 25%;
animation: animate 9s linear infinite;
}

.box div:nth-child(10) {
top: 20%;
left: 80%;
animation: animate 5s linear infinite;
}

@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(0);
opacity: 1;
}
100% {
transform: scale(1.3) translateY(-90px) rotate(360deg);
opacity: 0;
}
}

#hero .container {
padding-top: 72px;
}

#hero .animated {
animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@-webkit-keyframes up-down {
0% {
transform: translateY(10px);
}
100% {
transform: translateY(-10px);
}
}

@keyframes up-down {
0% {
transform: translateY(10px);
}
100% {
transform: translateY(-10px);
}
}

form{
border: 2px solid #647dee;
border-radius: 12px 34px 45px 10px;
padding: 50px;

}