nav section created

master
Alireza Shafiun 2 years ago
parent 9607ee4010
commit 1ba80978f7

@ -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;
}
}

@ -1,14 +1,59 @@
@import url(./_contact.css);
@font-face {
font-family: "iranSans";
src: url('../fonts/IRANSansXFaNum-Medium.ttf') ;
src: url('../fonts/IRANSansXFaNum-Medium.ttf');
font-weight: normal;
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;
}
}

@ -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>
<div class="container">
<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>
Loading…
Cancel
Save