موقع css and html (media query proplem)

Mohammed Hhhh · 3 أبريل 2022

السلام عليكم ورحمة الله وبركاته

قمت بعمل موقع في css و html

ولكن\\\

لدي مشكلة كبيرة مع ال media query

لم استطع حلها للأسف و اريد ان اعرف كيف اقوم بحلها

اكود html ///

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

<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">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <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=Montserrat:wght@500&display=swap" rel="stylesheet">
    <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=Roboto&display=swap" rel="stylesheet">
    <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=Noto+Sans:wght@200&display=swap" rel="stylesheet">
    <title>Programming Site</title>
    <script src="jsfile.js"></script>
    <!-- icon -->
    <link rel="shortcut icon" href="/myPhotos/JS1.png" type="image/x-icon">
</head>

<body>
    <header>
        <div class="textlogo"><a class="link">Programming</a></div>

        <nav>

            <!-- navigation bar -->

            <ul class="nav-bar">

                <li><a href="#">Home</a></li>
                <li><a href="#what-is-programming">What's programming</a></li>
                <li><a href="#contact">Contact with us</a></li>
                <li><a href="https://www.facebook.com/profile.php?id=100056578988785" target="_blank">About us</a></li>

            </ul>

        </nav>
        <!-- sign in botton  -->
        <a href="https://accounts.google.com/signin/v2/identifier?service=accountsettings&continue=https%3A%2F%2Fmyaccount.google.com%3Futm_source%3Daccount-marketing-page%26utm_medium%3Dgo-to-account-button&flowName=GlifWebSignIn&flowEntry=ServiceLogin"
            target="_blank"><button>Sign-in</button></a>
    </header>
    <!-- background of the site  -->

    <!-- main -->
    <main>
        <section class="first-slid">
            <div class="back-ground">
                <h1 class="big-title">Programming Is The Future</h1>
                <div class="icon1 icons"></div>
                <div class="icon2 icons"></div>
                <div class="icon3 icons"></div>
                <div class="icon4 icons"></div>
            </div>
        </section>
        <div id="what-is-programming">
            <section class="essay">
                <article class="wh-prog">
                    <h2 class="title-wh-pr"><strong>What Is Programming ?</strong></h2>
                    <p class="tx-wh-pr">Computer programming is the process of telling a computer to do certain things
                        by giving it
                        instructions <br> These instructions are called programs. A person who writes instructions is a
                        computer programmer <br> The instructions come in different languages; they are called
                        programming
                        languages.</p>
                </article>
            </section>
        </div>
        <section class="programming-lang">
            <article>
                <h2 class="title-of-what-is-lang">What Are The Best Programming Languages To Learn In 2022 ? </h2>
            </article>

            <article>
                <div class="my-circle my-circle0"></div>
                <p class="p-essay essay">Python is a computer programming language often used to build websites and
                    software, automate tasks, and conduct data analysis. Python is a general-purpose language, meaning
                    it can be used to create a variety of different programs and isn't specialized for any specific
                    problems.</p>
            </article>

            <article>
                <div class="my-circle1 my-circle"></div>
                <p class="c-essay">C# is an object-oriented programming language from Microsoft that aims to combine the
                    computing power of C++ with the programming ease of Visual Basic. C# is based on C++ and contains
                    features similar to those of Java. C# is designed to work with Microsoft's.</p>
            </article>

            <article>
                <div class="my-circle2 my-circle"></div>
                <p class="js-essay">JavaScript is a dynamic programming language that's used for web development, in web
                    applications, for game development, and lots more. It allows you to implement dynamic features on
                    web pages that cannot be done with only HTML and CSS.</p>
            </article>


            <article>
                <div class="my-circle3 my-circle"></div>
                <p class="jv-essay">Java is a high-level programming language developed by Sun Microsystems. It was
                    originally designed for developing programs for set-top boxes and handheld devices but later became
                    a popular choice for creating web applications.</p>
            </article>

        </section>


        <div class="contact-with-us" id="contact">
            <div class="hover">
                <h2 class="title-of-contact">Contact With Us</h2>
                <hr>

                <p>My E-mail: mhymwr847@gmail.com <br>
                    My Phone : +966 58 236 8201</p>
            </div>
        </div>


        <footer>
            Thank You Designed by Mohammed 😃
        </footer>
    </main>

</body>

</html>

كود css ////

/* THE GIDE
1- smoth scroll 
2- styling navigation bar
*/

/* smoth scroll  */
html{
    scroll-behavior: smooth ;
    font-family: 'Roboto', sans-serif;
}
*{
    box-sizing: border-box ;
    margin: 0;
    padding: 0 ;
}

