You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
154 lines
2.1 KiB
154 lines
2.1 KiB
/* CSS for the resume exercises */ |
|
|
|
/* |
|
COLOR PALETTE |
|
https://coolors.co/f7fff7-343434-2f3061-ffe66d-a1c6d7 |
|
#F7FFF7 - almost white |
|
#343434 - dark gray - almost black |
|
#2F3061 - blue dark |
|
#FFE66D - yellow |
|
#A1C6D7 - blue light |
|
*/ |
|
|
|
/* Global styles |
|
------------------------------------*/ |
|
html { |
|
box-sizing: border-box; |
|
} |
|
|
|
*, *:before, *:after { |
|
box-sizing: inherit; |
|
} |
|
|
|
body { |
|
color: #343434; |
|
margin: 0; |
|
padding: 0; |
|
font-family: "Montserrat", sans-serif; |
|
font-size: 15px; |
|
line-height: 1.5; |
|
} |
|
|
|
img { |
|
width: 300px; |
|
} |
|
|
|
a { |
|
color: #FFE66D; |
|
} |
|
|
|
a:hover { |
|
text-decoration: none; |
|
|
|
} |
|
|
|
h1 { |
|
font-size: 100px; |
|
line-height: 1; |
|
} |
|
|
|
h2 { |
|
font-size: 45px; |
|
} |
|
|
|
h1, h2 { |
|
font-family: 'Caveat', cursive; |
|
font-weight: 400; |
|
margin: 0; |
|
} |
|
|
|
h3 { |
|
margin-bottom: 0; |
|
} |
|
|
|
.item-details h3 + p { |
|
font-style: italic; |
|
} |
|
|
|
.item-details h3 ~ p { |
|
margin: 0; |
|
} |
|
|
|
.content-wrap { |
|
width: 800px; |
|
margin: 0 auto; |
|
padding: 60px 0; |
|
} |
|
|
|
|
|
|
|
/* Profile |
|
------------------------------------*/ |
|
header { |
|
background: #2F3061; |
|
color: #F7FFF7; |
|
text-align: center; |
|
} |
|
|
|
/* Projects |
|
------------------------------------*/ |
|
.projects { |
|
background: #F7FFF7; |
|
} |
|
|
|
.projects a { |
|
color: #2F3061; |
|
} |
|
|
|
.projects .btn { |
|
color: #F7FFF7; |
|
background: #2F3061; |
|
text-decoration: none; |
|
padding: 8px; |
|
border-radius: 4px; |
|
display: inline-block; |
|
} |
|
|
|
.projects .btn:hover { |
|
background: rgba(47, 48, 97, 80%); |
|
} |
|
|
|
.project-item { |
|
overflow: hidden; |
|
} |
|
|
|
.project-item img { |
|
float: left; |
|
margin-right: 20px; |
|
} |
|
|
|
/* Work Experience |
|
------------------------------------*/ |
|
.work-experience { |
|
background: #A1C6D7; |
|
} |
|
|
|
.job-item { |
|
display: grid; |
|
grid-template-columns: 1fr 2fr; |
|
column-gap: 20px; |
|
} |
|
|
|
/* Education |
|
------------------------------------*/ |
|
|
|
|
|
/* Contact Info |
|
------------------------------------*/ |
|
footer { |
|
background: #343434; |
|
color: #F7FFF7; |
|
text-align: center; |
|
} |
|
|
|
.contact-list { |
|
list-style-type: none; |
|
padding: 0; |
|
display: flex; |
|
justify-content: center; |
|
} |
|
|
|
.contact-list a { |
|
padding: 15px; |
|
display: inline-block; |
|
} |