Ответы пользователя по тегу Вёрстка
  • Появился скрол снизу, что сделать для его исчезновения?

    Просто у header нужно было ширину убрать

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="2.css">
        <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Titillium+Web:wght@400;700&display=swap" rel="stylesheet">
        <title>Cuda</title>
    </head>
    <body>
        <div class="block-purple">
            <header>
                <div class="inner-header">
                    <a class="logo" href="#">Cuda</a>
                    <nav class="nav">
                        <a class="nav-link" href="#">home</a>
                        <a class="nav-link" href="#">about</a>
                        <a class="nav-link" href="#">work</a>
                        <a class="nav-link" href="#">blog</a>
                        <a class="nav-link" href="#">contact</a>
                    </nav>
                </div>
            </header>
            <div class="container1">
                <p class="big-text">Hi there! We are the new kids on the block<br> 
                    and we build awesome websites and mobile apps.</p>
                <a href="#"><p class="button-orange">Work with us!</p></a>
            </div>
        </div>
        <div class="block-green">
            <h2 class="block-title">Services we provide</h2>
            <p class="block-text">We are working with both individuals and businesses from all over the globe<br> 
                to create awesome websites and applications.</p>
            <div class="in-a-row">
                <div class="item"><img src="images/flag.svg"><br><p class="item-text"><span class="item-title">Branding</span><br><br>Lorem ipsum dolor sit a consectetuer adipiscing elit, sed diam nonummy nibh.</p></div>
                <div class="item"><img src="images/flag.svg"><br><p class="item-text"><span class="item-title">Design</span><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p></div>
                <div class="item"><img src="images/flag.svg"><br><p class="item-text"><span class="item-title">Development</span><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p></div>
                <div class="item"><img src="images/flag.svg"><br><p class="item-text"><span class="item-title">Rocket Science</span><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p></div>
            </div>
        </div>
    </body>
    </html>

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body  {
          font-family: 'Titillium Web', sans-serif;
          font-size: 12pt;
    
      }
      
      a, a:visited {
          text-decoration: none;
      }
    
      .block-purple {
        background-color: #87509c;
        height: 100vh;
      }
      
      header {
        height: 64px;
      }
      
      .inner-header {
        display: flex;
        height: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 0 200px;
      }
      
    .logo {
        font-size: 2rem;
        font-family: 'Pacifico', cursive;
        color: white;
      }
      
        .nav-link {
          margin-left: 25px;
          text-transform: uppercase;
          font-size: 0.8rem;
          color: white;
          padding: 4px 10px;
      }
    .nav-link:hover {
        background-color: #643a79;
        border-radius: 7px;
    }
    
    .container1 {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        height: 70%;
    }
    
    .big-text {
        margin-top: 100px;
        font-size: 2rem;
        text-align: center;
        color: white;
    }
    
    .button-orange {
        margin-top: 30px;
        padding: 15px 60px;
        border: 1px solid #eb7d4b;
        border-radius: 4px;
        background-color: #eb7d4b;
        color: white;
        box-shadow: 0 3px #c86a40;
        text-transform: uppercase;
        font-size: 0.9rem;
    }
    
    .block-green {
        background-color: #17c2a4;
        height: 100vh;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    
    .in-a-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 75px;
        justify-content: center;
    }
    
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 60px;
    }
    
    .block-title {
        position: relative;
        font-size: 2.6rem;
        color: white;
        text-transform: uppercase;
        letter-spacing: 4px;
    }
    
    .block-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 4px;
        background-color: #14a58c;
        right: 0;
        margin: 0 auto;
        display: block;
        border-radius: 10px;
    }
    
    .block-text {
        font-size: 0.9rem;
        color: white;
        text-align: center;
        margin-top: 20px;
    }
    
    .item-title {
        font-size: 1.2rem;
        font-weight: bold;
        text-transform: uppercase;
    }
    
    .item-text {
        text-align: center;
        color: white;
        font-size: 0.8rem;
    }
    Ответ написан
    1 комментарий