Responsive grid with CSS Grids
Responsive grid with CSS Grids
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit.min.js"></script>
<div class="top-nav">
<div class="uk-container uk-container-center">
<h1 class="uk-text-center">Российский производитель!</h1>
<div uk-grid="" class="uk-grid"><div class="uk-width-1-3 uk-first-column"><div class="skud-setevie">
<h3>Сетевые</h3>
<ul>
<li><a href="#">Оборудование</a></li>
<li><a href="#">Архитектура</a></li>
<li><a href="#">Топология</a></li>
<li><a href="#">Типовые решения</a></li>
</ul><div class="tn-bg"></div>
</div></div><div class="uk-width-1-3"><div class="skud-mobilnie">
<h3>Мобильный доступ</h3>
<ul>
<li><a href="#">Концепция</a></li>
<li><a href="#">Оборудование</a></li>
<li><a href="#">Лицензирование</a></li>
<li><a href="#">Типовые решения</a></li>
</ul><div class="tn-bg"></div>
</div></div><div class="uk-width-1-3"><div class="skud-besprovodnie">
<h3>Идентификация</h3>
<ul>
<li><a href="#">Достоинства</a></li>
<li><a href="#">Области применения</a></li>
<li><a href="#">Оборудование</a></li>
<li><a href="#">Типовые решения</a></li>
</ul><div class="tn-bg"></div>
</div></div></div>
</div>
</div>
CSS
.top-nav {background:url('https://marketplace.canva.com/MAB5cAQJlaQ/2/screen/canva-diagonal-stripes-right-MAB5cAQJlaQ.png') 100% 100% no-repeat, linear-gradient(135deg, #082040, #1c3e6d);clip-path:polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);padding:0 0 80px}
.top-nav h1 {color:#fff;width:80%;margin:70px auto 90px}
.top-nav .uk-grid div[class^="skud-"] {text-align:center;padding:70px 15px 15px;position:relative}
.top-nav .uk-grid div.skud-mobilnie {padding-bottom:10px}
.top-nav .uk-grid div[class^="skud-"] ul {list-style:none;margin:0;padding:0;font-size:15px;line-height:1.5;font-weight:normal}
.top-nav .uk-grid div[class^="skud-"] ul li {margin-top:10px}
.top-nav .uk-grid div[class^="skud-"] ul li a {color:rgba(255,255,255,0.7)}
.top-nav .uk-grid div[class^="skud-"] ul li a:hover {color:rgba(255,255,255,0.95)}
.top-nav .uk-grid div[class^="skud-"] h3 {color:#fff;position:relative;z-index:2}
.top-nav .uk-grid div[class^="skud-"] h3:before {content:'';display:block;width:100px;height:100px;position:absolute;left:50%;top:-71px;margin:-50px 0 0 -50px;background-repeat:no-repeat;background-position:50% 50%}
.top-nav .uk-grid div.skud-setevie h3:before {background-image:url('/images/systems/setevie.png')}
.top-nav .uk-grid div.skud-mobilnie h3:before {background-image:url('/images/systems/mobilnie.png')}
.top-nav .uk-grid div.skud-besprovodnie h3:before {background-image:url('/images/systems/besprovodnie.png')}
.top-nav .uk-grid div[class^="skud-"] .tn-bg {position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;background:#091d38;border:2px solid #1b3d6c;border-bottom:none;border-radius:10px 10px 0 0;opacity:0.5}
.top-nav .uk-grid div.skud-setevie .tn-bg:after,
.top-nav .uk-grid div.skud-besprovodnie .tn-bg:after {content:'';position:absolute;bottom:-27px;left:-2px;right:-2px;height:50px;background:inherit;border:2px solid #1b3d6c;border-top:none;border-radius:0 0 10px 10px;transform:skewY(4deg);z-index:-1}
.top-nav .uk-grid div.skud-besprovodnie .tn-bg:after...