HTML CSS Visual Studio Code

هدا الموقع يظهر أفضل في المتصفحات الحديثة مع جافاسكريبت مفعلة.

HTML CSS Visual Studio Code

Anbilarabi

سورس كود الدرس الخاص

<!DOCTYPE html>
<html>

<head>
    <title>My app - anbilarabi.com</title>

    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
        }
        
        .main-wrapper {
            background-image: url(./images/people.jpeg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position-x: center;
            display: block;
            width: 100vw;
            height: 100vh;
            clear: both;
            position: relative;
            margin: 0px !important;
            padding: 0px !important;
        }
        
        .main-wrapper::before {
            display: block;
            content: " ";
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 0;
            background: #000000b3;
        }
        
        .logo-container {
            width: 80%;
            height: 100px;
            /* background: #FF5722; */
            margin: 100px auto auto;
            position: relative;
        }
        
        body>div>div.logo-container>img {
            width: 100%;
        }
        
        .middle-section {
            display: block;
            height: 120px;
            /* background: #2196F3; */
            margin-top: 50%;
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            position: relative;
        }
        
        body>div>div.middle-section>h3 {
            font-size: 72px;
            text-align: center;
            color: white;
            font-weight: bold;
        }
        
        body>div>div.middle-section>h3 span {
            font-weight: normal;
            margin-right: 20px;
        }
        
        .footer {
            position: fixed;
            bottom: 50px;
            display: block;
            height: 320px;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        
        .footer-buttons {
            position: relative;
            display: block;
            height: 120px;
            /* background: #9C27B0; */
            width: 80%;
            margin-top: 30px;
            margin-left: auto;
            margin-right: auto;
        }
        
        body>div>div.footer>div.footer-buttons>a {
            display: block;
            width: 100%;
            font-size: 3.5em;
            text-align: center;
            text-decoration: none;
            color: white;
            background: #03A9F4;
            padding: 15px;
            padding-top: 20px;
            padding-bottom: 20px;
            border: 1px solid gray;
        }
        
        .footer-bottom {
            position: relative;
            display: block;
            height: 120px;
            /* background: #FFEB3B; */
            width: 80%;
            margin-top: 30px;
            margin-left: auto;
            margin-right: auto;
        }
        
        body>div>div.footer>div.footer-bottom>p {
            font-size: 3em;
            text-align: center;
            color: #fffffe;
            padding: 10px;
        }
        
        body>div>div.footer>div.footer-bottom>p>a {
            color: white;
            font-style: italic;
        }
    </style>
</head>

<body>
    <!-- Main Layout-->
    <div class="main-wrapper">
        <div class="logo-container">
            <img src="https://hub.anbilarabi.com/assets/logo-oixdnb1f.png" />
        </div>
        <div class="middle-section">
            <h3><span>learn</span>Programming</h3>
        </div>
        <div class="footer">
            <div class="footer-buttons">

                <a href="#" class="main-button">Get Started</a>

            </div>
            <div class="footer-bottom">
                <p>Have an account <a href="#" class="">Login</a></p>
            </div>
        </div>

    </div>
    <!-- /Main Layout-->
</body>

</html>

Anbilarabi

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0">
    <title>My app - anbilarabi.com</title>

    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
        }
        
        .main-wrapper {
    background-image: url(./images/people.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    display: block;
    width: 100vw;
    height: 100vh;
    clear: both;
    position: relative;
    margin: 0px !important;
    float: left;
    padding: 0px !important;
}
        
        .main-wrapper::before {
            display: block;
            content: " ";
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 0;
            background: #000000b3;
        }
        
        .logo-container {
            width: 80%;
            height: 100px;
            /* background: #FF5722; */
            margin: 10px auto auto;
            position: relative;
        }
        
        body>div>div.logo-container>img {
            width: 100%;
        }
        
        .middle-section {
            display: block;
            height: 120px;
            /* background: #2196F3; */
            margin-top: 50%;
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            position: relative;
        }
        
        body>div>div.middle-section>h3 {
            font-size: 72px;
            text-align: center;
            color: white;
            font-weight: bold;
        }
        
        body>div>div.middle-section>h3 span {
            font-weight: normal;
            margin-right: 20px;
        }
        
        .footer {
            position: fixed;
            bottom: 50px;
            display: block;
            height: 320px;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        
        .footer-buttons {
            position: relative;
            display: block;
            height: 120px;
            /* background: #9C27B0; */
            width: 80%;
            margin-top: 30px;
            margin-left: auto;
            margin-right: auto;
        }
        
        body>div>div.footer>div.footer-buttons>a {
            display: block;
            width: 100%;
            font-size: 3.5em;
            text-align: center;
            text-decoration: none;
            color: white;
            background: #03A9F4;
            padding: 15px;
            padding-top: 20px;
            padding-bottom: 20px;
            border: 1px solid gray;
        }
        
        .footer-bottom {
            position: relative;
            display: block;
            height: 120px;
            /* background: #FFEB3B; */
            width: 80%;
            margin-top: 30px;
            margin-left: auto;
            margin-right: auto;
        }
        
        body>div>div.footer>div.footer-bottom>p {
            font-size: 3em;
            text-align: center;
            color: #fffffe;
            padding: 10px;
        }
        
        body>div>div.footer>div.footer-bottom>p>a {
            color: white;
            font-style: italic;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            margin: 0;
        }
        
        html,
        body,
        body div,
        span,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        abbr,
        address,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        samp,
        small,
        strong,
        sub,
        sup,
        var,
        b,
        i,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section,
        time,
        mark,
        audio,
        video {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent;
        }
        /*
=============================================== 01. BASE STYLES (1140px) ===============================================
*/
        
.logo-container {
    width: 300px;
    height: 100px;
}

.footer-buttons{
    width: 300px;
    height: 60px;
}

.footer-bottom {
    height: 60px;
}
body>div>div.footer>div.footer-bottom>p {
    font-size: 1.2em;
    text-align: center;
    color: #fffffe;
    padding: 10px;
}

body>div>div.footer>div.footer-buttons>a {
    display: block;
    width: 100%;
    font-size: 1.5em;
    height: 50px;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #03A9F4;
    padding: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid gray;
}

.footer {
    position: fixed;
    bottom: 0px;
    display: block;
    height: 320px;
    width: 100%;

    margin-left: auto;
    margin-right: auto;
}

.middle-section {
    display: block;
    height: 120px;
    margin-top: 80px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

body>div>div.middle-section>h3 {
    font-size: 42px;
    text-align: center;
    color: white;
    font-weight: bold;
}

        /*
=============================================== 01.5. #DESKTOP wide (1139+++px) ===============================================
*/
        
        @media only screen and (min-width: 1139px) {
            .AhmadNaser-Item {
                /*CSS GOES HERE Facebook.com/Dev.Ahmadnaser*/
            }
        }
        /*
=============================================== 02. #DESKTOP (960px) ===============================================
*/
        /* Note: Design for a width of 960px */
        
        @media only screen and (min-width: 959px) and (max-width: 1140px) {
            .AhmadNaser-Item {
                /*CSS GOES HERE Facebook.com/Dev.Ahmadnaser*/
            }
        }
        /*
=============================================== 03. #Tablet (Portrait) ===============================================
*/
        /* Note: Design for a width of 768px */
        
        @media only screen and (min-width: 768px) and (max-width: 959px) {
            .AhmadNaser-Item {
                /*CSS GOES HERE Facebook.com/Dev.Ahmadnaser*/
            }
        }
        /*
=============================================== 04. #Mobile (Portrait) ===============================================
*/
        /* Note: Design for a width of 320px */
        
        @media only screen and (max-width: 767px) {
            .logo-container {
    width: 70%;
    height: 80px;
}

body>div>div.middle-section>h3 {
    font-size: 26px;
}

.footer {
    position: fixed;
    bottom: -130px;
}
body>div>div.footer>div.footer-buttons>a {
    display: block;
    width: 90%;
    font-size: 1.2em;
    height: 40px;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #03A9F4;
    padding: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid gray;
    margin: 0 auto;
}

.footer-buttons {
    width: 300px;
    height: 60px;
    position: relative;
    top: 50px;
}

        }
        /*
=============================================== 05. #Mobile (Landscape) ===============================================
*/
        /* Note: Design for a width of 480px */
        
        @media only screen and (min-width: 480px) and (max-width: 767px) {
            .AhmadNaser-Item {
                /*CSS GOES HERE Facebook.com/Dev.Ahmadnaser*/
            }
        }
    </style>
</head>
<body>
    <div class="main-wrapper ">
        <div class="logo-container ">
            <img src="https://hub.anbilarabi.com/assets/logo-oixdnb1f.png " />
        </div>
        <div class="middle-section ">
            <h3><span>learn</span>Programming</h3>
        </div>
        <div class="footer ">
            <div class="footer-buttons ">

                <a href="# " class="main-button ">Get Started</a>

            </div>
            <div class="footer-bottom ">
                <p>Have an account <a href="# " class=" ">Login</a></p>
            </div>
        </div>

    </div>
    <!-- /Main Layout-->
</body>

</html>