::selection{
    color: #7889b5;
    background-color: rgb(35, 35, 35);
}

.back-ground{
    background-image: url(myPhotos/cool-background.png);
    width: 100% ;
    height: 900px ;
    background-position-y: 20px ;
    background-position: center ;
    background-repeat: no-repeat ;
    background-size: cover ;
    
}

/* styling navigation bar */
header{
    z-index: 123 ;
    display: flex ;
    width: 100% ;
    position: fixed ;
    background-color: rgb(0 0 86) ;
    justify-content: space-between ;
    align-items: center ;
    padding: 10px 10% ;
}

/*  logo animation  */
div a{
    font-size: 30px ;
    color: #7889b5 ;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800 ;
    cursor: pointer ;
    transition: 0.4s all ease ;
    -webkit-transition: all 0.4s ease ;
    -moz-transition: all 0.4s ease ;
    -ms-transition: all 0.4s ease ;
    -o-transition: all 0.4s ease ;
}
div a:hover{
    color: rgb(28, 28, 28) ;
    text-shadow: 3px 3px darkblue;
}


/* nav styling and animation */
nav ul li {
    display: inline ;
    padding: 5px 40px ;
    list-style-type: none ;
}


ul li a {
    color:#7889b5 ;
    text-decoration: none ;
    font-size: 22px  ;
    transition: 0.4s all ease ;
    -webkit-transition: 0.4s all ease ;
    -moz-transition: 0.4s all ease ;
    -ms-transition: 0.4s all ease ;
    -o-transition: 0.4s all ease ;
}

ul li a:hover{
    color: rgb(28, 28, 28) ;
}

button{
    background-color:#7889b5  ;
    border: 2px solid blue ;
    padding: 13px 23px ;
    border-radius: 50px ;
    -webkit-border-radius: 50px ;
    -moz-border-radius: 50px ;
    -ms-border-radius: 50px ;
    -o-border-radius: 50px ;
    color: white ;
    font-size: 17px ;
    transition: all 0.4s ease ;
    -webkit-transition: all 0.4s ease ;
    -moz-transition: all 0.4s ease ;
    -ms-transition: all 0.4s ease ;
    -o-transition: all 0.4s ease ;
}
button:hover{
    background-color: rgb(28, 28, 28) ; 
}
/* end header */
/* main */

