Changed units from px to rem

prakashAditya639 · Aug 11, 2023 · 4245692 · 4245692
1 parent 10d6983
commit 4245692
Showing 1 changed file with 14 additions and 14 deletions.
diff --git a/css/style.css b/css/style.css
@@ -17,7 +17,7 @@ body {
     font-size: 16px;
     line-height: 1.7;
     color: #777;
-    padding: 30px;
+    padding: 1.875rem;
 }
 
 .header {
@@ -34,8 +34,8 @@ body {
 
 .header_img_box {
     position: absolute;
-    top: 40px;
-    left: 40px;
+    top: 2.5rem;
+    left: 2.5rem;
 }
 
 .header_img {
@@ -53,33 +53,33 @@ body {
 .header_description {
     font-family: "Lato";
     color: #fff;
-    margin-bottom: 60px;
+    margin-bottom: 3.75rem;
 }
 
 .header_description_main {
     display: block;
     text-transform: uppercase;
     font-weight: 400;
-    font-size: 60px;
-    letter-spacing: 35px;
+    font-size: 3.75rem;
+    letter-spacing: 2.1875rem;
     animation: moveInLeft 1s ease-out;
 }
 
 .header_description_sub {
     display: block;
     text-transform: uppercase;
     font-weight: 700;
-    font-size: 20px;
-    letter-spacing: 17.4px;
+    font-size: 1.25rem;
+    letter-spacing: 1.0875rem;
     animation: moveInRight 1s ease-out;
 }
 
 .btn:link,
 .btn:visited {
     text-transform: uppercase;
     text-decoration: none;
-    padding: 15px 40px;
-    border-radius: 100px;
+    padding: 0.9375rem 2.5rem;
+    border-radius: 6.25rem;
     display: inline-block;
     transition: all 0.2s;
 }
@@ -102,10 +102,10 @@ body {
 @keyframes moveInLeft {
     0% {
         opacity: 0;
-        transform: translateX(-100px);
+        transform: translateX(-6.25rem);
     }
     80% {
-        transform: translateX(10px);
+        transform: translateX(0.625rem);
     }
     100% {
         opacity: 1;
@@ -116,10 +116,10 @@ body {
 @keyframes moveInRight {
     0% {
         opacity: 0;
-        transform: translateX(100px);
+        transform: translateX(6.25rem);
     }
     80% {
-        transform: translateX(-10px);
+        transform: translateX(-0.625rem);
     }
     100% {
         opacity: 1;