diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 4812907..ca35d23 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,27 @@
-

Hello Wrldo !

+ +
+
+

Hello World !

+ +
+ \ No newline at end of file diff --git a/style.css b/style.css index 0ddf5aa..f1cc790 100644 --- a/style.css +++ b/style.css @@ -2,7 +2,138 @@ padding: 0; margin: 0; } - +.header{ + height: 6rem; + border-bottom: 0px solid #ccc; + } + + .l-container { + max-width: 100vw; + padding-left: 1rem; + padding-right: 1rem; + margin-right: auto; + margin-left: auto; + } + + .main-header__block { + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; + background-color:#fddf69; + } + + .logo{ + padding-left: 30%; + } + + .navbar { + background-color: #fddf69; + width: fit-content; + height: 100vh; + display: none; + } + + .navbar ul { + overflow: hidden; + list-style-type: none; + padding-top: 5%; + padding-left: 2%; + padding-bottom: 5%; + width: fit-content; + margin: 0; + } + + .navbar li { + display: block; + margin: 0; + padding: 5%; + width: fit-content; + } + + .navbar li a { + color: #ff6253; + text-decoration: none; + font-family: 'Chivo', sans-serif; + font-size: 1.3em; + transition: all .5s; + } + + .navbar li:hover { + background-color: #006bc0; + letter-spacing: 5px; + } + + .hamburger { + margin: 0; + margin-left: 1rem; + padding: 0; + float: right; + transition: opacity .3s; + } + + .hamburger:hover { + cursor: pointer; + opacity: .5; + } + + .hamburger .line{ + width: 5rem; + height: 0.5rem; + background: #fddf69; + margin: 8px auto; + transition: all 0.3s ease-in-out; + border-radius: 5px; + } + + .hamburger .line:nth-child(1) { + background-color: #ff6253; + } + + .hamburger .line:nth-child(2) { + background-color: #ff6253; + } + + .hamburger .line:nth-child(3) { + background-color: #ff6253; + } + + .hamburger.isactive .line:nth-child(2) { + opacity: 0; + } + + .hamburger.isactive .line:nth-child(1) { + transform: translateY(13px) rotate(45deg); + } + + .hamburger.isactive .line:nth-child(3) { + transform: translateY(-13px) rotate(-45deg); + } + + .navbar { + position: fixed; + height: fit-content; + width: 15%; + background: #fddf69; + top: 6rem; + right: 1rem; + transition: right .3s; + padding-top: 1rem; + z-index: var(--z-fixed); + transition: all 2s ease-in-out; + border-radius:0%; + } + + .navbar.active { + display: block; + animation: fade .5s; + } + + @keyframes fade { + from{transform: translateX(-200px); opacity: 0;} + to {transform: translateX(0px); opacity: 1;} + } + body { height: 100vh; display: flex;