@Alexxxey_enot

Что делать если текст пишется не в следующем блоке(section) а в intro?

Это у меня:
5feee29d11c53165359999.png(Здесь зум 67%)

5feee2df3367d776150177.png

<header class="header">
	<div class="container">
		<div class="header__inner">

			<div class="header__logo">MoGo</div>

			<nav class="nav">
				<a class="nav__link" href="#">About</a>
				<a class="nav__link" href="#">Service</a>
				<a class="nav__link" href="#">Blog</a>
				<a class="nav__link" href="#">Work</a>
				<a class="nav__link" href="#">Contact</a>
			</nav>

		</div>
	</div>
</header>

<div class="intro">
	<div class="container">
		<div class="intro__inner">
			<h2 class="intro__suptitle">Creative Template</h2>
			<h1 class="intro__title">Welcome to Mogo</h1>

			<a href="#" class="btn">Learn More</a>
		</div>


	<div class="slider">
		<div class="container">
			<div class="slider__inner">
				<div class="slider__item active">
					<span class="slider__num">01</span>Intro</div>
				<div class="slider__item">
					<span class="slider__num">02</span>Work</div>
				<div class="slider__item">
					<span class="slider__num">03</span>About</div>
				<div class="slider__item">
					<span class="slider__num">04</span>Contacts
				</div>
			</div>
		</div>
	</div>
</div>

<section class="section">
	<div class="container">
		<div class="section__header">
			<h3 class="section__suptitle">What we do</h3>
			<h2 class="section__title">Story about us</h2>
			<div class="section__text">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</div>
		</div>
	</div>
</section>

body{
	margin: 0;
	font-family: 'Montserrat', sans-serif;

	font-size: 15px;
	line-height: 1.6;
	color: #333;
}

*, 
*:before,
*:after {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6{
	margin: 0;
}

.container{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.intro{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100vh;

	background: url("../img/intro.jpg") center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}

.intro__inner{
	width: 100%;
	max-width: 880px;
	margin: 0 auto;

	text-align: center;
}

.intro__title{
	color: #fff;
	font-size: 150px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;

	line-height: 1;
}

.intro__title:after{
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	margin: 60px auto;

	background: #fff;
}

.intro__suptitle{
	margin-bottom: 30px;
	font-size: 72px;
	color: #fff;
	font-family: 'Kaushan Script', cursive;
	text-align: center;
}
.header{
	width: 100%;
	padding-top: 30px;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;

}

.header__logo{
	font-size: 30px;
	font-weight: 700;
	color: #fff;
}

.header__inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav{
	font-size: 14px;
	text-transform: uppercase;
}

.nav__link{
	display: inline-block;
	vertical-align: top;
	margin: 0 10px;

	color: #fff;
	position: relative;
	text-decoration: none;

	transition: color .2s linear;
}

.nav__link:after{
	content: "";
	display: block;
	width: 100%;
	height: 3px;

	opacity: 0;
	background-color: #fce38a;

	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;

	transition: opacity .1s linear;
}

.nav__link:hover{
	color: #fce38a;
}

.nav__link:hover:after{
	opacity: 1;
}

/* button */

.btn{
	display: inline-block;
	vertical-align: top;
	padding: 10px 15px;

	border: 3px solid #fff;

	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;

	transition: background .1s linear, color .1s linear;
}

.btn:hover{
	background: #fff;
	color: #333;
}

/*Slider*/

.slider{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}

.slider__inner{
	display: flex;
	justify-content: space-between;
}

.slider__item{
	width: 23%;
	padding: 20px 20px;
	position: relative;

	border-top: 3px solid #fff;

	font-size: 18px;
	opacity: .7;
	color: #fff;
	text-transform: uppercase;
	padding-right: 20px;
	margin-right: 25px;
}

.slider__item.active{
	opacity: 1;
}

.slider__item.active:before{
	content: "";
	display: block;
	width: 70px;
	height: 3px;

	background-color: #f38181;

	position: absolute;
	top: -3px;
	left: 0;
	z-index: 1;


}

.slider__num{
	font-size: 24px;
	font-weight: 700;
}


.section{
	padding: 80px 0;
}

.section__header{
	margin-bottom: 40px;
}
  • Вопрос задан
  • 29 просмотров
Решения вопроса 1
RAX7
@RAX7
Тег для <div class="intro"> не закрыт
<div class="intro">
  <div class="container">
    <div class="intro__inner">
      <h2 class="intro__suptitle">Creative Template</h2>
      <h1 class="intro__title">Welcome to Mogo</h1>

      <a href="#" class="btn">Learn More</a>
    </div>

    <div class="slider">
      <div class="container">
        <div class="slider__inner">
          <div class="slider__item active">
            <span class="slider__num">01</span>Intro
          </div>
          <div class="slider__item">
            <span class="slider__num">02</span>Work
          </div>
          <div class="slider__item">
            <span class="slider__num">03</span>About
          </div>
          <div class="slider__item">
            <span class="slider__num">04</span>Contacts
          </div>
        </div>
      </div>
    </div>
  </div>
</div> <!-- <== -->
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы