diff --git a/css/style.css b/css/style.css index 5851628..d36b448 100644 --- a/css/style.css +++ b/css/style.css @@ -60,6 +60,7 @@ section { #menu-icon { font-size: 3.6rem; color: var(--text-color); + display: none; } .home { @@ -74,6 +75,20 @@ section { border: 1px solid var(--main-color); box-shadow: 0 0 5rem var(--main-color); } +.home-img img { + animation: floatImage 2.5s ease-in-out infinite; +} +@keyframes floatImage { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-2.5rem); + } + 100% { + transform: translateY(0); + } +} .home-content h3 { font-size: 3.2rem; font-weight: 700; @@ -318,3 +333,110 @@ span { .footer-iconTop a:hover { box-shadow: 0 0 1rem var(--main-color); } +.header.sticky { + border-bottom: 0.1rem solid rgba(0, 0, 0, 0.2); +} + +/* Responsive Design */ + +@media (max-width: 1200px) { + html { + font-size: 55%; + } +} +@media (max-width: 991px) { + .header { + padding: 2rem 3%; + } + section { + padding: 10rem 3% 2rem; + } + .services { + padding-bottom: 7rem; + } + .portfolio { + padding-bottom: 7rem; + } + .contact { + min-height: auto; + } + footer { + padding: 2rem 3%; + } +} +@media (max-width: 768px) { + #menu-icon { + display: block; + } + .navBar { + position: absolute; + top: 100%; + left: 0; + width: 100%; + padding: 1rem 3%; + background: var(--bg-color); + border-top: 0.1rem solid rgba(0, 0, 0, 0.2); + box-shadow: 0 0.5rem 1 rgba(0, 0, 0, 0.2); + display: none; + } + .navBar.active { + display: block; + } + .navBar a { + display: block; + font-size: 2rem; + margin: 3rem 0; + } + .home { + flex-direction: column; + } + .home-content h3 { + font-size: 2.6rem; + } + .home-content h1 { + font-size: 5rem; + } + .home-img img, + .about-img img { + width: 50vw; + margin-top: 4rem; + } + .about { + flex-direction: column-reverse; + } + .services h2 { + margin-bottom: 3rem; + } + .portfolio h2 { + margin-bottom: 3rem; + } + .portfolio-container { + grid-template-columns: repeat(2, 1fr); + } +} +@media (max-width: 617px) { + .portfolio-container { + grid-template-columns: 1fr; + } +} +@media (max-width: 450px) { + html { + font-size: 50%; + } + .contact form .input-box input { + width: 100%; + } +} +@media (max-width: 365px) { + .home-img img, + .about-img img { + width: 90vw; + } + .footer { + flex-direction: column-reverse; + } + .footer p { + text-align: center; + margin-top: 2rem; + } +} diff --git a/images/IMG_0238.JPG b/images/IMG_0238.JPG deleted file mode 100644 index 984af85..0000000 Binary files a/images/IMG_0238.JPG and /dev/null differ diff --git a/images/me1.png b/images/me1.png new file mode 100644 index 0000000..ae3fd9b Binary files /dev/null and b/images/me1.png differ diff --git a/images/me2.png b/images/me2.png new file mode 100644 index 0000000..2d8878d Binary files /dev/null and b/images/me2.png differ diff --git a/images/sadasdsadasd.jpg b/images/sadasdsadasd.jpg deleted file mode 100644 index bbfbc1c..0000000 Binary files a/images/sadasdsadasd.jpg and /dev/null differ diff --git a/index.html b/index.html index 65e8dd0..87ee177 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@
Athlete elementary Teacher who loves Coding...