I got this. I understand this is fundamentally wrong. Tell me which way to dig how to do it right?

.main_mnu { width: 100%; z-index: 9999; min-height: 30px; background-color: #fff; } .main_mnu ul { margin: 0; padding: 0; list-style-type: none; text-align: center; } .main_mnu li { display: inline-block; padding: 5px 4%; text-transform: uppercase; } .main_mnu li a { text-decoration: none; color: #121212; } .main_mnu li a:hover { color: #76a403; border-bottom: 2px solid #76a403; } .screen_one { width: 100%; z-index: 1; min-height: 525px; background-image: url(http://s016.radikal.ru/i337/1609/7a/671f80a0b1cbt.jpg); background-repeat: no-repeat; background-size: cover; } .offer { width: 100%; min-height: 110px; background-color: #000; opacity: 0.69; } .offer h2 { font-size: 30px; margin: 0; color: #fff; text-align: center; text-shadow: 0 5px 5px black; padding: 22px 0; } .offer h2 span { color: #76a403; } .special { width: 450px; height: 237px; background-color: #000; opacity: 0.69; bottom: 0; display: block; } 
 <nav class="main_mnu"> <div class="row"> <div class="col-md-12 col-sm-12 "> <ul> <li><a href="/">О компании</a></li> <li><a href="/">Каталог</a></li> <li><a href="/">Как мы работаем</a></li> <li><a href="/">География</a></li> <li><a href="/">Кто мы</a></li> <li><a href="/">Контакты</a></li> </ul> </div> </div> </nav> <section class="screen_one"> <div class="offer"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Поставки <span>всех видов кормов</span> для сельскохозяйственных животных в различных отраслях животноводства <span>по всей России</span></h2> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-mb-6"> <div class="special"> </div> </div> </div> </div> </section>

1 answer 1

If on a fast hand, then for example:

 .navbar { margin-bottom: 0px; float: none; } .navbar-nav > li > a { text-transform: uppercase; color: #000; } .nav > li > a:hover, .nav > li > a:focus { color: #77a407; background: transparent; } .navbar-toggle .icon-bar { background: #77a407; } .intro { background: url(http://widefon.com/_ld/126/89465606.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; position: relative; min-height: 420px; height: 100%; padding-top: 2rem; } .intro.container-fluid { padding-left: 0; padding-right: 0px; } .title { background: rgba(0,0,0,.52); margin-bottom: 1rem; } .title h2 { color: #fff; margin: 2rem auto; } .box span, .title span { color: #77a407; } .btn-submit { background: #77a407; border: 1px solid #77a407; color: #fff; width: 17%; } .my-form { background: rgba(4, 4, 4, 0.78); padding: 2rem; } .my-form.form-inline .form-group input { width: 100%; } .box { padding: 3rem 3rem 3rem; font-size: 2rem; position: relative; } .box p { position: relative; z-index: 2; color: #fff; } .box:after { content: ''; top: 0; left: 0rem; right: 0rem; bottom: 0; position: absolute; background: rgba(0,0,0,.52); } @media (min-width: 768px) { .my-form.form-inline .form-group { width: 25.75%; margin-right: 1%; } } @media (min-width: 992px) { .box { padding: 3rem 3rem 100px; } .box:after { left: -3rem; right: 3rem; transform: skew(155deg); } .fix.container { position: absolute; bottom: 0; left: 0; right: 0; } } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <nav class="navbar"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="col-md-12 nav navbar-nav"> <li class="col-md-2 text-center active"><a href="#">Home</a></li> <li class="col-md-2 text-center"> <a href="#">Page 1</a> </li> <li class="col-md-2 text-center"><a href="#">Page 2</a></li> <li class="col-md-2 text-center"><a href="#">Page 3</a></li> <li class="col-md-2 text-center"><a href="#">Page 4</a></li> <li class="col-md-2 text-center"><a href="#">Page 5</a></li> </ul> </div> </nav> </div> </div> </div> <div class="container-fluid intro"> <div class="title text-center"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Lorem ipsum dolor <span>sit amet</span>, consectetur adipisicing elit. <span>Placeat, aliquid.</span></h2> </div> </div> </div> </div> <div class="container fix"> <div class="row"> <div class="col-md-6"> <div class="box"> <p> Lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit. Reiciendis ullam a ipsum autem ipsa commodi excepturi officiis <span>nobis maxime</span> quis. </p> </div> </div> </div> </div> <div class="container fix"> <div class="row"> <div class="col-md-12"> <form class="form-inline text-center my-form" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Пароль</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputText2">Text</label> <input type="text" class="form-control" id="exampleInputText2" placeholder="Text input" > </div> <button type="submit" class="btn btn-default btn-submit">Войти</button> </form> </div> </div> </div> </div> </body> </html>

EXAMPLE ON JSBIN

  • zashib. Thank you - Slivki show