diff --git a/.github/images/Project1Prepare1.png b/.github/images/Project1Prepare1.png deleted file mode 100644 index 9126a36..0000000 Binary files a/.github/images/Project1Prepare1.png and /dev/null differ diff --git a/.github/images/Project1Prepare2.png b/.github/images/Project1Prepare2.png deleted file mode 100644 index 0e751ed..0000000 Binary files a/.github/images/Project1Prepare2.png and /dev/null differ diff --git a/.github/images/Project1Prepare3.png b/.github/images/Project1Prepare3.png deleted file mode 100644 index 5adad96..0000000 Binary files a/.github/images/Project1Prepare3.png and /dev/null differ diff --git a/.github/images/Project1Prepare4.png b/.github/images/Project1Prepare4.png deleted file mode 100644 index 57da515..0000000 Binary files a/.github/images/Project1Prepare4.png and /dev/null differ diff --git a/.github/images/Project1Prepare5.png b/.github/images/Project1Prepare5.png deleted file mode 100644 index 892cf8f..0000000 Binary files a/.github/images/Project1Prepare5.png and /dev/null differ diff --git a/.github/images/Project1Prepare6.png b/.github/images/Project1Prepare6.png deleted file mode 100644 index 4363eb3..0000000 Binary files a/.github/images/Project1Prepare6.png and /dev/null differ diff --git a/.nojekyll b/.nojekyll deleted file mode 100644 index e69de29..0000000 diff --git a/README.md b/README.md index 07f1e95..a207f6a 100644 --- a/README.md +++ b/README.md @@ -1,111 +1,21 @@ -# CodersCamp 2020 - Projekt HTML & CSS -**CodersCamp (coderscamp.edu.pl) - Największy otwarty kurs programowania webowego** +## Portfolio +**This is the first project during CodersCamp 2020** -Gratulacje! -Skoro czytacie ten tekst, oznacza to, że dowiedliście swoich umiejętności ze znajomości HTML & CSS. -Zostaliście przydzieleni do zespołu, który będzie się uczył programowania i wykonywał prawdziwe aplikacje webowe. -Teraz stajecie przed pierwszym większym wyzwaniem. -Technologie, o których się uczyliście, trzeba zastosować w praktyce. -To pierwszy i ostatni na CodersCamp projekt, który będziecie robić w pojedynkę. -Jednakże już macie cały zespół i mentora, który z pewnością będzie Was wspierał. +Project task was to make your own portfolio site but without using JS and any libraries like Bootstrap - only pure HTML & CSS. +Additionally I used SCSS to make it easier for read and write. -## Projekt HTML & CSS — Wizytówka / Portfolio +**Watch preview: https://szambelan.github.io/Portfolio.CodersCamp.Project_1/** -### Zasady wykonywania projektu (wspólne dla wszystkich grup i mentorów): +**Firma preview: https://www.figma.com/file/JlQ3a0mB4AsO6sj5rIOYgw/Portfolio?node-id=133%3A0** -##### W projekcie każdy z uczestników powinien zaprezentować praktyczną znajomość poniższych zagadnień związanych z HTML & CSS: -- Box-model -- Kaskadowość CSS -- Selektory CSS -- Popularne tagi HTML -- Jak podpinać CSSa do HTMLa -- Zapisywanie kolorów -- Stylowanie tekstu -- Zewnętrzne ikony/fonty (fontawesome, google fonts) -- Flexbox i/lub CSS Grid -- Position (absolute, relative) -- Animacje keyframes -- Formularz (wysłanie formularza może powodować przeładowanie strony, gdyż w kursie nie było jeszcze jego obsługi) +**Main things used in project:** +- Box-modeling +- Cascading and selectors CSS +- Text stylinng +- Icons/fonts (fontawesome, google fonts) +- Flexbox & CSS Grid +- Positioning (absolute, relative) +- Animations - keyframes - Responsive Web Design -Nie używaj JavaScriptu ani żadnego innego frameworka. -Nie używaj też gotowych bibliotek styli takich jak Bootstrap. -W trakcie przerabiania działu poznałeś wszystkie umiejętności, które pozwolą Ci wykonać Twoją wizytówkę od podstaw :) - -##### Sposób oceny projektu (dotyczy tylko projektu pierwszego): -Zapewne interesuje Was, w jaki sposób projekt zostanie „zaliczony” i oceniony. -Ocenianie będzie miało kilka etapów. - -- Kiedy skończycie pracę nad projektem, odnotujcie ten fakt w specjalnie przygotowanym formularzu — link otrzymacie od swojego mentora. -Powinno to nastąpić najpóźniej o godzinie 23:59 dnia poprzedzającego prezentację projektu (data dostępna w harmonogramie kursu). -- Spotkajcie się w wyznaczonym dniu całym zespołem wraz z mentorem (np. za pomocą Google Meet). W trakcie spotkania zaprezentujcie wykonane przez Was projekty. -Forma prezentacji pozostaje dowolna (musi zmieścić się w 5 minutach + 5 minut na pytania). -Możecie przygotować jakieś slajdy, pokaz waszych talentów, czy nawet zaśpiewać — ale nie jest to konieczne. Na pewno musi zostać pokazana działająca strona internetowa, reszta wg Waszego uznania. -Jeśli robicie wizytówkę o sobie, to być może chcecie też opowiedzieć o swoich zainteresowaniach, żeby inni w zespole poznali Was lepiej :) ? -- Po prezentacji mentor Waszego zespołu oceni projekt wg kryteriów opisanych w specjalnym arkuszu — przykład takiego arkusza możecie zobaczyć [TUTAJ](https://docs.google.com/spreadsheets/d/1mjCi-oDXILKoCReqJlhGYP4NW-HVMCzvdcIy6ntnsog/edit?usp=sharing). -Pamiętajcie też odpowiednio opracować README.md Waszego projektu, tak aby prezentowało kto, co, jak i dlaczego zostało wykonane. -Zawartość, którą macie tutaj aktualnie (to co teraz czytacie) można usunąć — znajdziecie ją zawsze w oryginalnym repozytorium, które forkowaliście. -- Po zrecenzowaniu waszych projektów mentor powinien przekazać każdemu jego ocenę punktową i feedback jako uzasadnienie. - - -### Opis projektu -Pozyskanie pierwszego klienta nie przychodzi łatwo. -Dla klienta, który chce otrzymać produkt wysokiej jakości, nie jest ważna tylko firma, która spróbuje zrealizować jego wizję. -Równie istotne jest też to, z jakimi konkretnymi osobami przyjdzie komuś współpracować przy wytwarzaniu oprogramowania. -Dobrze, żeby Wasi przyszli klienci i wasz zespół trochę lepiej Was poznali. -Dlatego jako pierwszy projekt do Waszego portfolio proponujemy przygotowanie strony — wizytówki. -Motywem przewodnim powinniście być właśnie Wy sami lub o wasze zrealizowane projekty lub zainteresowania, najważniejsze umiejętności — nie koniecznie programistycznych! -Jesteś fotografem? Możesz przygotować stronę reklamującą swoje usługi. -Jako fryzjer czy mechanik, możesz zrobić podobnie. -Świat web designu stoi przed Tobą otworem. - -W tym pierwszym, rozgrzewkowym projekcie pracujecie jeszcze osobno. -Pamiętajcie, że macie zespół i mentora, który jest tutaj, żeby Was wspierać przez cały czas trwania kursu. - -Dajcie się lepiej poznać dzięki internetowi i swoim umiejętnością! :) - -#### Jak rozpocząć pracę nad projektem -Aby ułatwić prezentację projektu innym osobom, dobrze, gdyby był on dostępny bez problemów pod adresem strony internetowej. -W tym przypadku większość pracy z tym związanej zrobiliśmy już za Ciebie. -Oto co musisz zrobić, żeby zobaczyć efekt i zacząć development: - -1. Wykonaj fork tego repozytorium do swojego własnego profilu. -Po kliknięciu przycisku pokazanego poniżej GitHub przeniesie Cię automatycznie na Twoją kopię tego repozytorium. -To tutaj będziesz wykonywać swoją stronę. -![./.github/images/Project1Prepare1.png](./.github/images/Project1Prepare1.png) -1. Przejdź do zakładki Settings w Twoim repozytorium. -![./.github/images/Project1Prepare2.png](./.github/images/Project1Prepare2.png) -1. Znajdź w zakładce setting sekcję GitHub Pages i wybierz branch *main* jako source (na screenie dawna nazwa głównej gałęzi - master). -![./.github/images/Project1Prepare3.png](./.github/images/Project1Prepare3.png) -1. Po wyborze brancha *main*, zatwierdź ustawienia, klikając przycisk `Save`. -Wszystko powinno wyglądać tak jak w czerwonym polu poniżej. -Dzięki temu aktywujesz GitHub Pages dla swojego repozytorium. -![./.github/images/Project1Prepare4.png](./.github/images/Project1Prepare4.png) -1. Znajdź sekcję GitHub Pages w zakładce Setting jeszcze raz. -Teraz powinien znajdować się w tym miejscu link. Po kliknięciu zaprowadzi Cię do Twojej strony. -Ten link możesz przekazać teraz kolegom z zespołu i mentorowi. -Będą mogli dać Ci cenne wskazówki i pomóc z błędami bez pobierania całego repozytorium. -A Twoja strona jest od razu dostępna w internecie dla każdego, kto chciałby ją odwiedzić. I to kompletnie za darmo! -![./.github/images/Project1Prepare5.png](./.github/images/Project1Prepare5.png) -1. Jeśli po kliknięciu w link, pokazała Ci się strona o tej treści, to znaczy, że wszystko jest w porządku. -![./.github/images/Project1Prepare6.png](./.github/images/Project1Prepare6.png) - -Od teraz każda zmiana, jaką commitujesz do głównego brancha, będzie się pokazywać pod tym adresem. -Masz już działające środowisko, więc na co czekasz? Do dzieła! - -### Porady odnośnie do projektu - -#### Interfejs -Możesz posłużyć się projektem interfejsu strony — wizytówki, wykonanym przez organizatorów projektu. -Jest to tylko dla ułatwienia Ci pracy. -Możesz w trakcie implementacji go dowolnie przekształcać / zmieniać czy zrobić coś zupełnie innego. -https://www.figma.com/file/WHtiMfcNHt4tc7mDamNBYa/CodersCamp2020-Wizytowka?node-id=0%3A1 -Pamiętaj też, że Twoje rozwiązanie musi być responsywne! -Czyli odpowiednio dostosowywać sposób wyświetlania treści do rozmiaru okna przeglądarki. - -Inspiracją może być także [DevChallenge.io - Portfolio](https://devchallenges.io/challenges/5ZnOYsSXM24JWnCsNFlt). -Pamiętaj tylko, że Ty korzystasz tutaj jedynie z HTML i CSS. - -Przygotowane projekty interfejsu użytkownika są tutaj po to, żebyś bez problemów postawił swoje pierwsze kroki w praktycznym wykorzystaniu HTML i CSS. -Jednakże zachęcamy do wykonania czegoś, co ukaże Twoje wnętrze :) -Dobrej zabawy! +##### CodersCamp site: https://coderscamp.edu.pl/ diff --git a/images/SportFreaks/1.png b/images/SportFreaks/1.png new file mode 100644 index 0000000..fef0941 Binary files /dev/null and b/images/SportFreaks/1.png differ diff --git a/images/SportFreaks/2.PNG b/images/SportFreaks/2.PNG new file mode 100644 index 0000000..cc60740 Binary files /dev/null and b/images/SportFreaks/2.PNG differ diff --git a/images/SportFreaks/3.PNG b/images/SportFreaks/3.PNG new file mode 100644 index 0000000..9cebe21 Binary files /dev/null and b/images/SportFreaks/3.PNG differ diff --git a/images/TripMate/1.png b/images/TripMate/1.png new file mode 100644 index 0000000..088047e Binary files /dev/null and b/images/TripMate/1.png differ diff --git a/images/TripMate/2.png b/images/TripMate/2.png new file mode 100644 index 0000000..933f7df Binary files /dev/null and b/images/TripMate/2.png differ diff --git a/images/TripMate/3.png b/images/TripMate/3.png new file mode 100644 index 0000000..44b60bd Binary files /dev/null and b/images/TripMate/3.png differ diff --git a/images/aboutMeFoto.jpg b/images/aboutMeFoto.jpg new file mode 100644 index 0000000..23f9510 Binary files /dev/null and b/images/aboutMeFoto.jpg differ diff --git a/images/bg-image.jpg b/images/bg-image.jpg new file mode 100644 index 0000000..711bb77 Binary files /dev/null and b/images/bg-image.jpg differ diff --git a/images/icons/angular.png b/images/icons/angular.png new file mode 100644 index 0000000..4bb88d0 Binary files /dev/null and b/images/icons/angular.png differ diff --git a/images/icons/css.png b/images/icons/css.png new file mode 100644 index 0000000..a174736 Binary files /dev/null and b/images/icons/css.png differ diff --git a/images/icons/git.png b/images/icons/git.png new file mode 100644 index 0000000..07d3d20 Binary files /dev/null and b/images/icons/git.png differ diff --git a/images/icons/html.png b/images/icons/html.png new file mode 100644 index 0000000..5832c5e Binary files /dev/null and b/images/icons/html.png differ diff --git a/images/icons/javascript.png b/images/icons/javascript.png new file mode 100644 index 0000000..f439e65 Binary files /dev/null and b/images/icons/javascript.png differ diff --git a/images/icons/mongodb.png b/images/icons/mongodb.png new file mode 100644 index 0000000..1fa7bb1 Binary files /dev/null and b/images/icons/mongodb.png differ diff --git a/images/icons/nodejs.png b/images/icons/nodejs.png new file mode 100644 index 0000000..2f77058 Binary files /dev/null and b/images/icons/nodejs.png differ diff --git a/images/icons/typescript.png b/images/icons/typescript.png new file mode 100644 index 0000000..75f9a54 Binary files /dev/null and b/images/icons/typescript.png differ diff --git a/images/media/facebook.png b/images/media/facebook.png new file mode 100644 index 0000000..27937af Binary files /dev/null and b/images/media/facebook.png differ diff --git a/images/media/github.png b/images/media/github.png new file mode 100644 index 0000000..e1f75d8 Binary files /dev/null and b/images/media/github.png differ diff --git a/images/media/instagram.png b/images/media/instagram.png new file mode 100644 index 0000000..ba8ddd1 Binary files /dev/null and b/images/media/instagram.png differ diff --git a/images/media/linkedin.png b/images/media/linkedin.png new file mode 100644 index 0000000..1d7a92b Binary files /dev/null and b/images/media/linkedin.png differ diff --git a/images/my-photo.png b/images/my-photo.png new file mode 100644 index 0000000..b683cb5 Binary files /dev/null and b/images/my-photo.png differ diff --git a/images/navigation/dot-selected.png b/images/navigation/dot-selected.png new file mode 100644 index 0000000..10e75cf Binary files /dev/null and b/images/navigation/dot-selected.png differ diff --git a/images/navigation/dot.png b/images/navigation/dot.png new file mode 100644 index 0000000..2aff086 Binary files /dev/null and b/images/navigation/dot.png differ diff --git a/images/project-github.png b/images/project-github.png new file mode 100644 index 0000000..cbf649a Binary files /dev/null and b/images/project-github.png differ diff --git a/index.html b/index.html index 840fa67..8bb3091 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,225 @@ - + - - - CodersCamp | Projekt 1 - HTML i CSS - - + Porfolio + + + +
+ +
+ HOME + ABOUT ME + SKILLS + PROJECTS + CONTACT +
+ +
+
+ Hi there,
+ I'm Paweł Szambelan +
+ + + + +
+
+
+ +
+
+ +
+
+
+

