user-avatar
farshad
2 سال پیش توسط farshad مطرح شد
1 پاسخ

اصلاح کد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;
    }
 
}
فلاتر
گزینش سوالات
همه سوالات حل شده حل نشده بدون پاسخ
گفت و گو های مرتبط
اصلاح کد css
اصلاح کد cs
درباره ریسپانسیو
درباره ریسپانسیو
درباره ریسپانسیو
درباره ریسپانسیو
اصلاح کد جی کوئری برای Validator
مشکل با position:reative در حالت responsi
ایجاد pdf در لاراول
همه آیتم ها اسکرول نمی خورند هر چه عرض دیوایس کوچیکتر میشه
دسته ‌بندی سوالات
لاراول طراحی_وب جاوااسکریپت فریمورک_ها وردپرس امنیت Html_Css جاوا PHP فیدبک_سایت جی_کوئری تجربه_کاربری رابط_کاربری متفرقه اندروید پایتون nodejs vuejs آنگولار reactjs فلاتر سیستم__عامل_ها شبکه سخت_افزار عمومی سئو
تگ‌های محبوب
ثبت پرسش جدید
user-avatar
MagicalDev
تخصص : Laravel Developer
@magicaldev1 2 سال پیش مطرح شد
1

درود
در کد های css مشکلی نیست . ولی بهتره کامنت هم بزارین تو css
در html هم بهتره به جای استفاده از div مثلا در header-nav از تگ <nav></nav>
و به جای header-contianer هم از تگ <header></header> استفاده کنید .
موفق باشید

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام