Skip to content

Instantly share code, notes, and snippets.

@quimo

quimo/index.html

Last active March 7, 2017 14:04
Show Gist options
  • Save quimo/89e6d38692f52b4105bb990fbbd6b38a to your computer and use it in GitHub Desktop.
Save quimo/89e6d38692f52b4105bb990fbbd6b38a to your computer and use it in GitHub Desktop.
Download ZIP
Bootstap | Equal height columns
Raw
index.html
<div class="download">
<h2 class="download__title">Titolo della sezione 1</h2>
<div class="row download__row is-flex">
<div class="col-md-4 column">
<div class="download__item">
<img class="download__item__icon" src="https://www.cabiria.net/wp-content/uploads/2017/03/pdf-icon.png" />
<h3 class="download__item__title">Titolo del documento lungo su due righe</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam augue vel fringilla porta. Nam dapibus auctor ante. Sed ultricies, augue vel porttitor tristique, ipsum erat viverra urna</p>
<a class="download__item__button" href="#">Scarica</a>
</div>
</div>
<div class="col-md-4 column">
<div class="download__item">
<img class="download__item__icon" src="https://www.cabiria.net/wp-content/uploads/2017/03/pdf-icon.png" />
<h3 class="download__item__title">Titolo del documento</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam augue vel fringilla porta. Nam dapibus auctor ante. Sed ultricies, augue vel porttitor tristique, ipsum erat viverra urna</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam augue vel fringilla porta. Nam dapibus auctor ante. Sed ultricies, augue vel porttitor tristique, ipsum erat viverra urna</p>
<a class="download__item__button" href="#">Scarica</a>
</div>
</div>
<div class="col-md-4 column">
<div class="download__item">
<img class="download__item__icon" src="https://www.cabiria.net/wp-content/uploads/2017/03/pdf-icon.png" />
<h3 class="download__item__title">Titolo del documento lungo su due righe</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam augue vel fringilla porta.</p>
<a class="download__item__button" href="#">Scarica</a>
</div>
</div>
</div>
</div>
Raw
style.css
.row.is-flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
/* corregge un bug di Safari con flexbox */
.row.is-flex:before,
.row.is-flex:after {
content: normal;
}
.row.is-flex > [class*='col-'] {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
}
.download__title {
margin-top: 60px;
}
.download__row {
margin-right: -15px !important;
margin-left: -15px !important;
}
.download__item {
margin: 40px 0 0 0;
}
@media (min-width: 980px) {
.download__item {
margin: 20px 0 40px 0;
}
}
@media (min-width: 1200px) {
.download__item {
}
}
.download__item__title {
margin-left: 54px;
font-size: 18px;
line-height: 24px;
}
.download__item__icon {
width: 40px;
float: left;
}
.download__item p {
padding-top: 10px;
clear: both;
}
div.page a.download__item__button {
display: inline-block;
background: #FFD400;
color: #333 !important;
padding: 6px 16px;
border-radius: 5px;
text-transform: uppercase;
font-weight: 700;
}
@media (min-width: 980px) {
div.page a.download__item__button {
position: absolute;
bottom: 0;
left: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment