nav section created

2 years ago · 1ba80978f7
parent 9607ee4010
commit 1ba80978f7
4 changed files with 119 additions and 10 deletions
--- a/respiveProject/assests/css/_contact.css
+++ b/respiveProject/assests/css/_contact.css
@ -0,0 +1,41 @@
+.container-fluid-custom {
+    background-color: rgb(1, 1, 126);
+    color: #fff;
+    height: 40px;
+}
+
+.contact {
+    font-size: 15px;
+}
+
+.contact i {
+    color: orange;
+    vertical-align: -10px;
+    margin-right: 15px;
+}
+
+.contact span {
+    color: #fff;
+    margin: 5px;
+    vertical-align: -1px;
+}
+
+.social-media i {
+    vertical-align: -10px;
+    padding: 10px;
+    width: 40px;
+}
+
+.social-media i:hover {
+    background-color: orange;
+}
+
+.social-media a {
+    color: #fff;
+}
+
+@media (max-width: 1000px) {
+    .xs-hidden {
+        display: none !important;
+    }
+}
--- a/respiveProject/assests/css/style.css
+++ b/respiveProject/assests/css/style.css
@ -1,3 +1,5 @@
+@import url(./_contact.css);
+
@font-face {
    font-family: "iranSans";
    src: url('../fonts/IRANSansXFaNum-Medium.ttf');
@ -5,10 +7,53 @@
    font-size: normal;
 }

+html {
+    direction: rtl;
+}
+
 *,
 body {
    font-family: iranSans;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
+    direction: rtl;
+}
+
+.nav {
+    display: block;
+    background-color: #efefef;
+    overflow: hidden;
+}
+
+.nav a {
+    float: right;
+    color: #333;
+    text-align: center;
+    padding: 14px 16px;
+    font-size: 16px;
+}
+
+.active {
+    border-bottom: 2px solid orange;
+}
+
+.nav a:hover {
+    border-bottom: 2px solid orange;
+    text-decoration: none;
+}
+
+.icon {
+    display: none;
+}
+
+@media screen and (max-width: 1000px) {
+    .nav a:not(:first-child) {
+        display: none;
+    }
+
+    .nav a.icon {
+        display: block;
+        float: left !important;
+    }
 }
--- a/respiveProject/assests/js/main.js
+++ b/respiveProject/assests/js/main.js
--- a/respiveProject/index.html
+++ b/respiveProject/index.html
@ -4,24 +4,47 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./assests/css/style.css">
    <link rel="stylesheet" href="./assests/css/bootstrap.css">
    <link rel="stylesheet" href="./assests/css/bootstrap-reboot.min.css">
-    <script src="./assests/js/bootstrap.js"></script>
-    <script src="./assests/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="./assests/css/style.css">
+    <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
    <title>صفحه اصلی </title>
 </head>

-<body>
+<body class="text-right">
+    <div class="container-fluid container-fluid-custom">
+        <div class="row">
            <div class="container ">
                <div class="row">
-            <div class="col-lg-5">
-                <h1 class="bg-dark text-white">
-                    تست
-                </h1>
+                    <div class="col-6 contact">
+                        <i class="fas fa-envelope xs-hidden"><span>alirezashafiun@gmail.com</span></i>
+                        <i class="fas fa-phone"><span>09135951242</span></i>
+                    </div>
+                    <div class="col-6 text-left social-media">
+                        <a href=""><i class="fas fa-paper-plane"></i></a>
+                        <a href=""><i class="fab fa-instagram"></i></a>
+                        <a href="" class="xs-hidden"><i class="fab fa-facebook"></i></a>
+                        <a href="" class="xs-hidden"><i class="fab fa-twitter "></i></a>
+                        <a href=""><i class="fas fa-rss"></i></a>
                    </div>
                </div>
            </div>
+        </div>
+    </div>
+    <nav class="nav" id="my-nav">
+        <a href=""><i class="fa fa-graduation-cap"></i></a>
+        <a href="" class="active">خانه</a>
+        <a href="">دوره های آموزشی</a>
+        <a href="">درباره ما</a>
+        <a href="">تیم ما</a>
+        <a href="">مطالب </a>
+        <a href="">درباره ما</a>
+        <a href="javascript:void(0)" class="icon"><i class="fas fa-bars    "></i></a>
+    </nav>
+
+    <script src="./assests/js/main.js"></script>
+    <script src="./assests/js/bootstrap.js"></script>
+    <script src="./assests/js/bootstrap.min.js"></script>
 </body>

 </html>