kira/cesium.one
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

various improvements

Browse Source 
contact divs animate on hover
full div is clickable instead of just an a tag inside of it
This commit is contained in:
Christian
2021-01-05 00:48:20 -05:00
parent c5311ab95b
commit 6708c46e14
2 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@@ -16,33 +16,39 @@
<p>Email: cesium2349@protonmail.com (<a href=./pgp.txt>PGP Key</a>) <p>Email: cesium2349@protonmail.com (<a href=./pgp.txt>PGP Key</a>)
<br>not an exhaustive list of my entire presence on the internet but stuff on this list is definitely me</p> <br>not an exhaustive list of my entire presence on the internet but stuff on this list is definitely me</p>
<div class=contact style="background-color: #475276;"> <div class=contact style="background-color: #475276; opacity:1; cursor: auto;">
<h3>Discord</h3> <h3>Discord</h3>
<p>Cesium#5061</p> <p>Cesium#5061</p>
</div> </div>
<div class=contact style="background-color: #494949;"> <div class=contact style="background-color: #494949;">
<h3>GitHub</h3> <h3>GitHub</h3>
<p><a href="https://github.com/CesiumCs">CesiumCs</a></p> <p>CesiumCs</p>
<a href="https://github.com/CesiumCs"></a>
</div> </div>
<div class=contact style="background-color: #5c4050;"> <div class=contact style="background-color: #5c4050;">
<h3>Instagram</h3> <h3>Instagram</h3>
<p><a href="https://instagram.com/c.es.ium/">c.es.ium</a></p> <p>c.es.ium</p>
<a href="https://instagram.com/c.es.ium/"></a>
</div> </div>
<div class=contact style="background-color: #674141;"> <div class=contact style="background-color: #674141;">
<h3>YouTube</h3> <h3>YouTube</h3>
<p><a href="https://www.youtube.com/channel/UCXPFpgA9G9_wtlyDeT7QAig">Cesium</a></p> <p>Cesium</p>
<a href="https://www.youtube.com/channel/UCXPFpgA9G9_wtlyDeT7QAig"></a>
</div> </div>
<div class=contact style="background-color: #6b4633;"> <div class=contact style="background-color: #6b4633;">
<h3>Reddit</h3> <h3>Reddit</h3>
<p><a href="https://www.reddit.com/user/unfunnycesium">unfunnycesium</a></p> <p>unfunnycesium</p>
<a href="https://www.reddit.com/user/unfunnycesium"></a>
</div> </div>
<div class=contact style="background-color: #394a7f;"> <div class=contact style="background-color: #394a7f;">
<h3>Keybase</h3> <h3>Keybase</h3>
<p><a href="https://keybase.io/cesium2349/">cesium2349</a></p> <p>cesium2349</p>
<a href="https://keybase.io/cesium2349/"></a>
</div> </div>
<div class=contact style="background-color: #3b617c;"> <div class=contact style="background-color: #3b617c;">
<h3>Twitter</h3> <h3>Twitter</h3>
<p><a href="https://twitter.com/cesium2349">cesium2349</a></p> <p>cesium2349</p>
<a href="https://twitter.com/cesium2349"></a>
</div> </div>
</body> </body>
</html> </html>

20
styles.css
View File

@@ -10,9 +10,6 @@ a {
text-decoration: none; text-decoration: none;
text-shadow: 0 0 5px; text-shadow: 0 0 5px;
} }
.contact a {
color: white;
}
@font-face { @font-face {
font-family: "Open Sans"; font-family: "Open Sans";
src: url(assets/OpenSans-Regular.ttf); src: url(assets/OpenSans-Regular.ttf);
@@ -29,6 +26,23 @@ a {
background-color: #232629; background-color: #232629;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
opacity: .9;
position: relative;
transition: opacity .5s;
}
.contact a {
z-index: 10;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: white;
position: absolute;
}
div.contact:hover {
opacity: 1;
cursor: hand;
cursor: pointer;
} }
@media screen and (max-width:500px) { @media screen and (max-width:500px) {
.contact { .contact {