ایجاد شده در ۱۹ اسفند ۱۴۰۱
HTML
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index pagetitle>
<link rel="stylesheet" href="assets/css/index-style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
head>
<body dir="rtl">
<header>
<nav>
<ul >
<li class="has-sub-menu-1"><i class="fa fa-home" style="font-size:18px ;vertical-align: -2px;color: white;">i><a href=""> خانهa>
<ul class="sub-menu-1" >
<li><a href="" >متن 1a>li>
<li><a href="" >متن 2a>li>
<li><a href="" >متن 3a>li>
ul>
li>
<li><a href=""><i class="fa fa-flag" style="font-size:18px ;vertical-align: -1px; color: white;">i> قرارگاهa>li>
<li><i class="fa fa-phone-square" style="font-size:18px ;vertical-align: -2px;color: white;">i><a href=""> پشتیبانیa>li>
<li><i class="fa fa-vcard-o" style="font-size:16px ;vertical-align: -2px;color: white;">i><a href=""> در باره ماa>li>
ul>
nav>
header>
<main>
<section class="section-1">
section>
main>
<footer>
footer>
body>
html>
CSS
@font-face {
font-family: 'shabnam-medium';
src: url(../font/Shabnam-Medium.woff)format('woff2'),
url(../font/Shabnam.woff)format('woff');
}
:root{
--primary-color: rgba(176, 176, 176, 0.838);
--box-color: #4e4e4e;
--main-color: #B7C4CF;
--head-color: #183e4b;
}
/*style full page*/
*{
font-family: 'shabnam-medium';
box-sizing: border-box;
padding: 0px;
margin: 0px;
direction: rtl;
}
/*style body*/
body{
background-color: var(--primary-color);
}
/*header style*/
header{
width: 100%;
height: auto;
background-color: var(--box-color);
box-shadow: 0px 10px 20px 0px #7f7f7f;
}
/*menu*/
header nav{
text-align: center;
padding: 10px;
}
header ul li{
display: inline;
padding: 10px;
}
header nav ul li a{
text-decoration: none;
color: white;
font-size: 12px;
}
header nav ul li:hover{
background-color: #515151;
border-radius: 3px;
}
/*sum menu home*/
ul .has-sub.menu-1{
position: relative;
}
ul li .sub-menu-1{
top: 50px;
left: 50px;
position: absolute;
}
/*main style*/
section.section-1{
max-width: 1141px;
min-height: 500px;
margin: 0 auto;
margin-top: 8px;
background-color: var(--main-color);
border-radius: 4px;
box-shadow: 0px 1px 20px 0px #575757;
}
/*footer*/
/*footer{
width: 100%;
min-height: 50px;
background-color: var(--box-color);
box-shadow: 0px 10px 20px 0px #7f7f7f;
margin-top: 10px;
}*/
