Как правильно сверстать такой блок только на HTML и CSS не используя Bootstrap и т.п.? Затруднение больше вызывает как сделать черту между блоками и соблюсти все отступы и выравнивания как в примере.
Сам верстку только учу, и захотел скопировать данный сайт. Вот на этом блоке просто застрял.
Ссылка на сам сайт
-
В Хроме нажми F12, там есть инструменты для исследования элементов. Здесь достаточно внутренним элементам указать width:50% и position:relative– Denis I28 апр 2020 в 8:02
-
На сайте этот блок свёрстан с помощью bootstrap, а автор вопроса просит без bootstrap– kertAW28 апр 2020 в 8:12
3 ответа
Предлагаю воспользоваться 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>
Вот html:
<body>
<div class="place">
<div class="container1">
<div class="box1">
<h1>Skills<span>.</span></h1>
<p>I am inspired by creating great work with people who are as passionate as I am about building something awesome.</p>
</div>
<div class="box2">
<h1>Web Development</h1>
<p>Javascript, Coffeescript, JAVA, Python, PHP, Go, Node.js, MongoDB, Redis, PostgreSQL, WebStorm.</p>
</div>
<div class="box3">
<h1>UI\UX Design</h1>
<p>Photoshop, Illustrator, Sketch, Axure, XMind, Prototyping, Wireframing, User Research, Usability Testing.</p>
</div>
<div class="box4">
<h1>Frontend Development</h1>
<p>HTML, CSS, LESS, SASS, Bootstrap, Wordpress, Drupal, Phonegap / Cordova, Ionic, Foundation, Angular.js.</p>
</div>
<div class="box5">
<h1>Consulting & SEO Audit</h1>
<p>Screaming Frog, Woorank, Raventools, Semrush, Moz, WebCEO, Google Analytics, ChartBeat, CrazyEgg.</p>
</div>
</div>
</div>
вот css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.place {
width: 100%;
height: 625px;
}
.container1 {
height: 300px;
width: 100%;
font-family: 'Manrope', sans-serif;
font-weight: 200;
border-top: 1px solid darkgrey;
border-bottom: 1px solid darkgrey;
margin-top: 1%;
padding-top:2%;
}
.container1 .box1 {
float: left;
width: 450px;
height: 300px;
font-family: 'Manrope', sans-serif;
margin-top: 1%;
position: relative;
padding-left: 1%;
}
.container1 .box1 p {
padding-top: 10px;
}
.container1 .box1 span {
font-style: bold;
color: purple;
font-size: 40px;
padding: 1%;
}
.container1 .box2 , .box3 , .box4 , .box5{
float: right;
width: 400px;
height: 120px;
margin: 1%;
}
.container1 .box2 , .container1 .box3 {
border-bottom: 1px solid darkgrey;
}
-
-
@АлексейШиманович, учту это.– user36972328 апр 2020 в 14:04
Примерно вот так:
* {
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
, но это можно исправить в её коде.
-
1
-
-
-