add responsivity for mobile

HanPutra · Jun 6, 2024 · 85e1077 · 85e1077
1 parent 9a361ab
commit 85e1077
Showing 1 changed file with 160 additions and 0 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -404,5 +404,165 @@ footer .contact p {
 
 @media (max-width: 767px) {
  /* Styles for tablets and phones */
+
+ /* header */
+ header {
+ height: 10vh;
+ z-index: 3;
+ }
+ header h1 {
+ font-size: 1.5rem;
+ }
+ /* end of header */
+
+ /* hamburger */
+ .hamburger-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 10vh;
+ height: 10vh;
+ position: fixed;
+ right: 0.5rem;
+ z-index: 4;
+ }
+ .hamburger-icon {
+ width: 3.5rem;
+ height: 3.5rem;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+ .hamburger-button .hamburger-icon span {
+ display: inline-block;
+ width: 3.5rem;
+ height: 0.5rem;
+ background-color: var(--dark);
+ border-radius: 0.25rem;
+ transition: all 0.3s ease;
+ }
+ .hamburger-button .hamburger-icon.active span:nth-child(1) {
+ transform-origin: left top;
+ transform: rotate(45deg);
+ width: 4.3rem;
+ }
+ .hamburger-button .hamburger-icon.active span:nth-child(2) {
+ opacity: 0;
+ }
+ .hamburger-button .hamburger-icon.active span:nth-child(3) {
+ transform-origin: left bottom;
+ transform: rotate(-45deg);
+ width: 4.3rem;
+ }
+ /* end of hamburger */
+
+ /* nav */
+ nav {
+ height: 6vh;
+ background-color: var(--light);
+ top: 0;
+ left: 0;
+ padding: 0 1rem;
+ transition: all 0.3s ease;
+ }
+ nav ul {
+ gap: 1rem;
+ }
+ nav ul li a {
+ font-size: 1rem;
+ }
+ nav.show {
+ top: 10vh;
+ }
+ /* end of nav */
+
+ /* about */
+ .about {
+ flex-direction: column;
+ gap: 2rem;
+ padding: 0 1rem;
+ }
+ .about .about-text {
+ max-width: 100%;
+ font-size: 1.25rem;
+ border-radius: 1.25rem;
+ order: 2;
+ }
+ .about .about-image {
+ width: 75vw;
+ height: 75vw;
+ order: 1;
+ }
+ /* end of about */
+ /* skills */
+ .skills {
+ padding: 0 1rem 1rem 1rem;
+ padding-top: calc(10vh + 1rem);
+ }
+ .skills h2 {
+ font-size: 1.5rem;
+ }
+ .skills .sub-skills-title {
+ gap: 0.5rem;
+ padding-right: 0.5rem;
+ }
+ .skills .sub-skills-title h3 {
+ font-size: 1.25rem;
+ }
+ .skills .sub-skills-desc {
+ gap: 1rem;
+ font-size: 1rem;
+ }
+ /* end of skills */
+ /* projects */
+ .projects {
+ padding-top: calc(10vh + 1rem);
+ }
+ .projects h2 {
+ font-size: 1.5rem;
+ }
+ .projects .projects-image {
+ width: 75%;
+ }
+ .projects .projects-image p {
+ font-size: 1rem;
+ }
+ /* end of projects */
+ /* certifications */
+ .certifications {
+ padding-top: calc(10vh + 1rem);
+ }
+ .certifications h2 {
+ font-size: 1.5rem;
+ }
+ .certifications .cert-container {
+ gap: 1rem;
+ }
+ .certifications .cert-container .cert-image {
+ width: 75%;
+ }
+ .certifications .cert-container .cert-image p {
+ font-size: 1rem;
+ }
+ /* end of certifications */
+ footer {
+ height: 25vh;
+ padding-top: 1rem;
+ }
+ footer p.copy {
+ font-size: 1rem;
+ }
+ /* contact */
+ footer .contact {
+ gap: 0.5rem;
+ }
+ footer .contact h2 {
+ font-size: 1.5rem;
+ }
+ footer .contact p {
+ font-size: 1rem;
+ }
+ /* end of contact */
 }
 /* end of media query */