اصلاح کد cs
اگه کدم مشکلی داره اطلاع بدبد
html
<!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>
<header>
<div class="login-button">
<span class="button-text one">Sign in</span>
<span class="button-text two">Log in</span>
</div>
<nav>
<ul class="nav-link">
<li class="nav-item"><a href="#">Pricing</a></li>
<li class="nav-item"><a href="#">For Agencies</a></li>
<li class="nav-item"><a href="#">Features</a></li>
<li class="nav-item"><a href="#">Sample prototypes</a></li>
<li class="nav-item"><a href="#">Product tour</a></li>
</ul>
</nav>
</header>
<div class="banner">
<div class="banner-image">
<img src="/images/banner-image.png" alt="" width="100%" height="100%">
</div>
<div class="banner-text">
<span class="main-text">Turbo prototyping tool for websites</span>
<span class="second-text">Ideate and collaborate on website
prototypes with team and clients</span>
<div class="banner-button">
<button class="button">Get started for free</button>
</div>
</div>
</div>
</body>
</html>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-bold';
src: url(/iran-sans/IRANSans_Bold.ttf);
}
@font-face {
font-family: 'IRANSans-Meduim';
src: url(/iran-sans/IRANSans_Medium.ttf);
}
@font-face {
font-family: 'Poppins, sans-serif black';
src: url(/iran-sans/Poppins-Black.ttf);
}
@font-face {
font-family: 'Poppins, sans-serif bold';
src: url(/iran-sans/Poppins-Bold.ttf);
}
@font-face {
font-family: 'Poppins, sans-serif light';
src: url(/iran-sans/Poppins-Light.ttf);
}
@font-face {
font-family: 'Poppins, sans-serif meduim';
src: url(/iran-sans/Poppins-Medium.ttf);
}
@font-face {
font-family: 'Poppins, sans-serif thin';
src: url(/iran-sans/Poppins-Thin.ttf);
}
* {
margin: 0;
box-sizing: border-box;
}
: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;
}
body {
background-color: #141414;
}
header {
display: flex;
width: 100%;
align-items: center;
height:100px;
}
.login-button {
}
.button-text {
font-family: 'Poppins, sans-serif light';
font-size: 1.2rem;
padding: 10px 20px 10px 20px;
border: 1px #ccc solid;
border-radius: 40px;
margin-right: 20px;
}
.two {
background-color: #007bff;
color: var(--light);
border: 1px var(--blue) solid;
}
.one {
color: white;
border: none;
}
.one:hover {
background-color: white;
color: #141414;
transition: .5s;
}
nav {
display: flex;
width: 50%;
height: 100px;
}
.nav-link {
display: flex;
width: 100%;
height: 100px;
justify-content: space-evenly;
align-items: center;
}
.nav-item a {
color: white;
list-style: none;
font-family:'Poppins, sans-serif light' ;
}
.nav-item a:hover {
color: #676767;
transition: .5s;
}
a {
text-decoration: none;
}
.banner {
display: grid;
grid-template-columns:60% 40%;
}
.banner-image {
}
.banner-image > img {
filter: grayscale(1);
}
.banner-text {
display: grid;
margin-left: 80px;
}
span {
color: white;
text-align: left;
}
.main-text {
font-family: 'Poppins, sans-serif bold';
font-size: 3rem;
}
.second-text {
font-family: 'Poppins, sans-serif light';
font-size: 1.3rem;
width: 100%;
text-align: left;
}
.banner-button {
display: flex;
height:75px;
width: 100%;
justify-content: end;
}
.button {
font-family: 'Poppins, sans-serif light';
background-color: #007bff;
padding:20px;
border-radius: 50px;
font-size: 1rem;
color: var(--light);
}
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام وقت بخیر
کد مشکلی نداره فقط اگه حالت .اکنش گرا یا همون ریسپانسیو بهش اضافه کنید تا توی دیوایس های با سایز های مختلف درست نمایش داده بشه و به عکس هم یه سایت بدید که بزرگ تر از اون سایز نشه چون هر عکسی بهش بدی الان به سایز اون عکس در میاد و خیلی گنده میشه و دکمه Get Start For Free هم یه خورده بیاد وسط تر بهتر میشهیعنی بیاد بغل عکسو اگه دوست داشتی میتونی گوشه های عکس رو یه خورده کرو کنی یا همون نرم تر کنی گرد تر بشه با یه سایز ثابت توی هر دیوایس با سایز های مختلف در کل دیزاین ساده و باحالیه
سلام
نه html کامنت گزاری شده و نه css حداقل کامنت مختصر بدید تا نه خودتون بعدا قاطی کنید نه برنامه نویسی که کد شمارو میبینه
همچنین در قسمت تگ html ابتدا زبان رو گزاشتید روی en بعد حالت نمایش روی rtl هستش درستش اینه اگه en هست ltr باشه اگه fa-ir هست rtl باشه
اینایی که گفتم بهتره رعایت کنید وگرنه اجباری نیست...
همچنین کدنویسی و رعایت نام کلاس ها هم خیلی خوب انجام دادید
به شخصه برای نام کلاس ها و آیدی ها در افزونه هایی که مینویسم یک نام پریفیکس مینویسم تا با افزونه های دیگه تداخل ایجاد نکنه این کارم بهتره در قالب نویسی رعایت کنید مثلا اگه نام قالب شما مثلا
میگم آوا هستش پریفیکس کلاس هارو بزار
ava
یک نمونه
ava-menu-start
یا
ava-Login-form
دقت کن لازم نیست بری به تمامی کلاس های صفحه این پریفیکس رو بدی فقط به بدنه تگ هایی که خودشون شامل زیر مجموعه یا تگ هستن
این کار باعث میشه کار شما تمیز تر و حرفه ایی تر باشه وگرنه اجباری نیست
ممنون بابت راهنمایی تون
یک سوال هم راجب رسپاتسیو دارم اینکه وقتی حالت display رو به صورت flex و ستون میذارم عکس بالاتر از متن قرار میگیره چجور متن بیاد اول ؟
وقتی حالت display رو به صورت flex و ستون میذارم عکس بالاتر از متن قرار میگیره چجور متن بیاد اول ؟
دقیق متوجه نشدم ولی حدس می‌زنم این کد کمکتون کنه
// برای ستون
flex-direction:column-reverse;
// برای ردیف
flex-direction:row-reverse;
خیر کدتان کاملا درست و صحیح است فقط در پیکسل های مختلف استایل مناسبی ندارد و بهم میرید یا همان ریسبانسیو در آن رعایت نشده است
از اینکه در کدتان از متغیر استفاده کردید بسیار خانا تر شده است عالی است