CSS Stylesheet

HTML
<div class="h1bol">Dit is body H1</div> <br> <div class="h2bol">Dit is body H2</div> <br> <div class="h3bol">Dit is body H3</div> <br> <div class="h3bol">Dit is body H4</div> <br> <div class="h5bol">Dit is de normale body</div> <br> <div class="h1bod">Dit is body H1</div> <br> <div class="h2bod">Dit is body H2</div> <br> <div class="h3bod">Dit is body H3</div> <br> <div class="h4bod">Dit is body H4</div> <br> <div class="h5bod">Dit is de normale body</div> <br> <div class="h1o">Dit is de oranje banner header</div> <br> <div class="h2o">Dit is de oranje banner header</div> <br> <div class="h3o">Dit is de oranje banner header</div> <br> <div class="h4o">Dit is de oranje banner header</div> <br> <div class="h1r">Dit is de rode banner header</div> <br> <div class="h2r">Dit is de rode banner header</div> <br> <div class="h3r">Dit is de rode banner header</div> <br> <div class="h4r">Dit is de rode banner header</div> <br> <div class="h1g">Dit is de groene banner header</div> <br> <div class="h2g">Dit is de groene banner header</div> <br> <div class="h3g">Dit is de groene banner header</div> <br> <div class="h4g">Dit is de groene banner header</div> <br> <div class="h1roze">Dit is de groene banner header</div> <br> <div class="h2roze">Dit is de groene banner header</div> <br> <div class="h3roze">Dit is de groene banner header</div> <br> <div class="h4roze">Dit is de groene banner header</div> <br> <div class="h1p">Dit is de groene banner header</div> <br> <div class="h2p">Dit is de groene banner header</div> <br> <div class="h3p">Dit is de groene banner header</div> <br> <div class="h4p">Dit is de groene banner header</div> <br>
CSS
.h1bol{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 55px; color: #FFFFFF; text-align: center; text-transform: none; line-height: 1.3em; letter-spacing: 0.11em; padding: 0px 5px 0px 5px; } @media screen and (min-width: 320px) { .h1bol{ font-size: calc(28px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h1bol { font-size: 52px; } } .h2bol{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 36px; color: #FFFFFF; text-align: center; text-transform: none; line-height: 1.3em; letter-spacing: 0.13em; padding: 0px 5px 0px 5px; } @media screen and (min-width: 320px) { .h2bol{ font-size: calc(24px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h2bol { font-size: 36px; } } .h3bol{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 28px; color: #FFFFFF; text-align: center; text-transform: none; line-height: 1.3em; letter-spacing: 0.15em; padding: 0px 5px 0px 5px; } @media screen and (min-width: 320px) { .h3bol{ font-size: calc(20px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h3bol { font-size: 28px; } } .h4bol{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 22px; color: #FFFFFF; text-align: center; text-transform: none; line-height: 1.3em; letter-spacing: 0.17em; padding: 0px 5px 0px 5px; } @media screen and (min-width: 320px) { .h4bol{ font-size: calc(16px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h4bol { font-size: 22px; } } .h5bol{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 18px; color: #FFFFFF; text-align: center; text-transform: none; line-height: 1.3em; letter-spacing: 0.17em; padding: 0px 5px 0px 5px; } @media screen and (min-width: 320px) { .h5bol{ font-size: calc(14px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h5bol { font-size: 18px; } } /* ================================*/ /* ================================*/ /* ================================*/ .h1bod{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 52px; color: #452B3C; text-align: center; text-transform: none; line-height: 1.3em; letter-spacing: 0.11em; padding: 0px 5px 0px 5px; } @media screen and (min-width: 320px) { .h1bod{ font-size: calc(28px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h1bod { font-size: 52px; } } .h2bod{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 36px; color: #452B3C; text-align: center; text-transform: none; line-height: 1.3em; letter-spacing: 0.13em; padding: 0px 5px 0px 5px; } @media screen and (min-width: 320px) { .h2bod{ font-size: calc(24px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h2bod { font-size: 36px; } } .h3bod{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 28px; color: #452B3C; text-align: center; text-transform: none; line-height: 1.3em; letter-spacing: 0.15em; padding: 0px 5px 0px 5px; } @media screen and (min-width: 320px) { .h3bod{ font-size: calc(20px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h3bod { font-size: 28px; } } .h4bod{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 22px; color: #452B3C; text-align: center; text-transform: none; line-height: 1.3em; letter-spacing: 0.17em; padding: 0px 5px 0px 5px; } @media screen and (min-width: 320px) { .h4bod{ font-size: calc(16px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h4bod { font-size: 22px; } } .col--futura-pt{ font-family:'Futura PT Multilingual W01'; } .h5bod{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 18px; color: #452B3C; text-align: center; text-transform: none; line-height: 1.3em; letter-spacing: 0.19em; padding: 0px 5px 0px 5px; } @media screen and (min-width: 320px) { .h5bod{ font-size: calc(14px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h5bod { font-size: 18px; } } /* ================================*/ /* ================================*/ /* ================================*/ .h1o{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 52px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.11em; background-color: #E15D42E6; padding: 30px 3px 30px 3px; } @media screen and (min-width: 320px) { .h1o{ font-size: calc(28px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h1o { font-size: 52px; } } .h2o{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 36px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.13em; background-color: #E15D42E6; padding: 30px 3px 30px 3px; } @media screen and (min-width: 320px) { .h2o{ font-size: calc(24px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h2o { font-size: 36px; } } .h3o{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 28px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.15em; background-color: #E15D42E6; padding: 30px 3px 30px 3px; } @media screen and (min-width: 320px) { .h3o{ font-size: calc(20px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h3o{ font-size: 28px; } } .h4o{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 22px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.17em; background-color: #E15D42E6; padding: 30px 3px 30px 3px; } @media screen and (min-width: 320px) { .h4o{ font-size: calc(16px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h4o { font-size: 22px; } } .h1r{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 55px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.11em; background-color: #C72A28E6; padding: 30px 3px 30px 3px; } @media screen and (min-width: 320px) { .h1r{ font-size: calc(28px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h1r{ font-size: 52px; } } .h2r{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 36px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.13em; background-color: #C72A28E6; padding: 30px 3px 30px 3px; } @media screen and (min-width: 320px) { .h2r{ font-size: calc(24px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h2r{ font-size: 36px; } } .h3r{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 28px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.15em; background-color: #C72A28E6; padding: 30px 3px 30px 3px; } @media screen and (min-width: 320px) { .h3r{ font-size: calc(20px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h3r{ font-size: 28px; } } .h4r{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 22px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.17em; background-color: #C72A28E6; padding: 30px 3px 30px 3px; } @media screen and (min-width: 320px) { .h4r{ font-size: calc(16px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .h4r { font-size: 22px; } } .h1g{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 55px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.11em; background-color: #9BAE5CE6; padding: 30px 3px 30px 3px; } .h2g{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 36px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.13em; background-color: #9BAE5CE6; padding: 30px 3px 30px 3px; } .h3g{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 28px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.15em; background-color: #9BAE5CE6; padding: 30px 3px 30px 3px; } .h4g{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 22px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.17em; background-color: #9BAE5CE6; padding: 30px 3px 30px 3px; } .h1roze{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 55px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.11em; background-color: #F2D2D7E6; padding: 30px 3px 30px 3px; } .h2roze{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 36px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.13em; background-color: #F2D2D7E6; padding: 30px 3px 30px 3px; } .h3roze{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 28px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.15em; background-color: #F2D2D7E6; padding: 30px 3px 30px 3px; } .h4roze{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 22px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.17em; background-color: #F2D2D7E6; padding: 30px 3px 30px 3px; } .h1roze{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 55px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.11em; background-color: #F2D2D7E6; padding: 30px 3px 30px 3px; } .h2roze{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 36px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.13em; background-color: #F2D2D7E6; padding: 30px 3px 30px 3px; } .h3roze{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 28px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.15em; background-color: #F2D2D7E6; padding: 30px 3px 30px 3px; } .h4roze{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 22px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.17em; background-color: #F2D2D7E6; padding: 30px 3px 30px 3px; } .h1p{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 55px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.11em; background-color: #68395EE6; padding: 30px 3px 30px 3px; } .h2p{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 36px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.13em; background-color: #68395EE6; padding: 30px 3px 30px 3px; } .h3p{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 28px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.15em; background-color: #68395EE6; padding: 30px 3px 30px 3px; } .h4p{ font-family: Futura, Trebuchet MS, Arial, san-serif; font-style: normal; font-weight: 400; font-size: 22px; color: #FFFFFF; text-align: center; text-transform: uppercase; line-height: 1.3em; letter-spacing: 0.17em; background-color: #68395EE6; padding: 30px 3px 30px 3px; }
JAVASCRIPT
Expand for more options Login