مشكلة في تجاوب الموقع مع الشاشات الصغيرة

Mohammed Hhhh · 3 يونيو 2022

انا لدي مشكله مع جزء ال FOOTER حيث انه عندما اصغر الصوره يخرج للأعلى لم افهم ما السبب انا حليتها عن طريق ال POSITION و لكن اظن ان حلي غير منطقي

صورة

محمد أبو عواد · 3 يونيو 2022

بتاريخ 47 دقائق مضت قال Mohammmed Mahmoud:

كود html


<!DOCTYPE html>
<html lang="en" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="in this site we will do the best to help you!!!">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="fontAwsome/all.css">
    <link rel="stylesheet" href="fontAwsome/fontawesome.min.css">
    <link rel="shortcut icon" href="images/dev.png" type="image/x-icon">

    <title>DEVs</title>
</head>
<!-- 
    (index)
- navBar
- home-section
- lastestProjects-section
- aboutUs-section
- footer-section
-->

<body>

    <!-- navBar -->
    <header>
        <!-- site logo -->
        <nav class="nav-bar-container">
            <div class="logo"><i class="fa-solid fa-plug"></i></div>
            <ul class="lnav-bar-inks">
                <li><a href="#userss">آراء المستخدمين</a></li>
                <li><a href="#lastest-p">آخر مشاريعنا</a></li>
            </ul>
            <button class="sign-in" onclick="sign_f()">تسجيل الدخول</button>
        </nav>
    </header>

    <div class="container">
        <!-- home-section -->
        <div class="home">
            <div class="aboutus">
                <h1>تطوير </h1>
                <p> نحن شركة <span>تطوير</span> نقوم بتطوير و برمجة المواقع</p>
            </div>
            <i class="fa-solid fa-code"></i>
        </div>

        <!-- 
    - lastestProjects-section
    -->
        <div class="lastestProjects" id="lastest-p">
            <h1 class="our-projects">آخر مشاريعنا</h1>
            <div class="project">
                <div class="about-project">
                    <i class="fa-solid fa-fire fire"></i>
                    <h3>مشروع 1</h3>
                    <p>هذا المشروع هو عباره عن موقع بالأخضر و الأبيض و هذا مجرد مثال مثال مثال مثال مثال</p>
                </div>
                <img src="images/one.jpg" alt="No-img" width="400px" style="border-radius: 20px ;" draggable="false">
            </div>


            <div class="project">
                <div class="about-project">
                    <i class="fa-solid fa-fire fire"></i>
                    <h3>مشروع 2</h3>
                    <p>هذا مشروع ابيض و ازرق و هذا مجرد مثال مثال و هذا مجرد كتابه فقط هي مجرد مثال مثال</p>
                </div>
                <img src="images/one.jpg" alt="No-img" width="400px" style="border-radius: 20px ;" draggable="false">
            </div>


            <div class="project">
                <div class="about-project">
                    <i class="fa-solid fa-fire fire"></i>
                    <h3>مشروع 3</h3>
                    <p>هذا مشروع ابيض و ازرق و هذا مجرد مثال مثال و هذا مجرد كتابه فقط هي مجرد مثال مثال</p>
                </div>
                <img src="images/one.jpg" alt="No-img" width="400px" style="border-radius: 20px ;" draggable="false">
            </div>
        </div>

        <!-- aboutUs-section -->
        <div class="about-us-section" id="userss">
            <h1 class="about-us-section-title our-projects">
                آراء المستخدمين
            </h1>
            <div class="grid-users-container">
                <div class="user1 user">
                    <i class="fa-solid fa-user"></i>
                    <h5 class="user-name">محمد</h5>
                    <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم
                        هذا نص مجرد مثال مثال</p>
                </div>
                <div class="user2 user">
                    <i class="fa-solid fa-user"></i>
                    <h5 class="user-name">عمر</h5>
                    <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم
                        هذا نص مجرد مثال مثال</p>
                </div>
                <div class="user3 user">
                    <i class="fa-solid fa-user"></i>
                    <h5 class="user-name">فيصل</h5>
                    <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم
                        هذا نص مجرد مثال مثال</p>
                </div>
                <div class="user4 user">
                    <i class="fa-solid fa-user"></i>
                    <h5 class="user-name">يوسف</h5>
                    <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم
                        هذا نص مجرد مثال مثال</p>
                </div>
                <div class="user5 user">
                    <i class="fa-solid fa-user"></i>
                    <h5 class="user-name">زياد</h5>
                    <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم
                        هذا نص مجرد مثال مثال</p>
                </div>
                <div class="user6 user">
                    <i class="fa-solid fa-user"></i>
                    <h5 class="user-name">أحمد</h5>
                    <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم
                        هذا نص مجرد مثال مثال</p>
                </div>
            </div>
        </div>

    </div>
  <!--المشكله هنا هنا هنا-->
    <!--المشكله هنا هنا هنا-->
    <!--المشكله هنا هنا هنا-->
    <!--المشكله هنا هنا هنا-->
    <!-- footer section -->
        <footer>
            <h1>تطوير.كوم</h1>
            <p>تم تطوير هذا الموقع من قبل محمد محمود حيمور</p>
            <div class="icons">
                <a href="https://www.facebook.com/profile.php?id=100056578988785" target="_blank"><i
                        class="fa-brands fa-facebook icon" style="margin:0 10px  ;"></i></a>
                <a href="https://github.com/mohammed710" target="_blank"><i class="fa-brands fa-github icon"
                        style="margin:0 10px  ;"></i></a>
                <a href="https://twitter.com/dVv0h9EgfoEOK62" target="_blank"><i class="fa-brands fa-twitter icon"
                        style="margin:0 10px  ;"></i></a>
            </div>
        </footer>
    <!--المشكله هنا هنا هنا-->
    <!--المشكله هنا هنا هنا-->


        <!-- java script file  -->
    <script src="main.js"></script>
