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>

Anbilarabi

<!DOCTYPE html>
<html dir="rtl" lang="ar">
  <head>
    <title>My App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
    <style>

.custom-logo {
    width: 100px;
    height: 100px;
    text-align: center;
    display: block;
    margin: 30px auto;
    border-radius: 50%;
    -webkit-box-shadow: 2px 2px 5px 0px rgb(0 0 0);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
    box-shadow: 2px 2px 5px 0px rgb(0 0 0);
}

body{
background: rgb(2,0,36);
background: linear-gradient(3deg, rgba(2,0,36,1) 0%, rgba(52,69,113,1) 35%, rgba(53,110,153,1) 100%);
background-repeat: no-repeat;
height: 100vh;
}

.bottom-row{
    position: absolute;
    bottom: 10px;
}

.col-12x {
    display: block;
    width: 400px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.2em;
}

.bottom-row a{
    color:white;
}

.input-group-text {
    background-color: transparent;
    border: none;
    color: #ffffff;
}

.form-control {
    color: #ffffff;
    background-color: transparent;
    background-clip: padding-box;
    border-bottom: 1px solid white !important;
    border: none;
}

.form-group.button-signup {
    margin-top: 30px;
    width: 100%;
    text-align: center;
}

.form-group {
    margin-top: 30px;
}

.form-group.button-signup button.btn.btn-primary.btn-block {
    width: 100%;
    background: transparent;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 2px solid #d9d9d9;
}

.form-group.button-signup button.btn.btn-primary.btn-block i {
    font-size: 2em;
    color: #c9c9c9;
}

.forgetpass{
    color: #c9c9c9;
}

.btnx {
    width: 100%;
    margin-top: 15px;
    padding-top: 12px;
    padding-bottom: 12px;
}

a.btn.btn-block.btn-outline-primary.btnx.fb {
    color: white;
    background: #2d4ca6;
}
a.btn.btn-block.btn-outline-info.btnx.gg {
    background: white;
    color: #606060;
}
i.fab.fa-google {
    color: #ea4335;
}
    </style>
  </head>
  <body>
    <div class="container">
       
            <div class="row">
           
              <div class="col col-xl">
  <div  class="custom-logo-container">
      <img class="custom-logo" src="http://trovacamporella.com/img/trovacamporella-fiat500.png" />
  </div>
  <form>
	<div class="form-group">
	<div class="input-group">
		<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-user"></i> </span>
		 </div>
		<input name="" class="form-control" placeholder="Email or login" type="email">
	</div> <!-- input-group.// -->
	</div> <!-- form-group// -->
	<div class="form-group">
	<div class="input-group">
		<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
		 </div>
	    <input class="form-control" placeholder="******" type="password">
	</div> <!-- input-group.// -->
	</div> <!-- form-group// -->
	<div class="form-group button-signup">
	<button type="submit" class="btn btn-primary btn-block"> <i class="fa fa-check"></i>  </button>
	</div> <!-- form-group// -->
	<p class="text-center"><a href="#" class="btn forgetpass">هل نسيت كلمة المرور؟</a></p>
    </form>
    <div class="row">  <div class="col col-xl"><a href="" class="btn btn-block btn-outline-primary btnx fb"> <i class="fab fa-facebook-f"></i>   Login via facebook</a></div></div>
    <div class="row">  <div class="col col-xl">    <a href="" class="btn btn-block btn-outline-info btnx gg"> <i class="fab fa-google"></i>   Login via Google</a></div></div>

    



              </div>
           
            </div>
          
            <div class="row bottom-row">

                <div class="col-12x"><a href="" class=""> <i class="fa fa-life-ring"></i> المساعدة</a>
                <a href="" class=""> <i class="fa fa-edit"></i> سجل حساب جديد</a></div>
            </div>
      </div>
   

  </body></html>