/* ===== GOOGLE FONTS ===== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap'); /* ===== BASE ===== */ * { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; box-sizing: border-box; } body { background: lightblue; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { position: relative; width: 100%; max-width: 1000px; min-height: 1000px; background-color: #fff; margin: 50px; display: grid; grid-template-columns: 1fr 2fr; box-shadow: 0 35px 55px rgba(0, 0, 0, 0.1); } .container .left_side { position: relative; background: #003147; padding: 40px; } .profileText { position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .profileText .imgBx { position: relative; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; } .profileText .imgBx img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .profileText h2 { color: #fff; font-size: 1.5rem; margin-top: 20px; text-transform: uppercase; text-align: center; font-weight: 600; line-height: 1.4em; } .profileText h2 span { font-size: 0.8em; font-weight: 300; } .contactInfo { padding-top: 40px; } .title { color: #fff; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; margin-bottom: 20px; } .contactInfo ul { position: relative; } .contactInfo ul li { position: relative; list-style: none; margin: 10px 0; } .contactInfo ul li .icon { display: inline-block; width: 26px; font-size: 18px; color: #03a9f4; } .contactInfo ul li span { color: #fff; font-weight: 300; } .contactInfo.education li { margin-bottom: 15px; } .contactInfo.education h5 { color: #03a9f4; font-weight: 500; } .contactInfo.education h4:nth-child(2) { color: #fff; font-weight: 500; } .contactInfo.education h4 { color: #fff; font-weight: 300; } .contactInfo.language .percent { position: relative; width: 100%; height: 6px; background: #081921; display: block; margin-top: 5px; } .contactInfo.language .percent div { position: absolute; top: 0; left: 0; height: 100%; background-color: #03a9f4; } /* ===== Right Side ===== */ .container .right_side { position: relative; background: #fff; padding: 40px; } .about { margin-bottom: 50px; } .about:last-child { margin-bottom: 0; } .title2 { color: #003147; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .about ol { list-style-type: armenian; } p { color: #333; } .about li { color: #333; } .about .box { display: flex; flex-direction: row; margin: 20px 0; } .about .box .year_company { min-width: 150px; } .about .box .year_company h5 { text-transform: uppercase; color: #848c90; font-weight: 600; } .about .box .text h4 { text-transform: uppercase; color: #2a7da2; font-size: 16px; } .skills .box { position: relative; width: 100%; display: grid; grid-template-columns: 150px 1fr; justify-content: center; align-items: center; } .skills .box h4 { text-transform: uppercase; color: #848c99; font-weight: 500; } .skills .box .percent { position: relative; width: 100%; height: 10px; border-radius: 20px; background: #dadada; } .skills .box .percent div { position: absolute; top: 0; left: 0; height: 100%; background: #03a9f4; border-radius: 20px; } .interest ul { display: grid; grid-template-columns: repeat(4,1fr); } .interest ul li { list-style: none; color: #333; font-weight: 500; margin: 10px 0; } .interest ul li .fa { color: #003147; font-size: 18px; width: 20px; } @media (max-width: 1000px) { .container { margin: 10px; grid-template-columns: repeat(1,1fr); } .interest ul { grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px) { .about .box { flex-direction: column; } .about .box .year_company { margin-bottom: 5px; } .interest ul { grid-template-columns: repeat(1,1fr); } .skills .box { grid-template-columns: repeat(1,1fr); } }