</body>

</html>

كود css


/* font-family: 'Tajawal', sans-serif; */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --back-gound-color: #292F36;
    --dark-perpule: rgb(84, 92, 153);
    --text-color: white;
}

body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--back-gound-color);
}

html {
    scroll-behavior: smooth;
}

/* <!-- 
    (index)
- navBar
- home-section
- lastestProjects-section
- aboutUs-section
- footer-section
--> */


/* navBar */
.nav-bar-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 5px;
}

/* logo */
.nav-bar-container .logo {
    font-size: 5vh;
    color: var(--dark-perpule);
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    -o-transition: 0.5s all;
}

.nav-bar-container .logo:hover {
    color: #292f36ba;
}

/* --- */
.nav-bar-container .lnav-bar-inks li {
    padding: 0 10px;
    display: inline-block;
    list-style: none;
    font-weight: 700;
}

.nav-bar-container .lnav-bar-inks li a {
    text-decoration: none;
    color: var(--text-color);
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    -o-transition: 0.5s all;
}

.nav-bar-container .lnav-bar-inks li a:hover {
    color: rgb(160, 160, 160);

}

.nav-bar-container .sign-in {
    background-color: var(--dark-perpule);
    width: 100px;
    height: 40px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    color: var(--text-color);
    font-family: 'Tajawal', sans-serif;
    padding: 5px;
    border: none;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}

.nav-bar-container .sign-in:hover {
    background-color: #212b36;
}

/* container */
.container {
    max-width: 100%;
}

/* home-section */
.home {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: var(--text-color);
    height: 90vh;
    margin-bottom: 110px;
}

.home .aboutus h1 {
    text-shadow: 5px 3px var(--dark-perpule);
    font-size: 5rem;
}

.home .aboutus p {
    font-size: 1rem;
}

.home .aboutus p span {
    text-shadow: 0 0 5px var(--dark-perpule);
}

.home i {
    font-size: 5rem;
    text-shadow: 5px 3px var(--dark-perpule);
}

.lastestProjects {
    height: 140vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.our-projects {
    font-size: 50px;
    margin-bottom: 20px;
    text-shadow: 5px 3px var(--dark-perpule);
    color: white;
}

.project {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 50px;
    background-color: #1a222a;
    border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -ms-border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
    color: white;
}

.project .about-project {
    padding: 40px;
}

.project .fire {
    color: rgb(188, 88, 0);
    text-shadow: 0 0 5px red;
    font-size: 1.5rem;
}

.about-project h3 {
    margin-bottom: 10px;
}

.project img {
    border-radius: 10px 0 0 10px;
}

/* - aboutUs-section */
.about-us-section {
    height: 120vh;
}

.about-us-section .about-us-section-title {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}

.about-us-section .grid-users-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    color: var(--text-color);
    padding: 50px;
}

