diff --git a/index.html b/index.html index b7ab53c..fef1f4c 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,41 @@ - Project #1 + DProject #1 -

+ \ No newline at end of file diff --git a/styles.css b/styles.css index 9ee33be..3b882b6 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,104 @@ -h1 { - color: black; -} \ No newline at end of file +*{ + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Kumbh Sans', sans-serif; +} + +.navbar { + background: #131313; + height: 80px; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.2rem; + position: sticky; + top: 0; + z-index: 999; + +} + +.navbar__container { + display: flex; + justify-content: space-between; + height: 80px; + z-index: 1; + width: 100%; + max-width: 1300px; + margin: 0 auto; + padding: 0 50px; + +} + +#navbar__logo { + background-color: rgb(186, 117, 56); + background-image: linear-gradient(to top, #ff0814 0%, rgba(87, 87, 25, 0.067) 100%); + background-size: 100%; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-text-fill-color: transparent; + display: flex; + align-items: center; + cursor: pointer; + text-decoration: none; + font-size: 2rem; +} + +.fa-gem { + margin-right: 0.5rem; +} + +.navbar__menu { + display: flex; + align-items: center; + list-style: none; + text-align: center; +} + +.navbar__item { + height: 80px; +} + +.navbar__links { + color: azure; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + padding: 0 1rem; + height: 100%; +} + +.navbar__btn { + display: flex; + justify-content: center; + align-items: center; + padding: 0 1rem; + width: 100%; +} + +.button { + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + padding: 10px 20px; + height: 100%; + width: 100%; + border: none; + outline: none; + border-radius: 4px; + background: #ff0814; + color: beige; +} + +.button:hover { + background: #4837ff; + transition: all 0.3s ease; +} + +.navbar__links:hover { + color: #131313; + transition: all 0.3s ease; +}