About me

+

I am a young guy with lots of energy who love doing many things + in one time. For sure I cannot stand sitting in one place and do + nothing – always I am trying to find something exciting! + I would like to find a job, which will help me to develop myself in + IT sector. +

+ +
+
+ +
+
Let's get know + my skills... +
+
+ +
+
+ CSS +
+
+ +
+
+ +
+
+ HTML +
+
+ +
+
+ +
+
+ GIT +
+
+ +
+
+ +
+
+ JAVASCRIPT +
+
+ +
+
+ +
+
+ TYPESCRIPT +
+
+ +
+
+ +
+
+ ANGULAR +
+
+ +
+
+ +
+
+ NODE.JS +
+
+ +
+
+ +
+
+ MONGODB +
+
+ +
+
+ +
+
+ +
+ +
-

CodersCamp - projekt 1. Tutaj możesz zacząć swoją zabawę!

+ + +
+ +
+
+

TripMate

+

Web application helping people + to get from one place to another.

+ +
+
+
+
+
+
+
+
+ +
+
+

SportFreaks

+

Application helping sport schools with + organising their employees and lessons schedule.

+ +
+
+
+
+
+
+
+ +
+ +
+ + +
+ +
+ +
...and have a look + at my projects +
+ +
+ +
+ +

Get in touch with me!

