Skip to content

Instantly share code, notes, and snippets.

@DrMartiner

DrMartiner/index.html

Created January 22, 2019 11:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DrMartiner/472d7e0924e1a20f422b95253793482b to your computer and use it in GitHub Desktop.
Save DrMartiner/472d7e0924e1a20f422b95253793482b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<section id="id_about_section">
<div class="section-header">
<h3>Что такое MySmart Office</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
<div class="item-wrapper">
<div class="item">
<img src="https://via.placeholder.com/100x100/d1d1e0.png" />
<h4>Продажи</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="item">
<img src="https://via.placeholder.com/100x100/d1d1e0.png" />
<h4>Маркетинг</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="item">
<img src="https://via.placeholder.com/100x100/d1d1e0.png" />
<h4>Продажи</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="item">
<img src="https://via.placeholder.com/100x100/d1d1e0.png" />
<h4>Маркетинг</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
</section>
</body>
</html>
Raw
styles.less
@desktop-size: 900px;
@mobile-size: 400px;
#id_about_section {
.section-header {
@media (min-width: @desktop-size) {
h3 { }
p { }
}
@media (min-width: @mobile-size) {
h3 { }
p { }
}
}
.item-wrapper {
.item {
// Тут нужн овпилить на флексах
// Тут нужно сделать чтобы картинка была по центру или по низу
// в зависимости от разрешения
@media (min-width: @desktop-size) {
img { }
h4 { }
p { }
}
@media (min-width: @mobile-size) {
img { }
h4 { }
p {}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment