Update styles.css

Update
Danielfww · May 9, 2024 · a04727a · a04727a
1 parent a9d39d3
commit a04727a
Showing 1 changed file with 94 additions and 7 deletions.
diff --git a/styles.css b/styles.css
@@ -4,7 +4,7 @@ html {
 
 body {
   width:1440px;
-  height:900px; 
+  height:800px;
   background-image: url("https://assets.codepen.io/11868974/pattern-background-desktop.svg");
   background-repeat:no-repeat;
   background-color:hsl(225, 100%, 94%);
@@ -20,7 +20,6 @@ body {
   margin-top:100px;
   overflow:hidden;
   background:white;
-  border:black solid 1px;
 }
 
 .hero {
@@ -58,7 +57,6 @@ p {
   text-align:center;
   position:relative;
   top:-19px;
-  line-height:25px;
   font-weight:500;
   font-size:16.5px;
   width:100%;
@@ -126,16 +124,15 @@ span {
   background:hsl(245, 75%, 52%);
   margin-left:auto;
   margin-right:auto;
-  border-radius:20px;
+  border-radius:10px;
   position:relative;
   top:72px;
   display:flex;
   align-items:center;
   justify-items:center;
   flex-direction:column;
   box-shadow: 1px 20px 14px 0px hsl(222, 12%, 75%, 0.35);
-
-
+
 }
 
 
@@ -164,12 +161,102 @@ span {
 .cancel {
   display:flex;
   text-decoration:none;
-   font-family:"Red Hat Display";
+  font-family:"Red Hat Display";
   color:hsl(224, 23%, 55%);
   text-align:center;
   justify-content:center;
   align-items:center;
   left:110px;
   position:relative;
+  top:-22px;
+  font-weight:900;
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@media (max-width:475px) {
+
+  body {
+    margin: 0 auto;
+    padding: 0 auto;
+    width:375px;
+    height:710px;
+    background-image: url("https://assets.codepen.io/11868974/pattern-background-mobile_1.svg");
+
+
+}
+
+  .div {
+    display:grid;
+    grid-template-rows:1fr;
+    grid-template-columns:10px 1fr 10px;
+  }
+
+
+  .container {
+    display:grid;
+    grid-area:1 / 2 / 1 / 2;
+    height:570px;
+    width:350px;
+    margin-left:auto;
+    overflow:hidden;
+    margin-top:70px;
+
+  }
+
+  .annual {
+    width:90%;
+  }
+
+  .hero {
+    height:163px;
+    object-fit:cover;
+  }
+
+
+  h1 {
+    position:relative;
+    top:-32px;
+    font-size:22px;
+  }
+
+  p {
+    position:relative;
+    top:-46px;
+    font-size:14.5px;
+    font-weight:500;
+  }
+
+
+  .annual {
+    position:relative;
+    top:-55px;
+    height:60px;
+  }
+
+  .button {
+    position:relative;
+    top:-55px;
+  }
+
+
+
+
+
+
 
 }
+