Profile
<!----------------------------------------------
| COMPOUNDEYES |
| (Honeycomb Version) |
| by Zylphide |
------------------------------------------------
image credits: unsplash + pexels
- to change the sizes of the hexagons, alter the numbers of this section [height: 240px; width: 280px;] in the individual hexagaon div style
- to change the spacing between the hexagons, play around with the [margin-top: 130px; margin-left: -50px] numbers in the individual hexagon div style and the [margin-top: -110px] numbers in the row div style
----------------------------------------------->
<!--- row 1 ---->
<div class="row no-gutters justify-content-center">
<!--- image 1 ---->
<div style="height: 240px; width: 280px;
background: url(https://images.unsplash.com/photo-1531604250646-2f0e818c4f06?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=632&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);"></div>
<!--- image 1 END ---->
<!--- image 2 ---->
<div style="height: 240px; width: 280px;
background: url(https://images.unsplash.com/photo-1508020268086-b96cf4f4bb2e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-top: 130px; margin-left: -50px"></div>
<!--- image 2 END ---->
<!--- image 3 ---->
<div style="height: 240px; width: 280px;
background: url(https://images.unsplash.com/photo-1517210122415-b0c70b2a09bf?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-left: -50px"></div>
<!--- image 3 END ---->
<!--- image 4 ---->
<div style="height: 240px; width: 280px;
background: url(https://images.unsplash.com/photo-1593385976243-d79421610526?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1449&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-top: 130px; margin-left: -50px"></div>
<!--- image 4 END ---->
<!--- image 5 ---->
<div style="height: 240px; width: 280px;
background: url(https://images.pexels.com/photos/5245865/pexels-photo-5245865.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); background-size: cover; background-repeat: no-repeat; background-position: center;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-left: -50px"></div>
<!--- image 5 END ---->
</div>
<!--- row 1 END --->
<!--- row 2 ---->
<div class="row no-gutters justify-content-center" style="margin-top: -110px">
<!--- image 6 ---->
<div style="height: 240px; width: 280px;
background: url(https://images.unsplash.com/photo-1525838983331-f8bd3c000585?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);"></div>
<!--- image 6 END ---->
<!--- image 7 ---->
<div style="height: 240px; width: 280px;
background: url(https://images.unsplash.com/photo-1515393631444-8e5c375b2e91?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzY1fHxzdW5zZXR8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60); background-size: cover; background-repeat: no-repeat; background-position: center;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-top: 130px; margin-left: -50px"></div>
<!--- image 7 END ---->
<!--- image 8 ---->
<div style="height: 240px; width: 280px;
background: url(https://images.unsplash.com/photo-1504964030113-79ab61954f0e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nzd8fHN1bnNldHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60); background-size: cover; background-repeat: no-repeat; background-position: center ;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-left: -50px"></div>
<!--- image 8 END ---->
<!--- image 9 ---->
<div style="height: 240px; width: 280px;
background: url(https://images.unsplash.com/photo-1585477281396-29b7707bb590?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-top: 130px; margin-left: -50px"></div>
<!--- image 9 END ---->
<!--- image 10 ---->
<div style="height: 240px; width: 280px;
background: url(https://images.unsplash.com/photo-1510270090250-044bab817bce?ixid=MnwxMjA3fDB8MHxzZWFyY2h8ODR8fHN1bnNldHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60); background-size: cover; background-repeat: no-repeat; background-position: center;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-left: -50px"></div>
<!--- image 10 END ---->
</div>
<!--- row 2 END --->
<!--- credits, do not remove! --->
<a class="d-block text-center pt-2" style="font-size:12px;" href="https://toyhou.se/Zylphide"><i class="fas fa-dragon fa-flip-horizontal" data-placement="left" title="code by Zylphide"></i></a>
Recent Images
No images.