Wednesday, August 8, 2018

HTML5 CSS3 rensponsive wd

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>


No comments:

Post a Comment

Beogradsko programiranje=