rainyday.dev/freecodcamp/build-a-portfolio-page/styles.css

135 lines
2.0 KiB
CSS
Raw Permalink Normal View History

:root {
--black: #222831;
--grey: #393e46;
--blue: #0092ca;
--white: #eeeeee;
}
*, ::before, ::after {
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
height: 100vh;
width: 100%;
color: var(--white);
}
html {
font-size: 16px;
}
a {
text-decoration: none;
color: var(--white);
}
a:hover {
text-decoration: underline;
}
header {
padding: 0.5rem;
display: flex;
align-items: center;justify-content: space-between;
width: 100%;
position: fixed;
top: 0;
background-color: var(--black);
}
header p {
padding: 0.25rem;
}
navbar {
padding-right:1rem;
}
navbar a {
padding: 0.25rem;
}
#welcome-section {
padding: 3rem;
height: 100vh;
background-color: var(--blue);
}
h1 {
padding: 1rem;
text-align: center;
}
#welcome-section p {
line-height: 1.25rem;
padding: 1.1rem;
}
#projects {
height: 75vh;
padding: 1rem;
padding-top: 0.5rem;
background-color: var(--grey);
}
#projects h2 {
text-align: center;
padding: 0.5rem;
}
.project-tile {
display: flex;
flex-direction: column;
width: 45vw;
height: auto;
padding: 1rem;
border: 1px solid var(--blue);
border-radius: 10px;
}
.project-tile img {
max-height: 100%;
width: auto;
border-radius: 10px;
padding-bottom: 0.5rem;
}
.project-tile p {
padding-bottom: 0.5rem;
}
#contact {
height: 30vh;
padding: 1rem;padding-top: 0.5rem;background-color: var(--blue);
}
#contact h2 {
padding: 0.5rem;
}
#contact ul {
list-style-type: none;
padding: 0.5rem;
}
#contact li {
padding: 0.25rem;
}
@media only screen and (max-width: 768px) {
#welcome-section {
text-align: center;
}
#projects {
display: flex;
flex-direction: column;
align-items: center;
}
#contact {
text-align: center;
}
}