From 511bc98a57c56e0ffc402cf70325a2c28bdcd960 Mon Sep 17 00:00:00 2001 From: Shizbriz <56767854+Shizbriz@users.noreply.github.com> Date: Tue, 1 Sep 2020 01:02:45 +0100 Subject: [PATCH 01/11] done unless you find bugs --- css/style.css | 81 ++++++++++++++++++++++++++++++++---------------- index.html | 85 ++++++++++++++++++++++++++++++--------------------- right.svg | 8 ++--- 3 files changed, 108 insertions(+), 66 deletions(-) diff --git a/css/style.css b/css/style.css index 92fa5e3..44f6a3b 100644 --- a/css/style.css +++ b/css/style.css @@ -6,9 +6,6 @@ .begin{ padding-top: 50px; } -.left{ - align-content: left; -} .trip{ color: white; @@ -16,9 +13,12 @@ .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; @@ -266,7 +274,7 @@ box-shadow: grey 1px -1px 5px; margin-top: 0; } .how .card-body{ - max-width: 400px; + width: 400px; } .top .card-body{ max-width: 250px; @@ -336,3 +344,22 @@ justify-content: space-between; .attribute{ margin-left: 200px; } +@media screen and (max-width: 800px){ + .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: auto;} + .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; background-size: auto;} +} \ No newline at end of file diff --git a/index.html b/index.html index 3a02a27..5ad9cfb 100644 --- a/index.html +++ b/index.html @@ -13,27 +13,44 @@
-
- -
-

Travelguide helps compare plans from world's leading travel insurance providers.

-

Whether you are planning on going solo or with a a group of friends or family, - travelinsurance.com can help you find an appropriate domestic or international travel insurance - policy that meets your needs. You can compare all of your trip insurance options, procure - coverage online, and travel worryfree.

- +
+
+

Travelguide helps compare plans from world's leading travel insurance providers.

+

Whether you are planning on going solo or with a a group of friends or family, + travelinsurance.com can help you find an appropriate domestic or international travel + insurance + policy that meets your needs. You can compare all of your trip insurance options, procure + coverage online, and travel worryfree.

+ +
- -
- -
@@ -213,9 +228,9 @@

Compare and Buy Travel Insurance with Online

-
+
@@ -304,7 +319,8 @@
Top Destinati States remains a top destination for viewing fall foliage. Full of tree-lined streets, roads and parks, the country provides perfect backdrop for beautiful photography. People from all over the globe travel to North America in an attempt - to view.

+ to view. +

@@ -412,25 +428,26 @@

Request a quote today

- + + -
- +
Phone designed by Freepik
- + - + @@ -440,7 +457,7 @@

Request a quote today

- + diff --git a/right.svg b/right.svg index 49ab10f..10e1995 100644 --- a/right.svg +++ b/right.svg @@ -1,12 +1,10 @@ - + - + - + - - From 95ee3c5051b965829a2f52d366c5695a2b7f7615 Mon Sep 17 00:00:00 2001 From: Shizbriz <56767854+Shizbriz@users.noreply.github.com> Date: Tue, 1 Sep 2020 23:26:57 +0100 Subject: [PATCH 02/11] no overflow --- css/style.css | 7 ++++++- index.html | 19 ++++++++++--------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index 44f6a3b..11cafa7 100644 --- a/css/style.css +++ b/css/style.css @@ -331,6 +331,7 @@ box-shadow: grey 1px -1px 5px; border: 0; background-color: rgb(53, 52, 167); } + .frt{ display: flex; justify-content: space-between; @@ -345,6 +346,7 @@ justify-content: space-between; margin-left: 200px; } @media screen and (max-width: 800px){ + .head{overflow: hidden;} .menu{display: none;} .dropdown{display: block;} .icon, .icon:hover{color: white;} @@ -361,5 +363,8 @@ justify-content: space-between; .card-body{margin-bottom: 50px;} .news{margin-top: 50px;} .foot-work{display: grid;} - .foot-pic{width: auto; background-size: auto;} + .foot-pic{width: auto; } + .frt-icon input{width: 140px} + .social{margin: 60px 80px 20px 160px;} + .attribute{margin-left: 100px;} } \ No newline at end of file diff --git a/index.html b/index.html index 5ad9cfb..fa1d165 100644 --- a/index.html +++ b/index.html @@ -319,8 +319,8 @@
Top Destinati States remains a top destination for viewing fall foliage. Full of tree-lined streets, roads and parks, the country provides perfect backdrop for beautiful photography. People from all over the globe travel to North America in an attempt - to view. -

