ایجاد شده در ۲۲ آبان ۱۴۰۳
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>responsive mini project</title>
<style>
@font-face {
font-family: "vazir";
src: url(../Vazir-Medium.eot) format(eot),
url(../Vazir-Medium.woff2) format(woff2),
url(../Vazir-Medium.woff) format(woff);
}
* {
margin: 0%;
padding: 0%;
font-family: vazir;
box-sizing: border-box;
}
body {
background-color: #efefef;
box-sizing: border-box;
}
/* header */
header h1 {
color: #428ded;
text-align: center;
margin: 20px;
}
header p {
font-size: 11px;
text-align: center;
margin: -14px;
}
/* Navigation bar */
ul li {
display: inline;
list-style: none;
color: white;
margin: 1px 19px;
}
nav {
background-color: #428ded;
margin: 36px 0px;
border-radius: 9px;
padding: 10px 15px;
}
.left {
position: absolute;
left: -4px;
}
/* sections */
section {
background-color: white;
margin: 20px 10px;
border-radius: 8px;
width: 50%;
float: right;
padding: 15px;
}
.rightcolumn {
float: right;
width: 75%;
}
.row::after {
content: "";
display: table;
clear: both;
}
/* aside */
div aside {
float: right;
width: 70%;
background-color: white;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
display: inline;
}
.leftcolumn {
float: right;
width: 45%;
background: #f1f1f1;
padding-right: 10px;
display: block;
}
</style>
</head>
<body>
<!-- header -->
<header>
<h1>وب سایت من</h1>
<p>اندازه مرورگر را تغییر دهید تا اثر را ببینید</p>
</header>
<!-- Navigation bar -->
<nav>
<ul>
<li>خانه</li>
<li>وبلاگ</li>
<li>درباره ما</li>
<li class="left">021-222-4444</li>
</ul>
</nav>
<!-- right sections -->
<div class="row">
<div class="rightcolumn"></div>
<section>
<h3>عنوان</h3>
<p>توضیحات</p>
<img
src="../world-continent-map-location-graphic-illustration_53876-6448.avif"
width="200px"
height="130px"
/>
<br />
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ...</p>
</section>
<section>
<h3>عنوان</h3>
<p>توضیحات</p>
<img
src="../world-continent-map-location-graphic-illustration_53876-6448.avif"
width="200px"
height="130px"
/>
<br />
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ...</p>
</section>
<!-- side bar -->
<div class="leftcolumn">
<aside>
<h2>درباره ما</h2>
<div class="fakeimg" style="height: 100px">تصویر</div>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ...</p>
</aside>
<aside>
<h3>پست‌های محبوب</h3>
<div class="fakeimg"><p>تصویر</p></div>
<div class="fakeimg"><p>تصویر</p></div>
<div class="fakeimg"><p>تصویر</p></div>
</aside>
<aside>
<h3>تبلیغات</h3>
<p>متن آزمایشی</p>
</aside>
</div>
</div>
</body>
</html>
سلام وقتتون بخیر. من این کدارو برای اخرین تمرین همین سر فصل میزنم ولی نمیدونم چرا asideها درست رو به روی section قرار نمیگیرن
