Menu
Hey guys!
I am new here and it looks like a great place to learn about php.. I have been learning some php and css and I am trying to get my services heading to line up side by side. I have three boxes and the width should be wide enough to fit all three but after changing the border to make it wider, it somehow does not fit anymore… Here is my code of my html and css. Do I need to place the code in backticks? I have been following a tutorial on youtube, would it help if I put the link here?
<!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=”
<link rel=”stylesheet” href=”
<link href=”
<link href=”
<link href=”
</head>
<body>
</body>
</html>
<section class=”main-container”>
<div class=”crotchet”>
<p>𝅘𝅥</p>
</div>
<div class=”minim”>
<p>𝅗𝅥</p>
</div>
<div class=”quaver”>
<p>𝅘𝅥𝅮</p>
</div>
<div class=”pc101″> </div>
<div class=”music”><i class=”fas fa-music fa-8x”></i></div></span>
<div class=”sharp”><p>♯</p></div>
<div class=”natural”><p>♮</p></div>
<div class=”flat”><p>♭</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>🎹</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>🎻</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>🎷</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>
I will include part of my CSS relevant to the above code:
div.service1 {
width: 800px;
border: 1px solid #c1c1c1;
margin: 20px 50px;
padding: 0 5px;
floa
t: 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 ;
}
I
think I changed the width of div.services1 {}…..
and it currently looks like this:
[upl-image-preview url=https://www.webdeveloper.com/forum/assets/files/2018-07-28/1532786435-752266-image.png]