feat: add css grid for positioning
This commit is contained in:
parent
437b6b4b48
commit
3eaf022ac9
|
@ -39,11 +39,44 @@ a:hover {
|
||||||
text-decoration-color: rgba(81,81,81,0.4);
|
text-decoration-color: rgba(81,81,81,0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ------- Main ------- */
|
||||||
|
main {
|
||||||
|
margin: auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 25%);
|
||||||
|
position: relative;
|
||||||
|
width: 80%;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > a:nth-child(3n+1) {
|
||||||
|
position: relative;
|
||||||
|
bottom: calc(10% - 120px);
|
||||||
|
left: 25px;
|
||||||
|
width: 220px;
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > a:nth-child(3n+2) {
|
||||||
|
position: relative;
|
||||||
|
bottom: calc(25% - 40px);
|
||||||
|
right: 20px;
|
||||||
|
width: 220px;
|
||||||
|
justify-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > a:nth-child(3n+3) {
|
||||||
|
position: relative;
|
||||||
|
bottom: calc(30% - 200px);
|
||||||
|
left: -30px;
|
||||||
|
width: 220px;
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
/* ------- Eye -------
|
/* ------- Eye -------
|
||||||
CSS blinking eye animation from
|
CSS blinking eye animation from
|
||||||
https://codepen.io/creme/pen/rdjXav
|
https://codepen.io/creme/pen/rdjXav
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.eye {
|
.eye {
|
||||||
margin: 2rem;
|
margin: 2rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -185,7 +218,6 @@ https://codepen.io/creme/pen/rdjXav
|
||||||
background: var(--darkBlue);
|
background: var(--darkBlue);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.eye .iris:hover,
|
.eye .iris:hover,
|
||||||
.eye .iris:focus {
|
.eye .iris:focus {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
87
index.html
87
index.html
|
@ -50,90 +50,109 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris lightBlue indigo">
|
<div class="iris lightBlue indigo"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris pink purple">
|
<div class="iris pink purple"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris red pink">
|
<div class="iris green black"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris green black">
|
<div class="iris black mint"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris black mint">
|
<div class="iris yellow tan"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris yellow tan">
|
<div class="iris navy white"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris navy white">
|
<div class="iris red lightBlue"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris red lightBlue">
|
<div class="iris purple mint"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris tan red">
|
<div class="iris tan red"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris nude red">
|
<div class="iris nude red"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris blue yellow">
|
<div class="iris blue yellow"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
<div class="eye">
|
<a href="/test">
|
||||||
<div class="iris pink darkBlue">
|
<div class="eye"><div class="iris pink darkBlue">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris lightGreen green">
|
<div class="iris lightGreen green"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris orange black">
|
<div class="iris red pink"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris purple lightBlue">
|
<div class="iris orange black"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris purple mint">
|
<div class="iris purple lightBlue"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/test">
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris yellow rose">
|
<div class="iris yellow rose"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
</main>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue