چگونه باید چنین چیزی ساخت؟

[parsnia co]

بله
اسم این سازه چیست؟
ممنون می شم که مقداری از کدنویسی آن را در اختیار ما قرار دهید

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 به فناوری خودران خودروها کمک می&zwnj;کند</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%d9%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%d9%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;


}