/*=============== GOOGLE FONTS ===============*/ @import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&family=Roboto:wght@400;500&display=swap"); /*=============== VARIABLES CSS ===============*/ :root { /* matches root element of a tree ( element)*/ --header-height: 3.5rem; /*========== Colors ==========*/ /*Color mode HSL(hue, saturation, lightness)*/ --first-color: hsl(207, 65%, 65%); --title-color: hsl(207, 4%, 16%); --text-color: hsl(207, 4%, 28%); --text-color-light: hsl(207, 4%, 56%); --body-color: hsl(207, 4%, 99%); --container-color: hsl(207, 4%, 95%); /* Change the first number */ /* Blue: 207 - Purple: 250 - Pink: 356 - Teal: 174 */ --gradient-color: linear-gradient( 180deg, hsla(250, 48%, 72%, 0), hsla(250, 65%, 65%, 1) ); /*========== Font and typography ==========*/ /*.5rem = 8px | 1rem = 16px ...*/ --body-font: "Roboto", sans-serif; --title-font: "Lora", serif; --biggest-font-size: 1.5rem; --h1-font-size: 1.5rem; --h2-font-size: 1.25rem; --h3-font-size: 1rem; --normal-font-size: 0.938rem; --small-font-size: 0.813rem; --smaller-font-size: 0.75rem; --tiny-font-size: 0.625rem; /*========== Font weight ==========*/ --font-medium: 500; --font-semi-bold: 600; /*========== z index ==========*/ --z-normal: 1; --z-tooltip: 10; --z-fixed: 100; } /* Responsive typography */ @media screen and (min-width: 1024px) { :root { --biggest-font-size: 3rem; --h1-font-size: 2.25rem; --h2-font-size: 1.5rem; --h3-font-size: 1.25rem; --normal-font-size: 1rem; --small-font-size: 0.875rem; --smaller-font-size: 0.813rem; --tiny-font-size: 0.688rem; } } /* body.dark-theme { --title-color: hsl(207, 4%, 95%); --text-color: hsl(207, 4%, 65%); --body-color: hsl(207, 4%, 10%); --container-color: hsl(207, 4%, 12%); } */ /*=============== BASE ===============*/ * { box-sizing: border-box; padding: 0; margin: 0; } html { scroll-behavior: smooth; } body { font-family: var(--body-font); font-size: var(--normal-font-size); background-color: var(--body-color); color: var(--text-color); transition: background 0.4s; /* for dark mode animation */ } .dark { --title-color: hsl(207, 4%, 95%); --text-color: hsl(207, 4%, 65%); --body-color: hsl(207, 4%, 10%); --container-color: hsl(207, 4%, 12%); background-color: hsl(207, 4%, 10%); } .dark .header { background-color: var(--body-color); } .dark .nav, .dark .nav_menu, .dark .scrollup { background-color: var(--container-color); box-shadow: 0 4px 20px hsla(207, 24%, 8%, 0.4); } .dark .home_shape-circle-1, .dark .home_shape-circle-2, .dark .qualification_img { filter: invert(1); } .dark .home_social-link { color: var(--title-color); } .dark .section_border { border-bottom: 1px solid hsl(207, 4%, 32%); } .dark::-webkit-scrollbar { background-color: hsl(207, 4%, 15%); } .dark::-webkit-scrollbar-thumb { background-color: hsl(207, 4%, 25%); } .dark::-webkit-scrollbar-thumb:hover { background-color: hsl(207, 4%, 35%); } /* .light { --title-color: hsl(207, 4%, 16%); --text-color: hsl(207, 4%, 28%); --body-color: hsl(207, 4%, 99%); --container-color: hsl(207, 4%, 95%); background-color: hsl(207, 4%, 99%); } */ /* .dark_mode-button { border: 0px; background-color: var(--body-color); } */ #theme-button-moon { font-size: 1.25rem; color: var(--title-color); cursor: pointer; transition: color 0.3s; } /* #theme-button-sun { font-size: 1.25rem; color: var(--title-color); cursor: pointer; transition: color 0.3s; } */ h1, h2, h3 { color: var(--title-color); font-family: var(--title-font); font-weight: var(--font-medium); } ul { list-style: none; } a { text-decoration: none; } img { max-width: 100%; height: auto; } /*=============== THEME ===============*/ .nav_buttons { display: flex; align-items: center; column-gap: 1.5rem; } /*========== Variables Dark theme ==========*/ /*========== Color changes in some parts of the website, in light theme ==========*/ /*=============== REUSABLE CSS CLASSES ===============*/ .container { max-width: 1024px; margin-inline: 1.5rem; } .grid { display: grid; gap: 1.5rem; } .section { padding-block: 2.5rem; } .section_border { border-bottom: 1px solid var(--title-color); padding-bottom: 3.5rem; } .section_title, .section_subtitle { text-align: center; } .section_title { font-size: var(--h1-font-size); font-weight: var(--font-semi-bold); margin-bottom: 0.25rem; } .section_subtitle { display: block; font-size: var(--small-font-size); color: var(--text-color-light); margin-bottom: 3rem; } .main { overflow: hidden; /* For animation */ } /*=============== HEADER & NAV ===============*/ .header { width: 100%; position: fixed; bottom: 2rem; left: 0; z-index: var(--z-fixed); } .nav { height: calc(var(--header-height) + 0.5rem); display: flex; justify-content: space-between; align-items: center; background-color: var(--body-color); box-shadow: 0 4px 20px hsla(207, 24%, 35%, 0.1); padding-inline: 1.5rem; border-radius: 3rem; transition: background 0.4s; } .nav_logo { color: var(--title-color); font-family: var(--title-font); font-weight: var(--font-medium); text-decoration: none; margin-left: 1.5rem; } .nav_toggle { color: var(--title-color); display: flex; font-size: 1.25rem; cursor: pointer; } .nav_close { color: var(--title-color); } @media screen and (max-width: 1023px) { .nav_menu { position: fixed; width: 88%; left: 0; right: 0; bottom: -60%; margin: 0 auto; background-color: var(--body-color); box-shadow: 0 4px 20px hsla(207, 24%, 35%, 0.1); padding: 2rem 1.5rem 5rem; border-radius: 2rem; transition: bottom 0.3s; } } .nav_list { grid-template-columns: repeat(3, max-content); justify-content: center; align-items: center; margin-top: 3rem; gap: 2rem 3rem; /* border: 5px red solid; */ } .nav_link { display: flex; flex-direction: column; align-items: center; row-gap: 0.25rem; font-size: var(--smaller-font-size); color: var(--text-color-light); transition: color 0.3s; text-decoration: none; } .nav_link:hover { color: var(--title-color); } .nav_link i { font-size: 1.25rem; } .nav_close { position: absolute; right: 1.5rem; bottom: 0.7rem; font-size: 1.5rem; cursor: pointer; } /* Show menu */ .show-menu { bottom: 2rem; } /* Active link */ .active-link { color: var(--title-color); } /*=============== HOME ===============*/ .home_container { row-gap: 4rem; padding-top: 2rem; } .home_data { row-gap: 1.5rem; /* border: 5px solid red; */ } .home_title { text-align: center; font-size: var(--biggest-font-size); letter-spacing: 0.3px; margin-bottom: 0.5rem; } .home_blob { position: relative; width: 200px; height: 290px; background-color: var(--body-color); border: 2px solid var(--text-color-light); justify-self: center; border-radius: 6.25rem; place-items: center; transition: background 0.4s; } .home_picture { width: 170px; height: 260px; background: var(--gradient-color); border-radius: 5.5rem; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; } .home_picture img { width: 250px; height: 210px; margin-right: 3rem; /* margin-bottom: 1rem; border-radius: 2rem; */ } .home_shape-circle-1 { position: absolute; opacity: 0.1; width: 150px; top: -2rem; left: -3rem; transform: rotate(15deg); z-index: -1; } .home_shape-circle-2 { position: absolute; opacity: 0.1; width: 150px; bottom: -2rem; right: -3rem; transform: rotate(15deg); z-index: -1; } .home_social { justify-self: center; display: flex; column-gap: 1.25rem; margin-right: 3rem; } .home_social-link { font-size: 1.25rem; color: var(--text-color-light); transition: color 0.3s; } .home_social-link:hover { color: var(--title-color); } .home_info { display: grid; row-gap: 2rem; } .home_info-title { font-family: var(--body-font); font-size: var(--smaller-font-size); font-weight: 400; color: var(--text-color-light); margin-bottom: 1rem; } .home_info-description { font-family: var(--title-font); color: var(--title-color); padding-right: 4rem; } .home_info-number { font-family: var(--title-font); color: var(--title-color); font-size: var(--h1-font-size); font-weight: var(--font-semi-bold); } /*=============== SKILLS ===============*/ .skills_container { /* border: 5px solid red; */ row-gap: 3.5rem; } .skills_title { display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; font-size: var(--small-font-size); font-weight: var(--font-semi-bold); margin-bottom: 2.5rem; } .skills_title i { font-size: 1rem; font-weight: bolder; } .skills_info { /* border: 5px solid red; */ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; } .skills_data { /* border: 5px solid blue; */ display: grid; justify-content: center; text-align: center; } .skills_blob { display: grid; width: 80px; height: 100px; background-color: var(--container-color); border-radius: 3rem; place-items: center; margin-bottom: 1rem; transition: background 0.4s; } .skills_blob img { width: 40px; } .skills_name { font-size: var(--small-font-size); margin-bottom: 0.25rem; } .skills_subtitle { font-size: var(--tiny-font-size); color: var(--text-color-light); } /* Animation skills */ .skills_blob:hover img { animation: bounce-skills_img 0.75s; } @keyframes bounce-skills_img { 0% { transform: translate(0); } 20% { transform: translateY(-6px); } 40% { transform: translate(0); } 60% { transform: translateY(-4px); } 80% { transform: translate(0); } 100% { transform: translate(0); } } /*=============== QUALIFICATION ===============*/ .qualification { position: relative; } .qualification_container { /* border: 5px solid red; */ row-gap: 3.5rem; } .qualification_title { display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; font-size: var(--small-font-size); font-weight: var(--font-semi-bold); margin-bottom: 1.5rem; } .qualification_title i { font-size: 1rem; font-weight: bold; } .qualification_info { /* border: 5px solid red; */ display: grid; row-gap: 1.75rem; margin-left: 7rem; } .qualification_name { font-size: var(--normal-font-size); margin-bottom: 1.2rem; } .qualification_country { display: block; font-size: var(--small-font-size); color: var(--text-color-light); margin-bottom: 0.75rem; } .qualification_year { display: block; font-size: var(--small-font-size); color: var(--text-color-light); } .qualification_img { width: 150px; height: 120px; position: absolute; right: -3rem; bottom: 12rem; transform: rotate(15deg); opacity: 0.1; } /*=============== PROJECTS ===============*/ .projects_container { /* border: 5px solid red; */ overflow: initial; } .projects_content { /* border: 5px solid red; */ display: grid; justify-content: center; } .projects_img { width: 250px; border-radius: 0.75rem; margin-bottom: 1.25rem; } .projects_subtitle { font-size: var(--small-font-size); color: var(--text-color-light); } .projects_title { font-size: var(--h2-font-size); margin-bottom: 1.25rem; margin: 0.5rem 0 1.25rem; } .projects_button { display: inline-flex; align-items: center; column-gap: 0.5rem; color: var(--title-color); font-size: var(--small-font-size); text-decoration: none; } .projects_button i { font-size: 1rem; transition: transform 0.3s; } .projects_button:hover i { transform: translateX(0.25rem); } /* Swiper class */ .projects_container .swiper-button-prev::after, .projects_container .swiper-button-next::after { content: ""; } .projects_container .swiper-button-prev { width: initial; height: initial; margin: initial; font-size: 2.5rem; color: var(--title-color); left: -1rem; top: 4.5rem; } .projects_container .swiper-button-next { width: initial; height: initial; margin: initial; font-size: 2.5rem; color: var(--title-color); right: -1rem; top: 4.5rem; } .projects_container .swiper-slide { margin-bottom: 4.5rem; } .projects_container .swiper-pagination-bullets { bottom: 0; /* border: 5px solid red; */ } .projects_container .swiper-pagination-bullet { background-color: var(--text-color-light); opacity: initial; } .projects_container .swiper-pagination-bullet-active { background-color: var(--title-color); } /*=============== CONTACT ===============*/ .contact_container { row-gap: 3.5rem; } .contact_title { display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; font-size: var(--small-font-size); font-weight: var(--font-semi-bold); margin-bottom: 2.5rem; } .contact_title i { font-size: 1rem; font-weight: bold; } .contact_info { display: grid; row-gap: 2rem; } .contact_data { display: grid; row-gap: 0.75rem; } .contact_form { display: grid; } .contact_data-title { font-size: var(--small-font-size); color: var(--text-color-light); } .contact_data-info { font-size: var(--small-font-size); font-family: var(--title-font); color: var(--title-color); } .contact_button { width: max-content; display: inline-flex; align-items: center; column-gap: 0.5rem; color: var(--title-color); font-size: var(--small-font-size); text-decoration: none; } .contact_button i { font-size: 1rem; transition: transform 0.3s; /*meta-data for transform */ } .contact_button:hover i { transform: translateX(0.25rem); } .contact_form { /* border: 5px solid red; */ position: relative; row-gap: 2rem; } .contact_form-div { position: relative; height: 4rem; } .contact_form-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid var(--text-color-light); border-radius: 2rem; padding: 1.5rem; font-size: var(--normal-font-size); font-family: var(--title-font); color: var(--title-color); background: none; outline: none; z-index: 1; } .contact_form-tag { position: absolute; top: -0.75rem; left: 1.25rem; z-index: 10; background-color: var(--body-color); color: var(--title-color); font-size: var(--smaller-font-size); font-weight: var(--font-medium); padding: 0.35rem; transition: background 0.4s; } .contact_form-area { height: 10rem; } .contact_form-area textarea { resize: none; } /* .contact_form .contact_button { border: 2px solid var(--text-color-light); border-radius: 1.5rem; padding: 0.5rem; background: none; font-size: var(--h2-font-size); font-family: var(--title-font); font-weight: var(--font-semi-bold); cursor: pointer; outline: none; margin-top: 0.75rem; } */ .contact_popup { font-size: var(--small-font-size); position: absolute; bottom: 2.7rem; left: 1.5rem; } #form_button { width: 27%; margin-top: 1rem; } /* .contact_form .contact_button:hover { background: rgb(183, 184, 192); } */ /* .contact_form .contact_button i{ font-size: 1.5rem; font-weight: bold; } */ /* Status color */ .color-red { color: hsl(4, 71%, 50%); } .color-blue { color: hsl(207, 56%, 45%); } /*=============== FOOTER ===============*/ .footer_container { padding: 3rem 0 7rem; text-align: center; } .footer_title { font-size: var(--h1-font-size); font-weight: var(--font-semi-bold); margin-bottom: 1rem; margin-left: 1.7rem; } .footer_position-label { color: var(--title-color); margin-left: 2.25rem; } .footer_list, .footer_social { display: flex; justify-content: center; } .footer_list { margin: 2.5rem 0; column-gap: 2.5rem; } .footer_link { color: var(--title-color); text-decoration: none; } .footer_link:hover { text-decoration: underline; } .footer_social { column-gap: 1.25rem; } .footer_social-link { font-size: 1.2rem; color: var(--title-color); transition: transform 0.3s; } .footer_social-link:hover { transform: translateY(-0.15rem); } /*=============== SCROLL BAR ===============*/ ::-webkit-scrollbar { width: 0.6rem; border-radius: 0.5rem; background-color: hsl(207, 4%, 75%); } ::-webkit-scrollbar-thumb { background-color: hsl(207, 4%, 65%); border-radius: 0.5rem; } ::-webkit-scrollbar-thumb:hover { background-color: hsl(207, 4%, 55%); } /*=============== SCROLL UP ===============*/ .scrollup { position: fixed; right: 2rem; bottom: -30%; background-color: var(--body-color); box-shadow: 0 4px 12px hsl(204, 24%, 35%, 0.15); display: inline-flex; padding: 0.35rem; border-radius: 0.25rem; font-size: 1.1rem; color: var(--title-color); z-index: var(--z-tooltip); transition: bottom 0.3s, transform 0.3s; text-decoration: none; } .scrollup:hover { transform: translateY(-0.25rem); } /* Show Scroll Up*/ .showscroll { bottom: 7rem; } /*=============== BREAKPOINTS ===============*/ /* For small devices */ @media screen and (max-width: 340px) { .container { margin-inline: 1rem; } .nav_menu { padding-bottom: 4rem; width: 100%; } .nav_list { align-items: center; margin-right: 1rem; gap: 0rem 1rem; /* border: 5px solid red; */ } .skills_info { grid-template-columns: repeat(2, 1fr); } .projects_img { width: 200px; justify-self: center; } } @media screen and (max-width: 575px) { .nav_menu { width: 380px; } .nav_list { align-items: center; /* border: 5px red solid; */ } } /* For medium devices */ @media screen and (min-width: 576px) { .nav, .nav_menu { width: w380px; } /* .nav_list { justify-content: center; } */ .nav_list { grid-template-columns: repeat(5, max-content); justify-content: center; align-items: center; margin-top: 3rem; gap: 2rem 3rem; /* border: 5px red solid; */ } .nav { margin: 0 auto; } .skills_container { justify-content: center; } .projects_container { width: 400px; } .projects_container { overflow: hidden; } .projects_container .swiper-button-prev { left: 1rem; } .projects_container .swiper-button-next { right: 1rem; } .qualification_info { margin-right: 2rem; } } @media screen and (min-width: 767px) { .home_container { grid-template-columns: 1fr 2fr 1fr; } .home_data { order: 2; } .home_info:nth-child(3) { order: 3; text-align: right; } .home_info { margin-top: 10rem; } .home_info-description { padding-right: 0; } .skills_container { grid-template-columns: repeat(2, max-content); column-gap: 5rem; } .qualification_container { grid-template-columns: repeat(2, max-content); column-gap: 10rem; justify-content: center; } .qualification_info { margin-right: 2rem; } .projects_container { width: 500px; } .contact_container { grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: 8rem; } .contact_form { width: 360px; } #form_button { width: 120px; } .nav_menu { background-color: var(--body-color); transition: background 0.4s; /* border: 5px solid blue; */ } /* For large devices */ @media screen and (min-width: 1023px) { .header { top: 0; bottom: initial; background-color: var(--body-color); transition: 0.4s; /* border: 5px solid red; */ } .nav { width: initial; height: calc(var(--header-height) + 1.5rem); box-shadow: none; border-radius: 0; column-gap: 3rem; margin-inline: 1.5rem; padding: 0; background-color: var(--body-color); /* border: 5px solid red; */ } .nav_link i { display: none; font-size: var(--normal-font-size); /* border: 5px solid red; */ } .nav_toggle { display: none; } .nav_close { display: none; } .nav_menu { width: initial; margin-left: auto; background-color: var(--body-color); transition: background 0.4s; margin-top: 0rem; height: 80px; /* border: 5px solid blue; */ } .nav_list { display: flex; column-gap: 3rem; /* border: 5px solid red; */ align-items: flex-start; height: 2rem; /* margin-bottom: 2rem; */ } .nav_link { font-size: var(--normal-font-size); /* border: 5px solid red; */ } .nav_logo { margin-top: 2.5rem; } #theme-button-moon { margin-top: 2rem; } .dark .nav, .dark .nav_menu { background-color: var(--body-color); box-shadow: none; } #theme-button-moon { color: var(--text-color-light); } #theme-button-moon:hover { color: var(--title-color); } .section { padding-block: 8rem 0; } .home_title { font-size: 2.25rem; } .scrollup { right: 3rem; } .showscroll { bottom: 5rem; } /* Change background header */ .bg-header { box-shadow: 0 4px 20px hsla(207, 24%, 35%, 0.1); } .dark .bg-header { box-shadow: 0 6px 24px hsla(207, 24%, 8%, 0.6); } } @media screen and (min-width: 1048px) { .container { margin-inline: auto; } .qualification_info { margin-right: 2rem; } } @media screen and (min-width: 1200px) { .section_border { padding-bottom: 6rem; } .home_picture img { width: 250px; height: 500px; margin-right: 3rem; /* margin-bottom: 1rem; border-radius: 2rem; */ } .nav_list { margin-bottom: 2rem; } .section_subtitle { margin-bottom: 5rem; } .home_title { font-size: var(--biggest-font-size); } .home_blob { width: 400px; height: 580px; border-radius: 12.5rem; } .home_picture { width: 340px; height: 520px; border-radius: 10.6rem; } .home_picture img { width: 300px; } .home_shape-circle-1 { width: 250px; left: -7rem; top: 10rem; } .home_shape-circle-2 { width: 250px; bottom: -1rem; right: -5rem; } .home_data { row-gap: 2.5rem; } .home_social { column-gap: 2rem; } .home_social-link { font-size: 1.5rem; } .home_info { grid-template-rows: repeat(3, 130px); row-gap: 4rem; margin-top: 16rem; /* border: 5px solid red; */ } .skills_container { column-gap: 10rem; } .skills_title { margin-bottom: 3rem; } .skills_title i { font-size: 1.25rem; } .skills_name { font-size: var(--normal-font-size); } .skills_info { gap: 3rem; } .qualification_container { column-gap: 14rem; } .qualification_title { margin-bottom: 3rem; } .qualification_title i { font-size: 1.25rem; } .qualification_name { font-size: var(--h3-font-size); } .qualification_info { margin-right: 2rem; } .qualification_img { width: 300px; left: -6rem; bottom: 5rem; } .projects_container { width: 900px; } .projects_container .swiper-button-prev, .projects_container .swiper-button-next { font-size: 3rem; } .projects_container .swiper-button-prev { left: 1rem; } .projects_container .swiper-button-next { right: 1rem; } .projects_container .swiper-slide { margin-bottom: 6.5rem; } .projects_img { width: 320px; margin-bottom: 2rem; } .contact_title { margin-bottom: 3rem; } .contact_title i { font-size: 1.25rem; } .contact_info { row-gap: 3rem; } .contact_data-info { font-size: var(--normal-font-size); } .contact_form { row-gap: 2.5rem; } .footer_container { padding: 4rem 0 3rem; } .footer_list { column-gap: 3rem; } .footer_social { column-gap: 2rem; } .footer_social-link { font-size: 1.5rem; } .HF_div { padding-left: 10px; } } }