Grid With 2-Up Skyscrapers
How do I make an grid with 2-up skyscrapers?
What is a grid with 2-up skyscrapers? How do you make a grid with 2-up skyscrapers? This script and codes were developed by Kendrick Arnett on 11 August 2022, Thursday.
Grid With 2-Up Skyscrapers - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Grid With 2-Up Skyscrapers</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="grid across-5"> <li class="item-container"> <div class="item">1</div> </li> <li class="item-container"> <div class="item">2</div> </li> <li class="item-container"> <div class="item">3</div> </li> <li class="item-container"> <div class="item">4</div> </li> <li class="item-container"> <div class="item">5</div> </li> <li class="item-container"> <div class="item">6</div> </li> <li class="item-container"> <div class="item">7</div> </li> <li class="item-container"> <div class="item">8</div> </li> <li class="item-container"> <div class="item">9</div> </li> <li class="item-container"> <div class="item">10</div> </li> <li class="item-container"> <div class="item">11</div> </li> <li class="item-container"> <div class="item">12</div> </li> <li class="item-container"> <div class="item">13</div> </li> <li class="item-container"> <div class="item">14</div> </li> <li class="item-container"> <div class="item">15</div> </li> <li class="item-container"> <div class="item">16</div> </li> <li class="item-container"> <div class="item">17</div> </li> <li class="item-container"> <div class="item">18</div> </li> <li class="item-container"> <div class="item">19</div> </li> <li class="item-container"> <div class="item">20</div> </li> <li class="item-container"> <div class="item">21</div> </li> <li class="item-container"> <div class="item">22</div> </li> <li class="item-container"> <div class="item">23</div> </li> <li class="item-container"> <div class="item">24</div> </li> <li class="item-container"> <div class="item">25</div> </li> <li class="item-container"> <div class="item">26</div> </li> <li class="item-container"> <div class="item">27</div> </li> <li class="item-container"> <div class="item">28</div> </li> <li class="item-container"> <div class="item">29</div> </li> <li class="item-container"> <div class="item">30</div> </li> <li class="item-container"> <div class="item">31</div> </li> <li class="item-container"> <div class="item">32</div> </li> <li class="item-container"> <div class="item">33</div> </li> <li class="item-container"> <div class="item">34</div> </li> <li class="item-container"> <div class="item">35</div> </li> <li class="item-container"> <div class="item">36</div> </li> <li class="item-container"> <div class="item">37</div> </li> <li class="item-container"> <div class="item">38</div> </li> <li class="item-container"> <div class="item">39</div> </li> <li class="item-container"> <div class="item">40</div> </li> <li class="item-container"> <div class="item">41</div> </li> <li class="item-container"> <div class="item">42</div> </li> <li class="item-container"> <div class="item">43</div> </li> <li class="item-container"> <div class="item">44</div> </li> <li class="item-container"> <div class="item">45</div> </li> <li class="item-container"> <div class="item">46</div> </li> <li class="item-container"> <div class="item">47</div> </li> <li class="item-container"> <div class="item">48</div> </li> <li class="item-container"> <div class="item">49</div> </li> <li class="item-container"> <div class="item">50</div> </li>
</ul>
</body>
</html>
Grid With 2-Up Skyscrapers - Script Codes CSS Codes
html { background: radial-gradient(circle at bottom left, #3cb1ff, #006fb9); box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
body { padding: 1rem; height: 100%;
}
.grid { font-size: 0; list-style-type: none; padding-left: 0; margin: auto;
}
.across-5 { width: 50rem;
}
.item-container { padding: 0.25rem; margin: -0.25rem; display: inline-flex;
}
.item-container.skyscraper, .item-container:nth-child(4) { height: 20rem; float: right;
}
.item-container.skyscraper:before, .item-container.skyscraper:after, .item-container:nth-child(4):before, .item-container:nth-child(4):after { content: ''; display: table;
}
.item-container.skyscraper:after, .item-container:nth-child(4):after { clear: both;
}
.item-container.skyscraper .item, .item-container:nth-child(4) .item { height: calc(100% + 0.5rem);
}
.item { display: inline-flex; justify-content: center; align-items: center; font-family: 'Avenir Next'; font-size: 1rem; font-weight: 600; color: rgba(60, 177, 255, 0.3); background: #efefef; border: 1px solid rgba(60, 177, 255, 0.3); transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275); width: 10rem; height: 10rem; z-index: initial;
}
.item:hover { border: none; box-shadow: 0 6px 12px 0 rgba(9, 27, 38, 0.3); color: #006fb9; transform: scale(1.05); transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 99;
}
body:before { height: 100%; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; content: ''; background: linear-gradient(175deg, #1492d9 0%, #0a689d 40%, #bd0fe1 85%); background-position: 85% 25%; background-size: 200% 200%; z-index: -99999;
}
Developer | Kendrick Arnett |
Username | kendrick |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 3,307 Kb |
Views | 46,552 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Include-media Include | 10,238 Kb |
Duotone Fixed Backgrounds | 7,732 Kb |
A11y Product Tile | 4,484 Kb |
Variation Button Styles | 2,756 Kb |
A Pen by Kendrick Arnett | 2,047 Kb |
Linkish Buttons | 2,357 Kb |
Lazy Image Loading via ScrollMagic | 4,812 Kb |
Inline Styled SVG Icons | 2,542 Kb |
SVG Button | 2,210 Kb |
Chunky Toggles | 2,821 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Alex Edwards | Exards | 8,218 Kb |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
Website Concept | Sagoza | 3,104 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!