Page does not display info correctly with my css code

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • thehen
    New Member
    • Sep 2022
    • 1

    Page does not display info correctly with my css code

    I am trying to get my text to glow with the following code, not sure if I have done it correctly for css. Can you look if my css code is correct for h1,h2,h3 (to use .a, .b and .c) and (tittle 1,2 and 3)
    Code:
    h1, h2, h3, h4, h5, h6 {
      margin-top: 0;
      margin-bottom: 0.5rem;
    }
    
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
      margin-bottom: 0.5rem;
      font-family: inherit;
      font-weight: 500;
      line-height: 1.2;
      color: inherit;
    }
    
    h1, .h1 {
      font-size: 2.5rem;
    }
    
    h2, .h2 {
      font-size: 2rem;
    }
    
    h3, .h3 {
      font-size: 1.75rem;
    }
    
    h4, .h4 {
      font-size: 1.5rem;
    }
    
    h5, .h5 {
      font-size: 1.25rem;
    }
    
    h6, .h6 {
      font-size: 1rem;
    }
    
    h1 .a{ /* use to make text glow in index.php */
        
     background-image: url("move.gif");
      background-size: cover;
      color: transparent;
      -moz-background-clip: text;
      -webkit-background-clip: text;
      text-transform: uppercase;
      font-size: 80px;
      margin: 5px 0;   
        }
    h2 .b {  /* use to make text glow in index.php */
      background-image: url("move.gif");
      background-size: cover;
      color: transparent;
      -moz-background-clip: text;
      -webkit-background-clip: text;
      text-transform: uppercase;
      font-size: 40px;
      margin: 10px 0;
        }   
        
    h3 .c { /* use to make text glow in index.php */
      background-image: url("move.gif");
      background-size: cover;
      color: transparent;
      -moz-background-clip: text;
      -webkit-background-clip: text;
      text-transform: uppercase;
      font-size: 40px;
      margin: 10px 0;
        }       
    
    .title3 { /* use to make text glow in index.php */
      font-family:  'Kanit', sans-serif;
      text-align: center;
      color: #FFF;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 10vh;
      letter-spacing: 1px;
      line-height:2
    }
    my html code

    Code:
    <div class="row">
            <div class="col-12 col-sm-6 col-md-5">
                <div class="info-box">
                    <div class="info-box-content">
                        <h1 class="a" "title1">testing text glow</h1>
                    </div>
                </div>
            </div>
                <div class="col-12 col-sm-6 col-md-5">
                    <div class="info-box mb-3">
                        <div class="info-box-content">
                            <h2 class="b" "title2">1111111111111111111</h2>
                        </div>
                    </div>
                </div>
        </div>
            <div class="col-12 col-sm-6 col-md-4">
                <div class="info-box mb-3">
                  
                    <div class="ms-3">
                        <h3 class="c" "title3">222222222222222222222222</h3>
                    </div>
                </div>
            </div>
  • dev7060
    Recognized Expert Contributor
    • Mar 2017
    • 655

    #2
    I am trying to get my text to glow with the following code, not sure if I have done it correctly for css. Can you look if my css code is correct for h1,h2,h3 (to use .a, .b and .c) and (tittle 1,2 and 3)
    What is not working? What is the expected result?

    Comment

    Working...