First page (#9)

* made the page responsive * conflicted file resolved * fixed conflicting files * changed html file to mobile-index.html
hngi · Jun 17, 2020 · c14b78b · c14b78b
1 parent 9b5984f
commit c14b78b
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 8 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -7,7 +7,9 @@ body{
   margin:auto;
   padding:0;
   display:flex;
+  height:100vh;
   width:100%;
+  background-color: #062963;
   align-items: center;
   justify-content: center;
   font-family: 'Josefin Sans', sans-serif;
@@ -18,14 +20,19 @@ body{
   color:white;
   padding:1rem;
   width:100%;
+  height:100%;
   margin:0 auto;
 }
 
 .burger{
   float:right;
   margin-top:-9px;
+  transition:all 1s ease;
 
 }
+.burger:hover{
+  transform:rotate(360deg)
+}
 .burger div{
   width:25px;
   height:3px;
@@ -45,6 +52,7 @@ body{
 }
 .second-cont{
   background: white;
+  width:100%;
   color:rgb(2, 2, 2);
   padding:1.5rem;
   margin:1.5rem auto;
@@ -62,30 +70,41 @@ body{
 .content p{
   font-size: 0.7rem;
 }
-button{
+.button{
   display:inline-block;
   margin:1rem 0;
   padding:0.8rem 1rem;
   width:80%;
   cursor:pointer;
   border:none;
+  text-decoration: none;
   border-radius:10px 10px 10px 0;
   background-color: #2295f2;
   color:white;
   transition:all 500ms ease;
 }
-button:focus{
+.button:focus{
   outline:none;
 }
-button:hover{
+.button:hover{
   transform:scale(1.1);
   background:#2296ff ;
 }
-@media only screen and (min-width:800px){
+@media only screen and (min-width:543px){
+  .second-cont{
+    width:80%;
+  }
+}
+@media only screen and (min-width:1024px){
   .second-cont{
     width:50%;
   }
   .illustration{
     width:60%;
   }
-}
+}
+@media only screen and (max-width:333px){
+  button{
+    font-size: 11px;
+  }
+}
diff --git a/main/index.html b/main/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+<body>
+  <div class="container">
+    <div class="img-cont">
+      <img src="piggyvest-logo.0b78a8fa.svg" alt="">
+    </div>
+    <div class="second-cont">
+      <div class="close">
+        <div class="burger">
+          <div class="line-1"></div>
+          <div class="line-2"></div>
+          <div class="line-3"></div>
+        </div>
+      </div>
+      <div class="content">
+        <p>You get an interest of</p>
+        <h3>(Calculated Interst)</h3>
+        <p>by</p>
+        <h4>(Selected date)</h4>
+      </div>
+      <div class="btn">
+        <a href="#" class="button" > SAFE LOCK (Amount) NOW</a>
+      </div>
+
+    </div>
+    <div class="illustration">
+      <img src="SafeLockCartoon 3.png" alt="" style="width:100%">
+    </div>
+  </div>
+
+
+</body>
+</html>
diff --git a/mobile-index.html b/mobile-index.html
@@ -28,15 +28,27 @@ <h3>(Calculated Interst)</h3>
         <h4>(Selected date)</h4>
       </div>
       <div class="btn">
+        <a href="#" class="button"> SAFE LOCK (Amount) NOW</a>
+      </div>
         <button type="button"> SAFE LOCK (Amount) NOW</button>
       </div>
-
     </div>
     <div class="illustration">
       <img src="assets/Img/SafeLockCartoon 3.png" alt="" style="width:100%">
     </div>
   </div>
-
-
 </body>
 </html>
+
+
+
+
+
+
+
+
+
+
+
+
+