https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431
https://divtable.com/generator/
https://learn.shayhowe.com/advanced-html-css/responsive-web-design/
http://www.responsivegridsystem.com/layouts/
http://jsfiddle.net/HenJohns/sap6ykg7/
https://stackoverflow.com/questions/20823767/welcome-screen-before-website-loads-click-to-enter-splash-screen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.container-fraction {
display: grid;
// grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
//grid-template-rows: 50px 50px;
//margin: 1 auto;
//max-width: 700px;
//height: 100px;
background-color: #ccc;
border-radius: 3px;
border: 2px LightSteelBlue solid;
}
.into {
border: 2px solid grey;
border-radius: 5px;
background-color: LightSteelBlue;
//max-width: 400px;
}
.container-autofit {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(2, 100px);
}
.container-minmax {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
}
.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<title>Nice html5 rensponsive</title>
</head>
<body>
<div class="container-fraction">
<div class="into">1
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
</div>
<div class="into">2
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
</div>
<div class="into">3
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
</div>
<div class="into">4
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
</div>
<div class="into">5
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
</div>
<div class="into">6
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
</div>
</div>
</body>
https://divtable.com/generator/
https://learn.shayhowe.com/advanced-html-css/responsive-web-design/
http://www.responsivegridsystem.com/layouts/
http://jsfiddle.net/HenJohns/sap6ykg7/
https://stackoverflow.com/questions/20823767/welcome-screen-before-website-loads-click-to-enter-splash-screen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.container-fraction {
display: grid;
// grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
//grid-template-rows: 50px 50px;
//margin: 1 auto;
//max-width: 700px;
//height: 100px;
background-color: #ccc;
border-radius: 3px;
border: 2px LightSteelBlue solid;
}
.into {
border: 2px solid grey;
border-radius: 5px;
background-color: LightSteelBlue;
//max-width: 400px;
}
.container-autofit {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(2, 100px);
}
.container-minmax {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
}
.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<title>Nice html5 rensponsive</title>
</head>
<body>
<div class="container-fraction">
<div class="into">1
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
</div>
<div class="into">2
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
</div>
<div class="into">3
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
</div>
<div class="into">4
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
</div>
<div class="into">5
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
</div>
<div class="into">6
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
<br>
Sta reci a ne zaplakati, treba mi ....
</div>
</div>
</body>
