Homepage header test

[[style]] /* Font: Roboto Condensed */ @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap'); /* Font: Roboto */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&;display=swap'); /* Font: Noto Sans*/ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&;display=swap'); .home-blok{ width: 100%; height: 625px; background-color: white; margin-top: 0px; margin-bottom: -30px; border-radius: 5px; } .center{ display: block; margin: 0 auto; height: auto; } .smart-center{ display: table; margin: 0 auto; height: auto; } .ablock{ display: inline-block; position: relative; width: 100%; height: auto; padding-top: 5px; } .bblock{ display: inline-block; position: relative; width: 100%; height: auto; padding-top: 10px; } .block-60{ width: 65%; float: left; height: auto; } .block-40{ width: 35%; float: left; height: auto; } .ablock-img{ width: 100%; } .ablock-img img{ width: 100%; height: 370px; background-color: white; border-radius: 0 70px 70px 0; object-fit: cover; object-position: top; } .info{ padding-top: 30px; display: table; width: 100%; height: auto; } .info-blok{ font-family: "Roboto condensed", helvetica; width: 260px; padding: 20px 0px 20px 20px; height: 100%; display: block; background-color: #f4f5f5; border: 2px solid #e3e3e2; border-radius: 15px; float: right; } .info h2{ font-family: "Roboto condensed", helvetica; color: #494848; font-size: 30px; font-weight: 400; padding-bottom: 15px; line-height: 1; } .info h5{ width: 200px; color: #8c8c8c; font-size: 17px; padding-bottom: 20px; word-spacing: 2px; line-height: 20px; } .info a{ color: #8c8c8c; text-decoration: underline; font-weight: 300; } .info-Searchbar{ width: 100%; } .info-Searchbar input{ position: relative; z-index: 2; width: 70%; height: 26px; border: 1px solid #cbcccc; border-radius: 99px; font-size: 22px; padding: 5px 0 5px 20px; float:left; } .info-Searchbar input::placeholder{ opacity: 0.5; } .info-Searchbar button{ position: relative; z-index: 1; height: 38px; padding: 5px 10px 5px 20px; background-color: #da001a; border: none; border-radius: 0 99px 99px 0; float: left; top: 0; left: -14px; } .wordlid{ position: relative; display: block; width: 100%; padding-top: 45px; } .wordlid-blok{ width: 302px; float: right; } .wordlid-btn{ font-family: "Noto Sans", helvetica; background-color: #F78222; border: 3px solid #c54a00; font-size: 30px; font-weight: 600; padding: 15px 35px; border-radius: 99px; box-shadow: 0px 3px 15px -7px rgb(0 0 0 / 68%); line-height: 1; } .headertext{ margin-top: -179px; width: 205px; } .headertext a:hover{ text-decoration: none; } .headertext-bloka, .headertext-blokb{ position: relative; display: block; width: 100%; font-weight: 500; } .headertext-bloka{ font-family: "Roboto" helvetica; z-index: 2; background-color: #F78222; padding: 15px 35px; border-radius: 0 10px 10px 0; box-shadow: 0px 3px 15px -7px rgb(0 0 0 / 68%); font-size: 33px; font-weight: 600; line-height: 1; } .headertext-blokb{ font-family: "Roboto Condensed"; position: relative; font-size: 23px; background-color: #49a0b0; padding: 25px 35px 15px; border-radius: 0 0 10px 0; margin-top: -8px; z-index: 1; box-shadow: 0px 3px 15px -7px rgb(0 0 0 / 68%); word-spacing: 3px; line-height: 1.1; } .col{ width: 120px; height: 50px; padding: 0 40px; float: left; text-align: center; font-size: 17px; font-weight: 500; font-weight: bold; color: #535252; } .col i{ font-family: "Roboto", helvetica; padding-bottom: 10px; } .mobileblock{ position: relative; width: 100%; display: none; } .desktopblock{ display: block; } /* Breakpoint of design. Switch over to ??? version */ @media only screen and (max-width: 980px){ .info{ display: inline-block; width: 90%; margin-left: 26px; } .info-blok{ width: 205px; padding: 20px 0px 20px 20px; } .info h2{ font-size: 20px; } .info h5{ font-size: 17px; } .info-Searchbar input{ width: 60%; } .wordlid{ padding-top: 30px; } .wordlid-blok{ width: 230px; float: none; margin-left: 23px; } .wordlid-btn{ font-size: 25px; } } /* Breakpoint of design. Switch over to mobile version */ @media only screen and (max-width: 800px){ .mobileblock{ display: inline-block; } .desktopblock{ display: none; } .center{ margin: 0; } .wordlid-blok{ width: 230px; float: right; margin-left: auto; } .wordlid-btn{ font-size: 30px; } .home-blok{ display: block; border-radius: 0; width: 100%; height: auto; padding: 0; } .ablock-img img{ border-radius: 40px; height: 300px; object-fit: cover; object-position: top; } .block-60{ width: 100%; } .block-40{ display: none; } .info{ display: inline-block; height: auto; width: 100%; margin: auto 0; } .info-Searchbar input{ font-size: 30px; height: 30px; padding: 10px 30px; margin-left: 6%; } .info-Searchbar button{ height: 50px; padding: 10px 15px 10px 30px; background-color: #da001a; left: -25px !important; } .bblock{ padding-top: 30px; } .headertext{ width: 44%; margin-top: -148px; } .headertext-bloka, .headertext-blokb{ padding-left: 25px; padding-right: 10px; } .headertext-bloka{ font-size: 28px; border-radius: 0 18px 18px 0; } .headertext-blokb{ font-size: 20px; border-radius: 0 0 18px 18px; margin-top: -14px; } .wordlid{ margin: 0; padding-top: 10px; padding-bottom: 60px; } .wordlid-btn{ padding: 20px 55px; } .wordlid-blok{ width: 100%; } .info-blok{ width: 100%; padding: 20px 0; text-align: center; } .info-blok-text{ width: 85%; text-align: left; margin-left: auto; margin-right: auto; } .info h2{ font-size: 25px; width: 100%; padding-bottom: 5px; } .info h5{ width: 100%; padding-bottom: 5px; } .col{ display: table; width: 50px; height: 100px; font-size: 15px; padding: 0 1.5em; } .iconA, .iconB, .iconC{ width: 75px !important; height: 75px !important; } .magglass-w{ background-size: 25px !important; width: 25px !important; height: 25px !important; } } /* --- Smaller mobile phones --- */ @media only screen and (max-width: 585px){ .info-Searchbar input{ width: 65%; } } /* --- Smaller mobile phones --- */ @media only screen and (max-width: 450px){ .ablock-img img{ height: 222px; } .info-Searchbar input{ font-size: 26px; width: 52%; } .col{ font-size: 12px; padding: 0 0.5em; } .iconA, .iconB, .iconC{ width: 55px !important; height: 55px !important; } .info h5{ font-size: 15px; } .wordlid-btn{ padding: 15px 35px; } } /* --- Smaller mobile phones --- */ @media only screen and (max-width: 376px){ .info-Searchbar input{ width: 48%; } } /* --- Smaller mobile phones --- */ @media only screen and (max-width: 361px){ .info-Searchbar input{ width: 46%; } } /* --- Smallest mobile phones --- */ @media only screen and (max-width: 320px){ .ablock-img img{ border-radius: 35px; max-height: 165px; } .info-Searchbar input{ font-size: 18px; margin-left: 10px; width: 40%; } .headertext{ margin-top: -140px; } .headertext-bloka, .headertext-blokb{ padding-left: 15px; padding-right: 5px; } .headertext-bloka{ font-size: 18px; } .headertext-blokb{ font-size: 14px; } .col{ font-size: 11px; } .wordlid-blok{ margin-bottom: 20px; } } /* --- Custom font edit --- */ strong{ font-weight: 500; font-weight: bold; } /* --- Icon --- */ .iconA, .iconB, .iconC{ display: block; background-size: contain; background-repeat: no-repeat; width: 80px; height: 80px; } .iconA{ background-image: url("images/icons/icoon_1_nieuw.png"); } .iconB{ background-image: url("images/icons/icoon_2.png"); } .iconC{ background-image: url("images/icons/icoon_3.png"); } .magglass-w{ display: block; background-image: url("images/icons/magnifying-glasswhite.png"); background-repeat: no-repeat; background-size: 20px; width: 20px; height: 20px; } /* --- Multi use classes --- */ .text-white{ color: white; } .mx-auto{ margin-left: auto; margin-right: auto; } [[/style]]