+
+
+
+
+
+ Paweł Szambelan + Wrocław, Poland + +48 784 552 621 + p.szambelan1@gmail.com +
+
+ + + + +
+
+ + +
+ +
+ +
+ Copyrights © 2020 Paweł Szambelan +
+ +
+ +
- + + \ No newline at end of file diff --git a/styles/animations/keyframes.scss b/styles/animations/keyframes.scss new file mode 100644 index 0000000..00e34d3 --- /dev/null +++ b/styles/animations/keyframes.scss @@ -0,0 +1,9 @@ +@keyframes appearing { + 0% { + opacity: 0 + } + + 100% { + opacity: 100 + } +} \ No newline at end of file diff --git a/styles/components/about_me.scss b/styles/components/about_me.scss new file mode 100644 index 0000000..c24635a --- /dev/null +++ b/styles/components/about_me.scss @@ -0,0 +1,36 @@ +.about-me { + margin: 3% 0; + height: 35em; + display: flex; + align-items: center; + justify-content: center; + + .image { + width: 35%; + height: auto; + justify-content: center; + margin: 0 3%; + display: flex; + height: 70%; + + img { + max-width: 100%; + max-height: 100%; + } + } + + .line { + width: 2px; + min-height: 80%; + border-left: $main-font-color 3px solid; + animation: appearing; + animation-duration: 2s; + } + + .text { + max-width: 30%; + text-align: center; + margin-left: 5%; + font-size: 1.1em; + } +} \ No newline at end of file diff --git a/styles/components/contact.scss b/styles/components/contact.scss new file mode 100644 index 0000000..91601cd --- /dev/null +++ b/styles/components/contact.scss @@ -0,0 +1,93 @@ +.contact { + margin: auto; + margin-top: 5%; + display: flex; + flex-direction: column; + width: 65%; + border-top: 1px solid $main-font-color; + border-bottom: 1px solid $main-font-color; + align-items: center; + height: 33em; + + .h1 { + font-size: 1.1em; + } + + .container { + display: flex; + flex-direction: row; + width: 100%; + padding-top: 2%; + padding-bottom: 1%; + + .info { + display: flex; + flex-direction: column; + align-items: center; + width: 30%; + padding: 0 2%; + min-height: 100%; + height: 100%; + position: relative; + + .photo { + width: 200px; + height: 200px; + background-image: url('../images/my-photo.png'); + background-size: cover; + } + + .text { + font-size: 1.4em; + line-height: 1.3; + } + + span { + white-space: pre-line; + line-height: 1.6; + text-align: center; + } + } + + .form { + flex-grow: 1; + padding: 0 2%; + display: flex; + flex-direction: column; + justify-content: space-around; + + .form-input, + .form-textarea { + box-shadow: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); + background: $second-font-color; + border-radius: 15px; + border: none; + flex-basis: 12%; + padding: 0 2%; + outline: none; + } + + .form-textarea { + padding-top: 10px; + padding-bottom: 10px; + flex-basis: 40%; + display: inline-block; + resize: none; + } + + ::placeholder { + color: $main-font-color; + opacity: 80%; + font-weight: bold; + } + } + } + + .btn { + width: 18%; + height: 6%; + align-self: flex-end; + margin-right: 2%; + } + +} \ No newline at end of file diff --git a/styles/components/footer.scss b/styles/components/footer.scss new file mode 100644 index 0000000..b5e9fdd --- /dev/null +++ b/styles/components/footer.scss @@ -0,0 +1,5 @@ +.footer { + font-size: 0.7em; + padding: 5px; + text-align: center; +} \ No newline at end of file diff --git a/styles/components/home.scss b/styles/components/home.scss new file mode 100644 index 0000000..04bc05a --- /dev/null +++ b/styles/components/home.scss @@ -0,0 +1,28 @@ +.home { + background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../images/bg-image.jpg) no-repeat center center fixed; + background-size: cover; + height: 35em; + overflow: hidden; + color: $second-font-color; + position: relative; + + .content { + position: absolute; + bottom: 5%; + left: 4%; + font-size: 2em; + animation: appearing; + animation-duration: 2s; + + .media { + padding-top: 5px; + width: 70%; + display: flex; + justify-content: space-between; + + a { + cursor: pointer; + } + } + } +} \ No newline at end of file diff --git a/styles/components/menu.scss b/styles/components/menu.scss new file mode 100644 index 0000000..c41c176 --- /dev/null +++ b/styles/components/menu.scss @@ -0,0 +1,34 @@ +.menu { + display: inline-flex; + justify-content: flex-end; + align-items: center; + height: 3em; + gap: 20px; + margin: 0 20px; + + a { + color: $main-font-color; + font-size: 1.2em; + text-decoration: none; + position: relative; + text-align: center; + + &:before { + content: ""; + position: absolute; + width: 100%; + height: 2px; + bottom: 0; + left: 0; + background-color: $main-font-color; + visibility: hidden; + transform: scaleX(0); + transition: all 0.3s ease-in-out 0s; + } + + &:hover:before { + visibility: visible; + transform: scaleX(1); + } + } +} \ No newline at end of file diff --git a/styles/components/projects.scss b/styles/components/projects.scss new file mode 100644 index 0000000..8752ec8 --- /dev/null +++ b/styles/components/projects.scss @@ -0,0 +1,128 @@ +.projects { + margin: 5% 0; + height: 45em; + background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #1B5558 100%); + width: 90%; + display: flex; + align-items: center; + + .projects-grid { + margin-left: 5%; + padding: 1.5%; + width: 75%; + height: 85%; + background: rgba(63, 55, 55, 0.2); + position: relative; + + input[type="radio"] { + position: fixed; + top: -9999px; + + &:checked { + $i: 5; + + @while $i>0 { + &:nth-child(#{$i}) { + + ~.projects-list { + .project:nth-child(#{$i}) { + opacity: 1; + } + } + + ~.navigation { + .dot:nth-child(#{$i}) { + background-color: $dot-active-color; + + &:hover { + opacity: 1; + } + } + } + } + + $i: $i - 1; + } + } + } + + .projects-list { + height: 100%; + position: relative; + + .project { + display: grid; + justify-content: space-around; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 15px; + height: 100%; + + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + opacity: 0; + transition: opacity 400ms ease; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + + + .description { + padding-left: 5%; + white-space: pre-line; + color: $second-font-color; + border: $second-font-color solid 1px; + position: relative; + + .project-github { + position: absolute; + right: 5%; + top: 7%; + } + } + } + } + + .image { + background-size: cover; + background-position: top center; + } + + .navigation { + position: absolute; + bottom: -3.5%; + width: 100%; + display: flex; + justify-content: center; + left: 50%; + transform: translateX(-50%); + + .dot { + display: inline-block; + margin: 0 8px; + cursor: pointer; + border-radius: 50%; + background-color: $main-font-color; + width: 15px; + height: 15px; + transition: opacity 200ms ease; + + &:hover { + opacity: 0.6; + } + } + } + } + + .text { + white-space: pre-line; + line-height: 1.3; + font-size: 1.5em; + margin: 1% 0 0 5%; + align-self: stretch; + } +} \ No newline at end of file diff --git a/styles/components/skills.scss b/styles/components/skills.scss new file mode 100644 index 0000000..4d3ed11 --- /dev/null +++ b/styles/components/skills.scss @@ -0,0 +1,73 @@ +.skills { + margin-left: auto; + margin-bottom: 10%; + height: 30em; + background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #1B5558 100%); + display: flex; + width: 90%; + justify-content: flex-end; + + .text { + margin: 3% 10% 0 5%; + white-space: pre-line; + line-height: 1.3; + font-size: 1.5em; + } + + .skills-container { + flex-grow: 1; + max-width: 70%; + margin: 5% 3% 5% 0; + display: grid; + grid-template-columns: repeat(4, 1fr); + color: $second-font-color; + font-size: 1.2em; + + .item { + position: relative; + display: block; + + &:nth-child(2n) .item-front, + &:nth-child(2n) .item-back { + background: linear-gradient(180deg, rgba(169, 188, 190, 0) 0%, #A9BCBE 100%); + } + + &:nth-child(2n+1) .item-front, + &:nth-child(2n+1) .item-back { + background: linear-gradient(180deg, #A9BCBE 0%, rgba(169, 188, 190, 0) 100%); + } + + .item-front { + height: 100%; + position: relative; + } + + .item-back { + transform: rotateY(180deg); + } + + &:hover .item-front { + transform: rotateY(180deg); + } + + &:hover .item-back { + transform: rotateY(0); + } + + + } + + .item-side { + height: 100%; + width: 100%; + transition: all 1s ease; + position: absolute; + top: 0; + left: 0; + backface-visibility: hidden; + display: flex; + justify-content: center; + align-items: center; + } + } +} \ No newline at end of file diff --git a/styles/document_styles/main_styles.scss b/styles/document_styles/main_styles.scss new file mode 100644 index 0000000..fc09ccc --- /dev/null +++ b/styles/document_styles/main_styles.scss @@ -0,0 +1,22 @@ +body { + font-family: 'Roboto Slab', serif; + margin: 0; + background-color: $background-color; + color: $main-font-color; +} + +.container { + display: flex; + flex-direction: column; +} + +.btn { + color: $main-font-color; + border-radius: 15px; + border: $main-font-color 2px solid; + font-size: 1.1em; + font-family: 'Roboto Slab', serif; + box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.25); + cursor: pointer; + outline: none; +} \ No newline at end of file diff --git a/styles/responsivity/media_query.scss b/styles/responsivity/media_query.scss new file mode 100644 index 0000000..bf38518 --- /dev/null +++ b/styles/responsivity/media_query.scss @@ -0,0 +1,261 @@ +//desktop +@media screen and (max-width: 1200px) { + body { + font-size: 85%; + } + + .about-me .text { + max-width: 40%; + } + + .skills { + width: 95%; + + .text { + margin: 3% 6% 0 4%; + } + + .skills-container .item .item-back img { + max-width: 60%; + } + } + + .projects { + width: 95%; + + .text { + margin: 1% 0 0 4%; + } + } + + .contact { + width: 70%; + + .container .info { + .text { + font-size: 1.3em; + } + + .photo { + width: 150px; + height: 150px; + } + } + + .btn { + width: 16%; + height: 6%; + } + } +} + +//tablets +@media screen and (max-width: 900px) { + body { + font-size: 80%; + } + + .about-me { + .image { + height: auto; + margin: auto; + } + + .line { + min-height: 70%; + } + + .text { + max-width: 45%; + margin-right: 3%; + } + } + + .skills { + flex-direction: column; + align-items: center; + width: 95%; + height: 35em; + + .text { + margin: 0; + padding: 4%; + white-space: normal; + } + + .skills-container { + margin: 0; + padding-bottom: 5%; + width: 100%; + max-width: 90%; + } + } + + .projects { + width: 100%; + flex-direction: column; + + .projects-grid { + order: 2; + margin: 0; + padding: 2%; + width: 92%; + height: 75%; + + .navigation { + bottom: -5%; + } + } + + .text { + order: 1; + white-space: normal; + margin: 0; + padding: 3%; + text-align: center; + } + } + + .contact { + width: 80%; + padding-bottom: 5%; + + .container { + height: 70%; + + .info { + .text { + font-size: 1.2em; + } + + .photo { + width: 140px; + height: 140px; + } + } + } + } +} + + +//phones +@media screen and (max-width: 600px) { + body { + font-size: 75%; + } + + .menu { + flex-direction: column; + height: 11em; + gap: 8px; + } + + .home .content { + font-size: 1.7em; + + .media { + width: 80%; + + img { + width: 25px; + height: auto; + } + } + } + + .about-me { + flex-direction: column; + margin: 5% 0; + height: 40em; + + .image { + order: 3; + width: 45%; + margin: 5% 0; + } + + .line { + order: 2; + min-height: 0; + border-left: none; + border-bottom: $main-font-color 3px solid; + width: 60%; + } + + .text { + order: 1; + max-width: 80%; + margin: auto; + margin-bottom: 5%; + } + } + + .skills { + height: 50em; + + .skills-container { + grid-template-columns: repeat(2, 1fr); + padding-bottom: 10%; + + .item .item-back img { + width: 40%; + height: auto; + } + } + } + + .projects { + .text { + padding: 4%; + } + + .projects-list .project .description a img { + width: 80%; + height: auto; + } + } + + .contact { + height: 55em; + position: relative; + + .container { + flex-direction: column; + align-items: center; + height: 58%; + padding: 0; + height: auto; + + .info { + order: 2; + justify-content: center; + width: 100%; + min-height: 50%; + } + + .form { + order: 1; + width: 90%; + margin: auto; + margin: 5% 0; + + .form-input { + height: 15%; + } + + .form-input, + .form-textarea { + margin: 5px 0; + } + } + } + + .btn { + margin-right: 5%; + position: absolute; + top: 54%; + width: 18%; + height: 4%; + } + } +} \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 0000000..f5fbfd4 --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,838 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap"); +body { + font-family: 'Roboto Slab', serif; + margin: 0; + background-color: #EEEEEE; + color: #1E413F; +} + +.container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.btn { + color: #1E413F; + border-radius: 15px; + border: #1E413F 2px solid; + font-size: 1.1em; + font-family: 'Roboto Slab', serif; + -webkit-box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.25); + box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.25); + cursor: pointer; + outline: none; +} + +.menu { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 3em; + gap: 20px; + margin: 0 20px; +} + +.menu a { + color: #1E413F; + font-size: 1.2em; + text-decoration: none; + position: relative; + text-align: center; +} + +.menu a:before { + content: ""; + position: absolute; + width: 100%; + height: 2px; + bottom: 0; + left: 0; + background-color: #1E413F; + visibility: hidden; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transition: all 0.3s ease-in-out 0s; + transition: all 0.3s ease-in-out 0s; +} + +.menu a:hover:before { + visibility: visible; + -webkit-transform: scaleX(1); + transform: scaleX(1); +} + +.home { + background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0.25))), url(../images/bg-image.jpg) no-repeat center center fixed; + background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../images/bg-image.jpg) no-repeat center center fixed; + background-size: cover; + height: 35em; + overflow: hidden; + color: #F2F2F2; + position: relative; +} + +.home .content { + position: absolute; + bottom: 5%; + left: 4%; + font-size: 2em; + -webkit-animation: appearing; + animation: appearing; + -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +.home .content .media { + padding-top: 5px; + width: 70%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.home .content .media a { + cursor: pointer; +} + +.about-me { + margin: 3% 0; + height: 35em; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.about-me .image { + width: 35%; + height: auto; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin: 0 3%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 70%; +} + +.about-me .image img { + max-width: 100%; + max-height: 100%; +} + +.about-me .line { + width: 2px; + min-height: 80%; + border-left: #1E413F 3px solid; + -webkit-animation: appearing; + animation: appearing; + -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +.about-me .text { + max-width: 30%; + text-align: center; + margin-left: 5%; + font-size: 1.1em; +} + +.skills { + margin-left: auto; + margin-bottom: 10%; + height: 30em; + background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#1B5558)); + background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #1B5558 100%); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 90%; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} + +.skills .text { + margin: 3% 10% 0 5%; + white-space: pre-line; + line-height: 1.3; + font-size: 1.5em; +} + +.skills .skills-container { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 70%; + margin: 5% 3% 5% 0; + display: -ms-grid; + display: grid; + -ms-grid-columns: (1fr)[4]; + grid-template-columns: repeat(4, 1fr); + color: #F2F2F2; + font-size: 1.2em; +} + +.skills .skills-container .item { + position: relative; + display: block; +} + +.skills .skills-container .item:nth-child(2n) .item-front, +.skills .skills-container .item:nth-child(2n) .item-back { + background: -webkit-gradient(linear, left top, left bottom, from(rgba(169, 188, 190, 0)), to(#A9BCBE)); + background: linear-gradient(180deg, rgba(169, 188, 190, 0) 0%, #A9BCBE 100%); +} + +.skills .skills-container .item:nth-child(2n+1) .item-front, +.skills .skills-container .item:nth-child(2n+1) .item-back { + background: -webkit-gradient(linear, left top, left bottom, from(#A9BCBE), to(rgba(169, 188, 190, 0))); + background: linear-gradient(180deg, #A9BCBE 0%, rgba(169, 188, 190, 0) 100%); +} + +.skills .skills-container .item .item-front { + height: 100%; + position: relative; +} + +.skills .skills-container .item .item-back { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +.skills .skills-container .item:hover .item-front { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +.skills .skills-container .item:hover .item-back { + -webkit-transform: rotateY(0); + transform: rotateY(0); +} + +.skills .skills-container .item-side { + height: 100%; + width: 100%; + -webkit-transition: all 1s ease; + transition: all 1s ease; + position: absolute; + top: 0; + left: 0; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + 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; +} + +.projects { + margin: 5% 0; + height: 45em; + background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), to(#1B5558)); + background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #1B5558 100%); + width: 90%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.projects .projects-grid { + margin-left: 5%; + padding: 1.5%; + width: 75%; + height: 85%; + background: rgba(63, 55, 55, 0.2); + position: relative; +} + +.projects .projects-grid input[type="radio"] { + position: fixed; + top: -9999px; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(5) ~ .projects-list .project:nth-child(5) { + opacity: 1; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(5) ~ .navigation .dot:nth-child(5) { + background-color: #DA7789; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(5) ~ .navigation .dot:nth-child(5):hover { + opacity: 1; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(4) ~ .projects-list .project:nth-child(4) { + opacity: 1; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(4) ~ .navigation .dot:nth-child(4) { + background-color: #DA7789; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(4) ~ .navigation .dot:nth-child(4):hover { + opacity: 1; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(3) ~ .projects-list .project:nth-child(3) { + opacity: 1; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(3) ~ .navigation .dot:nth-child(3) { + background-color: #DA7789; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(3) ~ .navigation .dot:nth-child(3):hover { + opacity: 1; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(2) ~ .projects-list .project:nth-child(2) { + opacity: 1; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(2) ~ .navigation .dot:nth-child(2) { + background-color: #DA7789; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(2) ~ .navigation .dot:nth-child(2):hover { + opacity: 1; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(1) ~ .projects-list .project:nth-child(1) { + opacity: 1; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(1) ~ .navigation .dot:nth-child(1) { + background-color: #DA7789; +} + +.projects .projects-grid input[type="radio"]:checked:nth-child(1) ~ .navigation .dot:nth-child(1):hover { + opacity: 1; +} + +.projects .projects-grid .projects-list { + height: 100%; + position: relative; +} + +.projects .projects-grid .projects-list .project { + display: -ms-grid; + display: grid; + -ms-flex-pack: distribute; + justify-content: space-around; + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; + -ms-grid-rows: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 15px; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + opacity: 0; + -webkit-transition: opacity 400ms ease; + transition: opacity 400ms ease; + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.projects .projects-grid .projects-list .project .description { + padding-left: 5%; + white-space: pre-line; + color: #F2F2F2; + border: #F2F2F2 solid 1px; + position: relative; +} + +.projects .projects-grid .projects-list .project .description .project-github { + position: absolute; + right: 5%; + top: 7%; +} + +.projects .projects-grid .image { + background-size: cover; + background-position: top center; +} + +.projects .projects-grid .navigation { + position: absolute; + bottom: -3.5%; + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); +} + +.projects .projects-grid .navigation .dot { + display: inline-block; + margin: 0 8px; + cursor: pointer; + border-radius: 50%; + background-color: #1E413F; + width: 15px; + height: 15px; + -webkit-transition: opacity 200ms ease; + transition: opacity 200ms ease; +} + +.projects .projects-grid .navigation .dot:hover { + opacity: 0.6; +} + +.projects .text { + white-space: pre-line; + line-height: 1.3; + font-size: 1.5em; + margin: 1% 0 0 5%; + -ms-flex-item-align: stretch; + -ms-grid-row-align: stretch; + align-self: stretch; +} + +.contact { + margin: auto; + margin-top: 5%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 65%; + border-top: 1px solid #1E413F; + border-bottom: 1px solid #1E413F; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 33em; +} + +.contact .h1 { + font-size: 1.1em; +} + +.contact .container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + width: 100%; + padding-top: 2%; + padding-bottom: 1%; +} + +.contact .container .info { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 30%; + padding: 0 2%; + min-height: 100%; + height: 100%; + position: relative; +} + +.contact .container .info .photo { + width: 200px; + height: 200px; + background-image: url("../images/my-photo.png"); + background-size: cover; +} + +.contact .container .info .text { + font-size: 1.4em; + line-height: 1.3; +} + +.contact .container .info span { + white-space: pre-line; + line-height: 1.6; + text-align: center; +} + +.contact .container .form { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + padding: 0 2%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: distribute; + justify-content: space-around; +} + +.contact .container .form .form-input, +.contact .container .form .form-textarea { + -webkit-box-shadow: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); + box-shadow: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); + background: #F2F2F2; + border-radius: 15px; + border: none; + -ms-flex-preferred-size: 12%; + flex-basis: 12%; + padding: 0 2%; + outline: none; +} + +.contact .container .form .form-textarea { + padding-top: 10px; + padding-bottom: 10px; + -ms-flex-preferred-size: 40%; + flex-basis: 40%; + display: inline-block; + resize: none; +} + +.contact .container .form ::-webkit-input-placeholder { + color: #1E413F; + opacity: 80%; + font-weight: bold; +} + +.contact .container .form :-ms-input-placeholder { + color: #1E413F; + opacity: 80%; + font-weight: bold; +} + +.contact .container .form ::-ms-input-placeholder { + color: #1E413F; + opacity: 80%; + font-weight: bold; +} + +.contact .container .form ::placeholder { + color: #1E413F; + opacity: 80%; + font-weight: bold; +} + +.contact .btn { + width: 18%; + height: 6%; + -ms-flex-item-align: end; + align-self: flex-end; + margin-right: 2%; +} + +.footer { + font-size: 0.7em; + padding: 5px; + text-align: center; +} + +@-webkit-keyframes appearing { + 0% { + opacity: 0; + } + 100% { + opacity: 100; + } +} + +@keyframes appearing { + 0% { + opacity: 0; + } + 100% { + opacity: 100; + } +} + +@media screen and (max-width: 1200px) { + body { + font-size: 85%; + } + .about-me .text { + max-width: 40%; + } + .skills { + width: 95%; + } + .skills .text { + margin: 3% 6% 0 4%; + } + .skills .skills-container .item .item-back img { + max-width: 60%; + } + .projects { + width: 95%; + } + .projects .text { + margin: 1% 0 0 4%; + } + .contact { + width: 70%; + } + .contact .container .info .text { + font-size: 1.3em; + } + .contact .container .info .photo { + width: 150px; + height: 150px; + } + .contact .btn { + width: 16%; + height: 6%; + } +} + +@media screen and (max-width: 900px) { + body { + font-size: 80%; + } + .about-me .image { + height: auto; + margin: auto; + } + .about-me .line { + min-height: 70%; + } + .about-me .text { + max-width: 45%; + margin-right: 3%; + } + .skills { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 95%; + height: 35em; + } + .skills .text { + margin: 0; + padding: 4%; + white-space: normal; + } + .skills .skills-container { + margin: 0; + padding-bottom: 5%; + width: 100%; + max-width: 90%; + } + .projects { + width: 100%; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .projects .projects-grid { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + margin: 0; + padding: 2%; + width: 92%; + height: 75%; + } + .projects .projects-grid .navigation { + bottom: -5%; + } + .projects .text { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + white-space: normal; + margin: 0; + padding: 3%; + text-align: center; + } + .contact { + width: 80%; + padding-bottom: 5%; + } + .contact .container { + height: 70%; + } + .contact .container .info .text { + font-size: 1.2em; + } + .contact .container .info .photo { + width: 140px; + height: 140px; + } +} + +@media screen and (max-width: 600px) { + body { + font-size: 75%; + } + .menu { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + height: 11em; + gap: 8px; + } + .home .content { + font-size: 1.7em; + } + .home .content .media { + width: 80%; + } + .home .content .media img { + width: 25px; + height: auto; + } + .about-me { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin: 5% 0; + height: 40em; + } + .about-me .image { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; + width: 45%; + margin: 5% 0; + } + .about-me .line { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + min-height: 0; + border-left: none; + border-bottom: #1E413F 3px solid; + width: 60%; + } + .about-me .text { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + max-width: 80%; + margin: auto; + margin-bottom: 5%; + } + .skills { + height: 50em; + } + .skills .skills-container { + -ms-grid-columns: (1fr)[2]; + grid-template-columns: repeat(2, 1fr); + padding-bottom: 10%; + } + .skills .skills-container .item .item-back img { + width: 40%; + height: auto; + } + .projects .text { + padding: 4%; + } + .projects .projects-list .project .description a img { + width: 80%; + height: auto; + } + .contact { + height: 55em; + position: relative; + } + .contact .container { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 58%; + padding: 0; + height: auto; + } + .contact .container .info { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + min-height: 50%; + } + .contact .container .form { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + width: 90%; + margin: auto; + margin: 5% 0; + } + .contact .container .form .form-input { + height: 15%; + } + .contact .container .form .form-input, + .contact .container .form .form-textarea { + margin: 5px 0; + } + .contact .btn { + margin-right: 5%; + position: absolute; + top: 54%; + width: 18%; + height: 4%; + } +} +/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/styles/styles.css.map b/styles/styles.css.map new file mode 100644 index 0000000..59cb67f --- /dev/null +++ b/styles/styles.css.map @@ -0,0 +1,20 @@ +{ + "version": 3, + "mappings": "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", + "sources": [ + "styles.scss", + "variables/variables.scss", + "document_styles/main_styles.scss", + "components/menu.scss", + "components/home.scss", + "components/about_me.scss", + "components/skills.scss", + "components/projects.scss", + "components/contact.scss", + "components/footer.scss", + "animations/keyframes.scss", + "responsivity/media_query.scss" + ], + "names": [], + "file": "styles.css" +} \ No newline at end of file diff --git a/styles/styles.scss b/styles/styles.scss new file mode 100644 index 0000000..2a09b3e --- /dev/null +++ b/styles/styles.scss @@ -0,0 +1,24 @@ + +// outside import +@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap'); + +// variables +@import 'variables/variables.scss'; + +// styles for whole document +@import 'document_styles/main_styles.scss'; + +// components +@import 'components/menu.scss'; +@import 'components/home.scss'; +@import 'components/about_me.scss'; +@import 'components/skills.scss'; +@import 'components/projects.scss'; +@import 'components/contact.scss'; +@import 'components/footer.scss'; + +// animations +@import 'animations/keyframes.scss'; + +// responsivity +@import 'responsivity/media_query.scss'; \ No newline at end of file diff --git a/styles/variables/variables.scss b/styles/variables/variables.scss new file mode 100644 index 0000000..e08c6c2 --- /dev/null +++ b/styles/variables/variables.scss @@ -0,0 +1,5 @@ +$main-font-color: #1E413F; +$second-font-color: #F2F2F2; +$background-color: #EEEEEE; + +$dot-active-color: #DA7789; \ No newline at end of file