Как правильно сверстать такой блок

Question

Как правильно сверстать такой блок только на HTML и CSS не используя Bootstrap и т.п.? Затруднение больше вызывает как сделать черту между блоками и соблюсти все отступы и выравнивания как в примере. Сам верстку только учу, и захотел скопировать данный сайт. Вот на этом блоке просто застрял. Ссылка на сам сайт

Answer 1

Примерно вот так:

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}

section {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 330px;
}

.top,
.bottom {
	display: flex;
	justify-content: space-around;
}

.top > div {
	padding-bottom: 50px;
	border-bottom: 1px solid #000;
}

.bottom {
    margin-top: 50px;
}


h2 {
	font-size: 1.5em;
	margin-bottom: 20px;
}

.first,
.second {
	width: 40%;
}

<section>
			<div class="top">
				<div class="first">
					<h2>Web Development</h2>
					<div class="descr">Javascript, Coffeescript, JAVA, Python, PHP, Go, Node.js, MongoDB, Redis, PostgreSQL, WebStorm.</div>
				</div>

				<div class="second">
					<h2>UI\UX Design</h2>
					<div class="descr">Photoshop, Illustrator, Sketch, Axure, XMind, Prototyping, Wireframing, User Research, Usability Testing.</div>
				</div>
			</div>
			<div class="bottom">
				<div class="first">
					<h2>Frontend Development</h2>
					<div class="descr">HTML, CSS, LESS, SASS, Bootstrap, Wordpress, Drupal, Phonegap / Cordova, Ionic, Foundation, Angular.js.</div>
				</div>

				<div class="second">
					<h2>Consulting & SEO Audit</h2>
					<div class="descr">Screaming Frog, Woorank, Raventools, Semrush, Moz, WebCEO, Google Analytics, ChartBeat, CrazyEgg.</div>
				</div>
			</div>
		</section>

Также если нужно будет делать адаптивную верстку, достаточно будет добавить для .top и .bottom display: block; и убрать margin-top: 50px; у .bottom.

Если надо, вот линия:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 105 20" style="enable-background:new 0 0 105 20;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#0D5ED7;stroke-miterlimit:10;}
</style>
<g>
	<g>
		<polyline class="st0" points="2.5,5 16.8,15 31.1,5 45.3,15 59.6,5 73.9,15 88.2,5 102.5,15 		"/>
	</g>
</g>
</svg>

Она слегка другого цвета, так как в атрибутике у неё не было указанно fill, но это можно исправить в её коде.

Answer 2

Предлагаю воспользоваться flexbox и всю сетку строить на нём

Раверните пример на всю страницу а браузер сожмите до предела

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.items {
  box-sizing: border-box;
  display: flex;
  max-width: 768px;
  margin: auto;
  font-family: sans-serif;
  padding: 0 8px;
}

.item1 {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item2 {
  width: 60%;
  display: flex;
  flex-wrap: wrap;
}

.item2-outer {
  width: 49%;
  margin: 2px;
}

.item1 h3,
.item2-outer h3 {
  text-transform: uppercase;
  font-size: 14px;
}

.item1 p,
.item2-outer p {
  font-size: 12px;
  width: 90%;
}

.item2-outer:nth-child(1),
.item2-outer:nth-child(2) {
  border-bottom: 1px solid #ccc;
}

@media(max-width: 768px) {
  .item2-outer:nth-child(1),
  .item2-outer:nth-child(2) {
    border-bottom: none;
  }
  .item1,
  .item2 {
    width: 100%;
  }
  .item2-outer {
    width: 90%;
    margin: auto;
  }
}

@media(max-width: 540px) {
  .items {
    width: 90%;
    margin: auto;
    flex-direction: column;
  }
  .item1-top,
  .item1-bottom {
    width: 90%;
    margin: auto;
  }
  h3 {
    background: #ccc;
    padding: 4px 0 4px 4px;
    color: #fff;
  }
  svg {
    display: block;
    margin: auto;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="items">
  <div class="item1">
    <div class="item1-top">
      <h3>Scills</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, dolore? Odio sit cupiditate veritatis placeat quibusdam impedit, corrupti saepe adipisci.
      </p>
    </div>
    <div class="item1-bottom">
      <svg viewBox=" 0 0 200 50" width="100px">
        <g><path d="M0,0 20,20 40,0 60,20 80,0 100,20 120,0 140,20"  fill="none" stroke="#ccc" stroke-width="3"/>
        </g>
        <g transform="translate(0,20)">
          <path d="M0,0 20,20 40,0 60,20 80,0 100,20 120,0 140,20"  fill="none" stroke="blue" stroke-width="3"/>
        </g>
      </svg>
    </div>
  </div>
  <div class="item2">
    <div class="item2-outer">
      <h3>web development</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, dolore? Odio sit cupiditate veritatis placeat quibusdam impedit, corrupti saepe adipisci.</p>
    </div>
    <div class="item2-outer">
      <h3>ui/ux design</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, dolore? Odio sit cupiditate veritatis placeat quibusdam impedit, corrupti saepe adipisci.</p>
    </div>
    <div class="item2-outer">
      <h3>Frontend development</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, dolore? Odio sit cupiditate veritatis placeat quibusdam impedit, corrupti saepe adipisci.</p>
    </div>
    <div class="item2-outer">
      <h3>Cansalding & seo audit</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, dolore? Odio sit cupiditate veritatis placeat quibusdam impedit, corrupti saepe adipisci.</p>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как правильно сверстать такой блок

Ответы (2 шт):