<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tablet afbeeldingen</title>
<style>
html {
font-size: 62.5%;
}
/* Desktop View - 1022 to ... *//* Desktop View - 1022 to ... */
body {
font-family: 'Roboto', sans-serif;
font-size: 1.75rem;
font-weight: 300;
color: #000;
margin-left: auto;
margin-right: auto;
}
.container {
width: 53%;
margin: 0 auto;
}
/* header *//* header */
.hero-image-desktop {
width: 100%;
height: 100px;
background-color:#9F0;
}
img{
display: block;
border: 1px solid #4e4e4e;
}
/* main *//* main */
h2{
font-size: 2.1rem;
text-align:center;
}
.info_korting_row {
width: 100%;
display: flex;
}
.info_col {
flex: 1;
width: 46%;
margin-right: 25px;
margin-top: 20px;
background-color: #FAFAA0;
float: left;
text-align: left;
padding-right: 10px;
padding-left: 10px;
border: 1px solid #4E4E4E;
}
.korting_col {
flex: 1;
width: 49%;
margin-top: 20px;
float: right;
background-repeat: no-repeat;
background-color: #0CC;
}
.bijschrift{
font-size: 1.4rem;
text-align: center;
clear: both;
}
.cta_form {
width: 290px;
height: 280px;
float: right;
margin-top: -9px;
margin-bottom: 6px;
margin-right: 15px;
}
input[type=text]{
margin-bottom: 12px;
margin-top: 4px;
width: 272px;
padding: 8px;
font-size: 18px;
color: #4E4E4E;
border-radius: 10px;
border: 1px solid #4E4E4E;
}
input[type=email]{
margin-bottom: 12px;
margin-top: 4px;
width: 272px;
padding: 8px;
font-size: 18px;
color: #4E4E4E;
border-radius: 10px;
border: 1px solid #4E4E4E;
}
input[type=submit] {
margin-top: 8px;
width: 100%;
padding: 8px;
font-size: 20px;
border-radius: 10px;
background-color: #0000f9;
color: #FFF;
box-shadow: 2px 2px 6px #666;
cursor: pointer;
}
#submit:hover {
background-color: #09F;
}
/* Desktop afbeeldingen *//* Desktop afbeeldingen */
.afb_row {
width: 100%;
float: left;
margin-top: 20px;
height: 337px;
background-color: #C9C;
}
.afb {
float: left;
}
/* Footer *//* Footer */
.footer {
width: 100%;
margin-top: 20px;
float: left;
background-color: #FAFAA0;
text-align: center;
color: #4E4E4E;
border: 1px solid #4E4E4E;
font-size: 1.4rem;
padding: 1px;
}
@media screen and (max-width: 1220px) {
.info_korting_row {
display: block;
}
.info_col {
width: 96.5%;
}
.korting_col {
width: 100%;
}
.cta_form {
width: 200px;
padding: 15px;
}
input[type=text]{
width: 200px;
}
input[type=email]{
width: 200px;
}
input[type=submit] {
font-size: 15px;
width: 100%;
}
}
@media screen and (max-width: 600px) {
input[type=submit] {
font-size: 15px;
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="hero-image-desktop">Content for class "hero-image" Goes Here</div>
</header>
<main>
<div class="info_korting_row">
<div class="info_col">
<h2>Kies je bloemenstickers in onze sticker webshop.</h2>
<p>Je vindt er stickers van bloemen in alle kleuren en soorten :
een sticker van een roos, madeliefje, zonnebloem, anjer, lelie, klavertje vier, ... .</p>
<p>Staat je bloemensticker er niet tussen, laat het ons weten. We kunnen mooie stickers maken van elke bloem.</p>
<p>Bestel een losse bloemensticker in kleur en grootte naar keuze, of een set van meerdere bloemenstickers in verschillende afmetingen.</p>
<p>Je kan onze stickers gebruiken als muurstickers, autostickers, raamstickers, decoratie stickers of Flower Power stickers.<br>
Je kan er bijna alles mee versieren.</p>
</div>
<div class="korting_col">
<h2>Schrijf je in en ontvang deze korting !</h2>
<div class="cta_form">
<form action="">
<input type="hidden" name="u" value="d807359e718b4d5f6322ea19a">
<input type="hidden" name="id" value="dfb7315d69">
<label for="MERGE1">Voornaam</label>
<input type="text" value="" name="MERGE1" class="" id="MERGE1">
<label for="MERGE2">Achternaam</label>
<input type="text" name="MERGE2" id="MERGE2" value="" class="">
<label for="MERGE0">E-mailadres</label>
<input type="email" name="MERGE0" id="MERGE0" value="" class="">
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d807359e718b4d5f6322ea19a_dfb7315d69" tabindex="-1" value=""></div>
<input id="submit" type="submit" value="Stuur mij deze kortingscode">
</form>
</div>
<div class="bijschrift">* Je kan je altijd uitschrijven. * Registreren is niet nodig om te bestellen.</div>
</div>
</div>
<div class="afb_row">I gues that this one is the culprit !<br>When the "height" of this div is smaller than 337px, everything wil fit nice on a 1022px viewport without scrollbars.<br>Even when you make this "width" smaller, the other divs doesn't fit.<br>See MyDevice : https://www.mydevice.io/.
</div>
</main>
<footer>
<div class="footer">© 2019 bloemenstickers.be - Alle rechten voorbehouden.</div>
</footer>
</div>
</body>
</html>
