0

я новичок в вёрстке. Такая проблема, пытаюсь задать параметры классу, но ничего не выходит. Выше стоящие правила не мешают(пробовал отключать). Проблема с классом ".intro__subtitle"

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Cardo&family=Open+Sans:wght@400;700&family=Raleway:wght@400;600&display=swap" rel="stylesheet">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>ActiveBox
        </title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
        <div class="container">
            <div class="header__inner">
                <div class="header__logo">
                    <img src="img/activebox-logo.png" alt="">
                </div>
                <nav class="nav">
                    <a class="nav__link" href="#">Features</a>
                    <a class="nav__link" href="#">Works</a>
                    <a class="nav__link" href="#">Our Team</a>
                    <a class="nav__link" href="#">Testimonials</a>
                </nav>
            </div>
        </div>
</header>
    <div class="intro">
        <div class="container">
            <div class="intro__inner">
                <h1 class="intro__title">Your Favorite One Page Multi Purpose Template</h1>
            </div>
            
/*=======================================================================
                 <h2 class="intro__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magnavel scelerisque nisl consectetur et.</h2>
*/=======================================================================
        </div>
    </div>
</body>
</html> 

CSS

/* Font properties
font-family: 'Cardo', serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Raleway', sans-serif;
=======================*/

body {
    margin: 0;
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    background-color: #fff;
    
}

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

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

p {
    margin: 0 0 10px;
}

/* Container
========================*/
.container {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
}

/* Header
========================*/
.header {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #515369;
    padding: 35px 0;
    align-items: center;
}

/* Navigation Bar
========================*/
.nav {
    display: flex;
    font-size:15px;
    font-weight: 700 ;
    text-transform: uppercase;

}

.nav__link {
    margin-left: 50px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    opacity: .75;
    transition: opacity .2 s linear;
}

.nav__link:first-child {
    margin-left: 0px;
}

.nav__link:hover {
    color:rgb(255, 255, 255);
    opacity: 1;
}

/* Intro
========================*/

.intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    height: 750px;
    padding-top: 100px;
    background: #ffffff
    url("../img/intro-bg.jpg") no-repeat center / cover;
}

.intro__title {
    font-family: 'Open Sans', sans-serif;
    font-size: 65px;
    line-height: 1.1;
    color:rgb(255, 255, 255);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

/*=======================================================================
.intro__subtitle {
    font-size: 22px;
    line-height: 1.5;
    color:#fff;
    font-weight: 400;
    text-align: center;
}
*/=======================================================================

.intro__inner {
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
}
2
  • 1
    так он же у вас тупо закомментирован. 6 авг 2021 в 10:47
  • а как вы задаете параметры? 6 авг 2021 в 13:44

1 ответ 1

3
  1. не существует никаких "параметров" у класса.
  2. все прекрасно работает, только белым по белому не видно =)

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

.header {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #515369;
  padding: 35px 0;
  align-items: center;
}

.nav {
  display: flex;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

.nav__link {
  margin-left: 50px;
  text-decoration: none;
  opacity: .75;
  transition: opacity .2 s linear;
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  height: 750px;
  padding-top: 100px;
  background: #ffffff url("../img/intro-bg.jpg") no-repeat center / cover;
}

.intro__title {
  font-family: 'Open Sans', sans-serif;
  font-size: 65px;
  line-height: 1.1;
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.intro__subtitle {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
}

.intro__inner {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
}
<header class="header">
  <div class="container">
    <div class="header__inner">
      <div class="header__logo">
        <img src="img/activebox-logo.png" alt="">
      </div>
      <nav class="nav">
        <a class="nav__link" href="#">Features</a>
        <a class="nav__link" href="#">Works</a>
        <a class="nav__link" href="#">Our Team</a>
        <a class="nav__link" href="#">Testimonials</a>
      </nav>
    </div>
  </div>
</header>
<div class="intro">
  <div class="container">
    <div class="intro__inner">
      <h1 class="intro__title">Your Favorite One Page Multi Purpose Template</h1>
    </div>


    <h2 class="intro__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magnavel scelerisque nisl consectetur et.</h2>

  </div>
</div>

1
  • laughing out loud 6 авг 2021 в 13:43

Ваш ответ

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

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