.about-us-section .grid-users-container .user {
    background-color: #1a222a;
    padding: 50px 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.user-name {
    font-size: 1.3rem;
    padding: 5px 0 5px 0;
}

/* - footer-section */
/*المشكله هنا هنا هنا *//*المشكله هنا هنا هنا */
/*المشكله هنا هنا هنا */
/*المشكله هنا هنا هنا */

footer {
    background-color: #1a222a;
    color: white;
    text-align: center;
    display: block;
}

@keyframes footer_h1_animation {
    0% {
        text-shadow: 2px 1px var(--dark-perpule);
    }

    20% {
        text-shadow: 2px 1px rgb(65, 65, 65);
    }

    40% {
        text-shadow: 5px 3px black;
    }

    80% {
        text-shadow: 5px 3px rgb(61, 8, 110);
    }

    100% {
        text-shadow: 2px 1px var(--dark-perpule);
    }
}

footer h1 {
    text-shadow: 2px 1px var(--dark-perpule);
    padding: 20px;
    animation: footer_h1_animation infinite ease 2s;
    -webkit-animation: footer_h1_animation infinite ease 2s;
}

.icons {
    padding: 20px 0 5px 0;
    font-size: 20px;
}

.icon {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}

.icon:hover {
    color: #212b36;
}

a {
    color: var(--text-color);
}

@media screen and (max-width: 800px) {
    .project {
        flex-direction: column;
    }

    .lastestProjects {
        height: 200vh;
        justify-content: space-around;
    }

    .lastestProjects img {
        display: block;
        width: 300px;
        padding: 10px;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
    }

    .about-us-section .grid-users-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .home {
        height: 80vh;
        margin: 0;
    }

    html {
        font-size: 13px;
    }

    .about-us-section {
        height: 150vh;
    }
}

/*المشكله هنا هنا هنا */
/*المشكله هنا هنا هنا */


/* media rules */
/*المشكله هنا هنا هنا*//*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/

@media screen and (max-width: 500px) {
    footer {
        position: absolute;
        bottom: 0;
        top: 540vh;
        background-color: #1a222a;
        color: white;
        text-align: center;
        display: block;
    }


    .home {
        height: 110vh;
        text-align: center;
    }

    .home i {
        display: none;
    }

    .project {
        flex-direction: column;
        padding: 5px;

    }

    .lastestProjects {
        height: 200vh;
        justify-content: space-around;
    }

    .lastestProjects img {
        width: 200px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    .about-us-section .grid-users-container {
        grid-template-columns: 1fr;
    }

    .about-us-section {
        height: 120vh;
    }

    .about-us-section .about-us-section-title {
        font-size: 2rem;
        margin: 10px 0 0 0;
    }
}

@media screen and (max-width: 300px) {
    img{
        border-radius: 20px  ;
        -webkit-border-radius: 20px  ;
        -moz-border-radius: 20px  ;
        -ms-border-radius: 20px  ;
        -o-border-radius: 20px  ;
}

    html {
        font-size: 8px;
    }
    footer{
        background-color: #1a222a;
        color: white;
        text-align: center;
        display: block;
    }
}

@media screen and (max-width: 150px) {
    html {
        font-size: 5px;
    }

}
@media screen and (max-width: 150px){
    html::before{
        content: " you cant opne this site from this site ";
    }
    body{
        display: none;
    }
}
/*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/

و شكرا لك

المشكلة ليست في العنصر footer بل المشكلة في العصنر الذي لديه الصنف about-us-section , العنصر footer من المفترض أن يعرض بشكل طبيعي ولكن ما يؤثر عليه بهذا الشكل هو القسم about-us-section , بداية ليس من الجيد دائما استخدام الخاصية position لضبط تموضع العناصر فذلك يصعب الأمور في مختلف الشاشات , اذن لا داعي لهذا الكود الخاص بالعنصر footer في الشاشات التي عرضها 500 بكسل أو اقل

    footer {
        position: absolute;
        bottom: 0;
        top: 540vh;
        background-color: #1a222a;
        color: white;
        text-align: center;
        display: block;
    }

يمكنك ازالته , أما مسبب المشكلة الاساسي هو أنك تحدد طول العنصر about-us-section بشكل محدد وباستخدام اداة القياس vh في مختلف الشاشات, لاحظ

 .about-us-section {
        height: 120vh;
    }


.about-us-section {
        height: 150vh;
    }

أرجو منك استخدام الطول الطول الطبيعي للقسم على أن تكون الخاصية height قيمتها auto كالتالي

hight:auto

اذا اردت مزيدا من الارتفاع يمكنك استخدام الحواشي الداخلية والهوامش الخارجية باستخدام padding او margin

Wael Aljamal · 3 يونيو 2022

أرجو إرفاق الشيفرات البرمجية كنص ضمن محرر الأكواد.

Mohammed Hhhh · 3 يونيو 2022

بتاريخ 19 دقائق مضت قال Wael Aljamal:

أرجو إرفاق الشيفرات البرمجية كنص ضمن محرر الأكواد.

كود html

<!DOCTYPE html>
<html lang="en" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="in this site we will do the best to help you!!!">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="fontAwsome/all.css">
    <link rel="stylesheet" href="fontAwsome/fontawesome.min.css">
    <link rel="shortcut icon" href="images/dev.png" type="image/x-icon">

    <title>DEVs</title>
</head>
<!-- 
    (index)
- navBar
- home-section
- lastestProjects-section
- aboutUs-section
- footer-section
-->

<body>

    <!-- navBar -->
    <header>
        <!-- site logo -->
        <nav class="nav-bar-container">
            <div class="logo"><i class="fa-solid fa-plug"></i></div>
            <ul class="lnav-bar-inks">
                <li><a href="#userss">آراء المستخدمين</a></li>
                <li><a href="#lastest-p">آخر مشاريعنا</a></li>
            </ul>
            <button class="sign-in" onclick="sign_f()">تسجيل الدخول</button>
        </nav>
    </header>

    <div class="container">
        <!-- home-section -->
        <div class="home">
            <div class="aboutus">
                <h1>تطوير </h1>
                <p> نحن شركة <span>تطوير</span> نقوم بتطوير و برمجة المواقع</p>
            </div>
            <i class="fa-solid fa-code"></i>
        </div>

        <!-- 
    - lastestProjects-section
    -->
        <div class="lastestProjects" id="lastest-p">
            <h1 class="our-projects">آخر مشاريعنا</h1>
            <div class="project">
                <div class="about-project">
                    <i class="fa-solid fa-fire fire"></i>
                    <h3>مشروع 1</h3>
                    <p>هذا المشروع هو عباره عن موقع بالأخضر و الأبيض و هذا مجرد مثال مثال مثال مثال مثال</p>
                </div>
                <img src="images/one.jpg" alt="No-img" width="400px" style="border-radius: 20px ;" draggable="false">
            </div>


            <div class="project">
                <div class="about-project">
                    <i class="fa-solid fa-fire fire"></i>
                    <h3>مشروع 2</h3>
                    <p>هذا مشروع ابيض و ازرق و هذا مجرد مثال مثال و هذا مجرد كتابه فقط هي مجرد مثال مثال</p>
                </div>
                <img src="images/one.jpg" alt="No-img" width="400px" style="border-radius: 20px ;" draggable="false">
            </div>


            <div class="project">
                <div class="about-project">
                    <i class="fa-solid fa-fire fire"></i>
                    <h3>مشروع 3</h3>
                    <p>هذا مشروع ابيض و ازرق و هذا مجرد مثال مثال و هذا مجرد كتابه فقط هي مجرد مثال مثال</p>
                </div>
                <img src="images/one.jpg" alt="No-img" width="400px" style="border-radius: 20px ;" draggable="false">
            </div>
        </div>

        <!-- aboutUs-section -->
        <div class="about-us-section" id="userss">
            <h1 class="about-us-section-title our-projects">
                آراء المستخدمين
            </h1>
            <div class="grid-users-container">
                <div class="user1 user">
                    <i class="fa-solid fa-user"></i>
                    <h5 class="user-name">محمد</h5>
                    <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم
                        هذا نص مجرد مثال مثال</p>
                </div>
                <div class="user2 user">
                    <i class="fa-solid fa-user"></i>
                    <h5 class="user-name">عمر</h5>
                    <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم
                        هذا نص مجرد مثال مثال</p>
                </div>
                <div class="user3 user">
                    <i class="fa-solid fa-user"></i>
                    <h5 class="user-name">فيصل</h5>
                    <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم
                        هذا نص مجرد مثال مثال</p>
                </div>
                <div class="user4 user">
                    <i class="fa-solid fa-user"></i>
                    <h5 class="user-name">يوسف</h5>
                    <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم
                        هذا نص مجرد مثال مثال</p>
                </div>
                <div class="user5 user">
                    <i class="fa-solid fa-user"></i>
                    <h5 class="user-name">زياد</h5>
                    <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم
                        هذا نص مجرد مثال مثال</p>
                </div>
                <div class="user6 user">
                    <i class="fa-solid fa-user"></i>
                    <h5 class="user-name">أحمد</h5>
                    <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم
                        هذا نص مجرد مثال مثال</p>
                </div>
            </div>
        </div>

    </div>
  <!--المشكله هنا هنا هنا-->
    <!--المشكله هنا هنا هنا-->
    <!--المشكله هنا هنا هنا-->
    <!--المشكله هنا هنا هنا-->
    <!-- footer section -->
        <footer>
            <h1>تطوير.كوم</h1>
            <p>تم تطوير هذا الموقع من قبل محمد محمود حيمور</p>
            <div class="icons">
                <a href="https://www.facebook.com/profile.php?id=100056578988785" target="_blank"><i
                        class="fa-brands fa-facebook icon" style="margin:0 10px  ;"></i></a>
                <a href="https://github.com/mohammed710" target="_blank"><i class="fa-brands fa-github icon"
                        style="margin:0 10px  ;"></i></a>
                <a href="https://twitter.com/dVv0h9EgfoEOK62" target="_blank"><i class="fa-brands fa-twitter icon"
                        style="margin:0 10px  ;"></i></a>
            </div>
        </footer>
    <!--المشكله هنا هنا هنا-->
    <!--المشكله هنا هنا هنا-->


        <!-- java script file  -->
    <script src="main.js"></script>
</body>

</html>

كود css

/* font-family: 'Tajawal', sans-serif; */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --back-gound-color: #292F36;
    --dark-perpule: rgb(84, 92, 153);
    --text-color: white;
}

