From 1cc5ddaad9c8dd71ddd4bfc9f56961ead7936262 Mon Sep 17 00:00:00 2001
From: bytegrad
Date: Wed, 14 Dec 2022 21:48:34 +0100
Subject: [PATCH 1/2] first
---
index.html | 44 ++++++++++++++++++++++
logo.svg | 10 +++++
style.css | 108 +++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 162 insertions(+)
create mode 100644 index.html
create mode 100644 logo.svg
create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..923dde9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tutorial
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/logo.svg b/logo.svg
new file mode 100644
index 0000000..dd8c2af
--- /dev/null
+++ b/logo.svg
@@ -0,0 +1,10 @@
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a39a833
--- /dev/null
+++ b/style.css
@@ -0,0 +1,108 @@
+/* RESET */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+ul {
+ list-style: none;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+button {
+ background: none;
+ border: none;
+ font: inherit;
+ color: inherit;
+}
+
+/* BASE STYLES */
+body {
+ background-color: #e8f0f7;
+ font-family: 'Inter', sans-serif;
+ min-height: 500vh;
+}
+
+/* NORMAL STYLES */
+.header {
+ position: fixed;
+ width: 100%;
+ background-color: rgb(19, 22, 26);
+}
+
+.header__content {
+ min-height: 60px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ padding: 0 30px;
+ margin: 0 auto;
+}
+
+.logo {
+
+}
+
+.logo__img {
+ display: block;
+ height: 20px;
+}
+
+.nav {
+
+}
+
+.nav__list {
+ display: flex;
+ column-gap: 40px;
+}
+
+.nav__item {
+
+}
+
+.nav__link {
+ color: rgba(255, 255, 255, 0.75);
+ font-size: 15px;
+ transition: all 0.2s;
+}
+
+.nav__link:hover {
+ color: rgba(255, 255, 255, 1);
+}
+
+.btn {
+ color: #fff;
+ background-color: #0071e3;
+ padding: 7px 18px;
+ border-radius: 1000px;
+ text-transform: uppercase;
+ font-size: 12px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.btn:hover {
+ background-color: rgb(28, 128, 228);
+}
+
+/* MEDIA QUERIES */
+@media (max-width: 650px) {
+ .header__content {
+ padding: 25px 0;
+ flex-direction: column;
+ row-gap: 18px;
+ align-items: center;
+ }
+
+ .nav__list {
+ column-gap: 20px;
+ }
+}
\ No newline at end of file
From 48a69321ee1a99386bd6df25730bc29d24343e88 Mon Sep 17 00:00:00 2001
From: ByteGrad
Date: Mon, 16 Jan 2023 18:35:29 +0200
Subject: [PATCH 2/2] final code
---
index.html | 37 +++++++++++++---
style.css | 122 +++++++++++++++++++++++++++++++++++++++++------------
2 files changed, 128 insertions(+), 31 deletions(-)
diff --git a/index.html b/index.html
index 923dde9..bcd9083 100644
--- a/index.html
+++ b/index.html
@@ -25,14 +25,41 @@
diff --git a/style.css b/style.css
index a39a833..7d37142 100644
--- a/style.css
+++ b/style.css
@@ -14,25 +14,23 @@ a {
color: inherit;
}
-button {
- background: none;
- border: none;
- font: inherit;
- color: inherit;
-}
-
/* BASE STYLES */
body {
background-color: #e8f0f7;
font-family: 'Inter', sans-serif;
- min-height: 500vh;
+
+ background-image: url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=100');
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-attachment: fixed;
+ background-position: center center;
}
/* NORMAL STYLES */
.header {
position: fixed;
width: 100%;
- background-color: rgb(19, 22, 26);
+ background-color: rgba(19, 22, 26, 0.7);
}
.header__content {
@@ -60,49 +58,121 @@ body {
.nav__list {
display: flex;
- column-gap: 40px;
+ align-items: baseline;
+ column-gap: 20px;
}
.nav__item {
-
+
}
.nav__link {
color: rgba(255, 255, 255, 0.75);
- font-size: 15px;
- transition: all 0.2s;
+ font-size: 15px; position: relative;
+ padding: 7px 14px;
+ background-color: rgba(255, 255, 255, 0);
}
-.nav__link:hover {
+.nav__link:hover,
+.nav__link:focus,
+.dropdown:hover .nav__link {
color: rgba(255, 255, 255, 1);
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.dropdown {
+ position: relative;
+ font-size: 14px;
}
-.btn {
- color: #fff;
- background-color: #0071e3;
- padding: 7px 18px;
- border-radius: 1000px;
- text-transform: uppercase;
- font-size: 12px;
- font-weight: 500;
+.dropdown:hover .dropdown__list {
+ display: block;
+}
+
+.dropdown__list,
+.submenu__list {
+ display: none;
+ position: absolute;
+ top: 125%;
+ left: 0;
+ background-color: #fff;
+ min-width: max-content;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+.dropdown__item,
+.submenu__item {
+ padding: 10px 15px;
cursor: pointer;
- transition: all 0.2s;
}
-.btn:hover {
- background-color: rgb(28, 128, 228);
+.dropdown__item:hover,
+.submenu__item:hover {
+ background-color: rgb(234, 234, 234);
+}
+
+.dropdown__link {
+
+}
+
+.submenu {
+ position: relative;
+}
+
+.submenu:hover .submenu__list {
+ display: block;
+}
+
+.submenu__list {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 100%;
+ background-color: #fff;
+ min-width: max-content;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
/* MEDIA QUERIES */
+@media (max-width: 1470px) {
+ .dropdown__list {
+ left: initial;
+ right: 0;
+ }
+
+ .submenu__list {
+ left: initial;
+ right: 100%;
+ }
+}
+
@media (max-width: 650px) {
.header__content {
padding: 25px 0;
flex-direction: column;
row-gap: 18px;
align-items: center;
+ position: relative;
}
.nav__list {
- column-gap: 20px;
+ column-gap: 10px;
+ }
+
+ .nav__item {
+ position: initial;
+ }
+
+ .dropdown__list {
+ top: 100%;
+ width: 100%;
+ text-align: center;
+ }
+
+ .submenu__list {
+ right: initial;
+ left: 0;
+ top: 100%;
+ width: 100%;
}
}
\ No newline at end of file
+
+
+
+