Closed AnnaRybak04 closed 1 year ago
Create styles.css file in the root directory and insert the following styles into it.
Create styles.css file in the root directory and insert the following styles into it.
General styles
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; line-height: 1.5;
--primary-text-color: #181820;
--secondary-text-color: #5c5c62;
--durability-text-color: #6a737d9c;
--icon-color: #6a737d;
--border-color: #ff9a0045;
--text-decoration-color: #ff9a00;
}
.container { margin: 0 auto; padding: 0 30px; max-width: 900px; }
.fh { display: flex; flex-direction: row; justify-content: space-between; }
.fv { display: flex; flex-direction: column; justify-content: space-between; }
.resume { margin: 50px auto; border: 1px solid #f5f5f5; box-shadow: 1px 1px 7px 7px #f5f5f5; padding: 30px 0; max-width: 900px; }
.resume__block { border-bottom: 3px solid var(--border-color); padding-bottom: 30px; margin-bottom: 15px; }
@media screen and (max-width: 576px) {
.main-info,
.contact_info_container {
flex-direction: column;
}
.contact_info_container {
align-items: center;
}
.contact-info__block:not(:last-child) {
margin-bottom: 20px;
}
.experiences {
margin-right: 0;
}
}
Create styles.css file in the root directory and insert the following styles into it.
Contact info styles
.contact-info__header, .contact-info__sub-header { text-align: center; }
.contact-info__header { color: var(--primary-text-color); margin-bottom: 15px; text-decoration-color: var(--text-decoration-color); text-decoration-line: underline; }
.contact-info__sub-header { color: var(--secondary-text-color); margin-bottom: 30px; }
.contact-info__block { display: flex; flex-direction: column; justify-content: space-between; }
.contact-info__block--center { justify-content: center; }
.contact-info__item { color: var(--secondary-text-color); text-decoration: none; display: flex; justify-content: start; }
.contact-info__item:not(:last-child) { margin-bottom: 20px; }
.contact-info__item-icon-wrapper { margin-right: 10px; width: 20px; display: flex; justify-content: center; }
.contact-info__item-icon path { fill: var(--icon-color); }
.contact-info__item-icon { height: 1.1428rem; vertical-align: text-bottom; }
.contact-info__avatar { border-radius: 50%; width: 100px; height: 100px; object-fit: cover; border: 3px solid; border-color: var(--text-decoration-color); }
Create styles.css file in the root directory and insert the following styles into it.
Intro and skills styles
.intro { display: flex; justify-content: start; }
.intro__icon-wrapper { margin-right: 30px; width: 30px; display: flex; justify-content: center; }
.intro__icon { height: 1.1428rem; vertical-align: text-bottom; }
.intro__icon path { fill: var(--text-decoration-color); }
.intro_text { color: var(--secondary-text-color); text-align: justify; }
.skills__header { color: var(--secondary-text-color); text-align: center; margin-bottom: 15px; }
.skills__text { color: var(--secondary-text-color); text-align: justify; }
Create styles.css file in the root directory and insert the following styles into it.
Experience and additional info styles
.experiences { flex: 1 1 60%; margin-right: 50px; }
.experiences__header { color: var(--secondary-text-color); text-align: left; margin-bottom: 20px; }
.experiences__company-header-durability { color: var(--durability-text-color); text-align: left; margin-bottom: 10px; font-size: 15px; }
.experiences__company-header-name { color: var(--primary-text-color); text-decoration-color: var(--text-decoration-color); text-decoration-line: underline; text-align: left; margin-bottom: 20px; }
.experiences__company-project { margin-left: 15px; margin-bottom: 25px; }
.experiences__company-project-role { color: var(--durability-text-color); text-align: left; margin-bottom: 10px; font-size: 15px; }
.experiences__company-project-name { color: var(--primary-text-color); text-align: left; margin-bottom: 10px; }
.experiences__company-project-responsibilities { color: var(--secondary-text-color); padding-left: 20px; }
.additional-info { flex: 1 1 40%; }
.additional-info__education { margin-bottom: 20px; }
.additional-info__education-header { color: var(--secondary-text-color); text-align: left; margin-bottom: 20px; }
.additional-info__education-university-durability { color: var(--durability-text-color); text-align: left; margin-bottom: 10px; font-size: 15px; }
.additional-info__education-university-speciality { color: var(--primary-text-color); text-align: left; margin-bottom: 10px; }
.additional-info__education-university-name { color: var(--secondary-text-color); }
.additional-info__languages { margin-bottom: 20px; }
.additional-info__languages-header { color: var(--secondary-text-color); text-align: left; margin-bottom: 20px; }
.additional-info__languages-item { color: var(--secondary-text-color); }
Create styles.css file in the root directory and insert the following styles into it.