body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--back-gound-color);
}

html {
    scroll-behavior: smooth;
}

/* <!-- 
    (index)
- navBar
- home-section
- lastestProjects-section
- aboutUs-section
- footer-section
--> */


/* navBar */
.nav-bar-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 5px;
}

/* logo */
.nav-bar-container .logo {
    font-size: 5vh;
    color: var(--dark-perpule);
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    -o-transition: 0.5s all;
}

.nav-bar-container .logo:hover {
    color: #292f36ba;
}

/* --- */
.nav-bar-container .lnav-bar-inks li {
    padding: 0 10px;
    display: inline-block;
    list-style: none;
    font-weight: 700;
}

.nav-bar-container .lnav-bar-inks li a {
    text-decoration: none;
    color: var(--text-color);
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    -o-transition: 0.5s all;
}

.nav-bar-container .lnav-bar-inks li a:hover {
    color: rgb(160, 160, 160);

}

.nav-bar-container .sign-in {
    background-color: var(--dark-perpule);
    width: 100px;
    height: 40px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    color: var(--text-color);
    font-family: 'Tajawal', sans-serif;
    padding: 5px;
    border: none;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}

.nav-bar-container .sign-in:hover {
    background-color: #212b36;
}

/* container */
.container {
    max-width: 100%;
}

