/* Resetting default styling for all elements */ *{ margin:0 ; padding :0; box-sizing : border-box; font-family: 'Gilroy', sans-serif !important; } /* Setting full width and height for and elements */ html,body{ width: 100%; height: 100%; } #main{ display: flex; width: 100%; height: 100%; } #left{ position: relative; width: 40%; height: 100%; background-color:whitesmoke; } #lnav{ display: flex; justify-content: space-between; width:100%; padding: 20px 30px; } #lnavr{ display: flex; align-items: center; } #lnavr a{ margin-right: 20px; text-decoration: none; color:black; font-weight:14px;; } #left #textcenter{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #textcenter h1{ font-size: 50px; font-weight:900; } #textup{ opacity: .6 ; font-size: 12px; line-height: 20px; margin-bottom: 3px; margin-left: 10px; } #textdown{ opacity: .6 ; font-size: 12px; line-height: 20px; margin-top: 10px; margin-bottom: 20px; } #textcenter a{ text-decoration: none; color:black; border-bottom: 1px solid black; padding-bottom: 7px; font-size: 15px; font-weight: 600; opacity: .6; } #right{ width: 60%; height: 100%; background-color:#F5F5F5; } #rtop{ display:flex; width:100%; height: 50%; background-color:#F5F5F5; } #rbottom{ width:100%; height: 50%; background-image: url("temp_1.png"); background-size: cover; background-position:bottom; } #rtopleft{ width: 55%; height: 100%; background-image: url("logo.png"); background-size: cover; background-position: center; } #rtopright{ width: 45%; height: 100%; background-image: url("temp.png"); background-size: cover; background-position: center; } #uiimage{ width: 100%; height: 80%; background-image: url("Black\ Violet\ Sleek\ and\ Professional\ Basic\ Simple\ Presentation.png"); background-size: cover; background-position: top; image-rendering: auto; opacity: .94; } .tagline { display: flex; justify-content: center; align-items: center; height: 100%; /* Make sure the parent container has a set height */ color: whitesmoke; text-align: center; font-size: 70px; } /* Media query for responsive font size */ @media (max-width: 500px) { .tagline { font-size: 40px; /* Adjust the font size for smaller screens */ } } @media(max-width: 500px){ #main{ flex-direction: column; } #uiimage{ margin-top: 150px;; } #main #left { width:100%; } #textcenter { margin-top: 90px; margin-left:0px; } #textcenter h1{ font-size: 45px; font-weight:900; } #lnavr a{ margin-right: 15px; font-weight:10px;; } #lnav{ padding: 20px 40px; } #rtop { margin-top: 160px; } #main #right { width: 100%; } } /*========== VARIABLES CSS ==========*/ :root { /*========== Colors ==========*/ --first-color: #4D49BF; --second-color: #05DBF2; --body-color: #DFE9F2; --title-color: #1C1C22; --text-color: #58576B; /*========== Font and typography ==========*/ --body-font: 'Gilroy', sans-serif !important; --normal-font-size: .938rem; --h3-font-size: 1.125rem; --small-font-size: .75rem; } @media screen and (min-width: 968px) { :root { --normal-font-size: 1rem; --h3-font-size: 1.25rem; --small-font-size: .813rem; } } /*========== BASE ==========*/ *,::before,::after{ box-sizing: border-box; } body{ margin: 0; padding: 0; font-family: var(--body-font); font-size: var(--normal-font-size); } h3{ margin: 0; } a{ text-decoration: none; } img{ max-width: 100%; height: auto; } .bd-container{ max-width: 926px; width: calc(100% - 3rem); margin-left: 1.5rem; margin-right: 1.5rem; } /*========== CARD GLASS ==========*/ .card{ position: relative; overflow: hidden; padding: 3rem 0; background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); background-position: top; image-rendering: auto; } .card__container{ display: grid; gap: 1.5rem; } .card__glass{ position: relative; overflow: hidden; text-align: right; padding: 1.5rem; background-image: url("simple.png"); box-shadow: inset 2px 2px 1px rgba(251,251,254,.3) inset -2px -2px 1px rgba(147, 147, 148, 0.2); border-radius: 0.3rem; backdrop-filter: blur(15px); } .card__img{ width: 80px; height: 80px; border-radius: 50%; border: 2px solid #F4F4FB; margin-bottom: 1rem; } .card__data{ margin-bottom: 1.5rem; } .card__title{ font-size: var(--h3-font-size); color: #ffffff; font-weight: 600; margin-bottom: .25rem; } .card__profession{ font-size: var(--small-font-size); color: #ffffff; font-weight: 200; opacity:.6; } .card__button{ display: inline-block; border-bottom: 1px solid rgb(255, 252, 252); padding-bottom: 7px; font-size: 15px; font-weight: 600; opacity: .6; padding: .75rem 1.5rem; border-radius: .2rem; color: whitesmoke; font-weight: 500; transition: .4s; opacity:.8; } .card__button:hover{ background-image: linear-gradient(-225deg, #3D4E81 0%, #6b36c8 48%, #6E7FF3 100%); color: whitesmoke; } .card__social{ position: absolute; top: 50%; transform: translate(25px, -64px); } .card__glass:hover .card__link{ transform: translateX(-1.5rem); } /*========== MEDIA QUERIES ==========*/ @media screen and (min-width: 568px){ .card__container{ grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 768px){ .bd-container{ margin-left: auto; margin-right: auto; } .card{ padding: 0; } .card__container{ height: 100vh; grid-template-columns: repeat(3, 1fr); align-content: center; } .card__circle1{ left: 10%; top: 59%; } .card__circle2{ right: 8%; bottom: 35%; } } #rtopd{ display:flex; width:100%; height: 100%; background-color:#F5F5F5; } #rtopleftd{ width: 65%; height: 100%; background-image: url("image\ 4\ \(1\).png"); background-size: cover; background-position: center; } #rtoprightd{ width: 25%; height: 100%; background-image: url("Black\ Violet\ Sleek\ and\ Professional\ Basic\ Simple\ Presentation.png"); background-size: cover; background-position: right; } #rightd{ width: 60%; height: 80%; background-color:#F5F5F5; } #leftd{ position: relative; width: 40%; height: 80%; background-color:#F5F5F5; } #leftd #textcenterd{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } #textcenterd h1{ font-size: 30px; font-weight:900; } #textupd{ opacity: .6 ; font-size: 12px; line-height: 20px; margin-bottom: 3px; margin-left: 10px; } #textdownd{ opacity: .6 ; font-size: 12px; line-height: 20px; margin-top: 10px; margin-bottom: 20px; } #textcenterd a{ text-decoration: none; color:black; border-bottom: 1px solid black; padding-bottom: 7px; font-size: 15px; font-weight: 600; opacity: .6; } @media (max-width: 1105px) { #textcenterd h1{ font-size: 30px; font-weight:900; } } @media (max-width: 500px) { #rtopd { flex-direction: column; } #rtopleftd { width: 100%; height: 50vh; background-image: url("image\ 4\ \(1\).png"); background-color: #F5F5F5; } #rtoprightd { width: 100%; height: 20vh; background-image: url(Black\ Violet\ Sleek\ and\ Professional\ Basic\ Simple\ Presentation.png); } #rightd { width: 100%; height: auto; margin-top: 20px; } #leftd { width: 100%; height: auto; margin-top: 20px; } #textcenterd h1 { font-size: 20px; margin-left:0px; margin-top:400px; justify-content: center; padding: 2px; } #textdownd{ font-size: 15px; margin-left:0px; justify-content: center; padding: 2px; } } #footer { display: flex; justify-content: center; /* Horizontal centering */ align-items: center; /* Vertical centering */ height: 10vh; width: 100%; background: rgb(239, 238, 240); line-height: 1.3; font-size: 20px; transition: background-color 0.3s ease; /* Adding smooth transition */ } .f:last-child { grid-column: 1 / 2; grid-row: 1 / 2; } #footer:hover { background-color: #ddd; /* Change the color on hover */ } @media (max-width: 500px) { #footer{ margin-top: 500px; } }