Мобильная версияМне нужно подогнать свое изображение. Вот предварительный просмотр проблемы для раздела исследования, потому что это не так. подходит, когда он находится в соотношении destkop, пожалуйста, кто-нибудь поможет как можно быстрее, если есть кто-то, кто может помочь мне исправить мой код и найти проблему в разделе «Исследование», я очень ценю это!
HTML
Osvaliant
[*] href="https://cdn.jsdelivr.net/npm/remixicon@ ... ixicon.css"
rel="stylesheet"
/>
OSVALIANT
About US
We proudly adopted the name
OSVALIANT for our cohort, as it perfectly
reflects the strength and unity that define us. Rooted in the
words valiant, OSVALIANT captures the spirit of a generation
determined to face challenges head-on and create a positive
impact. This name is not only a reflection of who we are today,
but a promise to lead with purpose, integrity, and to remain bold
in executing innovative leadership as we pave the way toward the
future we desire.
Let's See
Student council
administrator
alt="img"
class="division__img"
/>
NAJLA
Precident
alt="img"
class="division__img"
/>
TRISHA
Precident
alt="img"
class="division__img"
/>
AQILLAH
Precident
**
VISI & MISI
VISI:
Mewujudkan OSIS yang inovatif dan responsif untuk mendukung
pengembangan potensi siswa secara optimal, sehingga dapat
mewujudkan lingkungan sekolah yang berprestasi dan individu yang
berperan konstruktif dalam memajukan sekolah.
MISI:
1. Memastikan OSIS berfungsi secara efektif dan efesien dalam
menjalankan tugasnya dengan mengadakan evaluasi dan komunikasi
yang terbuka.
2. Menjadi mediator yang efektif antara siswa dan pihak sekolah
sehingga aspirasi dan ide-ide kreatif dari siswa dapat
tersampaikan dengan baik.
3. Bekerja sama dengan pihak sekolah untuk mengadakan seminar,
podcast, workshop, dan program-program relevan lainnya sehingga
dapat mendukung peningkatan kompetensi siswa dalam banyak
lingkup bidang: akademik, sosial, kognitif atau psikologis,
olahraga, dan keterampilan lainnya.
4. Mengadakan kompetisi internal dan eksternal yang menantang
serta memperkaya pengalaman siswa dalam banyak lingkup
bidang.
5. Memanfaatkan teknologi modern dalam pelaksanaan program
kerja OSIS.
alt="awe"
class="explore__profile"
/>
OSIS/MPK
**
CSS
@import url("https://fonts.googleapis.com/css2?famil ... splay=swap");
@import url("https://fonts.googleapis.com/css2?famil ... splay=swap");
/* ===== Vars ===== */
:root {
--header-height: 3.5rem;
/*===== Colors =====*/
--title-color: hsl(0, 100%, 100%);
--text-color: hsl(0, 0%, 70%);
--text-color-light: hsl(0, 0%, 60%);
--body-color: hsl(0, 0%, 0%);
--container-color: hsl(0, 0%, 8%);
/*===== Font =====*/
--body-font: "Poppins", sans_serif;
--second-font: "Montserrat", sans_serif;
--biggest-font-size: 2.75rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1rem;
--normal-font-size: 0.938rem;
--small-font-size: 0.813rem;
--smaller-font-size: 0.75rem;
/* ===== Font Weight ===== */
--font-regular: 400;
--font-medium: 500;
--font-semi-bold: 600;
/* ===== Z index ===== */
--z-tooltip: 10;
--z-fixed: 100;
}
/* ===== Responsive typography ===== */
@media screen and (min-width: 1152px) {
:root {
--biggest-font-size: 5.5rem;
--h1-font-size: 2.5rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: 0.875rem;
--smaller-font-size: 0.813rem;
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
align-items: center;
justify-content: center;
min-height: 100vh;
display: flex;
background: #000000;
}
body,
button,
input {
font-family: var(--body-font);
font-size: var(--normal-font-size);
color: var(--text-color);
}
button,
input {
outline: none;
border: none;
}
h1,
h2,
h3,
h4 {
color: var(--title-color);
font-family: var(--second-font);
font-weight: var(--font-semi-bold);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
display: block;
max-width: 100%;
height: auto;
}
/* ===== Reausable CSS ===== */
.container {
max-width: 1120px;
margin-inline: 1.5rem;
}
.grid {
display: grid;
gap: 1.5rem;
}
.section {
padding-block: 5rem 1rem;
}
.section__title {
text-align: center;
font-size: var(--h1-font-size);
margin-bottom: 1.5rem;
}
.main {
overflow: hidden;
}
/* ===== Header & Nav ===== */
.header {
position: fixed;
width: 100%;
border-color: transparent;
top: 0;
left: 0;
z-index: var(--z-fixed);
}
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo,
.navbar a {
color: var(--title-color);
font-family: var(--second-font);
font-weight: var(--font-semi-bold);
}
.nav__toggle,
.nav__close {
display: flex;
font-size: 1.25rem;
color: var(--title-color);
cursor: pointer;
}
/* ===== Navigation Mobile ===== */
@media screen and (max-width: 1023px) {
.nav__menu {
position: fixed;
top: -100%;
left: 0;
background-color: hsla(0, 0%, 0%, 0.3);
width: 100%;
padding-block: 4rem;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
transition: top 0.4s;
}
}
.home {
padding-top: 30%;
}
.nav__list {
text-align: center;
display: flex;
flex-direction: column;
row-gap: 2.5rem;
}
.nav__link {
position: relative;
color: var(--title-color);
font-family: var(--second-font);
font-weight: var(--font-medium);
}
.nav__close {
position: absolute;
top: 1rem;
right: 1.5rem;
}
.show-menu {
top: 0;
}
/* Add Blur to Header */
.blur-header::after {
content: "";
position: absolute;
width: 1000%;
height: 100%;
background-color: hsla(0, 0%, 0%, 0.3);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
top: 0;
left: 0;
z-index: -1;
}
.home {
padding-top: 0;
display: flex;
justify-content: center;
align-items: center;
}
.icon__home {
position: relative;
padding-top: 0;
color: #fff;
width: 50em;
max-width: 100%;
filter: drop-shadow(0 0 20px rgba(30, 25, 177, 0.5));
}
/* ===== BUTTON ===== */
.button {
border-color: hsla(0, 0%, 100%, 0.2);
padding: 1.25rem 1.5rem;
color: var(--title-color);
display: inline-flex;
align-items: center;
column-gap: 0.5rem;
font-family: var(--second-font);
font-weight: var(--font-semi-bold);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.button i {
font-size: 1.25rem;
transition: transform 0.4s;
font-weight: initial;
}
.button:hover i {
transform: translateX(0.25rem);
}
/* ===== ABOUT ===== */
.about__container {
row-gap: 2rem;
}
.about__data {
text-align: center;
}
.about__description img {
max-width: 50%;
height: auto;
}
.about__description {
margin-bottom: 2rem;
}
.about__image {
position: relative;
justify-self: center;
}
.about__img {
width: 30%;
transition: transform 0.4s;
filter: drop-shadow(0 0 20px rgba(30, 25, 177, 0.5));
}
.about__shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
hsla(0, 0%, 0%, 0) 50%,
hsl(0, 0%, 0%) 125%
);
}
.about__image:hover .about__img {
transform: scale(1.2);
}
/* ===== DIVISION ===== */
.division__container {
padding-top: 1.5rem;
grid-template-columns: 240px;
justify-content: center;
row-gap: 2.5rem;
}
.division__image {
position: relative;
overflow: hidden;
margin-bottom: 1rem;
}
.division__img {
transition: transform 0.4s;
transition: transform 0.4s;
filter: drop-shadow(0 0 20px rgba(30, 25, 177, 0.5));
}
.division__shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
hsla(0, 0%, 0%, 0) 50%,
hsl(0, 0%, 0%) 125%
);
}
.division__title {
font-size: var(--h3-font-size);
margin-bottom: 0.5rem;
}
/* .Division__icon {
display: inline-flex;
align-items: center;
column-gap: .25rem
var(--h1-font-size)var(--small-font-size);
font-family: var(--second-font);
font-weight: 500;
}
.division__icon i {
font-size: 1rem;
} */
.division__image:hover .division__img {
transform: scale(1.2);
}
/* ===== EXPLORE ===== */
.explore {
position: relative;
}
.explore__image {
position: absolute;
overflow: hidden;
}
.explore__img {
width: 100%;
height: auto;
object-position: center;
}
.explore__shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
hsl(0, 0%, 0%) 5%,
hsla(0, 0%, 0%, 0) 40%,
hsla(0, 0%, 0%, 0) 60%,
hsl(0, 0%, 0%) 92%
);
}
.explore__content {
position: relative;
padding-top: 16rem;
text-align: center;
row-gap: 2.5rem;
}
.explore__user {
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: 0.5rem;
}
.explore__profile {
width: 30px;
border-radius: 50%;
}
.explore__name {
font-size: var(--small-font-size);
color: var(--title-color);
}
/* ===== BREAKPOINT ===== */
/* Small Device */
@media screen and (max-width: 425px) {
.container {
margin-inline: 1rem;
}
.home {
padding-bottom: 55%;
padding-top: 70%;
}
.home__data {
padding-top: 4rem;
}
.home__title {
font-size: 3rem;
}
.about__img {
width: 300px;
height: auto;
}
.about {
padding-bottom: 20%;
}
.section__title {
font-size: 1.5rem;
}
.footer__data {
grid-template-columns: max-content;
}
}
/* Medium Device */
@media screen and (min-width: 576px) {
.home {
padding-top: 35%;
padding-bottom: 40%;
}
.home__container,
.about__container,
.explore__content,
.more__container {
grid-template-columns: 380px;
justify-content: center;
}
.about {
padding-bottom: 15%;
}
.about__img {
width: 300px;
height: auto;
}
.footer__data {
grid-template-columns: repeat(3, max-content);
}
}
@media screen and (min-width: 768px) {
.home__cards {
grid-template-columns: repeat(2, 240px);
}
.about__container,
.more__container {
grid-template-columns: repeat(2, 350px);
align-items: center;
}
.about__data,
.about__data .section__title,
.more__data,
.more__data .section__title {
text-align: initial;
}
.division__container {
grid-template-columns: repeat(2, 240px);
}
.explore__img {
width: 100%;
}
.more__image {
order: -1;
}
.footer__content {
grid-template-columns: repeat(2, max-content);
justify-content: space-between;
}
.footer__group {
flex-direction: row;
justify-content: space-between;
}
.footer__copy {
order: -1;
}
}
/* Large Device */
@media screen and (min-width: 1023px) {
.nav__close,
.nav__toggle {
display: none;
}
.nav__list {
flex-direction: row;
column-gap: 4rem;
}
.home {
padding-top: 30%;
padding-bottom: 25%;
}
.division__container {
grid-template-columns: repeat(3, 240px);
}
.section__title {
font-size: 1.7rem;
}
.footer__data {
grid-template-columns: repeat(4, max-content);
column-gap: 4.5rem;
}
}
@media screen and (min-width: 1152px) {
.container {
margin-inline: auto;
}
section {
padding-block: 7rem 2rem;
}
nav {
height: calc(var(--header-height) + 1.5rem);
}
.blur-header::after {
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
}
.home__container {
grid-template-columns: initial;
justify-content: initial;
row-gap: 4rem;
padding-top: 2rem;
}
.home__shadow {
height: 980px;
}
.home__data {
text-align: initial;
width: 480px;
}
.home__subtitle {
font-size: var(--h2-font-size);
}
.home__description {
margin-bottom: 2.5rem;
}
.home__cards {
grid-template-columns: repeat(4, 260px);
}
.home__cart-title {
left: 1.5rem;
bottom: 1.5rem;
}
.button {
column-gap: 1.5rem;
}
.about__container {
grid-template-columns: 400px 460px;
column-gap: 8.5rem;
padding-block: 1rem;
}
.about__description {
margin-bottom: 3rem;
}
.about__img {
width: 460px;
}
.division__container {
grid-template-columns: repeat(3, 300px);
column-gap: 3rem;
padding-top: 4rem;
}
.division__title {
font-size: var(--h2-font-size);
}
.division__icon {
font-size: var(--normal-font-size);
}
**.explore__img {
height: 100%;
}
.explore__content {
padding-top: 28rem;
grid-template-columns: 670px 1fr;
}
.explore__data,
.explore__data .section__title {
text-align: initial;
}
.explore__user {
justify-content: flex-end;
align-self: flex-end;
margin-bottom: 1.25rem;
}
**
.more__container {
grid-template-columns: 460px 340px;
column-gap: 8.5rem;
padding-block: 1rem 5rem;
}
.more__img {
width: 460px;
}
.more__description {
margin-bottom: 3rem;
}
.footer {
padding-block: 5rem 3rem;
}
.footer__title {
margin-bottom: 1.5rem;
}
.footer__group {
margin-top: 7rem;
}
.footer__social {
column-gap: 2rem;
}
.footer__social-link {
font-size: 1.5rem;
}
.scrollup {
right: 3rem;
}
}
Подробнее здесь: https://stackoverflow.com/questions/792 ... -height-wi
