why is text shadow not visible in my browsers?

Question

none of my browsers seem to display the text-shadow attribute of my css code I am following a udemy tutorial and i did what it told me but it doesn't seem to work, can you tell me why? this is bootstrap 3.4.1 and my regular browser is chrome version 80.0 but it doesn't work on firefox, safari, quora, internet explorer or Microsoft edge

here is the code:

body {
  background:url("https://images.unsplash.com/photo-1415369629372-26f2fe60c467?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80");
  background-size:cover;
  background-position: center;
  font-family: Lato;
  color: white;
}
html {
  height: 100%
}
#content {
  text-align: center;
  padding-top:25%
  text-shadow: 0 4px 3px rgba(0,0,0,0.4),
               0 8px 13px rgba(0,0,0,0.1),
               0 18px 23px rgba(0,0,0,0.1);
}
h1 {
  font-weight: 700;
  font-size: 5em;
}
hr {
  width: 400px;
  border-top: 1px solid #f8f8f8;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>purrfect match</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-1/css/all.css">
    <link rel="stylesheet" href="date.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
    <nav class="navbar navbar-default">
          <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Purrfect Match</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About<span class="sr-only">(current)</span></a></li>
                <li><a href="#">Content</a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><i class="fas fa-user-plus"></i>Sign Up</a></li>
                <li><a href="#"><i class="fas fa-user"></i>Login</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div id="content">
                    <h1>Purrfect match</h1>
                    <h3>The Only Feline Dating-Human App</h3>
                    <hr>
                    <button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started!</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Does this answer your question? [Leaving out the last semicolon of a CSS block](https://stackoverflow.com/questions/11939595/leaving-out-the-last-semicolon-of-a-css-block) — Ritesh Khandekar, Jan 04 '20 at 05:40
yes this worked thank you I am surprised that I left out something as simple as that — why_u_wanna_no_me_name, Jan 04 '20 at 05:44

score 2 · Accepted Answer · answered Jan 04 '20 at 05:27

You have a missing semicolon in your code :

#content {
 text-align: center;
 padding-top:25%; **// missing semicolon is the issue in the code.** 
 text-shadow: 0 4px 3px rgba(0,0,0,0.4),
           0 8px 13px rgba(0,0,0,0.1),
           0 18px 23px rgba(0,0,0,0.1);
 }

why is text shadow not visible in my browsers?

1 Answers1