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>
+    <link rel="stylesheet" href="./assests/css/style.css">
-    <script src="./assests/js/bootstrap.min.js"></script>
+    <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">
+                    <div class="col-6 contact">
-                <h1 class="bg-dark text-white">
+                        <i class="fas fa-envelope xs-hidden"><span>alirezashafiun@gmail.com</span></i>
-                    تست
+                        <i class="fas fa-phone"><span>09135951242</span></i>
-                </h1>
+                    </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>