اذهب إلى المحتوى
  • 0

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

Mohammed Hhhh

بواسطة Mohammed Hhhh

 مشاركة

السؤال

Mohammed Hhhh عضو نشيط

Mohammed Hhhh

نشر
نشر

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

صورة 

Screenshot 2022-06-03 150150.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

Recommended Posts

  • 0
محمد أبو عواد عضو نشيط

محمد أبو عواد

نشر
نشر
بتاريخ 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 
 

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Mohammed Hhhh عضو نشيط

Mohammed Hhhh

نشر
  • الكاتب
نشر
بتاريخ 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;
    }
}
/*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/
/*المشكله هنا هنا هنا*/

و شكرا لك 

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...