adjustment of rectangle

mate-academy · Jan 21, 2025 · 3c785ea · 3c785ea
1 parent fa96b9c
commit 3c785ea
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git a/src/index.html b/src/index.html
@@ -15,6 +15,19 @@
       rel="stylesheet"
       href="./style.css"
     />
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin="anonimous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <header class="header">

diff --git a/src/style.css b/src/style.css
@@ -1,22 +1,18 @@
-body {
+.body {
   margin: 0;
-  display: flex;
-  width: 1024px;
-  height: 60px;
-}
-
-@font-face {
-  font-family: Roboto;
-  src: url(https://fonts.google.com/specimen/Roboto);
 }
 
 .header {
   display: flex;
-  flex-direction: row;
-  font-family: system-ui, Roboto, sans-serif;
+  min-width: 1024px;
+  max-width: 1200px;
+  justify-content: space-between;
+  font-family: Roboto, serif;
   font-size: 12px;
+  line-height: 14px;
   background-color: #fff;
-  width: 1024px;
+  padding-left: 50px;
+  padding-right: 50px;
 }
 
 .image {
@@ -26,33 +22,35 @@ body {
   height: 40px;
   width: 40px;
   margin-top: 10px;
-  margin-left: 50px;
 }
 
 .nav {
   display: flex;
-  justify-content: end;
-  width: 939px;
-  margin-right: 40px;
 }
 
 .nav__list {
   display: flex;
   list-style-type: none;
+  margin: 0;
+  padding: 0;
 }
 
 .nav__item {
   display: block;
-  padding: 10px;
+}
+
+.nav__item:nth-child(n + 2) {
+  margin-left: 20px;
 }
 
 .nav__link {
-  height: 40px;
   display: flex;
-  align-content: center;
   text-transform: uppercase;
   text-decoration: none;
   color: #000;
+  height: 60px;
+  align-items: center;
+  justify-content: center;
 }
 
 .nav__link:hover {
@@ -72,4 +70,5 @@ body {
   position: absolute;
   bottom: 0;
   left: 0;
+  border-radius: 8px;
 }