Color codes:
https://htmlcolorcodes.com/
https://www.color-hex.com/
Positioning: https://www.w3schools.com/css/css_positioning.asp
Drop (and box) shadows: https://www.w3schools.com/css/css3_shadows.asp
Link codes + optional hover:
a {
color: black;
box-shadow: inset 0 0 0 0 #color;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s; transition: all ease 0.5s;
text-decoration: none;
}
.about-me a:hover {
box-shadow: inset 0 50px 0 0 #color;
text-decoration-line: underline;
text-decoration-style: wavy;
}
Code so site is zoomed out on mobile, makes all elements visible:
@media only screen and (max-width: 500px) {
body {
transform: scale(0.27);
transform-origin: top left;
width: 500%;
margin: 0;
padding: 0;
}
}
Good practice to wrap all elements in a container spanning the entire screen, helps if positioning all elements at once:
.desktop
{
position: absolute;
top: -3em;
left: 0;
width: 100vw;
height: 100vh;
transform-origin: top left;
}
Outer container base code:
.outer
{
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: relative;
}
Red, green, and yellow buttons:
button
{
width: 10px;
height: 10px;
padding: 0;
border-radius: 50%;
background-color: #808080;
border: none;
margin-right: 5px;
}
.red
{
background-color: #fe5f57;
}
.yellow
{
background-color: #febc2e;
}
.green
{
background-color: #27c840;
}
Gradients for the first container: https://cssgradient.io/
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 92%, rgba(225, 225, 225, 1) 0%);
Images on the left turn b&w on hover, images on right fade in:
.left img {
transition: filter 0.3s ease;
}
.left img:hover {
filter: grayscale(100%);
}
.right img
{
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
More image hover options: https://scripted.neocities.org/images
Header base code
.header
{
border-top: 1px solid #808080;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
border-radius: 10px 10px 0px 0px;
height: 10px;
width: 150px;
padding: 10px;
background: #e1e1e1;
display: flex;
}
Title base code
.title
{
margin-left: auto;
}
Box-sizing explanation: https://www.w3schools.com/css/css3_box-sizing.asp
Inner base code
.inner
{
border-bottom: 1px solid #808080;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
border-radius: 0px 0px 10px 10px;
padding: 10px;
background: white;
}
Mark I used:
mark
{
font-family: digibop;
font-weight: bold;
-webkit-text-stroke: 0.5px black;
filter: drop-shadow(2px 2px 0px white) drop-shadow(0px 0px 1.5px black);
color: #color;
background: none;
transform: perspective(500px) rotateY(-35deg);
display: inline-block;
font-size: 3.5rem;
}
Some more text effects I really like: https://loveberry.nekoweb.org/resources/text
Images on the left of the first container:
Template for linking your socials:
NAME OF SOCIAL HERE
Super helpful resource (one of my personal favorites!): https://htmlbasics.carrd.co/
Switch between the images in the right column, margins are optional styling to add based on your images and how you want them positioned: