0

@import url(../../../node_modules/animate.css/animate.min.css);
@import url(./normalize.css);
@import url(./adaptive_480px.css);
@import url(./grid.css);
@font-face {
  font-family: zHind-Regular;
  src: url(../../fonts/Hind/Hind-Regular.ttf);
}

@font-face {
  font-family: "zHind - Semibold";
  src: url(../../fonts/Hind/Hind-SemiBold.ttf);
}

@font-face {
  font-family: zHind;
  src: url(../../fonts/Hind/Hind-Light.ttf);
}

@font-face {
  font-family: "zOpen Sans";
  src: url(../../fonts/Open_Sans/OpenSans-Light.ttf);
}

@font-face {
  font-family: zRoboto;
  src: url(../../fonts/Roboto/Roboto-Bold.ttf);
}

@font-face {
  font-family: zMontserrat;
  src: url(../../fonts/Montserrat/Montserrat-Bold.ttf);
}

#rotate180deg {
  transform: rotate(90deg);
}

#rotate-90deg {
  transform: rotate(-90deg);
}

.header {
  background-color: #212429;
}

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

.header .title .page-title {
  align-self: center;
  transform: translate(50%, 0%);
}

.header .title .page-title .BLOG {
  text-transform: uppercase;
  font: 26px "zHind - Semibold";
  font-size: 1.375rem;
  color: #fefefe;
  letter-spacing: 3.6px;
}

.header .title .menu {
  padding: 20px;
}

.header .title__item:not(:nth-child(2)) {
  border-left: 1px solid #3c3c3c;
  border-right: 1px solid #3c3c3c;
}

.header .title .social-list {
  align-self: stretch;
}

.header .title .social-list .list {
  list-style: none;
  height: 100%;
  line-height: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  padding-inline-start: 0px;
  margin-block-start: 0;
  margin-block-end: 0;
  padding: 0;
}

.header .title .social-list .list__item {
  padding: 20px;
  border-right: 1px solid #3c3c3c;
}

.header .slider {
  width: 100%;
  height: 580px;
  /*         overflow: hidden; */
  position: relative;
}

.header .slider__item {
  padding: 230px 0 0 10%;
  width: 100%;
  height: 580px;
  transition: top .4s;
  background-size: contain;
  position: absolute;
}

.header .slider__item .sup-title {
  font-family: "zHind - Semibold";
  color: #fff;
}

.header .slider__item .slider-title {
  font-family: zHind;
  user-select: all;
  letter-spacing: 5.6px;
  max-width: 470px;
  word-wrap: break-word;
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.44);
  color: #fff;
  font-size: 40px;
  text-transform: uppercase;
}

.header .slider__item-2 {
  /* background-size: cover; */
  background: url("../../img/Slider__item-1.png") no-repeat center top;
}

.header .slider .navigation {
  position: absolute;
  transform: rotate(-90deg);
  right: -80px;
  top: 50%;
  z-index: 1;
}

.header .slider .navigation .tab {
  margin: 0 0 22px 0;
  display: flex;
  justify-content: center;
}

.header .slider .navigation .tab__item {
  height: 8px;
  border: 1px solid #ffffff;
  width: 8px;
}

.header .slider .navigation .tab__item:not(:last-child) {
  margin-right: 10px;
}

.header .slider .navigation__image {
  display: inline;
  cursor: pointer;
}

.header .slider .navigation .activites {
  display: flex;
  align-items: center;
}

.header .slider .navigation .this-article {
  user-select: none;
  display: inline-block;
  margin: 0 20px;
  line-height: 0;
  letter-spacing: 2.8px;
  color: #fff;
  text-transform: uppercase;
  font-family: "zHind - Semibold";
}

