верстка из шаблона

[начинающий верстаг]

вот скриншот из psd макета как сверстать помогите плиз

[klierik]

в чем возникает проблема?

[DivMan]

Для начала сверстай просто первый блок

 

Блоку задай ширину и высоту.

в этот блок засунь картинку и зафлоати её влево , потом рядом создай ещё отдельный блок и зафлоати его в право.

В этот блок сделай отдельный элемент и положи в него заголовок и под этим элементом, создай параграф. 

Edited March 1, 2017 by DivMan

[начинающий верстаг]

пацыки я сверстал зацените

Spoiler

html::::::::

<div class="suka" >
          <div class="sex">
            <img src="image/image_1.png" class="image_1">
            <div class="facke">
              <h2>Quick and easy</h2>
              <p>Ma quande lingues coalesce, li gram-
              matica del resultant lingue es plu sim-
              plic e regulari quam ti del coalescent
              lingues. Li nov lingua franca va esser-
              plu simplic e regulari.</p>
            </div>
          </div>
          <div class="sex">
            <img src="image/image_2.png" class="image_1">
            <div class="facke">
              <h2>Less risky</h2>
              <p>Lorem ipsum dolor sit amet, con-
              sectetuer adipiscing elit,sed diam non-
              ummy nibh euismod tincidunt ut laoreet
              dolore magna aliquam erat volutpat.Ut </p>
            </div>
          </div>
          <div class="sex">
            <img src="image/image_3.png" class="image_1">
            <div class="facke" id="facke_reshalka">
              <h2>Support - 24h</h2>
              <p>It va esser tam simplic quam Occiden-c
              tal: in fact, it va esser Occidental.A un
              Angleso it va semblar un simplificat
              Angles</p>
            </div>
          </div>
        </div>
        <div class="clear"></div>
        <div class="suka" id="suka_reshalka">
          <div class="sex">
            <img src="image/image_4.png" class="image_1">
            <div class="facke">
              <h2>Well written help file</h2>
              <p>Ma quande lingues coalesce, li gram
              matica del resultant lingue es plu sim
              plic e regulari quam ti del coalescent
              lingues. Li nov lingua franca va esser
              plu simplic e regulari.</p>
            </div>
          </div>
          <div class="sex">
            <img src="image/image_5.png" class="image_1">
            <div class="facke">
              <h2>Import your own photos</h2>
              <p>Lorem ipsum dolor sit amet, con-
              sectetuer adipiscing elit,sed diam non-
              ummy nibh euismod tincidunt ut laoreet
              dolore magna aliquam erat volutpat.Ut </p>
            </div>
          </div>
          <div class="sex">
            <img src="image/image_6.png" class="image_1">
            <div class="facke" id="facke_reshalka">
              <h2>User friendly design </h2>
              <p>It va esser tam simplic quam Occiden-c
              tal: in fact, it va esser Occidental.A un
              Angleso it va semblar un simplificat
              Angles</p>
            </div>
          </div>
        </div>
        </div>
      </div>

css:::::::

.sex{
    /height:120px;
    width:33.33%;
    float:left;
    font-family:sans-serif;
}
.image_1{
    float:left;
}
.facke{
    float:right;
    width:185px;
    padding-right:36px;
}
.facke h2{
    margin-bottom:10px;
    font-size:22px;
}
.facke p{
    font-size:12px;
    color:#808080;
}
.suka{
    padding-left:31px;
    padding-right:43px;
}
#facke_reshalka{
    padding-right:0px;
}
#suka_reshalka{
    margin-top:70px;
}

 

Edited March 3, 2017 by klierik

[DivMan]

закинь в песочницу и измени название классов. 

Edited March 2, 2017 by DivMan