/* home-section */
.home {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: var(--text-color);
    height: 90vh;
    margin-bottom: 110px;
}

.home .aboutus h1 {
    text-shadow: 5px 3px var(--dark-perpule);
    font-size: 5rem;
}

.home .aboutus p {
    font-size: 1rem;
}

.home .aboutus p span {
    text-shadow: 0 0 5px var(--dark-perpule);
}

.home i {
    font-size: 5rem;
    text-shadow: 5px 3px var(--dark-perpule);
}

.lastestProjects {
    height: 140vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.our-projects {
    font-size: 50px;
    margin-bottom: 20px;
    text-shadow: 5px 3px var(--dark-perpule);
    color: white;
}

.project {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 50px;
    background-color: #1a222a;
    border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -ms-border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
    color: white;
}

.project .about-project {
    padding: 40px;
}

.project .fire {
    color: rgb(188, 88, 0);
    text-shadow: 0 0 5px red;
    font-size: 1.5rem;
}

.about-project h3 {
    margin-bottom: 10px;
}

.project img {
    border-radius: 10px 0 0 10px;
}

/* - aboutUs-section */
.about-us-section {
    height: 120vh;
}

.about-us-section .about-us-section-title {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}

.about-us-section .grid-users-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    color: var(--text-color);
    padding: 50px;
}