+ to view. +

@@ -429,7 +429,8 @@

Request a quote today

+ quote + @@ -456,12 +457,12 @@

Request a quote today

- - - - - - + + + + + + \ No newline at end of file From 02ff10a54ccdfb435f52cab37189e3eff6eb874f Mon Sep 17 00:00:00 2001 From: Shizbriz <56767854+Shizbriz@users.noreply.github.com> Date: Fri, 11 Sep 2020 17:02:17 +0100 Subject: [PATCH 03/11] tryna make it okay on mobile --- README.md | 4 +++- css/style.css | 23 +++++++++++++++++++++++ index.html | 2 +- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 18447a5..2e33158 100644 --- a/README.md +++ b/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 \ No newline at end of file +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) \ No newline at end of file diff --git a/css/style.css b/css/style.css index 11cafa7..f16f3cc 100644 --- a/css/style.css +++ b/css/style.css @@ -367,4 +367,27 @@ justify-content: space-between; .frt-icon input{width: 140px} .social{margin: 60px 80px 20px 160px;} .attribute{margin-left: 100px;} +} +@media screen and (max-device-width: 700px) and (orientation: portrait){ + .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: -120px;} + .stuff{display: grid;} + .stuff1{width: auto;} + .why{display: grid;} + .clicks{margin: auto;} + .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;} } \ No newline at end of file diff --git a/index.html b/index.html index fa1d165..9ce7fb8 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - :-( + Trip Advisor From 7de638fbd7a8dfc4b5e9b3540c2b3b187b8b06f8 Mon Sep 17 00:00:00 2001 From: Shizbriz <56767854+Shizbriz@users.noreply.github.com> Date: Fri, 11 Sep 2020 17:22:35 +0100 Subject: [PATCH 04/11] trial 1 --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index f16f3cc..7715723 100644 --- a/css/style.css +++ b/css/style.css @@ -368,7 +368,7 @@ justify-content: space-between; .social{margin: 60px 80px 20px 160px;} .attribute{margin-left: 100px;} } -@media screen and (max-device-width: 700px) and (orientation: portrait){ +@media screen and (max-device-width: 800px) and (orientation: portrait){ .head{overflow: hidden;} .menu{display: none;} .dropdown{display: block;} From 3f6b96f338c2aa3176b3ebeb18371650452e0a56 Mon Sep 17 00:00:00 2001 From: Shizbriz <56767854+Shizbriz@users.noreply.github.com> Date: Fri, 11 Sep 2020 21:02:42 +0100 Subject: [PATCH 05/11] trial 2 --- css/style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 7715723..7a5df45 100644 --- a/css/style.css +++ b/css/style.css @@ -345,14 +345,14 @@ justify-content: space-between; .attribute{ margin-left: 200px; } -@media screen and (max-width: 800px){ +@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: -80px;} + .dropdown-menu{left: -120px;} .stuff{display: grid;} .stuff1{width: auto;} .why{display: grid;} @@ -368,14 +368,14 @@ justify-content: space-between; .social{margin: 60px 80px 20px 160px;} .attribute{margin-left: 100px;} } -@media screen and (max-device-width: 800px) and (orientation: portrait){ +@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: -120px;} + .dropdown-menu{left: -80px;} .stuff{display: grid;} .stuff1{width: auto;} .why{display: grid;} @@ -390,4 +390,4 @@ justify-content: space-between; .frt-icon input{width: 140px} .social{margin: 60px 80px 20px 160px;} .attribute{margin-left: 100px;} -} \ No newline at end of file +} From a12c3f1e6a7553a8067bac167254e3883bf9126f Mon Sep 17 00:00:00 2001 From: Shizbriz <56767854+Shizbriz@users.noreply.github.com> Date: Sat, 12 Sep 2020 00:00:45 +0100 Subject: [PATCH 06/11] trial 3 --- css/style.css | 39 ++++++++++++++++++++++++++++----------- index.html | 6 +----- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/css/style.css b/css/style.css index 7a5df45..e7a106b 100644 --- a/css/style.css +++ b/css/style.css @@ -273,6 +273,10 @@ box-shadow: grey 1px -1px 5px; box-shadow: grey 1px 1px 5px; margin-top: 0; } +.how img{ + height: 250px; + width: 400px; +} .how .card-body{ width: 400px; } @@ -345,18 +349,19 @@ justify-content: space-between; .attribute{ margin-left: 200px; } -@media screen and (max-device-width: 400px){ + +@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: -120px;} + .dropdown-menu{left: -80px;} .stuff{display: grid;} .stuff1{width: auto;} .why{display: grid;} - .clicks{margin: auto;} + .clicks{margin-bottom: 50px;} .compare{display: grid;} .left{margin-bottom: 100px;} .policy{display: grid; justify-items: center;} @@ -368,26 +373,38 @@ justify-content: space-between; .social{margin: 60px 80px 20px 160px;} .attribute{margin-left: 100px;} } -@media screen and (max-width: 800px){ +@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: -80px;} + .dropdown-menu{left: -150px;} .stuff{display: grid;} - .stuff1{width: auto;} + .stuff1{width: 90%;} + .stuff2 .row{margin-left: 15px; margin-right: 15px;} + h1{padding: 75px 0 15px 0;} + form{padding: 50px 50px 40px 50px;} .why{display: grid;} - .clicks{margin: auto;} + .clicks{margin-left: 0; margin-bottom: 70px;} + .talks{max-width: 380px;} .compare{display: grid;} .left{margin-bottom: 100px;} + .right{width: auto;} + .first, .third{width: 300px;} + .second, .third{margin-left: 67px;} .policy{display: grid; justify-items: center;} + .how img, .how .card-body{width: 350px;} .card-body{margin-bottom: 50px;} .news{margin-top: 50px;} .foot-work{display: grid;} + .foot-left{margin-left: 50px;} + .foot-right{margin-left: 110px; margin-right: 80px;} + .foot-right h3{text-align: center;} .foot-pic{width: auto; } - .frt-icon input{width: 140px} - .social{margin: 60px 80px 20px 160px;} - .attribute{margin-left: 100px;} -} + .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;} +} \ No newline at end of file diff --git a/index.html b/index.html index 9ce7fb8..c07ff01 100644 --- a/index.html +++ b/index.html @@ -228,10 +228,6 @@

