knights/some-eyes-see-you
knights
/
some-eyes-see-you
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add css grid for positioning

This commit is contained in:
E.L. Guerrero 2024-06-30 04:23:31 -04:00
parent 437b6b4b48
commit 3eaf022ac9
Signed by: knights
GPG Key ID: 6201533059C29A0F
2 changed files with 121 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
assets/css/main.css
View File

@ -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;

155
index.html
View File

@ -50,90 +50,109 @@
</head> </head>
<body> <body>
<div class="eye"> <main>
<div class="iris lightBlue indigo"> <a href="/test">
</div> <div class="eye">
</div> <div class="iris lightBlue indigo"></div>
</div>
</a>
<div class="eye"> <a href="/test">
<div class="iris pink purple"> <div class="eye">
</div> <div class="iris pink purple"></div>
</div> </div>
</a>
<div class="eye"> <a href="/test">
<div class="iris red pink"> <div class="eye">
</div> <div class="iris green black"></div>
</div> </div>
</a>
<div class="eye"> <a href="/test">
<div class="iris green black"> <div class="eye">
</div> <div class="iris black mint"></div>
</div> </div>
</a>
<div class="eye"> <a href="/test">
<div class="iris black mint"> <div class="eye">
</div> <div class="iris yellow tan"></div>
</div> </div>
</a>
<div class="eye"> <a href="/test">
<div class="iris yellow tan"> <div class="eye">
</div> <div class="iris navy white"></div>
</div> </div>
</a>
<div class="eye"> <a href="/test">
<div class="iris navy white"> <div class="eye">
</div> <div class="iris red lightBlue"></div>
</div> </div>
</a>
<div class="eye"> <a href="/test">
<div class="iris red lightBlue"> <div class="eye">
</div> <div class="iris purple mint"></div>
</div> </div>
</a>
<div class="eye"> <a href="/test">
<div class="iris tan red"> <div class="eye">
</div> <div class="iris tan red"></div>
</div> </div>
</a>
<div class="eye"> <a href="/test">
<div class="iris nude red"> <div class="eye">
</div> <div class="iris nude red"></div>
</div> </div>
</a>
<div class="eye"> <a href="/test">
<div class="iris blue yellow"> <div class="eye">
</div> <div class="iris blue yellow"></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>
<div class="eye"> <a href="/test">
<div class="iris lightGreen green"> <div class="eye">
</div> <div class="iris lightGreen green"></div>
</div> </div>
</a>
<div class="eye"> <a href="/test">
<div class="iris orange black"> <div class="eye">
</div> <div class="iris red pink"></div>
</div> </div>
</a>
<div class="eye"> <a href="/test">
<div class="iris purple lightBlue"> <div class="eye">
</div> <div class="iris orange black"></div>
</div> </div>
</a>
<div class="eye"> <a href="/test">
<div class="iris purple mint"> <div class="eye">
</div> <div class="iris purple lightBlue"></div>
</div> </div>
</a>
<div class="eye"> <a href="/test">
<div class="iris yellow rose"> <div class="eye">
</div> <div class="iris yellow rose"></div>
</div> </div>
</a>
</main>
</body> </body>
</html> </html>