diff --git a/README.md b/README.md index a7ac464..390d13d 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# rsschool-cv \ No newline at end of file +https://Artem-Freelancer.github.io/rsschool-cv/ \ No newline at end of file diff --git a/assets/img/avatar.png b/assets/img/avatar.png new file mode 100644 index 0000000..42ae520 Binary files /dev/null and b/assets/img/avatar.png differ diff --git a/assets/img/bg_header.jpg b/assets/img/bg_header.jpg new file mode 100644 index 0000000..2e3554f Binary files /dev/null and b/assets/img/bg_header.jpg differ diff --git a/assets/svg/contacts/discord.svg b/assets/svg/contacts/discord.svg new file mode 100644 index 0000000..9d89862 --- /dev/null +++ b/assets/svg/contacts/discord.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/svg/contacts/email.svg b/assets/svg/contacts/email.svg new file mode 100644 index 0000000..272d2b2 --- /dev/null +++ b/assets/svg/contacts/email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/svg/contacts/github.svg b/assets/svg/contacts/github.svg new file mode 100644 index 0000000..a2426a9 --- /dev/null +++ b/assets/svg/contacts/github.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/contacts/gps.svg b/assets/svg/contacts/gps.svg new file mode 100644 index 0000000..a71bcaf --- /dev/null +++ b/assets/svg/contacts/gps.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/svg/footer/logo_rs-school.svg b/assets/svg/footer/logo_rs-school.svg new file mode 100644 index 0000000..741a0c9 --- /dev/null +++ b/assets/svg/footer/logo_rs-school.svg @@ -0,0 +1,330 @@ + + + +]> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/website_icon.ico b/assets/website_icon.ico new file mode 100644 index 0000000..143f9dd Binary files /dev/null and b/assets/website_icon.ico differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..b1c7a62 --- /dev/null +++ b/css/style.css @@ -0,0 +1,644 @@ +* { + padding: 0px; + margin: 0px; + border: 0px; +} + +*, +*:before, +*:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +:focus, +:active { + outline: none; +} + +a:focus, +a:active { + outline: none; +} + +html, +body { + height: 100%; +} + +body { + color: white; + line-height: 1; + font-family: "Roboto", sans-serif; + font-size: 14px; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +input, +button, +textarea { + font-family: "Roboto", sans-serif; + font-size: inherit; +} + +button { + cursor: pointer; + color: inherit; + background-color: inherit; +} + +a { + color: inherit; +} + +a:link, +a:visited { + text-decoration: none; +} + +a:hover { + text-decoration: none; +} + +ul li { + list-style: none; +} + +img { + vertical-align: top; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: inherit; + font-size: inherit; +} + +body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.header { + background-color: #829985; +} + +.main { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} + +.footer { + background-color: #829985; +} + +.container { + max-width: 800px; + margin: 0 auto; +} + +.nav__list { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +@media (max-width: 542.9px) { + .nav__list { + max-width: 90%; + margin: 0 auto; + } +} + +@media (max-width: 346.9px) { + .nav__list { + max-width: 80%; + margin: 0 auto; + } +} + +.nav__link { + padding: 0 20px; + line-height: 50px; + position: relative; +} + +@media (max-width: 808px) { + .nav__link { + padding: 0 10px; + } +} + +@media (max-width: 632px) { + .nav__link { + padding: 0 5px; + } +} + +@media (max-width: 542.9px) { + .nav__link { + line-height: 20px; + } +} + +.nav__link:hover { + font-size: 15px; + color: #a81010b9; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; +} + +.main-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + gap: 40px; +} + +.profile { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom: 8px solid #a81010b9; + padding: 20px 5px; + width: 100%; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.profile__avatar { + width: 200px; + height: 200px; + -o-object-fit: cover; + object-fit: cover; + border-radius: 50%; +} + +.profile__about-me { + color: #a81010b9; + padding: 20px 10px; +} + +.profile__title { + text-transform: uppercase; + letter-spacing: 7px; + text-align: center; + font-size: 18px; + font-weight: 900; + margin-bottom: 10px; +} + +.profile__line { + background-color: #829985; + height: 3px; + width: 50px; + margin: 0 auto; + margin-bottom: 30px; +} + +.profile__subtitle { + font-size: 16px; + color: black; + text-align: center; +} + +.contacts { + -webkit-box-flex: 0; + -ms-flex: 0 1 calc(50% - 20px); + flex: 0 1 calc(50% - 20px); + padding: 25px 10px; + color: black; + border-bottom: 2px solid #a81010b9; +} + +@media (max-width: 520px) { + .contacts { + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + } +} + +.contacts__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; +} + +.contacts__item { + position: relative; +} + +.contacts__item:not(:last-child) { + margin-bottom: 10px; +} + +.contacts__item a { + color: #829985; +} + +.contacts__item a:hover { + color: #a81010b9; + -webkit-transition: .5s; + -o-transition: .5s; + transition: .5s; +} + +.contacts__item::before { + content: ""; + background: url(../assets/svg/contacts/gps.svg) left/contain no-repeat; + width: 10px; + height: 20px; + padding-left: 20px; +} + +.contacts__item:nth-child(2)::before { + background: url(../assets/svg/contacts/email.svg) left/contain no-repeat; +} + +.contacts__item:nth-child(3)::before { + background: url(../assets/svg/contacts/github.svg) left/contain no-repeat; +} + +.contacts__item:last-child::before { + background: url(../assets/svg/contacts/discord.svg) left/contain no-repeat; +} + +.about-me { + -webkit-box-flex: 0; + -ms-flex: 0 1 calc(50% - 20px); + flex: 0 1 calc(50% - 20px); + border-bottom: 2px solid #a81010b9; + color: black; + padding: 25px 10px; +} + +@media (max-width: 520px) { + .about-me { + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + } +} + +.about-me__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; +} + +.about-me__text { + line-height: 20px; +} + +.code { + -webkit-box-flex: 0; + -ms-flex: 0 1 calc(50% - 20px); + flex: 0 1 calc(50% - 20px); + border-bottom: 2px solid #a81010b9; + color: black; + padding: 25px 10px; +} + +@media (max-width: 520px) { + .code { + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + } +} + +.code__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; +} + +.education { + -webkit-box-flex: 0; + -ms-flex: 0 1 calc(50% - 20px); + flex: 0 1 calc(50% - 20px); + border-bottom: 2px solid #a81010b9; + color: black; + padding: 25px 10px; +} + +@media (max-width: 520px) { + .education { + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + } +} + +.education__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; +} + +.education__text { + line-height: 1.5; +} + +.courses { + -webkit-box-flex: 0; + -ms-flex: 0 1 calc(50% - 20px); + flex: 0 1 calc(50% - 20px); + color: black; + padding: 25px 10px; + border-bottom: 2px solid #a81010b9; +} + +@media (max-width: 520px) { + .courses { + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + } +} + +.courses__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; +} + +.courses__item { + position: relative; + padding-left: 20px; +} + +.courses__item:not(:last-child) { + margin-bottom: 10px; +} + +.courses__item a:hover { + color: #a81010b9; + -webkit-transition: .5s; + -o-transition: .5s; + transition: .5s; +} + +.courses__item::before { + content: ""; + position: absolute; + left: 0; + top: 10%; + border: 1px solid #829985; + border-radius: 50%; + width: 10px; + height: 10px; +} + +.courses__item:not(:last-child) { + margin-bottom: 15px; +} + +.courses a { + color: #829985; +} + +.english { + -webkit-box-flex: 0; + -ms-flex: 0 1 calc(50% - 20px); + flex: 0 1 calc(50% - 20px); + color: black; + padding: 25px 10px; + border-bottom: 2px solid #a81010b9; +} + +@media (max-width: 520px) { + .english { + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + } +} + +.english__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; +} + +.skills { + -webkit-box-flex: 0; + -ms-flex: 0 1 calc(50% - 20px); + flex: 0 1 calc(50% - 20px); + color: black; + padding: 25px 10px; +} + +@media (max-width: 520px) { + .skills { + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + } +} + +.skills__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; +} + +.skills__item { + position: relative; + padding-left: 20px; +} + +.skills__item span { + color: #829985; +} + +.skills__item:not(:last-child) { + margin-bottom: 10px; +} + +.skills__item::before { + content: ""; + position: absolute; + left: 0; + top: 10%; + border: 1px solid #829985; + border-radius: 50%; + width: 10px; + height: 10px; +} + +.projects { + -webkit-box-flex: 0; + -ms-flex: 0 1 calc(50% - 20px); + flex: 0 1 calc(50% - 20px); + color: black; + padding: 25px 10px; +} + +@media (max-width: 520px) { + .projects { + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + } +} + +.projects__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; +} + +.projects__item { + position: relative; + padding-left: 20px; +} + +.projects__item:not(:last-child) { + margin-bottom: 10px; +} + +.projects__item a:hover { + color: #a81010b9; + -webkit-transition: .5s; + -o-transition: .5s; + transition: .5s; +} + +.projects__item::before { + content: ""; + position: absolute; + left: 0; + top: 10%; + border: 1px solid #829985; + border-radius: 50%; + width: 10px; + height: 10px; +} + +.basement { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0 auto; +} + +@media (max-width: 845px) { + .basement { + padding: 0 30px; + } +} + +.basement__github { + position: relative; + margin-left: 10px; +} + +.basement__github::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 0%; + height: 1px; + -webkit-transition: 0.7s; + -o-transition: 0.7s; + transition: 0.7s; + background-color: #fff; +} + +.basement__github:hover::after { + width: 100%; +} + +.basement__logo { + background: url(../assets/svg/footer/logo_rs-school.svg) right/contain no-repeat; + width: 50px; + height: 50px; + position: relative; + z-index: 5; +} + +.basement__logo::after { + content: ""; + position: absolute; + top: 6%; + left: 14%; + -webkit-box-shadow: 0px 0px 5px 5px white; + box-shadow: 0px 0px 5px 5px white; + opacity: 0; + width: 85%; + height: 85%; + border-radius: 50%; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; +} + +.basement__logo:hover::after { + opacity: 1; +} diff --git a/cv.md b/cv.md new file mode 100644 index 0000000..4afd4f8 --- /dev/null +++ b/cv.md @@ -0,0 +1,37 @@ +# Artem Kostin + +## Contacts: +* Discord: ArtemKos#7486 +* E-mail: artemkostin.17.10.98@gmail.com +* Tel: +7(910)263-96-55 + +## About me: +I live in the city of Orel and am currently looking for a job in the IT field. I am able to work with a large amount of information, take a responsible approach to each case and learn quickly enough. I pay close attention to details. Ready to complete any task assigned to me. + +## Code: +``` +function multiply(a, b){ + return a * b +} +``` + +## Education: +Branch of the Federal State Budgetary Educational Institution of Higher Education "Petersburg State University of Communications of Emperor Alexander I" in Orel + +## Courses: +1. [Freelancer for life - HTML+CSS+JS](https://www.youtube.com/watch?v=yJcCKuxfb2o&list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr&ab_channel=%D0%A4%D1%80%D1%96%D0%BB%D0%B0%D0%BD%D1%81%D0%B5%D1%80%D0%BF%D0%BE%D0%B6%D0%B8%D1%82%D1%82%D1%8E) +2. [Beonmax - Java scripts](https://beonmax.com/courses/javascript/) +3. [Learning java scripts - learn.javascript](https://learn.javascript.ru/) + +## English language knowledge: +English at level A2 + +## Skills: +* Web-development: HTML5, CSS3, JavaScript, SCSS +* Version control: GIT, Github +* Graphics: Figma + +## Projects: +* [HTML - RS_SCHOOL](https://artem-freelancer.github.io/rsschool-cv/) +* [Markdown - RS_SCHOOL](https://artem-freelancer.github.io/rsschool-cv/cv) + diff --git a/index.html b/index.html new file mode 100644 index 0000000..f97eabe --- /dev/null +++ b/index.html @@ -0,0 +1,123 @@ + + + + + + + + + + + CV + + + +
+
+
+ +
+
+
+
+
+
+ Avatar +
+

