Border attribute not working

Discussion in 'HTML and CSS' started by piano0011, Sep 3, 2018.

  1. piano0011

    piano0011

    Joined:
    Sep 3, 2018
    Messages:
    1
    Likes Received:
    0
    HTML:
    <!DOCTYPE html>
       <html>
       <head>
         <title>PianoCourse101</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" type="text/css" href="style.css">
          <link href="https://fonts.googleapis.com/css?family=Aldrich|Mr+Dafoe" rel="stylesheet">
       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity=">sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
         <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Lobster" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Lobster|Monoton|Orbitron" rel="stylesheet">
     
       </head>
       <body>
     
       </body>
       </html>

    <section class="main-container">


         <div class="crotchet">
    <p>&#x1D15F</p>
    </div>
    <div class="minim">
    <p>&#x1D15E</p>
    </div>
    <div class="quaver">
    <p>&#x1D160</p>
    </div>
     
        <div class="pc101"> </div>
       <div class="music"><i class="fas fa-music fa-8x"></i></div></span>

       <div class="sharp"><p>&#9839</p></div>
       <div class="natural"><p>&#9838</p></div>
       <div class="flat"><p>&#9837</p></div>


       <div class="main-wrapper">
         <div class="title">
           <br></br>

       

       
        </div>
          <br></br>
       </div>

       <div class="main-wrapper">
         <div class="first">
          <h2>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home! It doesn't matter if your child has no music foundation because there are lessons suitable for beginners and advanced students! Based on the "Bastien Piano Basics series", your child will be able to learn the basic hand positions, posture, finger numbers and letter names!<br></br> There are four levels in the "Bastien Piano Basics" series, beginning with the primer level, which is suitable for beginners. Once your child has completed the primer level, your child will be able to progress to Level 1, follow by Level 2 and Level 3.<br></br>Currently, PianoCourse101 lessons are mainly for children but we also encourage if you are an adult and also wish to learn how to play the piano to join us! In due course, there will also be lessons for adults!</h2>
        </div>
       </div>

       <div class="form">
       <form class="signup-form" action="newsletters.php" method="POST">
         <div class="newsletters">
          <label>Enter your E-mail Address</label>
        </div>
          <br></br>
          <div class="index_form"><center><input type="text" name='email' placeholder="Enter E-mail Address"></center></div>
          <br></br>
          <center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center>
          <br></br>

       </form>
       </div>


       <img class="snoopy" src="includes/pictures/snoopy.jpg"  alt="snoopy playing the piano" />

      </section>
      <div class="services_heading">Services</div>
         <div class="services">
            <div class="service1">
              <h1>Level 1</h1>
              <a href="signup.php"><p id="piano">&#127929</p></a>
              <p>Purchase the Level 1 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $100<br>Yearly fee: $800</p>
             </div>
       
               <div class="service1">
                <h1>Level 2</h1>
               <a href="signup.php"><p id="violin">&#127931</p></a>
               <p>Purchase the Level 2 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $150<br>Yearly fee: $1300</p>

             </div>
             <div class="service1">
               <h1>Level 3</h1>
               <a href="signup.php"><p id="sax">&#127927</p></a>
               <p>Purchase the Level 3 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $200<br>Yearly fee: $1800</p>
            </div>
         </div>
     
    <span class="index_views"><p class="start">There are</p> <p class="counter"> <?php echo "&nbsp".$views; ?> </p><div class="visitors"><?php echo "&nbsp"; ?>visitors who have visited this page!</div></span>
    Hey guys!

    I am baffled here because the following border attribute was working before and now I can't see any borders at all in my div services1 tag in the following code: I am new here and must I format my code in any particular way?



    This is my css code:

    Code (CSS):
    div.service1 {
      width: 308px;
      height: 300px;
      border: 1px solid #c1c1c1;
      margin: 20px 90px;
      padding: 0 5px;
      float: left;

    }

    div.service1 p{
      font-size: 20px;
      color: #000000;
      max-width: 250px;
      text-align: justify;
      margin-left: 20px;
      margin-top: 20px;
    }

    div.services {
      width: 1500px;
      margin: 0 auto;
      position: relative;
      top: 400px;
    }

    div.service1 h1 {
      text-align: center;
    }

    div.services #piano {
       font-size: 30px;
       margin-top: 20px;
       text-align: center

    }

    div.services #violin {
       font-size: 30px;
       margin-top: 20px;
      text-align: center;
    }

    div.services #sax {
       font-size: 30px;
       margin-top: 20px;
       text-align: center;
    }

    div.services h1 {
      font-size: 30px;
      font-weight: bold;
      background-color: #c1c1c1;
      color:#000000;
      padding: 10px 0;
      margin: 0 -6px;
      text-decoration: none;
    }

    div.services_heading {
       font-size: 50px;
       font-weight: bold;
       font-family: 'Aldrich', sans-serif;
       font-family: 'Mr Dafoe', cursive ;
       text-align: center;
       position: relative;;
       top: 200px;

    }
     
    Last edited: Sep 3, 2018
    piano0011, Sep 3, 2018
    #1
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.