0

У меня вышло вот это. Я так понимаю это в корне не верно. Подскажите в какую сторону копать как это сделать правильно?

.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>

2
  • Вы бы хоть пример дали того, что должно быть. 21 сен 2016 в 19:09
  • Извините картинка не загрузилась. s010.radikal.ru/i314/1609/d1/08d495de0c42.jpg Я хотел эту секцию как-то с помощью бустртапа состряпать, но получилось непонятно что. Пробуду вот по старинке jsfiddle.net/oaeybv0m/1 21 сен 2016 в 19:19

1 ответ 1

2

Если на быструю руку, то например так:

.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>

ПРИМЕР НА JSBIN

1
  • зашибись. Спасибо 22 сен 2016 в 10:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.