Profile
<!----------------------------------------------
| COMPOUNDEYES |
| (James Webb Version) |
| by Zylphide |
------------------------------------------------
image credits: ESA/Hubble (https://esahubble.org/images/archive/category/nebulae/)
- to change the sizes of the hexagons, alter the numbers of this section [height: 192px; width: 224px] in the individual hexagon div style
- to change the spacing between the hexagons, play around with the [margin-top: 96px; margin-left: -56px] numbers in the individual hexagon div style and the [margin-top: -191px] numbers in the row div style
----------------------------------------------->
<!--- row 1 ---->
<div class="row no-gutters justify-content-center">
<!--- image 1 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic1406a.jpg); 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: 192px"></div>
<!--- image 1 END ---->
<!--- image 2 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/screen/opo0006a.jpg); 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: 96px; margin-left: -56px"></div>
<!--- image 2 END ---->
<!--- image 3 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic1808a.jpg); 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: -56px"></div>
<!--- image 3 END ---->
<!--- image 4 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic1608a.jpg); 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: 96px; margin-left: -56px"></div>
<!--- image 4 END ---->
<!--- image 5 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/opo0010a.jpg); 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: 192px; margin-left: -56px"></div>
<!--- image 5 END ---->
</div>
<!--- row 1 END --->
<!--- row 2 ---->
<div class="row no-gutters justify-content-center" style="margin-top: -191px">
<!--- image 6 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic0702a.jpg); 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: 192px;"></div>
<!--- image 6 END ---->
<!--- image 7 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic0601a.jpg); 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: 96px; margin-left: -56px"></div>
<!--- image 7 END ---->
<!--- image 8 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic1007a.jpg); 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: -56px"></div>
<!--- image 8 END ---->
<!--- image 9 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic0822a.jpg); 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: 96px; margin-left: -56px"></div>
<!--- image 9 END ---->
<!--- image 10 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic0619a.jpg); 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: 192px; margin-left: -56px"></div>
<!--- image 10 END ---->
</div>
<!--- row 2 END --->
<!--- row 3 ---->
<div class="row no-gutters justify-content-center" style="margin-top: -191px">
<!--- image 11 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic1310a.jpg); 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: 192px;"></div>
<!--- image 11 END ---->
<!--- image 12 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic0910h.jpg); 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: 96px; margin-left: -56px"></div>
<!--- image 12 END ---->
<!--- image 13 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic1118a.jpg); 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: 192px;; margin-left: -56px"></div>
<!--- image 13 END ---->
<!--- image 14 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic1011a.jpg); 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: 96px; margin-left: -56px"></div>
<!--- image 14 END ---->
<!--- image 15 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic1818a.jpg); 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: 192px; margin-left: -56px"></div>
<!--- image 15 END ---->
</div>
<!--- row 3 END --->
<!--- row 4 ---->
<div class="row no-gutters justify-content-center">
<!--- image 16 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/potw1020a.jpg); 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: -96px; "></div>
<!--- image 16 END ---->
<!--- image 17 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic1819a.jpg); 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: -56px"></div>
<!--- image 17 END ---->
<!--- image 18 ---->
<div style="height: 192px; width: 224px;
background: url(https://cdn.spacetelescope.org/archives/images/thumb700x/heic0609a.jpg); 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: -96px; margin-left: -56px"></div>
<!--- image 18 END ---->
</div>
<!--- row 4 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.