about.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script src="https://momentjs.com/downloads/moment-with-locales.js"></script>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="css/all.css" />
    <link rel="stylesheet" href="css/about.css" />

	<link rel="stylesheet" type="text/css" href="resposive.css" />
	<style>
	/* تنسيق القائمة الجانبية */
#side-list-js {
    position: fixed;
    top: 0px;
    height: 100%;
    width: 0px;
    right: 0;
    background-color: #fff;
    overflow-y: hidden;
    transition: all 1s;
    z-index: 2;
float: right;
    display: block;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.59);
}
.side-list ul li{
    display: block;
    font-weight: 900;
    color: rgb(0, 0, 0);
clear: right;
height: 50px;
}
.side-list ul {
margin-top: 0px;
height: 430px;
    clear: right;
    margin-top: 50px;
    padding-top: 50px;


}

.nav-for-mobile {
/*
	display: none;
	color: white;
*/
}




.side-list li{
padding: 10px 10px 10px 10px;
height: 50px;
width: 100%;
overflow: hidden;
margin: 0px;
text-align: center;

}
.side-list a {
    color: #000000;
    direction: rtl;
text-align: center;
display: block;
width: 100%;
height: 50px;;
margin: 0px;
font-size: 15px;
font-weight: 900;
line-height: 2.5;
}
.side-list a:hover{
   color: #0f0f0f;
}
.side-list ul li:hover{
    display: block;
   border-radius: 3px;
   transition: 0.5s;
   background-color: rgb(253, 195, 6);

color: #000;
}
.nav-in-side {
height: 57px;
width: 100%;
background-color: #696969;
}
.logo-in-side {
width: 57px;
float: right;
height: 57px;
margin: 0px;
}
.side-list ul li, a:hover{
color: #000;
}
.side-list ul {
   padding: 0px 0px;
clear: both;
   
}
.close-menu-button {
   color: rgb(255, 166, 0);
   font-size: 25px;
position: absolute;
top: 7px;
   background: none;
border: none;
outline: none;
cursor: pointer;
	left: 10px;
	outline: none;
}
.close-menu-button:hover{
color: rgb(255, 167, 0)
}
/* side list end */
	</style>
</head>

<body>
	<!--القائمة الجانبية-->

<div id="side-list-js" class="side-list">
        <div class="nav-in-side">
            <img src="logo.png" class="logo-in-side">
            <button type="button" class="close-menu-button" onclick="closeSide()"><i class="fas fa-arrow-circle-right"></i></button>
                    <ul>
                                            
                        <a href="#"><li><i class="fas fa-home"></i>&nbsp;الرئيسية</li></a>
                        <a href="#"><li><i class="fas fa-shopping-cart"></i>&nbsp;منتجاتنا</li></a>
                        <a href="#"><li><i class="fas fa-tasks"></i>&nbsp;المشاريع</li></a>
                        <a href="#"><li><i class="fas fa-user-tie"></i>&nbsp;الموظفون</li></a>
                        <a href="#"><li><i class="fas fa-question-circle"></i>&nbsp;من نحن</li></a>
                        
                        
                    </ul>
                        
                        </div>
                    </div>
<!--القائمة الجانبية-->
    <div class="sar">
        <a href="#">
           <script>
      moment.locale('ar');
      var was = "اليوم: يوم " + moment().format('dddd') + " الموافق :" + moment().format("MMM Do YYYY");
      document.write(was);
		function openSide() {
    document.getElementById("side-list-js").style.width ="300px";
//		document.getElementById("mainbox").style.marginLeft="300px";
}
function closeSide(){
    document.getElementById("side-list-js").style.width ="0px";
//			document.getElementById("mainbox").innerHTML="&#9776;";
}
    </script>
        </a>
    </div>
    <!-- بداية النافبار  -->
    <div>
        <div id="row-res" class="row">
            <div class="col-lg-12 col-sm-12 col-xl-12 col-md-12">
                <ul>
                    <li><a href="index.html"> الصفحة الرئيسية <i class="fas fa-home"></i></a></li>
                    <li><a href="shop.html">منتجاتنا <i class="fas fa-shopping-cart"></i></a></li>
                    <li><a href="Projects.html">المشاريع <i class="fas fa-tasks"></i></a></li>
                    <li><a href="jops.html">الموظفون <i class="fas fa-user-tie"></i></a></li>
                    <li><a class="active" href="about.html">من نحن <i class="fas fa-question-circle"></i></a></li>
                    <li><a href="call-us.html">أتصل بنا <i class="fas fa-phone-square-alt"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- النهاية النافبار -->
		
	<!--القائمة الجانبية-->
<div class="nav-for-mobile" onclick="openSide()" ><i class="fas fa-bars"></i></div></ul>
<div id="side-list-js" class="side-list">
        <div class="nav-in-side">
            <img src="logo.png" class="logo-in-side">
            <button type="button" class="close-menu-button" onclick="closeSide()"><i class="fas fa-arrow-circle-right"></i></button>
                    <ul>
                                            
                        <a href="#"><li><i class="fas fa-home"></i>&nbsp;الرئيسية</li></a>
                        <a href="#"><li><i class="fas fa-shopping-cart"></i>&nbsp;منتجاتنا</li></a>
                        <a href="#"><li><i class="fas fa-tasks"></i>&nbsp;المشاريع</li></a>
                        <a href="#"><li><i class="fas fa-user-tie"></i>&nbsp;الموظفون</li></a>
                        <a href="#"><li><i class="fas fa-question-circle"></i>&nbsp;من نحن</li></a>
                        
                        
                    </ul>
                        
                        </div>
                    </div>
<!--القائمة الجانبية-->
    <!-- من نحن -->

    <div id="accordion" style="margin-top: 50px">

        <div class="card">
            <div class="card-header">
                <a class="card-link" data-toggle="collapse" href="#collapseOne" style="text-align: right;">
                    من نحن <i class="fas fa-info-circle"></i>
                </a>
            </div>
            <div id="collapseOne" class="collapse show" data-parent="#accordion">
                <div class="card-body">

                    شركة نحن نوجهك البرمجية
                    أسست عام 2019 في شهر مايو
                    ابتداءا خدمات مواقع الويب مجموعة بسيطة من الشباب الطموحيين العرب
                    لتصبح شركة ذات عنوان ومستقبل واعد تحصلت على موضع قدم على نجوم المجرة
                    تنافس الكبار من أحداث عمره
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
                    رؤيتنا  <i class="fas fa-plus-square"></i>
                </a>
            </div>
            <div id="collapseTwo" class="collapse" data-parent="#accordion">
                <div class="card-body">
                    أن نصبح رمزا من رموز العام الرقمي أسما ورقما
                    وان نتوسع بخدماتنا وتكون رائده على الويب وجميع الاجهزة الذكية 
                    لسنا الوحيدين ولكن نحن الافضل في زمننا.
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
                    أهدافنا <i class="fas fa-plus-square"></i>
                </a>
            </div>
            <div id="collapseThree" class="collapse" data-parent="#accordion">
                <div class="card-body">
                    <ul class="fa-ul" style="text-align: right">
                        <li>رضا عملائنا <i class="fas fa-check-square"></i></li><br />
                        <li>أن نصبح رمزا من رموز العالم الرقمي <i class="fas fa-check-square"></i></li><br />
                        <li>أن نجمع بين الفن والابتكار <i class="fas fa-check-square"></i></li><br />
                        <li>أن نصبح شركة ذات صيت على مستوى العالم <i class="fas fa-check-square"></i></li><br />
                      </ul>
                </div>
            </div>
        </div>

    </div>
</body>

</html>