Compare and Buy Travel Insurance with Online

- -
@@ -297,7 +293,7 @@
Reminder

Great Stories Our Policy

- +

Travel Tips

How to Save Money During From ae1a8cdc030e4af6244eed292648f191973a5f8d Mon Sep 17 00:00:00 2001 From: Shizbriz <56767854+Shizbriz@users.noreply.github.com> Date: Sat, 12 Sep 2020 00:21:15 +0100 Subject: [PATCH 07/11] trial 4 --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index e7a106b..d0dd2d6 100644 --- a/css/style.css +++ b/css/style.css @@ -373,7 +373,7 @@ justify-content: space-between; .social{margin: 60px 80px 20px 160px;} .attribute{margin-left: 100px;} } -@media screen and (max-device-width: 400px){ +@media screen and (max-width: 400px){ .head{overflow: hidden;} .menu{display: none;} .dropdown{display: block;} From dc3b9996c4a5f129a12edd842bdbcf60d3f8b8ef Mon Sep 17 00:00:00 2001 From: Shizbriz <56767854+Shizbriz@users.noreply.github.com> Date: Sat, 12 Sep 2020 17:45:57 +0100 Subject: [PATCH 08/11] trial 5 --- css/style.css | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index d0dd2d6..583a505 100644 --- a/css/style.css +++ b/css/style.css @@ -373,7 +373,7 @@ justify-content: space-between; .social{margin: 60px 80px 20px 160px;} .attribute{margin-left: 100px;} } -@media screen and (max-width: 400px){ +@media screen and (max-device-width: 400px){ .head{overflow: hidden;} .menu{display: none;} .dropdown{display: block;} @@ -382,24 +382,25 @@ justify-content: space-between; .dropdown-menu a:hover{background-color: rgb(128, 128, 128, 0.5);} .dropdown-menu{left: -150px;} .stuff{display: grid;} - .stuff1{width: 90%;} .stuff2 .row{margin-left: 15px; margin-right: 15px;} h1{padding: 75px 0 15px 0;} form{padding: 50px 50px 40px 50px;} .why{display: grid;} - .clicks{margin-left: 0; margin-bottom: 70px;} - .talks{max-width: 380px;} + .clicks{margin-left: 0; margin-bottom: 70px; width: 55%;} + .talks{width: 57%; } .compare{display: grid;} - .left{margin-bottom: 100px;} - .right{width: auto;} - .first, .third{width: 300px;} - .second, .third{margin-left: 67px;} + .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: 350px;} + .how img, .how .card-body{width: 320px;} .card-body{margin-bottom: 50px;} .news{margin-top: 50px;} .foot-work{display: grid;} - .foot-left{margin-left: 50px;} + .foot-left{margin-left: 30px;} .foot-right{margin-left: 110px; margin-right: 80px;} .foot-right h3{text-align: center;} .foot-pic{width: auto; } From dac9f3f37c3ac314162d1a1412d30a1ef02c6a28 Mon Sep 17 00:00:00 2001 From: Shizbriz <56767854+Shizbriz@users.noreply.github.com> Date: Sat, 12 Sep 2020 18:04:56 +0100 Subject: [PATCH 09/11] trial 6 --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 583a505..8d6e70e 100644 --- a/css/style.css +++ b/css/style.css @@ -383,7 +383,7 @@ justify-content: space-between; .dropdown-menu{left: -150px;} .stuff{display: grid;} .stuff2 .row{margin-left: 15px; margin-right: 15px;} - h1{padding: 75px 0 15px 0;} + h1{padding: 60px 0 15px 0;} form{padding: 50px 50px 40px 50px;} .why{display: grid;} .clicks{margin-left: 0; margin-bottom: 70px; width: 55%;} From b4732bfb45dc1daa2f0c48c7d50dcd27964dcca0 Mon Sep 17 00:00:00 2001 From: Shizbriz <56767854+Shizbriz@users.noreply.github.com> Date: Sat, 12 Sep 2020 18:07:24 +0100 Subject: [PATCH 10/11] trial 7 --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 8d6e70e..4dde3c9 100644 --- a/css/style.css +++ b/css/style.css @@ -383,7 +383,7 @@ justify-content: space-between; .dropdown-menu{left: -150px;} .stuff{display: grid;} .stuff2 .row{margin-left: 15px; margin-right: 15px;} - h1{padding: 60px 0 15px 0;} + h1{padding: 40px 0 15px 0;} form{padding: 50px 50px 40px 50px;} .why{display: grid;} .clicks{margin-left: 0; margin-bottom: 70px; width: 55%;} From 8f92b29dfc2c1d22f6f34a66fe88209a0938ddb7 Mon Sep 17 00:00:00 2001 From: Shizbriz <56767854+Shizbriz@users.noreply.github.com> Date: Sat, 12 Sep 2020 18:09:27 +0100 Subject: [PATCH 11/11] trial 8 --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 4dde3c9..05018bb 100644 --- a/css/style.css +++ b/css/style.css @@ -383,7 +383,7 @@ justify-content: space-between; .dropdown-menu{left: -150px;} .stuff{display: grid;} .stuff2 .row{margin-left: 15px; margin-right: 15px;} - h1{padding: 40px 0 15px 0;} + h1{padding: 15px 0 15px 0;} form{padding: 50px 50px 40px 50px;} .why{display: grid;} .clicks{margin-left: 0; margin-bottom: 70px; width: 55%;}