Технологии
Здравствуйте! У меня проблема с позиционированием на сайте, поможете? - вопрос №3449378
В общем, я не нашел, как сюда загрузить файл, так что код будет тут (простите):
HTML:
УБРАЛ !DOCTYPE И ТЕГИ HTML ДЛЯ КОРРЕКТНОГО ОТОБРАЖЕНИЯ Мой телефон — мегафон TEKKEN КаменщикХлебЯпонский президент Брайан,КаменщикХлеб оптом и в розницу
Стишок Война утехи смерть всех техНа танках псы правительства кричат:«Эй, вон он!»Злобный безработный хлебоед, батонов лорд, ларьков всех богТри дня батрачит без баблаИ скрежет техники, огоньИ заберут МЕТАЛЛОЛОЛИз глубины души раздастся дикий крикРазверзнув небеса, голодным голосом пронзив сердца....Я КАМЕНЩИК, РАБОТАЮ ТРИ ДНЯ!!! Обо мне:
Меня зовут Брайан.
body {margin: 0;font-family: Trebuchet MS, 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 */.container {width: 100%;max-width: 1200px;margin: 0 auto;}
/* Intro */.intro {display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100vh;
background: url("../images/kamenshik.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;line-height: 1;}
.intro__suptitle {margin-bottom: 20px;
font-family: Trebuchet MS, sans-serif;font-size: 72px;color: #fff;}
/* Header */.header {width: 100%;padding-top: 30px;
position: absolute;top: 0;left: 0;right: 0;z-index: 1000;}
.header__inner {display: flex;justify-content: space-between;align-items: center;}
.header__logo {padding-bottom: 20px;font-size: 30px;font-weight: 700;color: rgb(0, 0, 0);}
/* Nav */.nav {font-size: 20px;text-transform: uppercase;}
.nav__link {padding-bottom: 20px;display: inline-block;vertical-align: top;margin: 0 15px;position: relative;
color: rgb(0, 0, 0);text-decoration: none;
transition: color .1s linear;}
.nav__link:after {content: "";display: block;width: 100%;height: 3px;
background-color: #700f38;opacity: 0;
position: absolute;top: 100%;left: 0;z-index: 1;
transition: opacity .1s linear;}
.nav__link:hover {color: #700f38;}
.nav__link:hover:after,.nav__link.active:after {opacity: 1;}
.nav__link.active {color: #700f38;}
/* Button */.btn {margin-top: 60px;display: inline-block;vertical-align: top;padding: 8px 30px;
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-color: #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 0;position: relative;
border-top: 3px solid #fff;opacity: .7;
font-size: 18px;color: #fff;text-transform: uppercase;}
.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 */.section {padding: 80px 0;}
.section__header {width: 100%;max-width: 950px;margin: 0 auto 40px;
text-align: center;}
.section__suptitle {font-family: 'Kaushan Script', cursive;font-size: 24px;color: #333;}
.section__title {font-size: 30px;font-weight: 700;color: #333;text-transform: uppercase;}
.section__title:after {content: "";display: block;width: 60px;height: 3px;margin: 30px auto;
background-color: #f38181;}
.section__text {font-size: 15px;color: #999;}
/* About */.about {margin-top: 80px;display: flex;justify-content: space-between;}
.about__item {width: 380px;position: relative;
background-color: #95e1d3;}
.about__item:hover .about__img {transform: translate3d(-10px, -10px, 0);}
.about__item:hover .about__img img {opacity: .1;}
.about__item:hover .about__text {opacity: 1;}
.about__img {background: linear-gradient(to bottom, #f38181, #fce38a);
transition: transform .2s linear;}
.about__img img {display: block;transition: opacity .1s linear;}
.about__text {width: 100%;
font-size: 18px;color: #fff;text-transform: uppercase;font-weight: 700;text-align: center;opacity: 0;
position: absolute;top: 50%;left: 0;z-index: 2;transform: translate3d(0, -50%, 0);
transition: opacity .2s linear;}
* {margin: 0;padding: 0;}html,body {height: 100%;}.wrapper {display: flex;flex-direction: column;min-height: 100%;}.content {flex: 1 0 auto;}.footer {flex: 0 0 auto;}
(не спрашивайте, что за бред здесь написан)Проблема вот в чём: Первый блок отображается отлично, а второй уходит под первый. Вот скриншот:
Подскажите, как починить)
сентябрь 24, 2019 г.
-
Всего ответов: 0