اصلاح کدhtml css
سلام من کدهامو میفرستم و میخواستم بدونم که کدهام تا چه میزان استاندارد و اگه اشکالی داخا کدهام هست بهم بگید
<!DOCTYPE html>
<html lang="en" dir="rtl">
<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>Document</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<!----------------------Start Header--------------------------->
<div class="header-contianer">
<!-- Header Logo -->
<div class="header-logo">
<img src="/logo.png" alt="logo">
</div>
<!-- Header Logo -->
<!-- Start Nav -->
<div class="header-nav">
<ul class="nav-link">
<li class="nav-item"><a href="index.html">صفحه اصلی</a></li>
<li class="nav-item"><a href="#">فروشگاه</a></li>
<li class="nav-item"><a href="#">خدمات ما</a></li>
<li class="nav-item"><a href="#">نمونه کار </a></li>
<li class="nav-item"><a href="#">درباره ما</a></li>
<li class="nav-item"><a href="#">ارتباط با ما</a></li>
</ul>
</div>
<!-- End Nav -->
</div>
<!----------------------End Header----------------------------->
<div class="banner">
<div class="banner-text">
<h1 class="banner-h1">طراحی کارت ویزیت</h1>
<p>پروژه خود را به فریلنسر های حرفه ای کارلنسر بسپارید</p>
<span class="h2">طراحی کارت ویزیت</span>
</div>
</div>
css
@font-face {
font-family: 'IRANSans';
src: url(/iran-sans/IRANSans.ttf);
}
@font-face {
font-family: 'IRANSans-Black';
src: url(/iran-sans/IRANSans_Black.ttf);
}
@font-face {
font-family: 'IRANSans-Light';
src: url(/iran-sans/IRANSans_Light.ttf);
}
@font-face {
font-family: 'IRANSans-Black';
src: url(/iran-sans/IRANSan);
}
* {
box-sizing: border-box;
margin: 0;
}
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--acacac-color: #acacac;
--light-background-color: rgba(45,214,184,0.05);
--second-primary-color: #e4911f;
--second-primary-1-color: #ffe047;
--primary-color: #4160f5;
--primary-1-color: #4c69f6;
--primary-2-color: #5873f8;
--primary-3-color: #6b83fd;
--primary-4-color: #93a5ff;
--secondary-color: #2dd6b8;
--secondary-1-color: #3de8ca;
--secondary-2-color: #4bf6d8;
--secondary-3-color: #6efce3;
--secondary-4-color: #98ffed;
--secondary-5-color: #4fcf75;
--tertiary-color: #ff4757;
--tertiary-1-color: #e83948;
--tertiary-2-color: #ff5665;
--tertiary-3-color: #ff7682;
--tertiary-4-color: #ff8f98;
--pink-ff5-color: #ff585d;
--testpink: #f0495c;
--pink-f5-color: #f54141;
--pink-ef-color: #ef5662;
--background-pink-light: rgba(146,20,24,0.03);
--black-29-color: #292929;
--black-2b-color: #2b2b2b;
--black-88-color: #888;
--black-4c-color: #4c4c4d;
--black-75-color: #757575;
--blue-fade-color: rgba(65,96,245,0.2);
--pink-fade-color: rgba(255,41,73,0.2);
--brown-b0-color: #b08056;
--brown-ac-color: #ac7851;
--icon-color: var(--black-88-color);
--light-background-brown: rgba(172,120,81,0.05);
--gray-f1-color: #f1f3f8;
--gray-c1-color: #c1c8d8;
--gray-92-color: #929292;
--gray-76-color: #767d8c;
--icon-light-color: var(--gray-c1-color);
--gray-85-color: #858585;
--gray-ef-color: #eff1f3;
--white-f8-color: #f8f8fc;
--gray-2f-color: #2f3031;
--background-color: #f8f8fc;
--body-color: #edf1f7;
--gray-e3-color: #e3e7ee;
--gray-14-color: #141414;
--border-color: var(--gray-e3-color);
--background-fa-color: #fff;
--background-light: #fafafa;
--gray-e1-color: #e1e1ea;
}
.header-contianer{
display: flex;
align-items: center;
width: 100%;
justify-content: center;
background-color: var(--light);
font-family: 'IRANSans-Light';
}
.header-logo {
margin: 0 15px 0 0;
justify-content: center;
}
.header-nav {
width: 100%;
}
.nav-link {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.nav-item {
list-style: none;
}
a {
text-decoration: none;
}
.nav-item a:hover {
color: var(--primary);
transition: .4s;
}
@media (max-width:768px){
.header-nav {
display: none;
transition: .5s;
}
}
@media (max-width:768px){
.header-logo{
justify-content: center;
transition: .5s;
}
}
.banner {
width: 100%;
background-image: url(/banner-image.jpg);
background-size: cover;
height: 400px;
display:flex;
align-items: center;
justify-content:flex-start;
}
@media (max-width:768px) {
.banner {
background-image: none;
}
}
.banner-text {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 90px;
}
@media (max-width:768px) {
.banner-text {
width: 100%;
align-items: flex-start;
height: 400px;
}
}
.banner-h1 {
font-family: 'IRANSans-Black';
font-weight: 900;
font-size: 2rem;
text-align: right;
}
p {
font-family: 'IRANSans-Light';
font-size: 1rem;
font-weight: 100;
text-align: right;
}
@media (max-width:768px) {
.banner-h1 p {
text-align: center;
}
}
.h2 {
width: 50%;
font-family: 'IRANSans';
background-color: var(--primary);
color: white;
padding: 10px;
text-align: center;
margin-top:20px;
border-radius: 8px;
box-shadow: 0px 10px 10px var(--primary-4-color);
}
@media (max-width:768px) {
.h2 {
display: none;
}
}
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
گزارش تخلف
کپی کردن
1
درود
در کد های css مشکلی نیست . ولی بهتره کامنت هم بزارین تو css
در html هم بهتره به جای استفاده از div مثلا در header-nav از تگ <nav></nav>
و به جای header-contianer هم از تگ <header></header> استفاده کنید .
موفق باشید