Add style for nav

practice/practice-02/src/styles/abstracts/_mixins.scss

@@ -0,0 +1,15 @@
+@mixin base-icon-menu {
+  height: 3px;
+  width: auto;
+  background: #000000;
+  border-radius: 10px;
+  transition: 0.3s;
+}
+
+@mixin icon-menu {
+  @include base-icon-menu;
+
+  content: "";
+  position: absolute;
+  right: 0;
+}

practice/practice-02/src/styles/abstracts/_variables.scss

@@ -0,0 +1,21 @@
+$primary-font: "Sofia Pro";
+$secondary-font: "Inter";
+
+// Color
+$black: #000;
+$white: #fff;
+$primary-color: #f54748;
+$secondary-color: #fdc55e;
+
+// Font size
+$fs-xx-sm: 14px;
+$fs-x-sm: 16px;
+$fs-sm: 17px;
+$fs-md: 18px;
+$fs-lg: 24px;
+$fs-x-lg: 48px;
+$fs-xx-lg: 58px;
+
+// Size
+$max-width: 1440px;
+$min-width: 320px;

practice/practice-02/src/styles/bases/_typography.scss

@@ -0,0 +1,11 @@
+$font-path: "../assets/fonts";
+
+@font-face {
+  src: url("#{$font-path}/sofia-pro-regular.otf") format("opentype");
+  font-family: "Sofia Pro";
+}
+
+@font-face {
+  src: url("#{$font-path}/inter-regular.ttf") format("truetype");
+  font-family: "Inter";
+}

practice/practice-02/src/styles/bases/reset.scss

@@ -0,0 +1,54 @@
+$background-color_1: transparent;
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  &:before {
+    box-sizing: border-box;
+  }
+  &:after {
+    box-sizing: border-box;
+  }
+}
+img {
+  display: block;
+  max-width: 100%;
+}
+picture {
+  display: block;
+  max-width: 100%;
+}
+svg {
+  display: block;
+  max-width: 100%;
+}
+video {
+  display: block;
+  max-width: 100%;
+}
+input {
+  background-color: $background-color_1;
+  outline: none;
+}
+select {
+  background-color: $background-color_1;
+  outline: none;
+}
+textarea {
+  background-color: $background-color_1;
+  outline: none;
+}
+button {
+  cursor: pointer;
+  background-color: $background-color_1;
+  outline: none;
+  border: 0;
+}
+body {
+  min-height: 100vh;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1;
+}

practice/practice-02/src/styles/components/_button.scss

@@ -0,0 +1,22 @@
+.btn {
+  align-self: center;
+  display: none;
+  padding: 13px 20px;
+  background-color: $primary-color;
+  border-radius: 100px;
+  font-size: $fs-md;
+  color: $white;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: 0.2s;
+}
+
+@media screen and (min-width: 840px) {
+  .btn {
+    display: block;
+
+    &:hover {
+      background-color: $secondary-color;
+    }
+  }
+}

practice/practice-02/src/styles/components/_logo.scss

@@ -0,0 +1,11 @@
+.logo-wrapper {
+  width: 121px;
+  height: 78px;
+  flex-shrink: 0;
+}
+
+.logo-link {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}

practice/practice-02/src/styles/components/_menu-button.scss

@@ -0,0 +1,57 @@
+.icon-menu {
+  @include base-icon-menu;
+
+  position: relative;
+  top: 27px;
+  width: 36px;
+  cursor: pointer;
+
+  &:before {
+    @include icon-menu;
+
+    top: -10px;
+    width: 36px;
+  }
+
+  &:after {
+    @include icon-menu;
+
+    top: 10px;
+    width: 36px;
+  }
+}
+
+.toggle-menu {
+  position: absolute;
+  top: 40px;
+  width: 36px;
+  height: 27px;
+  cursor: pointer;
+  z-index: 1;
+  opacity: 0;
+}
+
+.toggle-menu:checked ~ .icon-menu {
+  background: transparent;
+}
+
+.toggle-menu:checked ~ .icon-menu:before {
+  top: 0;
+  transform: rotate(-45deg);
+}
+
+.toggle-menu:checked ~ .icon-menu:after {
+  top: 0;
+  transform: rotate(45deg);
+}
+
+.toggle-menu:checked ~ .nav-list {
+  right: 0px;
+}
+
+@media screen and (min-width: 840px) {
+  .icon-menu,
+  .toggle-menu {
+    display: none;
+  }
+}

practice/practice-02/src/styles/layouts/_header.scss

@@ -0,0 +1,26 @@
+.header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  max-width: $max-width;
+  min-width: $min-width;
+  padding: 24px;
+  margin: auto;
+}
+
+@media screen and (min-width: 840px) {
+  .header {
+    padding-top: 32px;
+    padding-inline: 24px;
+    gap: 10px;
+  }
+
+  .header-content {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    width: 100%;
+    max-width: 918px;
+    height: auto;
+  }
+}

practice/practice-02/src/styles/layouts/_navbar.scss

@@ -0,0 +1,62 @@
+.nav-list {
+  list-style: none;
+  transition: 0.1s;
+  position: fixed;
+  border: 2px solid $primary-color;
+  top: 0px;
+  right: -300px;
+  width: auto;
+  height: auto;
+  margin-top: 80px;
+  margin-right: 10px;
+  z-index: 2;
+}
+
+.nav-item {
+  font-size: 14px;
+  padding: 14px;
+  border-bottom: 1px solid $black;
+
+  &:last-child {
+    border-bottom: unset;
+  }
+
+  &:hover {
+    background-color: $secondary-color;
+  }
+}
+
+.nav-link {
+  text-decoration: none;
+  color: $black;
+}
+
+@media screen and (min-width: 840px) {
+  .nav {
+    margin: auto;
+    width: 100%;
+    height: auto;
+  }
+
+  .nav-list {
+    position: unset;
+    display: flex;
+    justify-content: space-between;
+    border: none;
+    margin: auto;
+    max-width: 600px;
+  }
+
+  .nav-item {
+    border-bottom: none;
+    padding: 0px;
+
+    &:hover {
+      background-color: unset;
+    }
+  }
+
+  .nav-link:hover {
+    color: $secondary-color;
+  }
+}

practice/practice-02/src/styles/main.scss

@@ -1 +1,20 @@
-@import "./base/reset.scss";
+// Abstracts
+@import "./abstracts/mixins";
+@import "./abstracts/variables";
+
+// Bases
+@import "./bases/typography";
+@import "./bases/reset.scss";
+
+// Components
+@import "./components/button";
+@import "./components/menu-button";
+@import "./components/logo";
+
+// Layouts
+@import "./layouts/navbar";
+@import "./layouts/header";
+
+* {
+  font-family: $primary-font;
+}