@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
@media (min-width: 992px) {
.navbar-toggle {
display: none;
}
}
img{width:100%; max-width: реальный размер этого изображения; height: auto;}
, ну и при адаптивности на определенном размере экрана меняйте эти значения, при совсем мелком расширении перестраивайте блоки. Короче ничего сложного тут нет. span {
opacity: 0;
@include transition(0.6s opacity);
width: 100%;
height: 100%;
font: $font_regular;
color: $white;
display: block;
text-align: center;
padding: 40% 0 0;
&:hover {
background: rgba(0,0,0,0.8);
opacity: 1;
@include transition(0.6s opacity);
}
}
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12"></div>
<div class="col-sm-12"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<div class="block1"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="block2"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<div class="block3"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="block4"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="block5"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<div class="block6"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="block7"></div>
</div>
</div>
</div>
</div>
</div>
<div class="triangle-right"></div>
.triangle-right {
border-image: none;
height: 30px;
width: 150px;
background-image: linear-gradient(to top, rgb(207, 207, 213) 0%, rgb(135, 129, 129) 50%, rgb(207, 207, 213) 100%);
}
.triangle-right:after{
content:"";
display: block;
height: 0;
border-left:20px solid black;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
}
<div><a class="navbar-brand" href="#"><img src="img/logo.png" class="img-responsive" alt="Blockchain"></a></div>
<a class="navbar-brand" href="#"><img src="img/logo.png" class="img-responsive" alt="Blockchain"></a>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220px" height="140px" viewBox="0 0 220 140">............
</svg>