.about-us-section .grid-users-container .user {
    background-color: #1a222a;
    padding: 50px 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.user-name {
    font-size: 1.3rem;
    padding: 5px 0 5px 0;
}

/* - footer-section */
/*المشكله هنا هنا هنا *//*المشكله هنا هنا هنا */
/*المشكله هنا هنا هنا */
/*المشكله هنا هنا هنا */

footer {
    background-color: #1a222a;
    color: white;
    text-align: center;
    display: block;
}

@keyframes footer_h1_animation {
    0% {
        text-shadow: 2px 1px var(--dark-perpule);
    }

    20% {
        text-shadow: 2px 1px rgb(65, 65, 65);
    }

    40% {
        text-shadow: 5px 3px black;
    }

    80% {
        text-shadow: 5px 3px rgb(61, 8, 110);
    }

    100% {
        text-shadow: 2px 1px var(--dark-perpule);
    }
}

footer h1 {
    text-shadow: 2px 1px var(--dark-perpule);
    padding: 20px;
    animation: footer_h1_animation infinite ease 2s;
    -webkit-animation: footer_h1_animation infinite ease 2s;
}

.icons {
    padding: 20px 0 5px 0;
    font-size: 20px;
}

.icon {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}

.icon:hover {
    color: #212b36;
}

a {
    color: var(--text-color);
}

@media screen and (max-width: 800px) {
    .project {
        flex-direction: column;
    }

    .lastestProjects {
        height: 200vh;
        justify-content: space-around;
    }

    .lastestProjects img {
        display: block;
        width: 300px;
        padding: 10px;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
    }

    .about-us-section .grid-users-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .home {
        height: 80vh;
        margin: 0;
    }

    html {
        font-size: 13px;
    }

    .about-us-section {
        height: 150vh;
    }
}

/*المشكله هنا هنا هنا */
/*المشكله هنا هنا هنا */


/* media rules */
/*المشكله هنا هنا هنا*//*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/

@media screen and (max-width: 500px) {
    footer {
        position: absolute;
        bottom: 0;
        top: 540vh;
        background-color: #1a222a;
        color: white;
        text-align: center;
        display: block;
    }


    .home {
        height: 110vh;
        text-align: center;
    }

    .home i {
        display: none;
    }

    .project {
        flex-direction: column;
        padding: 5px;

    }

    .lastestProjects {
        height: 200vh;
        justify-content: space-around;
    }

    .lastestProjects img {
        width: 200px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    .about-us-section .grid-users-container {
        grid-template-columns: 1fr;
    }

    .about-us-section {
        height: 120vh;
    }

    .about-us-section .about-us-section-title {
        font-size: 2rem;
        margin: 10px 0 0 0;
    }
}

@media screen and (max-width: 300px) {
    img{
        border-radius: 20px  ;
        -webkit-border-radius: 20px  ;
        -moz-border-radius: 20px  ;
        -ms-border-radius: 20px  ;
        -o-border-radius: 20px  ;
}

    html {
        font-size: 8px;
    }
    footer{
        background-color: #1a222a;
        color: white;
        text-align: center;
        display: block;
    }
}

@media screen and (max-width: 150px) {
    html {
        font-size: 5px;
    }

}
@media screen and (max-width: 150px){
    html::before{
        content: " you cant opne this site from this site ";
    }
    body{
        display: none;
    }
}
/*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/

و شكرا لك

مشكلة في تجاوب الموقع مع الشاشات الصغيرة

السؤال

Mohammed Hhhh

3 أجوبة على هذا السؤال

Recommended Posts

محمد أبو عواد

Wael Aljamal

Mohammed Hhhh

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية