CSS не применяется правильно

Question

Все еще учусь, я попробовал все, что в моих силах, чтобы сделать эту работу.

Я пытаюсь применить следующее:

https://codepen.io/tech-lane/pen/XWbqGyx

\n\n","scripts":[],"stylesheets":[]}'>
  <div class="container">
    <div class="box">

        <div class="title">
            <span class="block"></span>
            <h1>Lane Willmore<span></span></h1>
        </div>

        <!-- here role goes -->
       
       <h4 class="wordCarousel">     
        <div> 
<!--        Use classes 2,3, or 4 to match the number of words --> 
            <ul class="flip4"> 
                <li>Oh My!</li>
                <li>Swoosh</li>
                <li>Cool</li> 
                <li>Awesome</li>  
            </ul>
        </div>  
    </h4>
       

    </div>
</div>

@import url ('https://fonts.googleapis.com/css?family=Lato: 300 400 | Poppins: 300 400 800 & display = swap'); * { поле: 0; отступы: 0; } тело, html { переполнение: скрытое; } .container { ширина: 100%; высота: 100vh; фон: # 232323; дисплей: гибкий; justify-content: центр; align-items: center; .box { ширина: 250 пикселей; высота: 250 пикселей; положение: относительное; дисплей: гибкий; justify-content: центр; flex-direction: столбец; .заглавие { ширина: 100%; положение: относительное; дисплей: гибкий; align-items: center; высота: 50 пикселей; .block { ширина: 0%; высота: наследовать; фон: # ffb510; положение: абсолютное; анимация: mainBlock 2s cubi c -безье (.74, .06, .4, .92) вперед; дисплей: гибкий; } h1 { семейство шрифтов: 'Poppins'; цвет: #fff; размер шрифта: 32 пикселя; -webkit-анимация: форварды mainFadeIn 2s; -о-анимация: форварды mainFadeIn 2s; анимация: впереди mainFadeIn 2s; задержка анимации: 1.6с; непрозрачность: 0; дисплей: гибкий; align-items: baseline; положение: относительное; span { ширина: 0px; высота: 0px; -webkit-border-radius: 50%; -моз-граница-радиус: 50%; радиус границы: 50%; фон: # ffb510; -webkit-animation: загрузка 0,6 с куб. c -безье (.74, .06, .4, .92) вперед; анимация: попин 0,8 с куби c -безье (.74, .06, .4, .92) вперед; задержка анимации: 2 с; поле слева: 5 пикселей; margin-top: -10px; положение: абсолютное; внизу: 13 пикселей; справа: -12px; } } } .wordCarousel { размер шрифта: 36 пикселей; вес шрифта: 100; цвет: # 939393; div { переполнение: скрытое; положение: относительное; плыть налево; высота: 45 пикселей; padding-top: 5px; margin-top: -10px; li { семейство шрифтов: Serif; цвет: #ccc; вес шрифта: 250; отступы: 0 5px; высота: 45 пикселей; нижнее поле: 45 пикселей; дисплей: блок; } } } } } .flip4 {animation: flip4 15s cubi c -безье (1, 1, 0,32, 1,2) бесконечно; } @keyframes flip4 { 0% {margin-top: -360px; } 5% {margin-top: -270px; } 25% {margin-top: -270px; } 30% {margin-top: -180px; } 50% {margin-top: -180px; } 55% {margin-top: -90px; } 75% {margin-top: -90px; } 80% {margin-top: 0px; } 99,99% {margin-top: 0px; } 100% {margin-top: -270px; } } @keyframes mainBlock { 0% { ширина: 0%; слева: 0; } 50% { ширина: 100%; слева: 0; } 100% { ширина: 0; слева: 100%; } } @keyframes secBlock { 0% { ширина: 0%; слева: 0; } 50% { ширина: 100%; слева: 0; } 100% { ширина: 0; слева: 100%; } } @keyframes mainFadeIn { 0% { непрозрачность: 0; } 100% { непрозрачность: 1; } } @keyframes popIn { 0% { ширина: 0px; высота: 0px; фон: # e9d856; border: 0px solid #ddd; непрозрачность: 0; } 50% { ширина: 10 пикселей; высота: 10 пикселей; фон: # e9d856; непрозрачность: 1; нижний: 45 пикселей; } 65% { ширина: 7 пикселей; высота: 7 пикселей; низ: 0px; ширина: 15 пикселей } 80% { ширина: 10 пикселей; высота: 10 пикселей; низ: 20 пикселей } 100% { ширина: 7 пикселей; высота: 7 пикселей; фон: # e9d856; граница: 0px solid # 222; внизу: 13 пикселей; }} @keyframes secFadeIn {0% {opacity: 0; } 100% {непрозрачность: 0,5; }} нижний колонтитул {ширина: 350px; высота: 80 пикселей; фон: # ffb510; положение: абсолютное; справа: 0; низ: -80px; дисплей: гибкий; justify-content: центр; align-items: center; анимация: лучшие 0.8s вперед; задержка анимации: 4 с; span {display: flex; align-items: center; justify-content: центр; размер шрифта: 12 пикселей; цвет: # 232323; семейство шрифтов: 'Poppins'; i {margin-right: 25px; размер шрифта: 22 пикселя; цвет: # 232323; анимация: значок 2s вперед; задержка анимации: 4 с; непрозрачность: 0; }}} @keyframes top {0% {opacity: 0; низ: -80px} 100% {непрозрачность: 1; bottom: 0px}} @keyframes icon {0% {opacity: 0; преобразование: масштаб (0,0); } 50% {непрозрачность: 1; преобразование: масштаб (1,3) повернуть (-02 градусов); } 100% {непрозрачность: 1; низ: 0px; }}

Answer 1

Попробуйте этот код:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
    }
    /* Style the body */
    
    body {
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
    }
    /* Header/logo Title */
    
    .header {
      padding: 80px;
      text-align: center;
      background: #1abc9c;
      color: white;
    }
    /* Increase the font size of the heading */
    
    .header h1 {
      font-size: 40px;
    }
    /* Style the top navigation bar */
    
    .navbar {
      overflow: hidden;
      background-color: #333;
    }
    /* Style the navigation bar links */
    
    .navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
    }
    /* Right-aligned link */
    
    .navbar a.right {
      float: right;
    }
    /* Change color on hover */
    
    .navbar a:hover {
      background-color: #ddd;
      color: black;
    }
    /* Column container */
    
    .row {
      display: -ms-flexbox;
      /* IE10 */
      display: flex;
      -ms-flex-wrap: wrap;
      /* IE10 */
      flex-wrap: wrap;
    }
    /* Create two unequal columns that sits next to each other */
    /* Sidebar/left column */
    
    .side {
      -ms-flex: 30%;
      /* IE10 */
      flex: 30%;
      background-color: #f1f1f1;
      padding: 20px;
    }
    /* Main column */
    
    .main {
      -ms-flex: 70%;
      /* IE10 */
      flex: 70%;
      background-color: white;
      padding: 20px;
    }
    /* Fake image, just for this example */
    
    .fakeimg {
      background-color: #aaa;
      width: 100%;
      padding: 20px;
    }
    /* Footer */
    
    .footer {
      padding: 20px;
      text-align: center;
      background: #ddd;
    }
    
    @import url("https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,800&display=swap");
    .container {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .container * {
      margin: 0;
      padding: 0;
    }
    
    .container .box {
      width: 250px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
    
    .container .box .title {
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      height: 50px;
    }
    
    .container .box .title .block {
      width: 0%;
      height: inherit;
      background: #ffb510;
      position: absolute;
      animation: mainBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
      display: flex;
    }
    
    .container .box .title h1 {
      font-family: 'Poppins';
      color: #fff;
      font-size: 32px;
      -webkit-animation: mainFadeIn 2s forwards;
      -o-animation: mainFadeIn 2s forwards;
      animation: mainFadeIn 2s forwards;
      animation-delay: 1.6s;
      opacity: 0;
      display: flex;
      align-items: baseline;
      position: relative;
    }
    
    .container .box .title h1 span {
      width: 0px;
      height: 0px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      background: #ffb510;
      -webkit-animation: load 0.6s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
      animation: popIn 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
      animation-delay: 2s;
      margin-left: 5px;
      margin-top: -10px;
      position: absolute;
      bottom: 13px;
      right: -12px;
    }
    
    .container .box .wordCarousel {
      font-size: 36px;
      font-weight: 100;
      color: #939393;
    }
    
    .container .box .wordCarousel div {
      overflow: hidden;
      position: relative;
      float: left;
      height: 45px;
      padding-top: 5px;
      margin-top: -10px;
    }
    
    .container .box .wordCarousel div li {
      font-family: Serif;
      color: #ccc;
      font-weight: 250;
      padding: 0 5px;
      height: 45px;
      margin-bottom: 45px;
      display: block;
    }
    
    .flip4 {
      animation: flip4 15s cubic-bezier(1, 1, 0.32, 1.2) infinite;
    }
    
    @keyframes flip4 {
      0% {
        margin-top: -360px;
      }
      5% {
        margin-top: -270px;
      }
      25% {
        margin-top: -270px;
      }
      30% {
        margin-top: -180px;
      }
      50% {
        margin-top: -180px;
      }
      55% {
        margin-top: -90px;
      }
      75% {
        margin-top: -90px;
      }
      80% {
        margin-top: 0px;
      }
      99.99% {
        margin-top: 0px;
      }
      100% {
        margin-top: -270px;
      }
    }
    
    @keyframes mainBlock {
      0% {
        width: 0%;
        left: 0;
      }
      50% {
        width: 100%;
        left: 0;
      }
      100% {
        width: 0;
        left: 100%;
      }
    }
    
    @keyframes secBlock {
      0% {
        width: 0%;
        left: 0;
      }
      50% {
        width: 100%;
        left: 0;
      }
      100% {
        width: 0;
        left: 100%;
      }
    }
    
    @keyframes mainFadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    @keyframes popIn {
      0% {
        width: 0px;
        height: 0px;
        background: #e9d856;
        border: 0px solid #ddd;
        opacity: 0;
      }
      50% {
        width: 10px;
        height: 10px;
        background: #e9d856;
        opacity: 1;
        bottom: 45px;
      }
      65% {
        width: 7px;
        height: 7px;
        bottom: 0px;
        width: 15px;
      }
      80% {
        width: 10px;
        height: 10px;
        bottom: 20px;
      }
      100% {
        width: 7px;
        height: 7px;
        background: #e9d856;
        border: 0px solid #222;
        bottom: 13px;
      }
    }
    
    @keyframes secFadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 0.5;
      }
    }
    /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
    
    @media screen and (max-width: 700px) {
      .row {
        flex-direction: column;
      }
    }
    /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
    
    @media screen and (max-width: 400px) {
      .navbar a {
        float: none;
        width: 100%;
      }
    }
  </style>
</head>

<body>

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

        <div class="title">
          <span class="block"></span>
          <h1>Lane Willmore<span></span></h1>
        </div>

        <!-- here role goes -->

        <h4 class="wordCarousel">
          <div>
            <!--        Use classes 2,3, or 4 to match the number of words -->
            <ul class="flip4">
              <li>word 1</li>
              <li>word 2</li>
              <li>word 3</li>
              <li>word 4</li>
            </ul>
          </div>
        </h4>


      </div>
    </div>

  </div>

  <div class="navbar">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#" class="right">Link</a>
  </div>

  <div class="row">
    <div class="side">
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3>More Text</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <div class="fakeimg" style="height:60px;">Image</div><br>
      <div class="fakeimg" style="height:60px;">Image</div><br>
      <div class="fakeimg" style="height:60px;">Image</div>
    </div>
    <div class="main">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>

  <div class="footer">
    <h2>Footer</h2>
  </div>

</body>

</html>