diff --git a/assets/css/style.css b/assets/css/style.css
index 5c537fa..c9fa2a1 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -159,204 +159,78 @@ h6 {
* Desktop Navigation
*/
-.navbar {
- padding: 0;
-}
-
-.navbar ul {
- margin: 0;
- padding: 0;
- display: flex;
- list-style: none;
- align-items: center;
-}
-
-.navbar li {
- position: relative;
-}
-
-.navbar a,
-.navbar a:focus {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 10px 20px 10px 20px;
- font-family: "Poppins", sans-serif;
- font-size: 15px;
-
- font-weight: 600;
- color: var(--box-anchor);
-
- white-space: nowrap;
- transition: 0.3s;
-}
-
-.navbar a i,
-.navbar a:focus i {
- font-size: 12px;
- line-height: 0;
- margin-left: 5px;
-}
-
-.navbar a:hover,
-.navbar .active,
-.navbar .active:focus,
-.navbar li:hover>a {
- color: #2796ff;
- transform: scale(1.05);
-}
-
-.darkmode {
- margin-left: 1em;
-
- font-size: 1.3em;
- transform: translateY(3px) rotateZ(0deg);
- transition: 400ms;
- color: var(--box-anchor);
- cursor: pointer;
-}
-
-.darkmode:hover {
- animation: anim-one 2s linear infinite forwards;
-}
-
-@keyframes anim-one {
- 0% {
- transform: translateY(3px) rotateZ(0deg);
- }
-
- 25% {
- transform: translateY(3px) rotateZ(20deg);
- }
-
- 50% {
- transform: translateY(3px) rotateZ(0deg);
- }
-
- 75% {
- transform: translateY(3px) rotateZ(-20deg);
- }
-
- 100% {
- transform: translateY(3px) rotateZ(0deg);
- }
-}
-
-/**
-* Mobile Navigation
-*/
-
-.mobile-nav-toggle {
- color: #0c2e8a;
- font-size: 28px;
- cursor: pointer;
- display: none;
- line-height: 0;
- transition: 0.5s;
-}
-
-.mobile-nav-toggle.bi-x {
- color: #fff;
-}
-
-@media (max-width: 991px) {
- .mobile-nav-toggle {
- display: block;
- }
-
- .navbar ul {
- display: none;
- }
-
- .darkmode:hover {
- animation: none;
- }
-}
-
-.navbar-mobile {
- position: fixed;
- overflow: hidden;
- top: 0;
- right: 0;
- left: 0;
+nav{
+ position:relative;
+ width:810px;
+ height:50px;
+ border-radius:8px;
+ background:indigo;
+ font-size:0;
+ box-shadow:0 2px 3px 0 rgba(0,0,0,.1);
+
+}
+nav a{
+ font-size:15px;
+ text-transform:uppercase;
+ color:white;
+ text-decoration:none;
+ line-height:50px;
+ z-index:0;
+ text-align:center;
+ display:inline-block;
+
+}
+nav .animation{
+ position: absolute;
+ height: 5px;
bottom: 0;
- background: rgba(8, 30, 91, 0.9);
- transition: 0.3s;
- z-index: 999;
+ z-index: 0px;
+ background:#1abc9c;
+ width:100px;
+ border-radius:8px;
}
-
-.navbar-mobile .mobile-nav-toggle {
- position: absolute;
- top: 15px;
- right: 15px;
+a:nth-child(1){
+ width:100px;
}
-
-.navbar-mobile ul {
- display: block;
- position: absolute;
- top: 55px;
- right: 15px;
- bottom: 15px;
- left: 15px;
- padding: 10px 0;
- background-color: #fff;
- overflow-y: auto;
- transition: 0.3s;
+nav.start-home,a:nth-child(1):hover~.animation{
+ width:100px;
+ left:0;
}
-
-.navbar-mobile a,
-.navbar-mobile a:focus {
- padding: 10px 20px;
- font-size: 15px;
- color: #0c2e8a;
+a:nth-child(2){
+ width:120px;
}
-
-.navbar-mobile a:hover,
-.navbar-mobile .active,
-.navbar-mobile li:hover>a {
- color: #2796ff;
- transform: scale(1.05);
+nav.start-home,a:nth-child(2):hover~.animation{
+ width:110px;
+ left:110px;
}
-
-.navbar-mobile .getstarted,
-.navbar-mobile .getstarted:focus {
- margin: 15px;
+a:nth-child(3){
+ width:140px;
}
-
-.navbar-mobile .dropdown ul {
- position: static;
- display: none;
- margin: 10px 20px;
- padding: 10px 0;
- z-index: 99;
- opacity: 1;
- visibility: visible;
- background: #fff;
- box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
+nav.start-home,a:nth-child(3):hover~.animation{
+ width:130px;
+ left:210px;
}
-
-.navbar-mobile .dropdown ul li {
- min-width: 200px;
+a:nth-child(4){
+ width:160px;
}
-
-.navbar-mobile .dropdown ul a {
- padding: 10px 20px;
+nav.start-home,a:nth-child(4):hover~.animation{
+ width:140px;
+ left:380px;
}
-
-.navbar-mobile .dropdown ul a i {
- font-size: 12px;
+a:nth-child(5){
+ width:180px;
}
-
-.navbar-mobile .dropdown ul a:hover,
-.navbar-mobile .dropdown ul .active:hover,
-.navbar-mobile .dropdown ul li:hover>a {
- color: #2796ff;
+nav.start-home,a:nth-child(5):hover~.animation{
+ width:160px;
+ left:540px;
}
-
-.navbar-mobile .dropdown>.dropdown-active {
- display: block;
+a:nth-child(6){
+ width:110px;
+}
+nav.start-home,a:nth-child(6):hover~.animation{
+ width:100px;
+ left:710px;
}
-
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
diff --git a/index.html b/index.html
index b8daad6..ff50f88 100644
--- a/index.html
+++ b/index.html
@@ -121,22 +121,14 @@
-