Мобильная версияЯ попробовал @media и rem вместо px но результаты не такие, как ожидалось, элементы накладываются друг на друга, и информация выходит за пределы пустого пространства основного блока в правой части экрана
< div class="snippet">
Код: Выделить всё
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;
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;
}Код: Выделить всё
Creative Portfolio
PREMIUM
VIRTUAL ASSIST
Elevating Your Efficiency
[img]{% static [/img]
[img]{% static [/img]
[img]{% static [/img]
Introducing
Premium Virtual Assist stands out for its
professional, sophisticated, and efficient
approach, making it the go-to choice for clients in
need of exceptional virtual assistant services
[img]{% static [/img]
WELCOME TO MY
PORTFOLIO
Hello, my name is
MBOZYO
MBOMA
A highly dynamic virtual assistant with 3 years of
experience in providing exceptional administrative,
customer and management support to businesses. I
thrive on multitasking and effectively prioritizing tasks to
ensure the
best outcomes. My goal is to make your life
easier so you can put your energy into what matters
most. Some of my skills include;
[img]{% static [/img]
•CREATIVE •COMMUNICATION •PRODUCTIVE •ATTENTION TO DETAIL
WHY WORK
WITH ME ?
CLIENT - CENTRIC
APPROACH
I AM COMMITTED TO
UNDERSTANDING AND
MEETING THE UNIQUE NEEDS
OF EACH CLIENT, ENSURING
THAT THE SUPPORT I
PROVIDE IS PERSONALIZED,
RELIABLE, AND TAILORED TO
OPTIMIZE THEIR SPECIFIC
OBJECTIVES, ULTIMATELY
CONTRIBUTING TO THEIR
OVERALL SUCCESS.
DEDICATED
INDIVIDUAL
I AM DEEPLY COMMITTED TO
PROVIDING TOP-NOTCH
SUPPORT AND ASSISTANCE TO
MY CLIENTS. WITH A STRONG
WORK ETHIC AND A PASSION
FOR HELPING OTHERS
SUCCEED, I GO ABOVE AND
BEYOND TO DELIVER
EXCEPTIONAL RESULTS AND
EXCEED EXPECTATIONS.
HIGHLY
TEACHABLE
I AM QUICK TO GRASP NEW
AM QUICK TO GRASP
NEW CONCEPTS, TECHNOLOGIES,
AND METHODOLOGIES, AND I
ACTIVELY SEEK OUT
OPPORTUNITIES TO EXPAND MY
SKILLS. WITH A GROWTH
MINDSET, I AM ALWAYS OPEN TO
FEEDBACK, EAGER
TO LEARN
NEW WAYS OF DOING THINGS,
AND READILY ADAPT TO
EVOLVING BEST PRACTICES.
VISION
Empower clients through exceptional support, streamlining
operations, reducing workload, and enhancing productivity.
Contribute to client success with reliable, efficient, and personalized
assistance.
MISSION
• Deliver exceptional administrative and management support,
leveraging my experience and skills to streamline operations for
my clients.
• Reduce my clients’ workload and enhance productivity.
• Contribute to my
clients’ overall success by providing reliable,
efficient, and personalized assistance.
PERSONAL
SKILLS
Graphic Design
Administrative Work
Bookkeeping
1% better
everyday
EDUCATION BACKGROUND
2021
• High School
In high school, I studied economics, pure
mathematics, geography, and general
studies, finding joy in the analytical and
social nature of economics and problem-
solving in pure mathematics. My excellence
in Economics
earned me recognition as The
Best Economics Student in my class.
2025
• Flight School
My ambition for aviation parallels my
dedication to providing unparalleled
assistance to individuals. Combining my
love for flight with my commitment to
support, I aim to excel in both realms,
reaching new heights.
[img]{% static [/img]
[img]{% static [/img]
WORK
EXPERIENCE
As a volunteer assistant for a non-governmental organization, I
immersed myself in a myriad of tasks, from managing emails to
coordinating events. I honed my skills in social media
management, editing, and fundraising, all while pursuing
online
courses to expand my knowledge base. Transitioning to an
executive assistant role in a logistics company in 2021 provided
invaluable opportunities to apply my newfound skills and develop
further. However, my lifelong dream
of aviation beckoned, leading
me to step away from full-time employment in 2023 to pursue
flight training and embrace the flexibility of virtual assistance. Each
step of my journey has shaped me into a versatile and capable
professional,
driven by a passion for both service and flight.
NOTABLE
PROJECTS
Due to client confidentiality, I'm unable to
display administrative and management work.
However, I can showcase my expertise in social
media management, graphic design, and
pamphlet creation. These examples highlight
my skills
and creativity in areas that are not
subject to confidentiality agreements.
[img]{% static [/img]
[img]{% static [/img]
•PROJECT 01
•PROJECT 02
GRAPHIC DESIGN AND
PAMPHLET CREATION
Experienced in creating visually appealing graphic
designs, pamphlets, and PDF documents for various
clients. Utilized Canva to design engaging visuals and
layouts. Ensured consistency in branding and
messaging while meeting
client objectives. Resulted in
increased brand visibility and enhanced
communication materials.
[img]{% static [/img]
Вы можете ответить, посмотрев этот код
Подробнее здесь: https://stackoverflow.com/questions/781 ... -in-django
