isla 's profile picture

Published by

published
updated

Category: Web, HTML, Tech

CSS and HTML codes

These codes are for layouts and profiles


Layout background code: 

<style>

body{

background:url("imagelink.com") no-repeat fixed; background-size: cover;}

</style>

remove imagelink.com with your image choice


if you want to have the image only cover a certain part of the layout/profile:

<style>

body{

background:url("imagelink.com");}

</style>


image code for layouts or posts:

paste the code below to your about me section of your profile, remove the current url and the brackets at the beginning and end of the code:

{ <img src="https://yourimagehere.com" height=# width=# >}


to get direct images and embed them from google photos and onto your profile click here

to get direct images and embed them from any downloadable video or gif and onto your profile click here

To make your layout a specific color use the code below, if you need a custom color picker website, click here

color code:

<style>

body{

background-color: #000000;}

</style>

replace the 000000's with the color image of your choice


layout boarder codes:

<style>

main {

    border-radius: 5px;

    border: 10px solid transparent;

    padding: 15px;

    border-image: url(boarderurlhere) 30 stretch;

    color: black;

    background: url('...') no-repeat fixed; background-size: cover;

    background-color: white; }

</style>


delete the boarderurlhere with your custom url choice, if you need a url to create your boarder, click here


contact icons code:


<style>

/* contact icons */

.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: "⭐"

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* add to favorite */

content: "🌟"

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* send a message */

content: "🌠"

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* foward to friend*/

content: "💫"

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* instant message */

content: "✨"

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* block user */

content: "👾"

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* add 2 group  */

content: "🌙"

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* report */

content: "🛰️"

}   

</style>

replace the emoji's with symbols or emojis of your choice


code to make an image shake when cursor is dragged over:


<style>


img:hover {

  animation: shake 0.5s;

  animation-iteration-count: infinite;


}


@keyframes shake {

  0% { transform: translate(1px, 1px) rotate(0deg); }

  10% { transform: translate(-1px, -2px) rotate(-1deg); }

  20% { transform: translate(-3px, 0px) rotate(1deg); }

  30% { transform: translate(3px, 2px) rotate(0deg); }

  40% { transform: translate(1px, -1px) rotate(1deg); }

  50% { transform: translate(-1px, 2px) rotate(-1deg); }

  60% { transform: translate(-3px, 1px) rotate(0deg); }

  70% { transform: translate(3px, 1px) rotate(-1deg); }

  80% { transform: translate(-1px, -1px) rotate(1deg); }

  90% { transform: translate(1px, 2px) rotate(0deg); }

  100% { transform: translate(1px, -2px) rotate(-1deg); }


code to make text rainbow:

<style>


<div class="rainbow">example text</div>


<style>

.rainbow{

animation:myrainbow 1.0s linear infinite}


@keyframes myrainbow{

0%{color:#f54242}

25%{color:#f2bf3f}

50%{color:#61eb3b}

75%{color:#2895ed}

100%{color:#f54242}}

</style>


for custom cursor links, click here, the code to the cursors of your choice should be on the profile of the cursor, copy and paste the url onto the about me section of your profile

if not, heres the url code:


cursor: url(link in cursor code area), auto


open google fonts and pick out a font, click use for web and then "@import", paste the font url into the code below:

<style>

@import url('googlefonturlhere');

</style>


thats all for now sorry its so long lol i jus like to help people out, please lmk if i got something wrong im still kind of new to coding and HTML as well as CSS.


dm me for layout requests please.


28 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )