i want to make my html code mobile responsive, but its not working mean as i expected i tried media and rem instead of px but the results are not as expected, the things are overlapping on each other and info is going out of the main divs white space on the right side of the screen
body, html { height: 100vh; margin: 0; padding: 0;}.part1 { position: relative; width: 100%; height: 100%; background-color: black; display: flex; justify-content: space-between;}.tt { margin-top: 20px; margin-left: 20px; width: fit-content; height: fit-content; animation: slideInLeftTt 1s ease forwards; /* Animation for tt */}@keyframes slideInLeftTt { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; }}.txt2 { font-size: 35px; animation: slideInUpTxt2 1s ease forwards; /* Animation for txt2 */}@keyframes slideInUpTxt2 { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; }}.txt { font-size: 64px; animation: slideInUpTxt 1s ease forwards; /* Animation for txt */}@keyframes slideInUpTxt { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; }}.txt1 { font-size: 25px; animation: slideInUpTxt1 1s ease forwards; /* Animation for txt1 */}@keyframes slideInUpTxt1 { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; }}.A1 { height: 100%; width: fit-content; color: white; display: flex; flex-direction: column; font-family: 'Baskerville Old Face', serif;}.pv { margin-top: 140px; margin-left: 200px; height: fit-content; width: fit-content;}.image { max-width: 100%; max-height: 100%;}.logo-container { position: absolute; top: 50%; left: 65%; transform: translate(-50%, -50%); width: 300px; height: 300px; background-color: transparent; border: 10px solid #808080; border-radius: 50%; z-index: 1; overflow: hidden;}.logo { width: 100%; height: auto; position: relative; border-radius: 0 0 50px 50px;}.part2 { position: relative; width: 100%; min-height: 100vh; /* Change height to min-height */ background-color: #fff6f2; display: flex; flex-direction: column; font-family: 'Baskerville Old Face', serif; overflow: hidden; /* Hide content overflow */}.part2b { display: flex; flex-direction: row; position: relative;}.part2a { display: flex; flex-direction: column;}.qq { font-size: 35px; margin-top: 50px; margin-left: 60px; opacity: 0; transition: opacity 1s ease;}.q2 { font-size: 25px; margin-left: 60px; margin-top: 100px; height: fit-content; width: fit-content; opacity: 0; transition: opacity 1s ease;}.q3 { font-size: 80px; margin-left: 70px; margin-top: 20px; opacity: 0; transition: opacity 1s ease;}.bg3 { width: 50%; height: auto; margin-left: auto; /* Align the image to the right edge of the screen */ opacity: 0; transition: opacity 1s ease;}.circle-image { position: absolute; top: 40%; /* Adjust to your desired position */ left: 65%; /* Adjust to your desired position */ transform: translate(-50%, -50%); width: 300px; height: 300px; border-radius: 50%; object-fit: cover; border: 17px solid #fff6f2; z-index: 2; opacity: 0; transition: opacity 1s ease;}.animate-slide-right { animation: slideRight 1s forwards; opacity: 0; /* Initially hide the elements */}.animate-slide-left { animation: slideLeft 1s forwards; opacity: 0; /* Initially hide the elements */}.animate-slide-up { animation: slideUp 1s forwards; opacity: 0; /* Initially hide the elements */}.animate-slide-right-circle { animation: slideRight 1s forwards; opacity: 0; /* Initially hide the elements */}.animate-slide-left-bg { animation: slideLeft 1s forwards; opacity: 0; /* Initially hide the elements */}@keyframes slideRight { from { transform: translateX(100%); } to { transform: translateX(0); opacity: 1; }}@keyframes slideLeft { from { transform: translateX(-100%); } to { transform: translateX(0); opacity: 1; }}@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); opacity: 1; }}.part3 { position: relative; width: 100%; height: 100vh; background-color: black; display: flex; flex-direction: column; font-family: 'Baskerville Old Face', serif;}.ww { display: flex; flex-direction: row; position: relative;}.w1 { display: flex; flex-direction: column; width: fit-content;}.wA { font-size: 35px; color: white; margin-top: 90px; margin-left: 80px;}.wB { font-size: 70px; color: white; margin-left: 80px; margin-top: 20px; line-height: 0.9; /* Adjust the line height as needed */}.wC { margin-top: 20px; font-size: 25px; color: white; margin-left: 80px;}.w2 { width: 40%; height: auto; margin-left: 120px; margin-top: 90px;}.w2 img { border: 5px solid #fff6f2; /* Add a white border around the image */ border-radius: 25px; transition: transform 0.3s ease; /* Add transition for smooth animation */}.w2 img:hover { transform: scale(1.05); /* Increase the size by 10% */}.ww3 { color: black; font-size: 35px; background-color: white; margin-left: 90px; margin-right: 90px; border-radius: 10px; margin-top: 60px;}.part4 { position: relative; width: 100%; height: 100vh; background-color: black; display: flex; flex-direction: column; font-family: 'Baskerville Old Face', serif;}.ee{ color: white; font-size: 70px; align-self: center; margin-top: 70px; line-height: 0.9;}.part4 hr { border: none; /* Remove default border */ height: 2px; /* Set height to 2px */ background-color: white; /* Set background color to white */}.ee1{ display: flex; flex-direction: row; flex-wrap: wrap; /* Allow items to wrap into multiple rows */ margin-left: 170px;}.eeA { background: white; font-size: 20px; padding: 10px; border-radius: 10px; margin: 30px; transition: background-color 0.3s, color 0.3s; /* Add transition effect */}.eeA p { font-size: 35px; line-height: 0.9; align-self: center;}.eeA:hover { background: black; /* Change background color on hover */ color: white; /* Change font color on hover */}.part5 { position: relative; width: 100%; height: 100vh; background-color: black; display: flex; flex-direction: column; font-family: 'Baskerville Old Face', serif;}.rr{ background-color: white; color: black; font-size: 27px; display: flex; flex-direction: row; border-radius: 15px; padding: 10px; align-self: center; width: fit-content; margin-top: 100px;}.rr p{ font-size: 80px; margin-right: 120px;}.rr:hover { background: black; /* Change background color on hover */ color: white; /* Change font color on hover */}.part6 { position: relative; width: 100%; height: 100vh; background-color: #fff6f2; display: flex; flex-direction: row; font-family: 'Baskerville Old Face', serif;}.zz{ display: flex; flex-direction: column; font-size: 70px; line-height: 0.9; margin-top: 150px; margin-left: 50px; width: 60%;}.zz1{ display: flex; flex-direction: column; background-color: #232B2B; width: 40%; align-items: center;}.zz1 p{ color: white; font-size: 60px; margin-top: 250px; }.zz2{ display: flex; flex-direction: row; font-size: 25px; margin-top: 70px;}.box{ height: 100%; width: 300px; align-items: center; margin-left: 155px; border-radius: 5px; background-image: linear-gradient(to right, black 75%, lightgrey 25%);}.box2{ height: 100%; width: 300px; background-image: linear-gradient(to right, black 85%, lightgrey 15%); align-items: center; margin-left: 100px; border-radius: 5px;}.box3{ height: 100%; width: 300px; background-image: linear-gradient(to right, black 65%, lightgrey 35%); align-items: center; margin-left: 180px; border-radius: 5px;}.part7 { position: relative; width: 100%; height: 100vh; background-color: #fff6f2; display: flex; flex-direction: column; font-family: 'Baskerville Old Face', serif;}.ff { font-size: 70px; margin-left: 300px; margin-top: 100px;}.line-container { width: 90%; height: 2px; display: flex; align-items: center; justify-content: center; background-color: #000; position: relative; margin: 0 auto; /* Center the container horizontally */ margin-top: 80px;} .small-square, .big-square { width: 20px; height: 20px; background-color: #000; position: absolute; top: 50%; border-radius: 40%; transform: translateY(-50%); } .small-square { left: calc(30% - 30px); } .big-square { left: calc(70% + 10px); } .ff1{ display: flex; flex-direction: row; } .ff2{ display: flex; flex-direction: column; height: fit-content; width: fit-content; padding: 10px; border-radius: 10px; color: black; margin-top: 40px; margin-left: 300px; transition: transform 0.3s ease; /* Smooth transition effect */ } .ff22{ display: flex; flex-direction: column; height: fit-content; width: fit-content; padding: 10px; border-radius: 10px; color: black; margin-top: 40px; margin-left: 300px; transition: transform 0.3s ease; /* Smooth transition effect */ }.ff2:hover, .ff22:hover { transform: scale(1.15); /* Increase the size by 10% */}.ff3{ font-size: 30px; align-self: center; }.ff4{ font-size: 30px; align-self: center;}.ff5{ font: 20px;} .part8 { position: relative; width: 100%; height: 100vh; background-color: #fff6f2; display: flex; flex-direction: row; font-family: 'Baskerville Old Face', serif;}.xx{ display: flex; flex-direction: row;}.image2{ margin-top: 150px;height: 500px;width: 200px;}.image3{ margin-left: 20px; margin-top: 150px; height: 500px; width: 350px;}.xx1{ font-size: 70px; display: flex; flex-direction: column; line-height: 0.9; margin-left: 120px; margin-top: 150px;}.xx1:hover { color: #232B2B;}.xx3{ font-size: 30px;}.part9 { position: relative; width: 100%; height: 100vh; background-color: black; display: flex; flex-direction: row; font-family: 'Baskerville Old Face', serif;}.vv{ display: flex; flex-direction: column; color: white;}.vv1{ font-size: 70px; line-height: 0.9; margin-top: 150px; margin-left: 70px;}.vv2{ font-size: 20px; margin-left: 70px; margin-top: 20px;}.vvA{ display: flex; flex-direction: column;}.vvA1{ display: flex; flex-direction: row;}.image5 { height: 400px; width: 250px; margin-left: 200px; margin-top: 150px; border-radius: 10px; border: 2px solid white; transition: transform 0.3s ease; }.image5:hover { transform: scale(1.1); /* Increase size by 10% on hover */}.vvA2{ display: flex; flex-direction: row;}.p1a{ font-size: 20px; color: white; margin-top: 40px; margin-left: 230px;}.p2a{ font-size: 20px; color: white; margin-top: 40px; margin-left: 350px;}.part10 { position: relative; width: 100%; height: 100vh; background-color: black; display: flex; color: white; flex-direction: row; font-family: 'Baskerville Old Face', serif;}.mm1{ font-size: 60px; line-height: 0.9; margin-left: 70px; margin-top: 120px;}.mm2{ font-size: 25px; margin-left: 70px; margin-top: 40px;}.image7{ height: 400px; width: 400px; border-radius: 10px; margin-left: 200px; margin-top: 120px;}this is the css code for my website
<body><div class="part1"><div class="A1"><div class="tt"><p class="txt2">Creative Portfolio</p> </div><div class="pv"><p class="txt">PREMIUM<br> VIRTUAL ASSIST</p><p class="txt1">Elevating Your Efficiency</p></div></div><div class="A1"><img src="{% static 'virtualAssist/bg1.jpg' %}" alt="Background Image" class="image"></div><div class="logo-container"><img src="{% static 'virtualAssist/logo.jpeg' %}" alt="Logo" class="logo"></div></div><div class="part2"><img src="{% static 'virtualAssist/bg4.jpg' %}" alt="Circle Image" class="circle-image animate-slide-up"><div class="part2b"><div class="part2a"><div class="qq animate-slide-left-bg ">Introducing</div><div class="q2 animate-slide-left-bg">Premium Virtual Assist stands out for its<br>professional, sophisticated, and efficient <br>approach, making it the go-to choice for clients in<br>need of exceptional virtual assistant services</div></div><div class="bg3 animate-slide-right"><img src="{% static 'virtualAssist/bg3.jpg' %}" alt="Background Image" class="image"></div></div><div class="q3 animate-slide-up"> WELCOME TO MY </br> PORTFOLIO</div></div><div class="part3"><div class="ww"><div class="w1"><div class="wA"> Hello, my name is</div><div class="wB"> MBOZYO <br> MBOMA</div><div class="wC"> A highly dynamic virtual assistant with 3 years of<br> experience in providing exceptional administrative,<br> customer and management support to businesses. I <br> thrive on multitasking and effectively prioritizing tasks to <br> ensure the best outcomes. My goal is to make your life <br> easier so you can put your energy into what matters <br> most. Some of my skills include; </div></div><div class="w2"><img src="{% static 'virtualAssist/bg5.jpeg' %}" alt="Background Image" class="image"></div></div><div class="ww3">•CREATIVE •COMMUNICATION •PRODUCTIVE •ATTENTION TO DETAIL</div></div><div class="part4"><div class="ee"> WHY WORK <br> WITH ME ?</div><div class="ee1"><div class="eeA"><p> CLIENT - CENTRIC<br> APPROACH</p> I AM COMMITTED TO <br> UNDERSTANDING AND <br> MEETING THE UNIQUE NEEDS <br> OF EACH CLIENT, ENSURING <br> THAT THE SUPPORT I <br> PROVIDE IS PERSONALIZED,<br> RELIABLE, AND TAILORED TO <br> OPTIMIZE THEIR SPECIFIC<br> OBJECTIVES, ULTIMATELY <br> CONTRIBUTING TO THEIR<br> OVERALL SUCCESS.</div><div class="eeA"><p>DEDICATED <br> INDIVIDUAL</p> I AM DEEPLY COMMITTED TO <br>PROVIDING TOP-NOTCH <br> SUPPORT AND ASSISTANCE TO <br>MY CLIENTS. WITH A STRONG<br> WORK ETHIC AND A PASSION <br>FOR HELPING OTHERS <br> SUCCEED, I GO ABOVE AND <br> BEYOND TO DELIVER <br> EXCEPTIONAL RESULTS AND <br> EXCEED EXPECTATIONS.</div><div class="eeA"><p>HIGHLY <br>TEACHABLE</p> I AM QUICK TO GRASP NEW <br> AM QUICK TO GRASP <br> NEW CONCEPTS, TECHNOLOGIES,<br> AND METHODOLOGIES, AND I <br> ACTIVELY SEEK OUT<br> OPPORTUNITIES TO EXPAND MY <br> SKILLS. WITH A GROWTH <br>MINDSET, I AM ALWAYS OPEN TO<br> FEEDBACK, EAGER TO LEARN <br>NEW WAYS OF DOING THINGS, <br> AND READILY ADAPT TO<br> EVOLVING BEST PRACTICES.</div></div></div><div class="part5"><div class="rr"><p> VISION </p> Empower clients through exceptional support, streamlining <br> operations, reducing workload, and enhancing productivity.<br> Contribute to client success with reliable, efficient, and personalized <br> assistance.</div><div class="rr"><p> MISSION </p> • Deliver exceptional administrative and management support,<br> leveraging my experience and skills to streamline operations for<br> my clients.<br>• Reduce my clients’ workload and enhance productivity.<br>• Contribute to my clients’ overall success by providing reliable, <br>efficient, and personalized assistance.</div></div><div class="part6"><div class="zz"> PERSONAL<br> SKILLS<div class="zz2"> Graphic Design <div class="box"></div></div><div class="zz2"> Administrative Work <div class="box2"></div></div><div class="zz2"> Bookkeeping <div class="box3"></div></div></div><div class="zz1"><p>1% better<br> everyday</p></div></div><div class="part7"><div class="ff"> EDUCATION BACKGROUND</div><div class="line-container"><div class="small-square"></div><div class="big-square"></div></div><div class="ff1"><div class="ff2"><p class="ff3">2021<p><p class="ff4">• High School</p><p class="ff5"> In high school, I studied economics, pure <br> mathematics, geography, and general <br> studies, finding joy in the analytical and <br> social nature of economics and problem-<br> solving in pure mathematics. My excellence<br> in Economics earned me recognition as The<br> Best Economics Student in my class.</p></div><div class="ff22"><p class="ff3">2025<p><p class="ff4">• Flight School</p><p class="ff5"> My ambition for aviation parallels my<br> dedication to providing unparalleled <br> assistance to individuals. Combining my<br> love for flight with my commitment to<br> support, I aim to excel in both realms, <br> reaching new heights.</p></div></div></div><div class="part8"><div class="xx"><img src="{% static 'virtualAssist/bg7.jpg' %}" alt="Background Image" class="image2"><img src="{% static 'virtualAssist/bg6.jpg' %}" alt="Background Image" class="image3"></div><div class="xx1"><p class="xx2">WORK <br> EXPERIENCE </p><p class="xx3"> As a volunteer assistant for a non-governmental organization, I <br> immersed myself in a myriad of tasks, from managing emails to<br> coordinating events. I honed my skills in social media<br> management, editing, and fundraising, all while pursuing online<br> courses to expand my knowledge base. Transitioning to an<br> executive assistant role in a logistics company in 2021 provided <br> invaluable opportunities to apply my newfound skills and develop<br> further. However, my lifelong dream of aviation beckoned, leading<br> me to step away from full-time employment in 2023 to pursue<br> flight training and embrace the flexibility of virtual assistance. Each<br> step of my journey has shaped me into a versatile and capable<br> professional, driven by a passion for both service and flight.</p></div></div><div class="part9"><div class="vv"><p class="vv1">NOTABLE <br>PROJECTS</p><p class="vv2">Due to client confidentiality, I'm unable to<br> display administrative and management work.<br> However, I can showcase my expertise in social<br> media management, graphic design, and<br> pamphlet creation. These examples highlight<br> my skills and creativity in areas that are not<br> subject to confidentiality agreements.</p></div><div class="vvA"><div class="vvA1"><img src="{% static 'virtualAssist/bg8.jpeg' %}" alt="Background Image" class="image5"><img src="{% static 'virtualAssist/bg9.jpeg' %}" alt="Background Image" class="image5"></div><div class="vvA2"><p class="p1a">•PROJECT 01</p><p class="p2a">•PROJECT 02</p></div></div></div><div class="part10"><div class="mm"><p class="mm1">GRAPHIC DESIGN AND <br> PAMPHLET CREATION</p><p class="mm2">Experienced in creating visually appealing graphic <br> designs, pamphlets, and PDF documents for various <br> clients. Utilized Canva to design engaging visuals and <br> layouts. Ensured consistency in branding and <br> messaging while meeting client objectives. Resulted in <br> increased brand visibility and enhanced<br> communication materials.</p></div><div><img src="{% static 'virtualAssist/bg10.jpg' %}" alt="Background Image" class="image7"></div></div><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script></body>
