Разработка образовательного сайта [закрыто] ⇐ CSS

[Anonymous]

Разрабатываю сайт для образовательного учреждения. Меня очень вдохновил этот дизайн, и я хочу воспроизвести его полностью в образовательных целях. Я столкнулся с проблемой, как правильно добавлять изображения, чтобы страница была адаптивной и изображения всегда были связаны с текстом.
index.html:




Design

@font-face {
font-family: robson;
src: url('./Robson/Fontspring-DEMO-robson-bold.otf');
}










CREATE NEW

EXPERIENCE WITH

WAYS OF

PERFECT
LEARNING











style.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#title {
margin-top: 6rem;
width: 100%;
height: 50rem;
background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8)),
url('./images/image.png') center/cover;
font-family: robson;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
}

#title::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
),
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 240px 200px;
filter: blur(1px);
z-index: 1;
}

#title p {
height: 48rem;
line-height: 10rem;
font-size: 12rem;
z-index: 2;
}

#title p span {
display: inline-block;
height: 11.5rem;
}

.title__shadow {
color: #fad85d;
text-shadow: 2px 2px #000, 5px 6px #fa9f5d;
}

.title__transparent {
color: transparent;
-webkit-text-stroke: 1px white;
}

.title__dashed {
width: 30rem;
color: #7481e9;
padding: 0 1rem;
background: linear-gradient(to right, #7481e9 50%, transparent 0%) top
repeat-x,
linear-gradient(#7481e9 50%, transparent 0%) right repeat-y,
linear-gradient(to right, #7481e9 50%, transparent 0%) bottom repeat-x,
linear-gradient(#7481e9 50%, transparent 0%) left repeat-y;
background-size: 50px 3px, 3px 50px;
border-radius: 5%;
}

#title img {
position: absolute;
z-index: 3;
}

.pen-svg {
top: 8%;
left: 21%;
}

.earth-svg {
width: 180px;
top: 2%;
right: 26%;
}

.history-svg {
bottom: 20%;
left: 18%;
}

.book-svg {
bottom: 25%;
right: 21%;
}

.math-svg {
top: 45%;
left: 28%;
}

.title__row-1 {
padding-right: 70px;
}


Подробнее здесь: https://stackoverflow.com/questions/787 ... ional-site