.form {
  background-color: #f7f7f7;
  display: flex;
  padding: 28px 30px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.form .sign-up {
  font-family: zMontserrat;
  color: #212121;
  letter-spacing: 4px;
  text-transform: uppercase;
  flex: 1 0 175px;
}

.form__input {
  padding: 20px 30px;
  font-family: zHind;
  font-size: 15px;
  border: none;
  flex: 1 1 350px;
}

.form .submit-button {
  flex: 1 2 280px;
  align-self: stretch;
  font-family: zHind;
  background-color: #212121;
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  padding: 20px 70px;
  border: 1px solid rgba(221, 221, 221, 0.15);
  box-shadow: 0 0 0 rgba(232, 232, 232, 0.11);
}

.col .post {
  background-color: white;
  display: flex;
  align-items: center;
  flex-flow: nowrap column;
  text-align: center;
}

.col .post .box {
  width: 40px;
  margin: -17px 0 40px 0;
  display: flex;
  box-shadow: 1px 1px 3px rgba(213, 213, 213, 0.75);
  background-color: #212121;
  height: 35px;
}

.col .post .box__icon {
  margin: auto;
}

.col .post__body {
  padding: 0 34px;
  text-transform: uppercase;
}

.col .post__body .sup-title,
.col .post__body .sub-title {
  font-size: 14px;
  font-family: zHind;
  color: #999999;
  opacity: 0.9;
  letter-spacing: 1.4px;
}

.col .post__body .title {
  font-family: zMontserrat;
  font-size: 20px;
  color: #212121;
}

.col .post__body .demo-text {
  margin: 28px 0 30px 0;
  font-family: zHind;
  text-align: justify;
  font-size: 15px;
  text-transform: none;
  color: #464646;
  letter-spacing: 1.5px;
}

.col .post .read-more {
  font-family: zHind;
  cursor: pointer;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .8px;
  line-height: 24px;
  transition: .4s;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.col .post .read-more:hover {
  letter-spacing: 2.8px;
}

.col .post .read-more::after,
.col .post .read-more::before {
  content: "";
  display: block;
  transition: all .4s;
  height: 2px;
  background-color: #d7d7d7;
  width: 0%;
}

.col .post .read-more:hover::after,
.col .post .read-more:hover::before {
  width: 100%;
}

.col .post__footer {
  width: 100%;
  height: 60px;
  border-top: 1px solid #d7d7d7;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/media/styles/css/style.css">
  <title>Document</title>
</head>

<body>
  <div id="wrapper">
    <header class="header">
      <div class="title">
        <div class="title__item menu">
          <img src="./media/img/Menu_Icon.svg" alt="">
        </div>
        <div class="title__item page-title">
          <img src="./media/img/Deco.png" alt="">
          <span class="BLOG">Blog</span>
        </div>
        <div class="title__item social-list">
          <ul class="list">
            <li class="list__item">
              <img src="./media/img/net.webp" alt="">
            </li>
            <li class="list__item">
              <img src="./media/img/twitter.webp" alt="">
            </li>
            <li class="list__item">
              <img src="./media/img/tambler.webp" alt="">
            </li>
            <li class="list__item">
              <img src="./media/img/facebook.webp" alt="">
            </li>
            <li class="list__item">
              <img src="./media/img/Search.webp" alt="">
            </li>
          </ul>
        </div>
      </div>
      <div class="slider">
        <div class="navigation">
          <div class="tab">
            <div class="tab__item"></div>
            <div class="tab__item"></div>
            <div class="tab__item"></div>
          </div>
          <div class="activites">
            <img id="rotate-90deg" class="navigation__image" src="./media/img/arrow-1.webp" alt="">
            <p class="this-article">Featured Article</p>
            <img id="rotate180deg" class="navigation__image" src="./media/img/arrow-1.webp" alt="">
          </div>
        </div>
        <div class="slider__item-1 slider__item">

        </div>
        <div class="slider__item-2 slider__item">
          <h3 class="sup-title">Latest News</h3>
          <h1 class="slider-title">BodyBuilding best for you health</h1>
        </div>
        <div class="slider__item-3 slider__item">
        </div>
      </div>
    </header>
    <div class="form">
      <h2 class="sign-up">Signup to Newsletter
      </h2>
      <input placeholder="YOUR NAME" class="form__input input-1" type="text" name="" id="">
      <input placeholder="YOUR EMAIL" class="form__input input-1" type="email" name="" id="">
      <button class="submit-button">Subscribe Now</button>
    </div>
    <div class="col col-1">
      <div class="text-post post">
        <div class="box">
          <img src="./media/img/icon-pen.webp" alt="" class="box__icon">
        </div>
        <div class="post__body">
          <h3 class="sup-title">Travelling</h3>
          <h1 class="title">Travel besT Adventure</h1>
          <h3 class="sub-title date">January 25, 2016</h3>
          <p class="demo-text">Lorem ipsum doloirs sit amet, csatetur adipisicin, sed does eiusmod tehampor incididunt uts laboasre et dolhvaliqua. Ut enim vem, nostrasuaations ullamco labiosi ut saaliquip exoi asea comoodo Disco choice is the have great work.</p>
        </div>
        <div class="read-more">Read More</div>
        <div class="post__footer">
          <div class="coments"></div>
          <ul class="social-list">
            <li class="social"></li>
            <li class="social"></li>
            <li class="social"></li>
            <li class="social"></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col col-2"></div>
    <div class="col col-3"></div>
    <div class="col col-4"></div>
  </div>
</body>

</html>

2 ответа 2

0

Не до конца понятно, какой конкретно результат ожидается.

Wrapper растягивается на 100% ширины своего родителя, так как div является блочным элементом. Родитель Wrapper - это body, который в свою очередь тоже является блочным элементом и тянется на всю ширину родительского элемента. Родитель body - html, который тоже блочный и по-умолчанию тянется на всю ширину браузера.

0

А вы часом не про эту белую рамку говорите?

введите сюда описание изображения

Если да, то добавьте к body стиль margin: 0; (body {margin: 0;})

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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