Responsive Hexagon Layout using Sass Mixin
How do I make an responsive hexagon layout using sass mixin?
What is a responsive hexagon layout using sass mixin? How do you make a responsive hexagon layout using sass mixin? This script and codes were developed by Jon Milner on 09 December 2022, Friday.
Responsive Hexagon Layout using Sass Mixin Previews
Responsive Hexagon Layout using Sass Mixin - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Hexagon Layout using Sass Mixin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <ul class="cards"> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> <li class="card"> <div class="hex hex-overlay"> <div class="hex-1"></div> <div class="hex-2"></div> <div class="hex-content"> <h4>Nick Cage</h4> </div> </div> <div class="hex" style="background-image: url(http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg)"> <div class="hex-1"></div> <div class="hex-2"></div> </div> </li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Responsive Hexagon Layout using Sass Mixin - Script Codes CSS Codes
.container { min-width: 320px; margin: 0 auto;
}
@media screen and (min-width: 500px) { .container { width: 500px; }
}
@media screen and (min-width: 768px) { .container { width: 768px; }
}
@media screen and (min-width: 960px) { .container { width: 960px; }
}
@media screen and (min-width: 1200px) { .container { width: 1200px; }
}
.cards { margin: 0 auto; padding: 40px 0; width: 320px; list-style: none; font-size: 0; overflow: hidden;
}
@media screen and (min-width: 500px) { .cards { width: auto; }
}
.card { position: relative; display: inline-block; z-index: 1;
}
@media (max-width: 499px) { .card { margin: 19.5px 5px; width: 100px; height: 58px; font-size: 12px; } .card:nth-child(5n-4) { margin-left: 0; } .card:nth-child(5n-2) { margin-right: 0; } .card:nth-child(5n-1) { margin-left: 55px; } .card .hex { background-size: auto 116px; } .card .hex-1:before, .card .hex-2:before { height: 116px; width: 116px; } .card .hex-1:before { -webkit-transform: rotate(-60deg) translate(-58px, 0); transform: rotate(-60deg) translate(-58px, 0); } .card .hex-2:before { -webkit-transform: rotate(60deg) translate(21px, 21px); transform: rotate(60deg) translate(21px, 21px); }
}
@media (min-width: 500px) and (max-width: 767px) { .card { margin: 18.25px 5px; width: 92px; height: 53px; font-size: 12px; } .card:nth-child(9n-8) { margin-left: 0; } .card:nth-child(9n-4) { margin-right: 0; } .card:nth-child(9n-3) { margin-left: 51px; } .card .hex { background-size: auto 106px; } .card .hex-1:before, .card .hex-2:before { height: 106px; width: 106px; } .card .hex-1:before { -webkit-transform: rotate(-60deg) translate(-53px, 0); transform: rotate(-60deg) translate(-53px, 0); } .card .hex-2:before { -webkit-transform: rotate(60deg) translate(19px, 19px); transform: rotate(60deg) translate(19px, 19px); }
}
@media (min-width: 768px) and (max-width: 959px) { .card { margin: 23px 6px; width: 118px; height: 68px; font-size: 14px; } .card:nth-child(11n-10) { margin-left: 0; } .card:nth-child(11n-5) { margin-right: 0; } .card:nth-child(11n-4) { margin-left: 65px; } .card .hex { background-size: auto 136px; } .card .hex-1:before, .card .hex-2:before { height: 136px; width: 136px; } .card .hex-1:before { -webkit-transform: rotate(-60deg) translate(-68px, 0); transform: rotate(-60deg) translate(-68px, 0); } .card .hex-2:before { -webkit-transform: rotate(60deg) translate(25px, 25px); transform: rotate(60deg) translate(25px, 25px); }
}
@media (min-width: 960px) and (max-width: 1199px) { .card { margin: 27.75px 6px; width: 150px; height: 87px; font-size: 16px; } .card:nth-child(11n-10) { margin-left: 0; } .card:nth-child(11n-5) { margin-right: 0; } .card:nth-child(11n-4) { margin-left: 81px; } .card .hex { background-size: auto 174px; } .card .hex-1:before, .card .hex-2:before { height: 174px; width: 174px; } .card .hex-1:before { -webkit-transform: rotate(-60deg) translate(-87px, 0); transform: rotate(-60deg) translate(-87px, 0); } .card .hex-2:before { -webkit-transform: rotate(60deg) translate(32px, 32px); transform: rotate(60deg) translate(32px, 32px); }
}
@media (min-width: 1200px) { .card { margin: 38px 12px; width: 180px; height: 104px; font-size: 18px; } .card:nth-child(11n-10) { margin-left: 0; } .card:nth-child(11n-5) { margin-right: 0; } .card:nth-child(11n-4) { margin-left: 102px; } .card .hex { background-size: auto 208px; } .card .hex-1:before, .card .hex-2:before { height: 208px; width: 208px; } .card .hex-1:before { -webkit-transform: rotate(-60deg) translate(-104px, 0); transform: rotate(-60deg) translate(-104px, 0); } .card .hex-2:before { -webkit-transform: rotate(60deg) translate(38px, 38px); transform: rotate(60deg) translate(38px, 38px); }
}
.hex { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: block; cursor: pointer; background-position: 50% 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.hex-1,
.hex-2 { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; background: inherit; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.hex-1:before,
.hex-2:before { position: absolute; left: 0; content: ''; background: inherit;
}
.hex-1 { -webkit-transform: rotate(60deg); transform: rotate(60deg); z-index: -1;
}
.hex-1:before { top: 0; -webkit-transform-origin: 0 0; transform-origin: 0 0;
}
.hex-2 { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); z-index: -2;
}
.hex-2:before { bottom: 0;
}
.hex-overlay { opacity: 0; -webkit-transition: all .3s ease; transition: all .3s ease; background: #333; z-index: 99;
}
.hex-overlay:hover { opacity: 0.8;
}
.hex-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; font-family: Arial, sans-serif; color: #fff; height: 100%; font-weight: bold;
}
| Developer | Jon Milner |
| Username | jonmilner |
| Uploaded | December 09, 2022 |
| Rating | 3 |
| Size | 4,040 Kb |
| Views | 28,336 |
Do you need developer help for Responsive Hexagon Layout using Sass Mixin?
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!
Jon Milner (jonmilner) Script Codes
| Name | Size |
| Atom Loading Icon | 3,333 Kb |
| Chomp Chomp | 3,438 Kb |
| Custom Form Styles | 4,749 Kb |
| Kitty Blocks | 2,783 Kb |
| Animated Hamburger Menu Icon | 2,952 Kb |
| Button Style Matrix - Powered by CSS Custom Properties | 4,874 Kb |
| Basic Custom Select Element | 6,112 Kb |
| Social Icons with Tooltip | 3,941 Kb |
| Fluid Responsive Typography | 4,205 Kb |
| Responsive Card Layout using CSS Columns | 2,651 Kb |
Create amazing sales emails with AI!
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!
Similar Scripts & Codes
| Name | Username | Size |
| Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
| CSS Parent Selector | Tomhodgins | 2,143 Kb |
| Filtering with shuffle.js | Deyand | 2,712 Kb |
| SVG Playground | Roygwells | 1,834 Kb |
| Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
| Mega menu | DimaZubkov | 5,066 Kb |
| Tree growth tests | Orchard | 3,818 Kb |
| Arrow Navigation | Hinducows | 1,973 Kb |
| A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 Kb |
| 3D flipping card | Ssaakkaa | 2,238 Kb |
Do you want hide your ip address?
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!