Artem Kostin

+
+

JUNIOR FRONT-END DEVELOPER

+
+
+
+

Contacts

+ +
+
+

About me

+

I live in the city of Orel and am currently looking for a job in the IT field. I am able to work with a large amount of information, take a responsible approach to each case and learn quickly enough. I pay close attention to details. Ready to complete any task assigned to me.

+
+
+

Code

+ + function multiply(a, b){
+ return a * b + +
+
+

EDUCATION

+
Branch of the Federal State Budgetary Educational Institution of Higher Education "Petersburg State University of Communications of Emperor Alexander I" in Orel
+
+
+

Courses

+ +
+
+

English

+
English at level A2
+
+
+

Skills

+
    +
  • Web-development: HTML5, CSS3, JavaScript, SCSS
    • +
  • Version control: GIT, Github
    • +
  • Graphics: Figma
    • +
+
+
+

Projects

+ +
+
+
+ + + \ No newline at end of file diff --git a/scss/_reset.scss b/scss/_reset.scss new file mode 100644 index 0000000..dad2336 --- /dev/null +++ b/scss/_reset.scss @@ -0,0 +1,69 @@ +* { + padding: 0px; + margin: 0px; + border: 0px; +} +*, +*:before, +*:after { + box-sizing: border-box; +} +:focus, +:active { + outline: none; +} +a:focus, +a:active { + outline: none; +} +html, +body { + height: 100%; +} +body { + color: white; + line-height: 1; + font-family: "Roboto", sans-serif; + font-size: 14px; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +input, +button, +textarea { + font-family: "Roboto", sans-serif; + font-size: inherit; +} +button { + cursor: pointer; + color: inherit; + background-color: inherit; +} +a { + color: inherit; +} +a:link, +a:visited { + text-decoration: none; +} +a:hover { + text-decoration: none; +} +ul li { + list-style: none; +} +img { + vertical-align: top; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: inherit; + font-size: inherit; +} \ No newline at end of file diff --git a/scss/style.scss b/scss/style.scss new file mode 100644 index 0000000..da7e9e4 --- /dev/null +++ b/scss/style.scss @@ -0,0 +1,412 @@ +@import '_reset'; + +body { + display: flex; + flex-direction: column; +} + +.header { + background-color: #829985; +} +.main { + flex: 1 1 auto; +} +.footer { + background-color: #829985; +} + +.container { + max-width: 800px; + margin: 0 auto; +} + + +// HEADER +.nav { + &__list { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + @media (max-width: 542.9px) { + max-width: 90%; + margin: 0 auto; + } + @media (max-width: 346.9px) { + max-width: 80%; + margin: 0 auto; + } + } + &__link { + padding: 0 20px; + line-height: 50px; + position: relative; + @media (max-width: 808px) { + padding: 0 10px; + } + @media (max-width: 632px) { + padding: 0 5px; + } + @media (max-width: 542.9px) { + line-height: 20px; + } + &:hover { + font-size: 15px; + color: #a81010b9; + transition: 0.3s; + } + } +} +// ====================================================================================== +// MAIN +.main-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 40px; +} +// PROFILE +.profile { + display: flex; + justify-content: space-around; + align-items: center; + border-bottom: 8px solid #a81010b9; + padding: 20px 5px; + width: 100%; + flex-wrap: wrap; + &__avatar { + width: 200px; + height: 200px; + object-fit: cover; + border-radius: 50%; + } + + &__about-me { + color: #a81010b9; + padding:20px 10px; + } + + &__title { + text-transform: uppercase; + letter-spacing: 7px; + text-align: center; + font-size: 18px; + font-weight: 900; + margin-bottom: 10px; + } + + &__line { + background-color: #829985; + height: 3px; + width: 50px; + margin: 0 auto; + margin-bottom: 30px; + } + + &__subtitle { + font-size: 16px; + color: black; + text-align: center; + } +} +// Contacts +.contacts { + flex: 0 1 calc(50% - 20px); + padding: 25px 10px; + color: black; + border-bottom: 2px solid #a81010b9; + @media(max-width: 520px) { + flex: 1 1 100%; + } + &__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; + } + + &__item { + position: relative; + &:not(:last-child) { + margin-bottom: 10px; + } + a { + color: #829985; + } + a:hover { + color: #a81010b9; + transition: .5s; + } + &::before { + content: ""; + background: url(../assets/svg/contacts/gps.svg) left/contain no-repeat; + width: 10px; + height: 20px; + padding-left: 20px; + } + &:nth-child(2)::before { + background: url(../assets/svg/contacts/email.svg) left/contain no-repeat; + } + &:nth-child(3)::before { + background: url(../assets/svg/contacts/github.svg) left/contain no-repeat; + } + &:last-child::before { + background: url(../assets/svg/contacts/discord.svg) left/contain no-repeat; + } + } +} +// About me +.about-me { + flex: 0 1 calc(50% - 20px); + border-bottom: 2px solid #a81010b9; + color: black; + padding: 25px 10px; + @media(max-width: 520px) { + flex: 1 1 100%; + } + &__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; + } + + &__text { + line-height: 20px; + } +} +// Сode +.code { + flex: 0 1 calc(50% - 20px); + border-bottom: 2px solid #a81010b9; + color: black; + padding: 25px 10px; + @media(max-width: 520px) { + flex: 1 1 100%; + } + &__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; + } +} +// Education +.education { + flex: 0 1 calc(50% - 20px); + border-bottom: 2px solid #a81010b9; + color: black; + padding: 25px 10px; + @media(max-width: 520px) { + flex: 1 1 100%; + } + &__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; + } + &__text { + line-height: 1.5; + } +} +// Courses +.courses { + flex: 0 1 calc(50% - 20px); + color: black; + padding: 25px 10px; + border-bottom: 2px solid #a81010b9; + @media(max-width: 520px) { + flex: 1 1 100%; + } + &__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; + } + &__item { + position: relative; + padding-left: 20px; + &:not(:last-child) { + margin-bottom: 10px; + } + a:hover { + color: #a81010b9; + transition: .5s; + } + &::before { + content: ""; + position: absolute; + left: 0; + top: 10%; + border: 1px solid #829985; + border-radius: 50%; + width: 10px; + height: 10px; + } + } + &__item:not(:last-child) { + margin-bottom: 15px; + } + a { + color: #829985; + } +} +// English +.english { + flex: 0 1 calc(50% - 20px); + color: black; + padding: 25px 10px; + border-bottom: 2px solid #a81010b9; + @media(max-width: 520px) { + flex: 1 1 100%; + } + &__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; + } +} +// SKILLS +.skills { + flex: 0 1 calc(50% - 20px); + color: black; + padding: 25px 10px; + @media(max-width: 520px) { + flex: 1 1 100%; + } + &__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; + } + &__item { + position: relative; + padding-left: 20px; + span { + color: #829985; + } + &:not(:last-child) { + margin-bottom: 10px; + } + &::before { + content: ""; + position: absolute; + left: 0; + top: 10%; + border: 1px solid #829985; + border-radius: 50%; + width: 10px; + height: 10px; + } + } +} +// PROJECTS +.projects { + flex: 0 1 calc(50% - 20px); + color: black; + padding: 25px 10px; + @media(max-width: 520px) { + flex: 1 1 100%; + } + &__title { + letter-spacing: 5px; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + color: #829985; + margin-bottom: 15px; + } + &__item { + position: relative; + padding-left: 20px; + &:not(:last-child) { + margin-bottom: 10px; + } + a:hover { + color: #a81010b9; + transition: .5s; + } + &::before { + content: ""; + position: absolute; + left: 0; + top: 10%; + border: 1px solid #829985; + border-radius: 50%; + width: 10px; + height: 10px; + } + } +} + +// ====================================================================================== +// footer +.basement { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; + @media(max-width: 845px) { + padding: 0 30px; + } +} + +.basement { + &__github { + position: relative; + margin-left: 10px; + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 0%; + height: 1px; + transition: 0.7s; + background-color: #fff; + } + &:hover::after { + width: 100%; + } + } + &__logo { + background: url(../assets/svg/footer/logo_rs-school.svg) right/contain no-repeat; + width: 50px; + height: 50px; + position: relative; + z-index: 5; + &::after { + content: ""; + position: absolute; + top: 6%; + left: 14%; + box-shadow: 0px 0px 5px 5px white; + opacity: 0; + width: 85%; + height: 85%; + border-radius: 50%; + transition: 0.3s; + } + &:hover::after { + opacity: 1; + } + } +} \ No newline at end of file