Мобильная версияconst primaryHeader = document.querySelector(".primary-header");
const navToggle = document.querySelector(".mobile-nav-toggle");
const primaryNav = document.querySelector(".primary-navigation");
navToggle.addEventListener("click", () => {
primaryNav.hasAttribute("data-visible") ?
navToggle.setAttribute("aria-expanded", false) :
navToggle.setAttribute("aria-expanded", true);
primaryNav.toggleAttribute("data-visible");
primaryHeader.toggleAttribute("data-overlay");
});< /code>
:root {
--clr-accent-500: #56452e;
--clr-accent-400: #ab9368;
--clr-accent-300: #c1a156;
--clr-accent-100: hsl(13, 100%, 96%);
--clr-primary-400: #0d0b18;
--clr-neutral-900: #0a0a0a;
--clr-neutral-100: hsl(0, 0%, 100%);
--ff-primary: "Noto kufi Arabic", sans-serif;
--ff-body: var(--ff-primary);
--ff-heading: var(--ff-primary);
--fw-regular: 400;
--fw-semi-bold: 500;
--fw-bold: 700;
--fs-100: 0.5rem;
--fs-200: 0.70rem;
--fs-300: 0.8125rem;
--fs-400: 0.875rem;
--fs-500: 0.9375rem;
--fs-600: 1rem;
--fs-700: 1.875;
--fs-750: 2rem;
--fs-800: 2.5rem;
--fs-900: 2.5rem;
--fs-body: var(--fs-600);
--fs-primary-heading: var(--fs-800);
--fs-secondary-heading: var(--fs-750);
--fs-nav: var(--fs-500);
--fs-button: var(--fs-300);
--size-100: 0.25rem;
--size-200: 0.5rem;
--size-300: 0.75rem;
--size-400: 1rem;
--size-500: 1.5rem;
--size-600: 2rem;
--size-700: 3rem;
--size-800: 4rem;
--size-900: 5rem;
}
@media (min-width: 50rem) {
:root {
--fs-body: var(--fs-500);
--fs-primary-heading: var(--fs-900);
--fs-secondary-heading: var(--fs-800);
--fs-nav: var(--fs-300);
}
}
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
font: inherit;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
html,
body {
height: 100%;
}
/* Set core body defaults */
body {
text-rendering: optimizeSpeed;
line-height: 1.5;
background: rgba(170, 187, 153, 0);
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture,
svg {
max-width: 100%;
display: block;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* genral styling */
body {
font-size: var(--fs-body);
font-family: var(--ff-body);
color: var(--clr-primary-400);
}
p:not([class]) {
opacity: 0.7;
max-width: 35ch;
}
p[data-width="wide"] {
max-width: 42ch;
}
/* button */
.button {
display: inline-flex;
cursor: pointer;
text-decoration: none;
border: 0;
border-radius: 100vmax;
padding: 1.25em 2.5em;
line-height: 1;
font-weight: var(--fw-bold);
font-size: var(--fs-button);
color: var(--clr-neutral-100);
background-color: var(--clr-accent-400);
box-shadow: 0 1.125em 1em -1em var(--clr-accent-500);
}
.button[data-type="inverted"] {
background-color: var(--clr-neutral-100);
color: var(--clr-accent-400);
}
.button[data-shadow="none"] {
box-shadow: none;
}
.button:hover,
.button:focus-visible {
background-color: var(--clr-accent-300);
}
.button[data-type="inverted"]:hover,
.button[data-type="inverted"]:focus-visible {
background-color: var(--clr-neutral-100);
color: var(--clr-accent-300);
}
/* navigation */
.primary-header {
padding-top: 0;
background: repeating-linear-gradient(rgba(156, 131, 33, 0.36), transparent)
}
.nav-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-nav-toggle {
display: none;
}
.nav-list {
font-size: var(--fs-nav);
display: flex;
gap: clamp(var(--size-400), 5vw, var(--size-700));
font-weight: var(--fw-semi-bold);
}
.nav-list a {
color: var(--clr-primary-400);
text-decoration: none;
}
.nav-list a:hover,
.nav-list a:focus {
text-decoration: none;
color: var(--clr-accent-400);
}
@media (max-width: 50em) {
.primary-navigation {
display: none;
position: fixed;
padding: var(--size-700);
inset: 9.5rem var(--size-400) auto;
max-width: 23rem;
margin-right: auto;
background: var(--clr-neutral-100);
border-radius: var(--size-100);
box-shadow: 0 0 0.75em rgb(0, 0, 0, 0.05);
z-index: 100;
}
.primary-header[data-overlay]::before {
content: "";
position: fixed;
inset: 0;
background-image: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .8));
}
.nav-list {
font-size: var(--fs-nav);
display: grid;
gap: var(--size-600);
text-align: center;
font-weight: var(--fw-bold);
}
.primary-navigation ul li {
border-bottom: 0.5px solid lightgrey;
}
.primary-navigation[data-visible] {
display: block;
}
.mobile-nav-toggle {
display: block;
position: fixed;
top: auto;
left: 10%;
z-index: 100;
cursor: pointer;
background: transparent;
border: 0;
padding: 0.5rem;
}
.mobile-nav-toggle .icon-close {
display: none;
}
}
/* footer */
.logo {
height: 28vh;
}
.primary-footer-wrapper {
display: grid;
gap: var(--size-700);
grid-template-areas:
"form"
"nav"
"logo-social";
}
.primary-footer-logo-social {
grid-area: logo-social;
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.primary-footer-nav {
grid-area: nav;
}
.primary-footer-form {
grid-area: form;
display: grid;
align-content: space-between;
}
.primary-footer form {
display: flex;
gap: var(--size-200);
}
input:where([type="text"], [type="email"]) {
border-radius: 100vw;
border: 0;
padding: var(--size-200) var(--size-300);
}
@media (max-width: 50em) {
.primary-footer-wrapper>* {
margin-inline: auto;
}
}
@media (min-width: 50em) {
.primary-footer-wrapper {
grid-template-areas:
"logo-social nav form";
}
.primary-footer-logo-social {
align-items: flex-start;
}
}
/* footer Nav */
.footer-nav {
columns: 2;
gap: clamp(var(--size-200), 30vw, var(--size-900));
}
.footer-nav a {
color: var(--clr-neutral-100);
text-decoration: none;
}
.footer-nav a:is(:hover, :focus) {
color: var(--clr-accent-400);
}
/* social list */
.social-list {
display: flex;
gap: var(--size-700);
}
.social-icon {
width: var(--size-700);
aspect-ratio: 1;
fill: var(--clr-neutral-100);
}
.social-list a:is(:hover, :focus) .social-icon {
fill: var(--clr-accent-400)
}
@media (min-width: 50em) {
.social-list {
gap: var(--size-300);
}
.social-icon {
width: var(--size-600);
}
}
/* cta */
.cta {
position: relative;
isolation: isolate;
text-align: center;
}
@media (min-width: 50em) {
.cta {
text-align: left;
}
}
.cta::before {
content: "";
position: absolute;
inset: 0;
background-image: url("images/bg-tablet-pattern.svg"),
url("images/bg-tablet-pattern.svg");
background-position: -15rem -5rem, 80rem -42rem;
background-repeat: no-repeat;
z-index: -1;
opacity: 0.1;
}
/* numbered items */
.numbered-items {
counter-reset: count;
}
.numbered-items li {
counter-increment: count;
display: flex;
align-items: start;
}
.numbered-items div {
display: grid;
position: relative;
align-items: center;
column-gap: var(--size-400);
grid-template-columns: min-content 1fr;
}
.numbered-items_title {
grid-column: 2 /3;
grid-row: 1 /2;
line-height: 1;
}
.numbered-items_body {
font-size: var(--size-400);
grid-column: 1 / -1;
}
@media (min-width: 30em) {
.numbered-items_body {
grid-column: 2 /-1;
}
}
.numbered-items div::before {
content: "0" counter(count);
display: flex;
align-items: center;
background-color: var(--clr-accent-400);
color: var(--clr-neutral-100);
font-weight: var(--fw-bold);
padding: 0 var(--size-600);
height: 40px;
border-radius: 100vw;
grid-row: 1 / 2;
grid-column: 1 /2;
}
.numbered-items div::after {
content: '';
display: block;
grid-column: 1 /-1;
grid-row: 1 / 2;
inset: 0 -100vw 0 0;
z-index: -1;
background-color: orange;
height: 40px;
border-radius: 100vw;
}
/* Utility classes */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rec(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.container {
--max-width: 1110px;
--padding: 1rem;
width: min(var(--max-width), 100% - (var(--padding) * 2));
margin-inline: auto;
}
.even-columns {
display: grid;
gap: 1rem;
}
@media (min-width: 50em) {
.even-columns {
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
}
.vertical-align-center {
align-items: center;
}
.justify-self-end {
justify-self: end;
}
@media(min-width: 50em) {
.justify-self-end-md {
justify-self: end;
}
}
:where(.flow>:not(:first-child)) {
margin-top: var(--flow-spacer, 2.4em);
}
.text-primary-400 {
color: var(--clr-primary-400)
}
.text-accent-400 {
color: var(--clr-accent-400);
}
.text-accent-100 {
color: var(--clr-accent-100);
}
.text-neutral-100 {
color: var(--clr-neutral-100);
}
.text-neutral-900 {
color: var(--clr-neutral-900);
}
.bg-primary-400 {
background-color: var(--clr-primary-400)
}
.bg-accent-400 {
background-color: var(--clr-accent-400);
}
.bg-accent-100 {
background-color: var(--clr-accent-100);
}
.bg-neutral-100 {
background-color: var(--clr-neutral-100);
}
.bg-neutral-900 {
background-color: var(--clr-neutral-900);
}
.fw-bold {
font-weight: var(--fw-bold);
}
.fw-semi-bold {
font-weight: var(--fw-semi-bold);
}
.fw-regular {
font-weight: var(--fw-regular);
}
.fs-primary-heading {
font-size: var(--fs-primary-heading);
line-height: 1.1;
}
.fs-secondary-heading {
font-size: var(--fs-secondary-heading);
line-height: 1.1;
}
.fs-300 {
font-size: var(--fs-300);
}
.fs-400 {
font-size: var(--fs-400);
}
.fs-500 {
font-size: var(--fs-500);
}
.fs-600 {
font-size: var(--fs-600);
}
.padding-block-900 {
padding-block: var(--size-900);
}
.padding-block-700 {
padding-block: var(--size-700);
}
.display-sm-none {
display: none;
}
@media(min-width: 50em) {
.display-md-inline-flex {
display: inline-flex;
}
}
/* fixing */
.fs-talk-heading {
font-size: 1.25rem;
line-height: 1.3;
color: #56452e;
font-weight: var(--fw-bold);
}
.talk {
padding-top: 2rem;
}
blockquote {
padding: 3em;
text-align: center;
color: green;
line-height: 2;
}
@media(max-width: 50em) {
article {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 35px;
padding: 1rem;
border-radius: 35px;
}
figure img {
height: 20vw;
display: block;
}
.talk {
padding: 3rem 3rem 0 3rem;
}
}
figure img {
border-radius: 7ch;
margin-inline: auto;
min-height: 25vw;
width: 100%;
}
figure {
text-align: center;
background: linear-gradient(transparent 0%, transparent 50%, #f7e4c256 50%, #f7e4c256 100%);
margin-bottom: 1em;
border-radius: 6ch;
}
figcaption {
padding: 1rem 0;
}
.hdith {
color: rgba(135, 207, 235, 0.82);
}< /code>
[*]
Support Gaza
Menu
تبرع
كن عونًا لأهلك في غزة.. تبرعك يُنقذ حياة
كل عمل خير له أثر
قال النبي ﷺ:
"والله في عون العبد ما كان العبد في عون أخيه"
تبرعك يوفر طعامًا، مأوى، وعلاجًا للمحتاجين.
تبرع الآن
انضم لقائمة الداعمين
حقوق النشر © 2025. جميع الحقوق محفوظة.
< /code>
< /div>
< /div>
< /p>
Моя проблема:
-Однажды на странице в мобильном размере, это показывает половину контента. Y. < /P>
Пробое:
переполнение: скрыто, переполнение -х. Высота: 100%; < /p>
Я пробовал все, я узнал ....
Мне нужна ваша помощь, ребята. Например, проблема в том, что я следовал за видео на YouTube, строке по линии ... но это происходит: (
Подробнее здесь: https://stackoverflow.com/questions/795 ... o-be-out-o