/* section1 */
.big-title{
    position: relative ;
    top: 420px ;
    font-size: 80px ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    color: #7889b5 ;
    animation: big-title-animation  2s infinite;
    -webkit-animation: big-title-animation  2s infinite;
}
@keyframes big-title-animation{
    0%{color:#7889b5 }
    20%{color: rgb(83, 83, 224) ;}
    40%{color: rgb(86, 86, 86);}
    80%{
        color: white ;
    }
    100%{color:#7889b5 }
}

.icon1{
    width: 128px;
    position: relative ;
    background-image: url(myPhotos/python.png);
    height: 128px ;
    top: 78px;
    right: -145px;
    background-repeat: no-repeat;
    animation: 4s  icons-animation infinite;
    -webkit-animation: 4s  icons-animation infinite ease;
}

.icon2{
    width: 128px;
    position: relative ;
    background-image: url(myPhotos/c.png);
    height: 128px ;
    background-repeat: no-repeat;
    top: 457px;
    left: 300px;
    animation: 5s  icons-animation infinite;
    -webkit-animation: 5s  icons-animation infinite ease;
}

.icon3{
    width: 128px;
    left: 1200px;
    bottom: 89px;
    position: relative ;
    background-image: url(myPhotos/js.png);
    height: 128px ;
    background-repeat: no-repeat;
    animation: 8s  icons-animation infinite;
    -webkit-animation: 8s  icons-animation infinite ease;
}


.icon4{
    width: 128px;
    top: 272px;
    right: -1346px;
    position: relative ;
    background-image: url(myPhotos/jv.png);
    height: 128px ;
    background-repeat: no-repeat;
    animation: 9s  icons-animation infinite;
    -webkit-animation: 9s  icons-animation infinite;
}

/* animation code  */
@keyframes icons-animation{
    0%{opacity: 1 ;}
    50%{opacity: 0 ;}
    0%{opacity: 1 ;}
}

/* section 2 */

.wh-prog{
    padding: 100px 0 100px 0 ;
    background-color: #151019 ;

}

.title-wh-pr{
    padding: 10px 5px 5px 10px ;
    text-align: center ;
    /*background-color: rgb(28, 28, 28)  ;
    */color: white ;
    border-bottom: solid rgb(108, 108, 255) 3px;
    text-shadow: 0 0 20px rgb(0, 0, 131) ;
    width: 30% ;
    font-weight: 700 ;
    font-size: 30px ;
    margin-left: auto ;
    margin-right: auto ;
    /* border-radius: 0 ; */
    /* -webkit-border-radius: 0 ;
    -moz-border-radius: 0 ;
    -ms-border-radius: 0 ;
    -o-border-radius: 0 ; */
}
.tx-wh-pr{
    font-family: 'Noto Sans', sans-serif;
    position: relative ;
    top: 50% ;
    border: solid rgb(108, 108, 255) 3px;
    box-shadow: 0 0 10px 2px  rgb(30, 0, 255) ;
    margin-top: 30px ;
    padding: 20px 10px ;
    text-align: center ;
    background-color: rgb(28, 28, 28) ;
    color: rgb(255, 255, 255) ;
    width: 70% ;
    font-weight: 700 ;
    font-size: 20px ;
    margin-left: auto ;
    margin-right: auto ;
    border-radius: 8px ;
    -webkit-border-radius: 8px ;
    -moz-border-radius: 8px ;
    -ms-border-radius: 8px ;
    -o-border-radius: 8px ;
}
/* section 3 */
.programming-lang{
    height: 650px ;
    background-color: #151019 ;
    position: relative ;
}

.title-of-what-is-lang{
    color: white ;
    padding: 10px 5px 5px 10px ;
    text-align: center ;
    color: white ;
    border-bottom: solid rgb(108, 108, 255) 3px;
    text-shadow: 0 0 20px rgb(0, 0, 131) ;
    width: 60% ;
    font-weight: 700 ;
    font-size: 30px ;
    margin-left: auto ;
    margin-right: auto ;
    
}

/* lanuage definition */
.my-circle{
    background-image: url(myPhotos/p1.png);
    background-repeat: no-repeat ;
    background-position: center ;
    background-color: rgb(62, 62, 224) ;
    outline: rgb(52 52 52) 5px solid;
    width: 70px;
    padding: 5px;
    position: absolute;
    left: 7%;
    bottom: 77%;
    height: 70px;
    z-index: 1 ;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.p-essay{
    padding: 30px ;
    background-color: rgb(52, 52, 52) ;
    position: absolute ;
    color:white ;
    width: 500px ;
    position: absolute ;
    left: 10% ;
    bottom: 60%;
    border-radius: 8px ;
    -webkit-border-radius: 8px ;
    -moz-border-radius: 8px ;
    -ms-border-radius: 8px ;
    -o-border-radius: 8px ;
}


/* socend */
.my-circle1{
    background-image: url(myPhotos/C1.png);
    background-repeat: no-repeat ;
    background-position: center ;
    background-color: rgb(62, 62, 224) ;
    outline: rgb(52 52 52) 5px solid;
    position: absolute;
    right: 7%;
    top: 54%;
    
    height: 70px;
    z-index: 1 ;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.c-essay{
    padding: 30px ;
    background-color: rgb(52, 52, 52) ;
    color:white ;
    width: 500px ;
    position: absolute ;
    left: 10% ;
    top: 60%;
    border-radius: 8px ;
    -webkit-border-radius: 8px ;
    -moz-border-radius: 8px ;
    -ms-border-radius: 8px ;
    -o-border-radius: 8px ;
}

/* third */
.my-circle2{
    background-image: url(myPhotos/JS1.png);
    background-repeat: no-repeat ;
    background-position: center ;
    background-color: rgb(62, 62, 224) ;
    outline: rgb(52 52 52) 5px solid;
    position: absolute;
    left: 88%;
    top: 54% ;
    
    height: 70px;
    z-index: 1 ;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.js-essay{
    padding: 30px ;
    background-color: rgb(52, 52, 52) ;
    color:white ;
    width: 500px ;
    position: absolute ;
    right: 10% ;
    top: 60%;
    border-radius: 8px ;
    -webkit-border-radius: 8px ;
    -moz-border-radius: 8px ;
    -ms-border-radius: 8px ;
    -o-border-radius: 8px ;
}

/* fourth */
.my-circle3{
    background-image: url(myPhotos/J1.png);
    background-repeat: no-repeat ;
    background-position: center ;
    background-color: rgb(62, 62, 224) ;
    outline: rgb(52 52 52) 5px solid;
    position: absolute;
    left: 88%;
    bottom: 77%;
    
    height: 70px;
    z-index: 1 ;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.jv-essay{
    padding-top: 38px;
    padding: 30px ;
    height: 156px ;
    margin-top: 2px ; 
    background-color: rgb(52, 52, 52) ;
    color:white ;
    width: 500px ;
    position: absolute ;
    right: 10% ;
    bottom: 60%;
    border-radius: 8px ;
    -webkit-border-radius: 8px ;
    -moz-border-radius: 8px ;
    -ms-border-radius: 8px ;
    -o-border-radius: 8px ;
}

footer{
    background-image: url(myPhotos/cool-background\ \(1\).png);
    height: 100px;
    padding-top: 25px ;
    padding-bottom: 25px ;
    text-shadow: 0 0 15px black , 0 0 15px black ;
    text-align: center ;
    color: white ;
    font-size: 40px ;
}
/* contact with us  */
.contact-with-us{
    padding: 50px 30px ;
    position: relative ;
    background-image: url(myPhotos/cool-background\ \(2\).png);
}
hr{
    display: inline ;
    background-color: blue;
    height: 6px;
    width: 154px;
    position: absolute;
    top: 84px;
    left: 30px;
    border: blue 3px solid ;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
}
.hover{width: 400px ;}
.hover:hover hr{
    width: 380px ;
    background-color: darkblue;
    border: darkblue 3px solid ;
}
.title-of-contact{
    font-size: 30px;
    margin-bottom: 15px ;
    border-bottom: 2px black solid ;
    width: 400px;

}

وشكرا لكم على مجهودكم الطيب

Wael Aljamal · 4 أبريل 2022

بتاريخ On 4/3/2022 at 21:35 قال Mohammmed Mahmoud:

شكرا على مجهودك و محاولتك مساعدتي و انا حاولت ان اقوم بجعل الموقع يتجاوب مع الشاشات الاخرى و قمت بالعمل على الاكواد التي ارسلتها و لكن لم اعرف ما الذي اعمله ارجو ان تقومو بارسال الكود و شكرا لكم

يمكنك الاستفادة من شيفرة ال CSS التي ارفقها المدرب أسامة مبدئياً لوضع تنسيفات CSS معينة حسب عرض كل شاشة لعناصر الصفح HTML لديك.

سيتم تنفيذ ما بداخل media حسب شرط عرض الصفحة، و انت ضمن المتصفح افتح أدوات المطورين F12 ثم إبدأ بتصغير الشاشة وعند وصولها لعرض معين و في حال خرب التنسيق لديك، يكون عليك إضافة قاعدة media للعرض هذا لإصلاح التنسيق فما تكتبه ضمنه سيتم تنفيذه عند هذا العرض و تجاهل التنسيقات السابقة للخواص التي وضعتها فيه.

يمكنك مشاهدة اي درس فيديو يطبق على عمل موقع متجاوب responsive web design و قراءة مقالة:

بلال زيادة · 3 أبريل 2022

هل يمكنك تحديد المشكلة بشكل أكبر و شرحها ، كي أتمكن من مساعدتك بشكلٍ أفضل ؟

Mohammed Hhhh · 3 أبريل 2022

بتاريخ 42 دقائق مضت قال بلال زيادة:

هل يمكنك تحديد المشكلة بشكل أكبر و شرحها ، كي أتمكن من مساعدتك بشكلٍ أفضل ؟

المشكلة هي عندما اقوم بعرض الموقع على مثلا الجوال يصبح الموقع غير منظم وشكله غير جيد و بحثت عن المشكله و لم اعرف الحل

أسامة زيادة · 3 أبريل 2022

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

المشكلة هي عندما اقوم بعرض الموقع على مثلا الجوال يصبح الموقع غير منظم وشكله غير جيد و بحثت عن المشكله و لم اعرف الحل

لقد تتبعت أكواد جميعها ، ولقد لاحظت أنك لم تقم بإنشاء media query ؟ أرجو منك البدء في كتابة التعديلات الخاصة في media query وفي حال واجهات مشاكل بالتأكيد سوف نساعدك لحلها .

لقد أرفقت لك الأحجام المناسبة لعمل media query حتى يتجاوب الموقع مع جميع الشاشات

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Mohammed Hhhh · 3 أبريل 2022

شكرا على مجهودك و محاولتك مساعدتي و انا حاولت ان اقوم بجعل الموقع يتجاوب مع الشاشات الاخرى و قمت بالعمل على الاكواد التي ارسلتها و لكن لم اعرف ما الذي اعمله ارجو ان تقومو بارسال الكود و شكرا لكم

موقع css and html (media query proplem)

السؤال

Mohammed Hhhh

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

بلال زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mohammed Hhhh

رابط هذا التعليق

شارك على الشبكات الإجتماعية

أسامة زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mohammed Hhhh

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية