Jump to content
Sign in to follow this  
piano0011

creating services div boxes not aligned side by side

Recommended Posts

hey guys!

I am trying to create a service section and I got it to work before but when I changed the border to make it wider, it doesn't seem to be side by side anymore. Here is my CSS and html file and what it is looking liked at the moment:

 

 <!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>

       <h1>Welcome to PianoCourse101</h1>
     </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><center>Enter your E-mail Address</center></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_main">Services</div>
      <div class="services">
         <div class="service1">
            <h1>Level 1</h1>
            <div class="image">
            <a href="signup.php"><p>&#127929</p></a>
          </div>
            <h3>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</h3>
          </span>
            <div class="service1">
             <h1>Level 2</h1>
            <div class="image">
            <a href="signup.php"><p>&#127931</p></a>
           </div>
           <h4>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</h4>

          </div>
          <div class="service1">
            <h1>Level 3</h1>
            <div class="image">
            <a href="signup.php"><p>&#127927</p></a>
            </div>
            <h5>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</h5>
         </div>
      </div>


<span class="index_views"><p>There are <?php echo "<span class='index_views_counter'> $views </span>";?> visitors who have visited <?php echo "<span class='index_views_counter'> $pagename </span>"; ?>!</p></span>


          
</body>
</html>

This is my CSS code:

div.service1 {
  width: 800px;
  border: 1px solid #c1c1c1;
  margin: 20px 50px;
  padding: 0 5px;
  
  float: left;
}

div.service1 > p {
   font-size: 14px;
   color: #000000;
   max-width: 250px;
   padding-top: 30px;
   text-align: justify;
   text-justify: inter-word;
   
}

div.services {
  width: 2500px;
  margin: 0 auto;
  
}

div.services  h1 {
  font-size: 50px;
  font-weight: bold;
  background-color: #c1c1c1;
  color: #000000;
  padding: 10px 0;
  
}

div.image {
  max-width: 300px
  margin: 15px 0 0 0;
  padding-top: 30px;
  
}

div.image h3 {
  position: relative;
  bottom: 300px;
}

div.image h4 {
  position: relative;
  top: 200px;
}

div.services_main {
  text-align: center;
  font-size: 40px;
  color: #6495ED;
  margin: 100px 0 50px 0;
  font-family: 'Aldrich', sans-serif;
   font-family: 'Mr Dafoe', cursive ;
  
}

div.image:hover {
  opacity: 0.2;
  max-width: 200px;
  margin-top: 15px;
}

image.thumb.png.8bcbbc7250cb07a76ccde93204625da3.png

Edited by piano0011

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.