Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- html {
- scroll-behavior: smooth;
- }
- body {
- font-family: Barlow, sans-serif;
- margin: 0;
- color: #363636;
- height: auto;
- font-size: 1rem;
- }
- .background-gris {
- background-color: #f7f7f7;
- }
- .gris-clar {
- font-size: 1.2rem;
- color: #aeaeae;
- line-height: 150%;
- }
- /*FLEX*****************************************************************************************************************/
- header,
- .portada,
- .beneficios-flex,
- .testimonial-flex,
- .colaborador-flex,
- #feature-invert-block,
- #feature-block {
- display: flex;
- flex-flow: row wrap;
- width: auto;
- justify-content: space-between;
- }
- .portada,
- .beneficios-flex,
- #testimonio-module,
- .intro,
- .title-modules,
- .getup-module,
- footer,
- .background-gris,
- .slider {
- padding: 2% 14%;
- }
- #feature-invert-block,
- #feature-block {
- padding: 2% 0;
- }
- #title-modules-getup {
- padding: 0% 14%;
- font-size: 3rem;
- }
- header {
- width: 80%;
- top: -130px;
- padding: 0% 14%;
- }
- /**********************************************************************************************************************/
- header {
- position: fixed;
- background-color: white;
- transition: 0.5s;
- z-index: 3;
- }
- header ul {
- list-style: none;
- overflow: hidden;
- }
- header li a {
- display: block;
- padding: 1rem;
- border-right: 1px solid #f4f4f4;
- text-decoration: none;
- color: black;
- }
- .black-line:after {
- content: "";
- display: block;
- height: 2px;
- background: black;
- transition: width 0.3s ease 0s, left 0.3s ease 0s;
- width: 0;
- }
- .black-line:hover:after {
- width: 100%;
- }
- /*menu*****************************************************************************************************************/
- header .menu {
- clear: both;
- max-height: 0;
- transition: max-height .2s ease-out;
- justify-content: left;
- }
- /*menu-icon************************************************************************************************************/
- .container-header {
- display: inline-flex;
- }
- header .menu-icon {
- cursor: pointer;
- float: right;
- background-color: #f73b51;
- vertical-align: middle;
- padding: 1rem;
- position: relative;
- user-select: none;
- }
- header .menu-icon .navicon {
- background: #333;
- display: block;
- height: 2px;
- position: relative;
- transition: background-color .2s ease-out;
- width: 50px;
- }
- header .menu-icon .navicon:before,
- header .menu-icon .navicon:after {
- background: #333;
- content: '';
- display: block;
- height: 100%;
- position: absolute;
- transition: all .2s ease-out;
- width: 100%;
- }
- header .menu-icon .navicon:before {
- top: 10px;
- }
- header .menu-icon .navicon:after {
- top: -10px;
- }
- /*menu-btn*************************************************************************************************************/
- header .menu-btn {
- display: none;
- }
- header .menu-btn:checked~.menu {
- max-height: 270px;
- }
- header .menu-btn:checked~.menu-icon .navicon {
- background: transparent;
- }
- header .menu-btn:checked~.menu-icon .navicon:before {
- transform: rotate(-45deg);
- }
- header .menu-btn:checked~.menu-icon .navicon:after {
- transform: rotate(45deg);
- }
- header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
- header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
- top: 0;
- }
- /*portada**************************************************************************************************************/
- .portada {
- height: 50em;
- background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://upload.wikimedia.org/wikipedia/commons/c/c7/Tabby_cat_with_blue_eyes-3336579.jpg");
- background-position: center;
- background-size: cover;
- background-repeat: no-repeat;
- align-items: center;
- }
- .text-portada {
- font-size: 1.5rem;
- width: 50%;
- color: white;
- vertical-align: middle;
- max-width: 100%;
- }
- .title-portada {
- font-size: 3rem;
- font-weight: 100;
- display: block;
- }
- .inherit {
- position: absolute;
- top: 2%;
- left: 14%;
- }
- .logo-salle {
- width: 200px;
- height: auto;
- max-width: 100%;
- }
- /*formulario***********************************************************************************************************/
- .form-module {
- max-width: 30rem;
- background-color: white;
- }
- .form-module>h2 {
- text-align: center;
- }
- .form-module>p {
- text-align: center;
- }
- form {
- padding: 2rem;
- color: #C9C9C9;
- }
- .la {
- text-align: left;
- }
- .label {
- margin-top: 15px;
- /* margin-left: 50%; */
- text-align: right;
- width: 0;
- }
- form>.label {
- margin-top: 15px;
- text-align: right;
- }
- input,
- select {
- border: 1px solid #C9C9C9;
- margin-bottom: 1rem;
- margin-top: 0.5rem;
- background-color: white;
- font-size: 1.2rem;
- width: 95%;
- }
- input {
- padding: 1rem 0 1rem 1rem;
- text-align: left;
- }
- select {
- text-align: left;
- padding: 1rem 1rem 1rem 1rem;
- width: 100%
- }
- button {
- background-color: #f73b51;
- color: white;
- font-weight: bold;
- border: 0;
- border-radius: 3%;
- cursor: pointer;
- padding: 1.3rem 4rem;
- text-align: center;
- }
- #enviar_btn {
- margin-top: 1rem;
- width: 100%;
- font-size: 1.2rem;
- }
- /*intro****************************************************************************************************************/
- .intro {
- font-size: 1.5rem;
- text-align: center;
- line-height: 150%;
- }
- /*beneficios***********************************************************************************************************/
- .beneficio {
- padding: 5px;
- color: white;
- width: 330px;
- display: inline-flex;
- }
- .icon-beneficio {
- width: 55px;
- margin-right: 0.5rem;
- height: 55px;
- }
- .titulo-beneficio {
- display: block;
- font-weight: 400;
- font-size: 1.5rem;
- margin-bottom: 1rem;
- color: #000;
- }
- .copy-beneficio {
- font-size: 1rem;
- color: #c9c9c9;
- }
- /*modulos**************************************************************************************************************/
- .title-modules {
- text-align: center;
- font-size: 2.5rem;
- }
- /*features************************************************************************************************************/
- #feature-block,
- #feature-invert-block {
- align-items: center;
- max-width: 100%;
- }
- .title-features {
- font-size: 2rem;
- }
- .feature-block,
- .feature-image {
- display: inline-block;
- max-width: 100%;
- }
- .feature-block {
- width: 50%;
- min-width: 470px;
- }
- #feature-invert-block {
- border-top: 1px solid #C9C9C9;
- }
- #feature-image,
- #feature-image-invert {
- align-items: center;
- width: 470px;
- max-width: 100%;
- }
- .feature-img {
- max-width: 100%;
- padding: 0;
- }
- /*testimonial**********************************************************************************************************/
- .testimonial-flex {
- list-style: none;
- text-align: center;
- }
- .testimonio {
- text-align: center;
- padding: 1rem;
- color: #9b9b9b;
- width: 30rem;
- display: block;
- transition: all 0.5s ease 0s;
- line-height: 150%;
- }
- .testimonio:hover {
- background-color: #f7f7f7;
- transition: all 0.5s ease 0s;
- }
- .img-testimonial {
- border-radius: 50%;
- width: 100px;
- height: auto;
- }
- /*colaborador**********************************************************************************************************/
- .slider {
- background-color: #5EAFDB;
- }
- .colaborador {
- align-items: center;
- padding-left: 15px;
- }
- .img-colaborador {
- width: 150px;
- height: auto;
- filter: brightness(0) invert(1);
- }
- /*getup****************************************************************************************************************/
- .getup-module {
- text-align: center;
- }
- .getup-copy {
- font-size: 1.2rem;
- font-weight: bold;
- color: #b1b1b1;
- line-height: 120%;
- }
- .go-top {
- font-size: 1.5rem;
- }
- /*footer****************************************************************************************************************/
- footer {
- text-align: center;
- font-size: 1.2rem;
- }
- /*Extra**************************************************************************************************************/
- @media all and (max-width: 1500px) {
- .portada,
- .beneficios-flex,
- #testimonio-module,
- .intro,
- .title-modules,
- .getup-module,
- footer,
- /* .background-gris, */
- .slider {
- padding: 2% 10%;
- }
- .testimonial-flex,
- .beneficios-flex {
- justify-content: center;
- }
- }
- @media all and (max-width: 1350px) {
- .portada,
- .beneficios-flex,
- #testimonio-module,
- .intro,
- .title-modules,
- .getup-module,
- footer,
- /* .background-gris, */
- .slider {
- padding: 2% 7%;
- }
- .portada {
- justify-content: center;
- }
- .text-portada {
- width: auto;
- max-width: 100%;
- }
- header {
- width: 80%;
- top: -130px;
- }
- }
- @media all and (max-width: 1100px) {
- .portada,
- .features,
- .beneficios-flex,
- .testimonial-flex,
- .colaborador-flex,
- .feature-block {
- justify-content: center;
- }
- .text-portada {
- width: auto;
- max-width: 100%;
- text-align: center;
- }
- .portada {
- height: auto;
- margin-bottom: rem;
- }
- .text-portada {
- margin-top: 3rem;
- }
- .beneficio {
- width: 100%;
- }
- .copy-beneficio {
- margin-top: 0;
- }
- #feature-block,
- #feature-invert-block {
- justify-content: center;
- }
- .background-gris>section,
- .feature-image,
- .feature-img,
- .feature-block,
- .title-features,
- .gris-clar,
- .testimonial-flex,
- .testimonio {
- width: 100%;
- max-width: 100%;
- }
- .img-testimonial {
- width: 30%;
- }
- /* Tamaños texto */
- .text-portada>p,
- .form-module>h2,
- #title-modules-getup {
- font-size: 1rem;
- }
- .form-module {
- font-size: 1.5rem;
- }
- .form-module>p {
- font-size: 0.65rem;
- }
- .intro {
- font-size: 0.75rem;
- }
- #feature-block>div>p,
- #feature-invert-block>div>p {
- font-size: 0.9rem;
- }
- #feature-block>div>h3,
- #feature-invert-block>div>h3 {
- font-size: 1.2rem;
- }
- .getup-copy {
- font-size: 0.75rem;
- margin-bottom: 2rem;
- }
- #boton-start {
- font-size: 2rem;
- width: auto;
- }
- }
- @media all and (min-width: 500px) {
- header li {
- float: left;
- }
- header li a {
- padding: 20px 30px;
- }
- header .menu {
- clear: none;
- float: right;
- max-height: none;
- }
- header .menu-icon {
- display: none;
- }
- }
- @media all and (max-width: 500px) {
- .portada,
- .beneficios-flex,
- #testimonio-module,
- .intro,
- .title-modules,
- .getup-module,
- footer,
- .slider,
- .feature-block {
- padding: 1% 2%;
- }
- header {
- width: 90%;
- top: -130px;
- }
- }
- .animate__animated.animate__fadeInUp {
- --animate-duration: 2s;
- }
- @keyframes example {
- 0% {
- transform: translateY(0%);
- }
- 100% {
- transform: translateY(-5%)
- }
- }
- @keyframes example2 {
- 0% {
- transform: translateY(-5%);
- }
- 100% {
- transform: translateY(0%)
- }
- }
- .beneficio:hover {
- animation: example 1s forwards;
- }
- .beneficio:not(hover) {
- animation: example2 1s forwards;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement