0

みなさん、 .card要素に box-shadow と border radius を追加しようとしています。しかし、何も起こりません。どうすればこれを解決できますか。そして、なぜこれが起こっているのですか？フレックスボックスに関するものであるという理論があります。

また、私のクラスの命名を批判できる人はいますか。İ ここで初めて BEM 手法を使用してみました。それらをスタイリングして名前を付けるには、かなり時間がかかりました。私はそれを正しくやっていますか？

* {
  box-sizing: border-box; }

body {
  background-color: #8F91A2;
  font-size: 10px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
  top: 250px; }

.card {
  width: 45rem;
  height: 17rem;
  background-color: #1E1E24;
  display: flex;
  flex-direction: row-reverse;
  border-radius: 100%; }
  .card__img, .text-box {
    background-color: white;
    width: 40%;
    height: 100%; }
    .card__img img, .text-box img {
      width: 100%;
      height: 100%; }

.text-box {
  width: 60%;
  background-color: #1E1E24; }
  .text-box__up {
    width: 80%;
    height: 75%;
    padding: 1rem; }
    .text-box__up__header {
      width: 100%;
      height: 45%;
      margin-top: .3rem; }
      .text-box__up__header h1 {
        display: inline-block;
        padding: 0.3rem;
        margin-left: 3rem;
        font-family: 'Staatliches', cursive;
        color: white;
        margin-top: 0px;
        font-size: 1.6rem;
        text-align: center; }
    .text-box__up__text {
      width: 80%;
      height: 25%;
      margin-left: 3rem;
      margin-top: .7rem;
      padding: .2rem;
      font-family: 'Montserrat', sans-serif;
      color: #FFD046;
      text-align: center;
      font-size: .6rem; }
  .text-box__down {
    width: 80%;
    height: 25%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: .2rem;
    margin-left: 2rem; }
    .text-box__down__element {
      display: inline-block;
      color: white; }
      .text-box__down__element h2 {
        margin-top: 0px;
        margin-bottom: 0rem;
        font-family: 'Staatliches', cursive; }
      .text-box__down__element span {
        font-family: 'Montserrat', sans-serif; }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="css/styles.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Staatliches&display=swap" rel="stylesheet">
    </head>
    
    <body>
        <div class="container">
            <div class="card">
                <div class="card__img"><img
                        src="https://images.unsplash.com/photo-1623654517565-d9886645bb8a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1525&q=80"
                        alt=""></div>
                <div class="text-box">
                    <div class="text-box__up">
                        <div class="text-box__up__header">
                            <h1>Get insights that help grow your business</h1>
                        </div>
                        <div class="text-box__up__text">
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima a sapiente consequuntur
                                aliquid
                                minus labore magni aspernatur, nam, aperiam.
                            </p>
                        </div>
                    </div>
                    <div class="text-box__down">
                        <div class="text-box__down__element">
                            <h2>10K+</h2>
                            <span>Companies</span>
                        </div>
                        <div class="text-box__down__element">
                            <h2>10K+</h2>
                            <span>Companies</span>
                        </div>
                        <div class="text-box__down__element">
                            <h2>10K+</h2>
                            <span>Companies</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    
    </body>
    
    </html>

4

2 に答える 2