[add] responsive

DanielRGuillen · Nov 26, 2022 · f901917 · f901917
1 parent d798d7c
commit f901917
Showing 1 changed file with 17 additions and 10 deletions.
diff --git a/css/app.css b/css/app.css
@@ -2,6 +2,7 @@ html{
   box-sizing: border-box;
 }
 body{
+  padding: 0 2rem;
   margin: 0;
   min-height: 100vh;
   font-family: sans-serif;
@@ -16,17 +17,18 @@ body{
   color: white;
 }
 article{
-  margin: 0 20px;
-  width: 450px;
+  margin: 20px 0;
+  width: 360px;
   background-color: #f3f3f3;
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 30px;
   box-shadow: 5px 5px 17px -4px rgba(0,0,0,0.75);
+  padding: 20px;
 }
 #banner{
-  margin-top: 30px;
+  margin-top: 20px;
   position: relative;
 }
 #banner__circulo{
@@ -68,8 +70,10 @@ animation-name: buum;
 #banner img{
   position: absolute;
   top: 35px;
-  left: -40px;
-  width: 340px;
+  left: -33px;
+  width: 100%;
+  min-width: 300px;
+  max-width: 320px;
   transition: transform 400ms;
 }
 #banner img:hover{
@@ -78,19 +82,22 @@ animation-name: buum;
 
 h1{
   margin: 20px 0;
-  padding-right:140px;
-  font-size: 50px;
+  padding-right:90px;
+  font-size: 40px;
 }
 
 p{
-  padding: 0 80px 0 40px;
+  width: 100%;
+  max-width: 90%;
   line-height: 1.5;
   color: #333;
 }
 ul{
   padding-left:0;
   list-style: none;
   display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   gap: 20px;
 }
 li button{
@@ -113,12 +120,12 @@ li button:hover{
   border: none;
   color: #fff;
   border-radius: 20px;
-  padding: 6px 140px;
+  padding: 6px 100px;
 
   margin-bottom: 30px;
   margin-top: 10px;
 
-  margin: 10px 0 30px 0;
+  margin: 10px 0 20px 0;
   transition: transform 400ms ease-in-out;
 }
 #send:hover{