This repository has been archived on 2023-11-10. You can view files and clone it, but cannot push or open issues or pull requests.
freecodecamp-projects/1-responsive-web-design/5-personal-portfolio/styles.css

195 lines
2.9 KiB
CSS
Raw Normal View History

2022-10-08 10:56:55 +00:00
:root{
--color1: lightpink;
--color3: #020202;
}
html{
scroll-behavior: smooth;
text-align: center;
}
*{
margin: 0;
padding: 0;
}
@media (max-width: 1200px) {
html{
font-size: 16px;
}
}
@media (max-width: 900px) {
html{
font-size: 14px;
}
}
@media (max-width: 600px) {
html{
font-size: 12px;
}
}
#navbar{
background: var(--color1);
height: 3.5rem;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 10;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border-radius: 0 0 5px 5px;
}
#navbar a:hover{
font-size: 2rem;
}
section{
max-width: 100vw;
min-height: 100vh;
}
#welcome-section{
background: linear-gradient(
lightblue,
lightskyblue
);
height: 100vh;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
}
h1, h2, a, p, img{
overflow: hidden;
color: var(--color3);
text-decoration: none;
font-family: sans-serif;
}
h1, h2{
font-size: 4rem;
font-weight: 700;
font-family: monospace;
}
.welcome-text{
font-size: 2rem;
}
#projects{
background: linear-gradient(lightskyblue, lightseagreen);
}
.projects-flex{
display: flex;
justify-content: space-evenly;
flex-shrink: 5;
flex-wrap: wrap;
flex-direction: row;
gap: 3rem;
}
@media (max-width: 600px) {
.projects-flex{
flex-direction: column;
align-content: center;
gap: 1rem;
}
}
h2{
padding-top: 3.5rem;
}
.project-tile{
flex-shrink: 5;
max-width: 33%;
max-height: 20%;
overflow: visible;
}
.project-tile:hover{
background-color: lightgreen;
border-radius: 5px 5px;
}
.project-img{
max-width: 100%;
max-height: 100%;
height: 33vh;
width: 33vw;
object-fit: cover;
}
.project-text{
color: var(--color3);
font-family: sans-serif;
display: block;
bottom: 0;
font-size: 2rem;
overflow: visible;
}
#profile-link{
font-size: 3rem;
font-family: sans-serif;
background-color: var(--color1);
opacity: 75%;
color: var(--color3);
padding: 0.5rem 1rem;
margin: 1rem 0;
border-radius: 12px;
display: inline-block;
}
#profile-link:hover{
opacity: 100%;
background-color: lightgreen;
}
#contact{
background: linear-gradient(lightseagreen, lightgreen);
}
.disclaimer{
font-size: 0.5rem;
}
.social-links{
font-family: sans-serif;
font-size: 2rem;
height: 50vh;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
flex-wrap: wrap;
gap: 3rem;
}
.social-links p{
display: inline;
}
footer{
background-color: var(--color1);
height: 3rem;
border-radius: 5px 5px 0 0;
position: sticky;
bottom: 0;
z-index: 10;
}
footer p{
padding-top: 1rem;
}