done unless you find bugs

README.md

@@ -1,3 +1,5 @@
 # git-test
 This read me was created for the sole purpose of me learning how to create a readme with cmd.
-The page I modelled is https://dribbble.com/shots/9457767-Trip-Insurance-Concept/attachments/1483214?mode=media
+The page I modelled is https://dribbble.com/shots/9457767-Trip-Insurance-Concept/attachments/1483214?mode=media
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/9acec3ae-6c62-43e3-822d-13085cc6a437/deploy-status)](https://app.netlify.com/sites/insurance-landingpage/deploys)

css/style.css

@@ -6,19 +6,19 @@
 .begin{
     padding-top: 50px;
 }
-.left{
-    align-content: left;
-}
 
 .trip{
     color: white;
 }
 .guard{
     color: #74e6ef;
 }
-.links{
-    position: absolute;
-    left: 10em;
+.dropdown{
+    display: none;
+}
+.menu{
+    display: inline-flex;
+    justify-content: space-between;
 }
 .links a{
     padding-left: 30px;
@@ -125,6 +125,7 @@ margin-right: 100px;
     margin: 0;
     color: #232d67;
     font-size: smaller;
+    font-weight: 500;
 }
 .click h5{
     color: #232d67;
@@ -137,10 +138,20 @@ margin-right: 100px;
     margin-bottom: 20px;
     border-radius: 8px;
 }
-
+.click:hover{
+    background-color: #232d67;
+}
+.click:hover > .click-message h5, .click:hover > .click-message p{
+    color: white;
+}
 .click-icon{
     margin-right: 10px;
 }
+.why-pic{
+    background-image: url(../right.svg);
+    width: 600px;
+    background-repeat: no-repeat;
+}
 .talks{
 width: 500px;
 margin-top: 50px;
@@ -186,21 +197,24 @@ margin-top: 50px;
     justify-content: center;
     margin-top: 40px;
 }
+.right{
+    background-image: url(../3072835-removebg-preview.png);
+    background-repeat: no-repeat;
+    background-size: 300px 520px;
+    background-position-x: center;
+    height: 550px;
+    width: 550px;
+}
 .first{
     box-shadow: grey -1px 1px 5px;
     background-color: rgb(245, 245, 245, 0.7);
     padding: 10px;
-    position: absolute;
-    right: 300px;
-    top: 1720px;
+   margin-top: 60px;
     border-radius: 10px;
     height: 100px;
     width: 330px;
 }
 
-.phone{
-    margin-left: 150px;
-}
 .out{
     display: flex;
     justify-content: space-between;
@@ -213,21 +227,17 @@ margin-top: 50px;
 }
 .second{
     background-color: white;
-    border-radius: 40px;
-    box-shadow: grey 1px 1px 3px;
-    position: absolute;
-    right: 226px;
-    top: 1840px;
-    width: 225px;
-    height: 320px;
-
+    border-top-right-radius: 40px;
+    border-top-left-radius: 40px;
+    box-shadow: grey 1px -1px 3px;
+    margin-left:158px;
+    width: 250px;
+    height: 170px;  
 }
-
 .re{
     display: flex;
     justify-content: space-between;
     background-color: rgb(128, 128, 128, 0.1);
-
     margin-top: 10px;
     padding: 5px 0 5px 0;
 }
@@ -240,10 +250,8 @@ margin-top: 50px;
     padding: 10px;
     border-radius: 10px;
     height: 100px;
-    position: absolute;
-    right: 50px;
-    top: 2030px;
     width: 330px;
+    margin: 20px 0 0 200px;
 }
 .policy{
     display: flex;
@@ -265,8 +273,12 @@ box-shadow: grey 1px -1px 5px;
     box-shadow: grey 1px 1px 5px;
     margin-top: 0;
 }
+.how img{
+    height: 250px; 
+    width: 400px;
+}
 .how .card-body{
-    max-width: 400px;
+    width: 400px;
 }
 .top .card-body{
     max-width: 250px;
@@ -323,6 +335,7 @@ box-shadow: grey 1px -1px 5px;
     border: 0;
     background-color: rgb(53, 52, 167);
 }
+
 .frt{
     display: flex;
     justify-content: space-between;
@@ -336,3 +349,63 @@ justify-content: space-between;
 .attribute{
     margin-left: 200px;
 }
+
+@media screen and (max-width: 800px){
+    .head{overflow: hidden;}
+    .menu{display: none;}
+    .dropdown{display: block;}
+    .icon, .icon:hover{color: white;}
+    .dropdown-menu a{ color: #232d67;}
+    .dropdown-menu a:hover{background-color: rgb(128, 128, 128, 0.5);}
+    .dropdown-menu{left: -80px;}
+    .stuff{display: grid;}
+    .stuff1{width: auto;}
+    .why{display: grid;}
+    .clicks{margin-bottom: 50px;}
+   .compare{display: grid;}
+   .left{margin-bottom: 100px;}
+   .policy{display: grid; justify-items: center;}
+  .card-body{margin-bottom: 50px;}
+  .news{margin-top: 50px;}
+  .foot-work{display: grid;}
+  .foot-pic{width: auto; }
+  .frt-icon input{width: 140px}
+  .social{margin: 60px 80px 20px 160px;}
+  .attribute{margin-left: 100px;}
+}
+@media screen and (max-device-width: 400px){
+    .head{overflow: hidden;}
+    .menu{display: none;}
+    .dropdown{display: block;}
+    .icon, .icon:hover{color: white;}
+    .dropdown-menu a{ color: #232d67;}
+    .dropdown-menu a:hover{background-color: rgb(128, 128, 128, 0.5);}
+    .dropdown-menu{left: -150px;}
+    .stuff{display: grid;}
+    .stuff2 .row{margin-left: 15px; margin-right: 15px;}
+    h1{padding: 15px 0 15px 0;}
+    form{padding: 50px 50px 40px 50px;}
+    .why{display: grid;}
+    .clicks{margin-left: 0; margin-bottom: 70px; width: 55%;}
+    .talks{width: 57%; }
+   .compare{display: grid;}
+   .left{margin-bottom: 100px; width: 90%;}
+   .left h2{text-align: center;}
+   .right{width: auto; background-size: 250px 520px;}
+   .first, .third{width: 270px;}
+   .second{width: 210px;}
+   .second, .third{margin-left: 70px;}
+   .policy{display: grid; justify-items: center;}
+   .how img, .how .card-body{width: 320px;}
+  .card-body{margin-bottom: 50px;}
+  .news{margin-top: 50px;}
+  .foot-work{display: grid;}
+  .foot-left{margin-left: 30px;}
+  .foot-right{margin-left: 110px; margin-right: 80px;}
+  .foot-right h3{text-align: center;}
+  .foot-pic{width: auto; }
+  .frt{display: grid; justify-content: center;}
+  .frt-icon, .foot-right .quotebtn{justify-self: center; margin-bottom: 20px;}
+  .social{margin: 0 50px 20px 130px;}
+  .attribute{margin-left: 100px; text-align: center;}
+}