Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- .row {
- font-size:0px;
- }
- .row > div {
- box-sizing: border-box;
- font-size:16px;
- padding:10px;
- margin-bottom:8px;
- }
- .first, .second{
- background:orange;
- }
- .third{
- background:#daec00;
- }
- .fourth, .fifth, .sixth {
- background: blue;
- }
- .seventh, .eighth, .ningth, .tenth{
- background: #c7c7c7;
- }
- body{
- margin:0px;
- }
- @media screen and (min-width: 768px){
- .seventh, .eighth, .ningth, .tenth{
- display:inline-block;
- width:49.5%;
- margin-bottom:8px;
- }
- .seventh, .ningth{
- margin-right:0.5%;
- }
- .eighth, .tenth{
- margin-left:0.5%;
- }
- }
- @media screen and (min-width: 1024px){
- .row:nth-of-type(1){
- display:flex;
- flex-direction: row;
- }
- .first, .second{
- flex: 0 1 calc(50% - 6px);
- }
- .first{
- margin-right:6px;
- }
- .second{
- margin-left:6px;
- }
- .row:nth-of-type(3){
- display:flex;
- flex-direction: row;
- }
- .fourth, .fifth, .sixth{
- flex: 0 1 calc(33.3% - 4px);
- }
- .fourth{
- margin-right:6px;
- }
- .fifth{
- margin-left:6px;
- margin-right:6px;
- }
- .sixth{
- margin-left:6px;
- }
- }
- </style>
- </head>
- <body>
- <div class="row">
- <div class="first">1</div>
- <div class="second">2</div>
- </div>
- <div class="row">
- <div class="third">3</div>
- </div>
- <div class="row">
- <div class="fourth">4</div>
- <div class="fifth">5</div>
- <div class="sixth">6</div>
- </div>
- <div class="row">
- <div class="seventh">7</div>
- <div class="eighth">8</div>
- <div class="ningth">9</div>
- <div class="tenth">10</div>
- </div>
- </body>
- </html>
Add Comment
Please, Sign In to add comment