بله
اسم این سازه چیست؟
ممنون می شم که مقداری از کدنویسی آن را در اختیار ما قرار دهید
1- کد HTML رو باید در هر قسمت که نیاز دارید بگذارید.
<div class="headline__wrapper">
<div class="headline__block">
<div class="headline__column headline__column--one">
<div class="headline__item headline__item--wide headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d9%87%db%8c%d9%88%d9%86%d8%af%d8%a7%db%8c-%d8%aa%d9%88%d8%b3%d8%a7%d9%86-2017-%da%a9%d8%b1%d8%a7%d8%b3-%d8%a7%d9%88%d9%88%d8%b1-%d8%ac%d8%b0%d8%a7%d8%a8-%d9%88-%d9%85%d8%ad%d8%a8%d9%88%d8%a8-%d8%a7/">
<figure class="headline__image"> <img width="522" height="295" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/5ab19556-5e19-4994-b6cc-f5ec6d893c01-610x345.jpg" class="attachment-524x295 size-524x295 wp-post-image" alt="" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/5ab19556-5e19-4994-b6cc-f5ec6d893c01-610x345.jpg 610w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/5ab19556-5e19-4994-b6cc-f5ec6d893c01-262x147.jpg 262w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/5ab19556-5e19-4994-b6cc-f5ec6d893c01-100x56.jpg 100w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/5ab19556-5e19-4994-b6cc-f5ec6d893c01-380x215.jpg 380w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/5ab19556-5e19-4994-b6cc-f5ec6d893c01-160x91.jpg 160w" sizes="(max-width: 522px) 100vw, 522px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">خودرو</span>
<div class="headline__content__time">
<time>2 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">هیوندای توسان ۲۰۱۷ کراس اوور جذاب و محبوب ایرانیان</h3>
</div>
</a> </div>
</div>
<div class="headline__column headline__column--double">
<div class="headline__item headline__item--little headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d8%a8%d8%a7%d8%b2%db%8c-gta-%d8%a8%d9%87-%d9%81%d9%86%d8%a7%d9%88%d8%b1%db%8c-%d8%ae%d9%88%d8%af%d8%b1%d8%a7%d9%86-%d8%ae%d9%88%d8%af%d8%b1%d9%88%d9%87%d8%a7-%da%a9%d9%85%da%a9-%d9%85%db%8c%e2%80%8c/">
<figure class="headline__image"> <img width="262" height="147" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-262x147.png" class="attachment-262x147 size-262x147 wp-post-image" alt="خودرو" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-262x147.png 262w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-610x345.png 610w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-730x410.png 730w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-100x56.png 100w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-380x215.png 380w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/04/e9ca31a7-25c6-447f-b4f2-7bced7ba2d45-160x91.png 160w" sizes="(max-width: 262px) 100vw, 262px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">اخبار خودرو</span>
<div class="headline__content__time">
<time>2 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">بازی GTA به فناوری خودران خودروها کمک می‌کند</h3>
</div>
</a> </div>
</div>
<div class="headline__column headline__column--double">
<div class="headline__item headline__item--little headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d8%aa%d9%88%db%8c%d9%88%d8%aa%d8%a7-%da%a9%d9%85%d8%b1%db%8c-2018-%d9%88-%d9%88%db%8c%da%98%da%af%db%8c-%d9%87%d8%a7%db%8c-%d8%ac%d8%af%db%8c%d8%af-%d9%88-%d8%ac%d8%b0%d8%a7%d8%a8-%d8%a2%d9%86/">
<figure class="headline__image"> <img width="262" height="147" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-262x147.jpg" class="attachment-262x147 size-262x147 wp-post-image" alt="CAMERY" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-262x147.jpg 262w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-610x345.jpg 610w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-730x410.jpg 730w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-100x56.jpg 100w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-380x215.jpg 380w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/CAMERY-1-160x91.jpg 160w" sizes="(max-width: 262px) 100vw, 262px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">خودرو</span>
<div class="headline__content__time">
<time>6 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">تویوتا کمری ۲۰۱۸ و ویژگی های جدید و جذاب آن</h3>
</div>
</a> </div>
</div>
</div><!-- ./ headline__block -->
<div class="headline__block">
<div class="headline__column headline__column--double"> <div class="headline__item headline__item--little headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d8%b3%d8%a7%d9%85%d8%b3%d9%88%d9%86%da%af-%d8%b7%d8%b1%d8%ad-%db%8c%da%a9-%d8%aa%d8%a8%d9%84%d8%aa-%d8%aa%d8%a7%d8%b4%d9%88-%d8%b1%d8%a7-%d8%ab%d8%a8%d8%aa-%da%a9%d8%b1%d8%af/">
<figure class="headline__image"> <img width="262" height="147" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-262x147.jpg" class="attachment-262x147 size-262x147 wp-post-image" alt="tablet_" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-262x147.jpg 262w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-610x345.jpg 610w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-730x410.jpg 730w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-100x56.jpg 100w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-380x215.jpg 380w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet_-160x91.jpg 160w" sizes="(max-width: 262px) 100vw, 262px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">تبلت</span>
<div class="headline__content__time">
<time>6 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">سامسونگ طرح یک تبلت تاشو را ثبت کرد</h3>
</div>
</a> </div>
<div class="headline__item headline__item--tall headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d8%a8%d8%b1%d8%b1%d8%b3%db%8c-%d8%aa%d8%a8%d9%84%d8%aa-%d8%b3%d8%b1%d9%81%db%8c%d8%b3-%d9%be%d8%b1%d9%88-4-%d9%85%d8%a7%db%8c%da%a9%d8%b1%d9%88%d8%b3%d8%a7%d 9%81%d8%aa/">
<figure class="headline__image"> <img width="262" height="175" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet.jpg" class="attachment-262x295 size-262x295 wp-post-image" alt="tablet" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet.jpg 750w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tablet-300x200.jpg 300w" sizes="(max-width: 262px) 100vw, 262px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">بررسی</span>
<div class="headline__content__time">
<time>6 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">بررسی تبلت سرفیس پرو ۴ مایکروسافت</h3>
</div>
</a> </div>
</div> <div class="headline__column headline__column--double">
<div class="headline__item headline__item--tall headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d9%85%d9%88%d8%aa%d9%88%d8%b1%d8%b3%db%8c%da%a9%d 9%84%d8%aa-%d9%87%d9%88%d9%86%d8%af%d8%a7-%d8%a8%d8%a7-%d9%82%d8%a7%d8%a8%d9%84%db%8c%d8%aa-%d8%ad%d9%81%d8%b8-%d8%aa%d8%b9%d8%a7%d8%af%d9%84-%d8%ae/">
<figure class="headline__image"> <img width="262" height="175" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/honda.jpg" class="attachment-262x295 size-262x295 wp-post-image" alt="honda" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/honda.jpg 750w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/honda-300x200.jpg 300w" sizes="(max-width: 262px) 100vw, 262px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">خودرو</span>
<div class="headline__content__time">
<time>6 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">موتورسیکلت هوندا با قابلیت حفظ تعادل خودکار معرفی شد</h3>
</div>
</a> </div>
<div class="headline__item headline__item--little headline__item--news"> <a href="http://demo.mahdisweb.net/7tech/%d8%a7%db%8c%d9%84%d8%a7%d9%86-%d9%85%d8%a7%d8%b3%da%a9-%d8%b1%d9%88%d8%af%d8%b3%d8%aa%d8%b1-%d8%aa%d8%b3%d9%84%d8%a7-%d8%af%d8%b1-%d8%a2%db%8c%d9%86%d8%af%d9%87-%d9%86%d8%b2%d8%af%db%8c%da%a9-%d9%85/">
<figure class="headline__image"> <img width="262" height="147" src="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tesla-1-262x147.jpg" class="attachment-262x147 size-262x147 wp-post-image" alt="tesla" srcset="http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tesla-1-262x147.jpg 262w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tesla-1-610x345.jpg 610w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tesla-1-100x56.jpg 100w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tesla-1-380x215.jpg 380w, http://demo.mahdisweb.net/7tech/wp-content/uploads/sites/18/2017/01/tesla-1-160x91.jpg 160w" sizes="(max-width: 262px) 100vw, 262px"> </figure>
<div class="headline__content">
<div class="headline__content__row"> <span class="headline__content__category">اخبار خودرو</span>
<div class="headline__content__time">
<time>6 ماه قبل</time>
</div>
</div>
<h3 class="headline__content__title">ایلان ماسک: رودستر تسلا در آینده نزدیک معرفی می شود</h3>
</div>
</a> </div>
</div>
</div><!-- ./ headline__block -->
</div>
2- کدهای css را به انتهای style.css قالب خود اضافه کنید:
.headline__wrapper{
position: relative;
z-index: 1;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: 100%;
}
.headline__block:nth-child(0n + 1) {
clear: right;
}
.headline__block:nth-child(1n) {
float: right;
margin-left: 0;
clear: none;
}
.headline__block {
width: calc(99.999999% * 1/2);
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
.headline__column--double:nth-child(1n) {
float: right;
margin-left: 0;
clear: none;
}
.headline__column--double {
width: calc(99.999999% * 1/2);
}
.headline__item--wide {
width: 100%;
height: 295px;
border-bottom: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
}
.headline__item {
width: 100%;
position: relative;
z-index: 1;
top: 0px;
right: auto;
bottom: auto;
left: 0px;
display: block;
overflow: hidden;
}
.headline__item a{
position: relative;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #ffffff;
}
.headline__image {
margin: 0px;
padding: 0px;
height: inherit;
}
.headline__item--wide .headline__content {
padding: 0px 30px 30px 30px;
}
.headline__content{
width: 100%;
position: absolute;
z-index: 2;
top: auto;
right: auto;
bottom: 0px;
left: auto;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.headline__image img {
-webkit-transition: all 0.3s;
transition: all 0.3s;
height: 100%;
}
img {
max-width: 100%;
height: auto;
}
.headline__item--wide .headline__content {
padding: 0px 30px 30px 30px;
}
.headline__content{
width: 100%;
position: absolute;
z-index: 2;
top: auto;
right: auto;
bottom: 0px;
left: auto;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.headline__content__row {
width: 100%;
position: relative;
display: block;
}
.headline__item--wide .headline__content__title {
font-size: 0.9em;
}
.headline__content__title {
font-family: IRANSans;
line-height: normal;
font-weight: 500;
font-style: normal;
color: #ffffff;
text-align: right;
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
margin: 5px 0px 0px 0px;
padding: 0px;
}
.headline__item--news .headline__content__category {
background-color: #ff9800;
}
.headline__content__category {
padding: 1px 6px 2px 6px;
text-align: center;
color: #ffffff;
font-family: IRANSans;
font-size: 0.625em;
line-height: normal;
width: auto;
display: table-cell;
float: right;
}
.headline__content__time {
font-size: 0.75em;
color: #ffffff;
font-family: IRANSans;
font-size: 0.625em;
line-height: normal;
font-style: normal;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
opacity: 1;
display: table-cell;
margin-right: 5px;
float: right;
}
.headline__content__time time {
position: relative;
z-index: 1;
top: auto;
right: auto;
bottom: auto;
font-family: IRANSans-num;
left: auto;
float: right;
direction: rtl;
display: table-cell;
vertical-align: middle;
height: 19px;
}