Skip to content

Instantly share code, notes, and snippets.

@juancjara
Created June 23, 2020 03:47
Show Gist options
  • Save juancjara/830557deb4568b5c373e8ab59fa2971f to your computer and use it in GitHub Desktop.
Save juancjara/830557deb4568b5c373e8ab59fa2971f to your computer and use it in GitHub Desktop.
@font-face{font-family:proxima_novalight;src:url(../fonts/proxima_nova_light-webfont.woff2) format('woff2'),url(../fonts/fonts/proxima_nova_light-webfont.woff) format('woff');font-weight:400;font-style:normal}@font-face{font-family:proxima_nova_rgregular;src:url(../fonts/proxima_nova_regular-webfont.woff2) format('woff2'),url(../fonts/proxima_nova_regular-webfont.woff) format('woff');font-weight:400;font-style:normal}@font-face{font-family:proxima_novasemibold;src:url(../fonts/proximanovasemibold-webfont.woff2) format('woff2'),url(../fonts/proximanovasemibold-webfont.woff) format('woff');font-weight:400;font-style:normal}@font-face{font-family:proxima_novabold;src:url(../fonts/proxima_nova_bold-webfont.woff2) format('woff2'),url(../fonts/proxima_nova_bold-webfont.woff) format('woff');font-weight:400;font-style:normal}*,::after,::before{box-sizing:border-box;padding:0;margin:0}img{outline:0;border:none}ul{list-style:none}body{font-family:proxima_novalight,sans-serif;font-size:16px;font-weight:400;line-height:22px;color:#858aa0;background:#fff}p{font-size:16px;line-height:28px;margin:0 0 20px}h1{font-family:proxima_novabold,sans-serif;font-size:40px;line-height:56px;color:#fff;text-align:center;font-weight:400;margin:0 0 10px}h2{font-family:proxima_novasemibold,sans-serif;font-size:40px;line-height:46px;color:#221e1e;text-align:center;font-weight:400;margin:0 0 30px}h2.pink{color:#e90a8b;text-align:left}h3{font-family:proxima_novalight,sans-serif;font-size:40px;line-height:46px;color:#e90a8b;text-align:center;font-weight:400;margin:0 0 30px}.wrapper{width:100%}.offset1{padding:0 17%}.offset-top1{padding:10px 0 50px}.mb60{margin-bottom:60px!important}.mb80{margin-bottom:80px!important}.mi-header{min-height:550px;padding:150px 0 20px;background:url(../images/header_bg.jpg) no-repeat center top;background-size:cover;text-align:center;color:#fff}.mi-header p{font-size:16px;margin:0 0 30px}.btn-global{font-family:proxima_novabold,sans-serif;font-size:17px;font-weight:400;color:#fff;padding:15px 120px;outline:0;background:#e90a8b;border-radius:25px;text-decoration:none;display:inline-block}.logo-center{padding:50px 0;text-align:center}.mi-global-block{padding:70px 0 50px;background:url(../images/bg_global.png) no-repeat center top;background-size:cover;text-align:center;color:#fff}.text-captital{text-transform:uppercase}.ft-light{font-family:proxima_novalight,sans-serif;font-weight:400}.mi-main{background:#fbfbfb;padding:70px 0 320px}.mi-main p{color:#221e1e}.circle-group{max-width:750px;min-height:630px;padding:0 0 30px;margin:0 auto;position:relative}.circle{background:#fff;-moz-box-shadow:0 10px 25px rgba(0,0,0,.1);-webkit-box-shadow:0 10px 25px rgba(0,0,0,.1);box-shadow:0 10px 25px rgba(0,0,0,.1);border-radius:100%}.c-large{width:280px;height:280px;padding:5% 7%}.c-medium{width:250px;height:250px;padding:4% 6%}.c-small{width:200px;height:200px;padding:5%}.pos1{position:absolute;left:0;top:0;padding:5% 7%}.pos1 p::before,.pos5 p::before{content:"";width:30px;height:32px;display:block;margin:0 auto 10px;background:url(../images/icon_mi01.png) no-repeat center top}.pos2 p::before{content:"";width:30px;height:40px;display:block;margin:0 auto 10px;background:url(../images/icon_mi02.png) no-repeat center top}.pos3 p::before,.pos4 p::before{content:"";width:30px;height:40px;display:block;margin:0 auto 10px;background:url(../images/icon_mi03.png) no-repeat center top}.circle p{font-size:15px;text-align:center;color:#221e1e}.pos2{position:absolute;left:230px;top:70px}.pos3{position:absolute;right:0;left:auto;top:40px}.pos4{position:absolute;left:50px;top:300px}.pos5{position:absolute;right:100px;top:310px}.business-benefit{position:relative;max-width:900px;padding:50px 45px 30px;margin:0 auto;background:url(../images/bg_business_block.jpg) no-repeat center bottom #fff;box-shadow:0 15px 25px -15px rgba(0,0,0,.3)}.business-benefit:after{content:"";position:absolute;right:10%;bottom:-12px;width:0;height:0;border-top:12px solid #fff;border-left:12px solid transparent;border-right:12px solid transparent}.business-list{display:flex;flex-direction:row;flex-wrap:wrap}.business-list .column{max-width:360px}.business-list .column:nth-child(1){margin-right:50px}ul.common-list li{padding:0 0 5px 40px;margin:0 0 25px;font-size:15px;color:#221e1e;background:url(../images/icon_mi_bullets.png) no-repeat left top}.mi-main-bottom{margin:100px 0 0}.cl-pink{color:#e90a8b}ul.data-list{max-width:800px;margin:50px auto;display:flex;flex-direction:row;flex-wrap:wrap;color:#221e1e}ul.data-list li{max-width:360px;margin:0 30px 30px 0;padding:5px 0 5px 40px}ul.data-list li:nth-child(1){background:url(../images/icon_mi04.png) no-repeat left top}ul.data-list li:nth-child(2){background:url(../images/icon_mi05.png) no-repeat left top;margin-right:0}ul.data-list li:nth-child(3){background:url(../images/icon_mi06.png) no-repeat left top}ul.data-list li:nth-child(4){background:url(../images/icon_mi07.png) no-repeat left top;margin-right:0}.packages{height:240px;padding:50px 0 20px}.select-package{width:253px;margin-right:45px;text-align:center}.select-package:last-child{margin-right:0}.select-package h4{font-family:proxima_novasemibold,sans-serif;font-size:50px;line-height:62px;text-align:center;color:#fff;margin:0}.select-package p{color:#fff}.select-package p.size18{font-family:proxima_novasemibold,sans-serif;font-size:18px;color:#fff}.package-group{max-width:850px;margin:0 auto;display:flex;flex-direction:row;flex-wrap:wrap}.package-bottom{width:253px;padding:30px 0 10px;margin:25px 45px 0 0;background:#fff;border-radius:5px;text-align:center;box-shadow:0 10px 10px -5px rgba(0,0,0,.3);color:#221e1e}.package-bottom p{color:#221e1e}.package-bottom:nth-child(3){margin-right:0}.package-bottom h4{font-family:proxima_novasemibold,sans-serif;font-size:17px;line-height:24px;color:#221e1e;margin:0 0 10px}.line{height:1px;background:#f2f2f2;margin:30px 0}.summery-outter{padding-bottom:130px;background:url(../images/bg_black.jpg) no-repeat center bottom #1e2022;margin:0 0 60px}.summery-inner{max-width:800px;margin:0 auto 30px;padding:70px 0 0;display:flex;flex-direction:row;flex-wrap:wrap}.summery-inner h2{text-align:left;color:#fff;margin-bottom:40px}.summery-inner ul li{color:#fff}.summ-left{width:500px;margin-right:50px}.summ-right{width:250px;text-align:right}.summ-right p{color:#858aa0;font-size:15px}.container{max-width:1200px;margin:0 auto;padding:0 20px}.header{min-height:480px;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fff 60%,#f3f4f5 100%);background:-webkit-linear-gradient(top,#fff 0,#fff 60%,#f3f4f5 100%);background:linear-gradient(to bottom,#fff 0,#fff 60%,#f3f4f5 100%)}.header-inner{display:flex;flex-direction:row;padding:50px 0}.d-flex{display:flex;flex-direction:row;flex-wrap:wrap}.logo{margin-right:auto!important}.header-inner nav ul{display:flex;flex-direction:row;flex-wrap:wrap;list-style:none}.header-inner nav li{display:inline-block;padding:0 5px 0 0}.header-inner nav li a{font-size:15px;line-height:24px;font-weight:600;color:#858aa0;text-decoration:none;padding:8px 20px;display:block;border-radius:25px}.header-inner nav li a.active,.header-inner nav li a:hover{background:#e90a8b;color:#fff}.main{background:#fff}.cl-black{color:#000}footer{border-top:1px solid #f3f4f5;padding:50px 0 20px}footer p{font-size:13px;line-height:20px;margin:0 0 10px}.footer-left{margin-right:auto}.footer-nav ul{list-style:none;display:flex;flex-direction:row}.footer-nav ul li{font-weight:400;display:inline-block}.footer-nav ul li a{font-size:13px;line-height:20px;color:#858aa0;text-decoration:none;padding:0 10px;display:block;border-radius:25px}.size10{font-size:10px}.form-title{text-align:center}ul.steps{list-style:none;display:flex;flex-direction:row;text-align:center;padding:20px 0;justify-content:center}ul.steps li{padding:0 20px;font-weight:600}ul.steps li.arrow{width:64px;height:12px;background:url(../images/arrow.png) no-repeat center center;background-size:cover;margin-top:5px}ul.steps li.arrow.done{background:url(../images/arrow2.png) no-repeat center center;background-size:cover}ul.steps li.active{color:#e90a8b}.form-sign-up{max-width:520px;margin:0 auto;padding:50px;background:#fff;position:relative;top:-100px;border-radius:5px;-webkit-box-shadow:0 3px 5px #ccc;-moz-box-shadow:0 3px 5px #ccc;box-shadow:0 3px 5px #ccc}.center{text-align:center}.elm-row{border-bottom:1px solid #ebecee;padding:0 0 10px;margin:0 0 30px}.elm-row label{font-size:15px;display:block;padding:0 0 5px;color:#858aa0}.elm-row input[type=text]{font-family:proxima_novalight,sans-serif;font-size:16px;display:block;padding:10px 0;color:#221e1e;border:none;width:100%}.elm-row select{font-size:16px;display:block;padding:10px 0;color:#221e1e;border:none;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url(../images/select_arrow.png) no-repeat right center}.form-sign-up p.size14{font-size:14px;line-height:20px;text-align:center;margin:0 0 10px}.form-sign-up input[type=checkbox]{width:15px;height:15px;border:1px solid #ccc;background:0 0;vertical-align:middle;margin:0 5px 0 0}.mb30{margin-bottom:30px!important}.btn-row{text-align:center}.btn-row input[type=submit]{font-size:15px;font-weight:600;color:#fff;padding:15px 120px;outline:0;background:#e90a8b;border-radius:25px;border:none}.cta-card{font-size:15px;font-weight:600;color:#fff;padding:15px 120px;outline:0;background:#858aa0;border-radius:25px;text-decoration:none;display:inline-block}.h380{min-height:430px}select::-ms-expand{display:none}@media only screen and (max-width:800px){.business-list .column{max-width:100%}.package-bottom,.select-package{width:205px}.package-group{max-width:705px}ul.data-list li{max-width:100%}.business-list .column:nth-child(1),ul.data-list li:nth-child(1),ul.data-list li:nth-child(3){margin-right:0}.offset1{padding:0 5%}.mb80{margin-bottom:50px!important}.summ-left{width:100%;margin:0}.summ-left .common-list,ul.data-list{margin:0 10%}.summ-left h2{text-align:center}.summ-right{width:100%;text-align:center}.summery-outter{margin-bottom:40px}.d-flex{display:block;text-align:center}.footer-nav ul{display:block;text-align:center}}@media only screen and (max-width:600px){.mi-main{padding-bottom:80px}.header{min-height:510px}.h380{min-height:470px!important}.form-title h2{font-size:32px}.header-inner{display:block;padding:50px 0 30px;text-align:center}.header-inner nav ul{display:block}.logo{margin:0 0 20px!important}.pos1,.pos2,.pos3,.pos4,.pos5{position:relative;margin:0 auto 40px;left:auto;right:auto;top:auto}.packages{height:auto}.select-package{width:100%;margin:0 0 20px}.circle p{margin-top:10px}.package-bottom{width:100%;margin:0 auto 20px}.package-bottom:nth-child(1){margin-top:-25px}}@media only screen and (max-width:480px){.header{min-height:550px}.form-sign-up{max-width:420px;padding:30px}.cta-card{padding:15px 60px}}@media only screen and (max-width:320px){.header{min-height:530px}.btn-row input[type=submit]{padding:15px 60px}.cta-card{padding:15px 40px}.form-sign-up{padding:20px}.form-title h2{font-size:24px;line-height:36px}.header-inner nav li{padding:0 5px}.header-inner nav li a{padding:10px 16px}.h380{min-height:450px!important}.btn-global{padding:15px 60px}.offset1{padding:0!important}.business-benefit{padding:50px 20px 30px}.summ-left .common-list,ul.data-list{margin:0}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment