funky g1 inspired layout
Includes animations of images and links when mouse hovers over them. copy and paste all the code into custom html section to use ^_^
<div style="position:fixed; bottom:2px; right: 20px;"> <img width="500px" src="https://i.ibb.co/tTw77JzP/ezgif-7ba7e45ca0f4ed.png"/> </div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nabla&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* Add to Friends */
content:url(https://gifcity.carrd.co/assets/images/gallery283/49b8eb85.gif?v=e3c0bc0f);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: url(https://gifcity.carrd.co/assets/images/gallery06/20a42f1f.gif?v=e3c0bc0f);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: url(https://gifcity.carrd.co/assets/images/gallery06/20a42f1f.gif?v=e3c0bc0f);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: url(https://gifcity.carrd.co/assets/images/gallery283/49b8eb85.gif?v=e3c0bc0f);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: url(https://gifcity.carrd.co/assets/images/gallery283/49b8eb85.gif?v=e3c0bc0f);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: url(https://gifcity.carrd.co/assets/images/gallery06/20a42f1f.gif?v=e3c0bc0f);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: url(https://gifcity.carrd.co/assets/images/gallery06/20a42f1f.gif?v=e3c0bc0f);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content: url(https://gifcity.carrd.co/assets/images/gallery283/49b8eb85.gif?v=e3c0bc0f);
}
.contact .heading{
background-color: red !important;
}
.table-section{
position:relative;
top: 30px;
border: 3px double darkred !important;
color:red;
margin-bottom: 50px !important;
border-radius: 10px 0px 10px 0px;
}
.profile-pic{
-webkit-mask-image: url(https://gifcity.carrd.co/assets/images/gallery383/6762989a.png?v=e3c0bc0f);
mask-image: url(https://gifcity.carrd.co/assets/images/gallery383/6762989a.png?v=e3c0bc0f);
mask-repeat: no-repeat;
mask-size: 130px
}
.url-info{
position: relative;
top: 23px;
border: 2px dotted darkred !important;
}
footer .links{
position: relative;
bottom: 110%;
left: -1.1%;
width: 102.2%;
}
footer{
height: 100px !important;
border-radius: 0px 0px 10px 10px !important;
border-bottom: 4px double red;
border-left: 4px double red;
border-right: 4px double red;
background-image: url(https://i.pinimg.com/736x/66/78/3a/66783aa509ec137d165600c7c3937700.jpg) !important;
background-size: 500px !important;
}
.blurbs.heading{
background-color: 0;
}
:root {
--light-orange: darkblue;
--lighter-blue: maroon;
--even-lighter-blue: 0 ;
--lightest-blue: 0;
}
.blurbs{
background-color:0;
padding:3px;
border-radius: 10px 0px 10px 0px;
border: 1px solid blue;
}
.friends{
background-color:0;
padding:10px;
border-radius: 10px 0px 10px 0px;
border: 1px solid blue;
}
.friends-grid img{
border-radius: 10px;
border: 2px solid blue;
}
.mood{
position:fixed;
left: 200px;
top: 50px;
background-color: red;
width: 320px !important;
padding: 10px;
border: 3px dotted blue !important;
}
.contact{
position:fixed;
left: 300px;
top: 120px;
background-color: red;
width: 220px !important;
padding: 10px;
}
.top.input{
color: grey !important;
}
a{
color: orange;
}
.logo{
content: url(http://www.gigaglitters.com/created/phCdlSsEfB.gif);
width:300px !important;
margin-top: 45px !important;
}
h1{
font-family: "Nabla", system-ui;
}
main{
background-image: url(https://i.pinimg.com/originals/5d/5c/50/5d5c50d37b76e78c4724760ad6fb97ec.gif);
color: cyan;
border-left: 4px double red;
border-right: 4px double red;
padding:10px;
}
.top{
height: 100px !important;
border-radius: 10px 10px 0px 0px !important;
border-top: 4px double red;
border-left: 4px double red;
border-right: 4px double red;
background-image: url(https://i.pinimg.com/736x/66/78/3a/66783aa509ec137d165600c7c3937700.jpg) !important;
background-size: 500px !important;
}
.links{
border-left: 4px double red;
border-right: 4px double red;
background-color: grey !important;
}
.comments-table{
position:fixed;
left: 25px;
top: 370px;
display: block;
height: 600px;
width: 24% !important;
overflow-y: scroll;
color: turquoise;
border: 10px ridge gray;
padding: 1px;
z-index: 100;
border-radius: 10px 10px 10px 10px;
animation: shadow 2s infinite linear alternate;
}
.comments-table td{
background-image: url(https://i.pinimg.com/736x/23/18/48/23184846b2e3ade02d63b4d894a8c6dd.jpg) !important;
background-size: 50% !important;
}
.comments-table td:nth-child(odd){
background-image: url(https://i.pinimg.com/736x/72/76/9a/72769ad0f81e69bd86aeb2a970ea06d1.jpg) !important;
background-size: 200% !important;
}
.comments-table img{
-webkit-mask-image: url(https://gifcity.carrd.co/assets/images/gallery384/7595c461.png?v=e3c0bc0f);
mask-image: url(https://gifcity.carrd.co/assets/images/gallery384/7595c461.png?v=e3c0bc0f);
mask-repeat: no-repeat;
mask-size: 95px
}
.comments-table td .comment-replies{border:none}
.blog-preview{
position: fixed;
top: 110px;
right:30px;
rotate: -5deg;
width: 26%;
height: 200px;
background-image: url(https://i.pinimg.com/736x/23/18/48/23184846b2e3ade02d63b4d894a8c6dd.jpg);
background-size:50%;
border: 10px ridge gray;
padding: 10px;
z-index: 0;
color: cyan;
overflow-y: scroll;
background-color: darkblue !important;
border-radius: 10px 10px 10px 10px;
animation: shadow 2s infinite linear alternate;
}
.profile .profile-info {
position: fixed;
top: 60px;
right:30px;
rotate: 5deg;
width: 26%;
height: 50px;
background-color: red;
border: 3px dotted blue;
font-family: "Nabla", system-ui;
}
body{
background-image: url(https://i.pinimg.com/736x/3c/03/9a/3c039a6ba2bfdada802c4054e08c09d2.jpg);
background-size: 100%;
background-attachment: fixed;
font-family: "Turret Road", sans-serif;
padding-bottom:50px !important;
}
@keyframes shading{
0% {text-shadow: 6px 4px 7px blue;}
50% {text-shadow: -6px 4px 7px blue;}
100% {text-shadow: 6px 4px 7px blue;}
}
@keyframes colors{
0% {color: red;}
20%{color:orange;}
40%{color:yellow;}
60%{color:grey;}
80%{color:purple;}
100%{color:red;}
}
h4{
animation: colors 4s infinite linear;
text-align: right !important;
text-shadow: 6px 3px 1px black;
}
img:hover {
animation: spin 1s infinite linear;
box-shadow: 0px 0px 10px blue;
}
a:hover {
font-family: "Nabla", system-ui;
}
@keyframes spin{
from {rotate:0deg;}
to {rotate: 360deg;}
}
li .icon {
content: url(https://media.tenor.com/o3eJxtVH0TEAAAAj/transformers-autobot.gif);
}
.comments-table button{
background-color:navy !important;
border: 1px solid blue;
padding: 3px;
color: blue;
}
@keyframes shadow{
from{box-shadow: 5px 5px 0px blue}
to{box-shadow: 5px 5px 10px blue}
}
</style>