my homepage appears to be wider than necessary and I cant understand why -
HomePage
While my about page is just normal size --
About Page
What could be the culprit ?
Also, my header appears to be overlapping with the body in the about page, can anyone suggest some ideas as to why? I need to make it appear pretty much the same as the HomePage. Thank you!
Index html and CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | Lobo Academy</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<!------ Navigation ------->
<header>
<div class="header">
<div class="top-div">
<div class="top-div-left"> Get a free bjj class NOW
Call us at 456465464</div>
</div>
<div>
<nav><ul class="nav">
<li>Home</li>
<li>About</li>
<img id="logo" src="logo_header.webp">
<li>Contact</li>
<li>Store</li>
</ul>
</div> </nav>
</header></div>
<main>
<!----- Top Section - Triple Image ------->
<!---- Welcome Video ------>
<div class="welcome-video">
<video id="welcome-video-id" src="welcome_banner_video.mp4" height="500px" width="100%" autoplay muted></video>
</div>
<button class="top-button">New to Martial Arts? Click here</button>
<div class="welcome-text">
<p><h1>Welcome!</h1>
<main>We are the premiere Brazilian Jiu Jitsu training center in the Charlotte metro area. Head instructor, Lucas Lepri, is among the most decorated jiu jitsu athletes in the entire world, and we are part of the most dominant team in the history of the sport, Alliance.
We believe jiu jitsu is more than just a sport, self-defense system, or fitness program; it’s a lifestyle that improves the whole person. The physical, mental, and transcendent benefits of jiu jitsu should be accessible to everyone, from beginner to world-class competitor and any age, sex, or ethnicity.
We will help you achieve your goals, whether it is self defense, weight loss, confidence or to be a world champion. In the process, you will transform your life and become tougher, safer, fitter, & better.</main></p>
</div>
<div class="welcome-programs"><h2 id="prog-text">Programs and Classes</h2></div>
<section class="top-section">
<div class="left-wrap">
<div class= "left-wrap-inner">
<div class="top_left" ><img src="kids_left_banner.jpg" ></div>
<div class="top-left-text">
<h2 id="kids-martial-arts">Kids Martial Arts</h2>
<p>Learning a martial art, and Brazilian jiu jitsu in particular, is one of the best gifts you can provide a child. It provides character development and personal growth.
<br> Click to learn more.</p></div>
</div>
</div>
<div class ="center-wrap">
<div class="center-wrap-inner">
<div class="top_center" ><img src="trainer1.jpg"></div>
<div class="top-center-text">
<h2>Brazilian Jiu Jitsu</h2>
<p>Brazilian Jiu Jitsu is a sport, self-defense system, and a fitness program. It has proven to be the most practical and effective self-defense system in the world.</p></div>
</div>
</div>
<div class="right-wrap">
<div class="right-wrap-inner">
<div class="top_right"><img src="center.jpg" ></div>
<div class="top-right-text">
<h2>Weight Loss</h2>
<p>If you are looking to learn Brazilian Jiu Jitsu with maximum efficiency, private lessons will help reduce the amount of time it takes to reach key milestones.</p></div>
</div>
</div>
</section>
<!--------- End of Top section --------->
<!---------- Middle Section : Kids ---------->
<div class="mid-sec-header"><h2 id="coach-info">Alan Surmont</h2></div>
<section class="mid-section">
<div class="mid-wrap">
<div class="mid-section-inner-left">
<div class="kids-img"><img src="trainer1.jpg"></div>
</div>
<div class="mid-section-inner-right">
<div class="text-mid">
<button class="kid-button">Get a <strong>FREE</strong> Brazilian Jiu Jitsu Class here</button>
<p>Alan Surmont is the leading Israeli BJJ Champion, trained by his father Pascal Surmont, the former
Belgian Judo Sensei for over 9 years <br>
<br>
Currently training under Moshe Rubinov and is a brown belt under the Marcelo Garcia Association</p>
</div>
</div>
</div>
</section>
<!----------- End of Middle Section --------->
<!---------- Youtube testimonials -------->
<section class="lower-section-youtube">
<div class="vids">
<div class="youtube-left">
<h1 id="adult-testemonial">Adult class Testemonial</h1>
<iframe width="600" height="470" src="https://www.youtube.com/embed/vTFFUcppZSY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="youtube-right">
<h1 id="children-testemonial">Children Class Testemonial</h1>
<iframe width="600" height="600" src="https://www.youtube.com/embed/qmu47bjwyCw?start=30" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</section>
<!----------------- End of Youtube testimonials ------>
<!---------- Recent news section -------->
<section>
<div class="recent-posts">
<div class="recent-right"><a href=""><h1>New Location</h1>
<p>Our Lepri BJJ affiliated academy in Winston-Salem is now in a new location since January 2020. They are now at located at 1606 South Stratford Road, suite C, Winston-Salem, NC 27103. The head coach Pa ...</p>
</a></div>
<div class="recent-left"><h1>Recent <br> news</h1>
</div>
</div>
</section>
<!---------- Recent news section ------>
</main>
</body>
<footer>
<section class="footer">
<div class="footer-inner">
<div class="footer-left">
<ul>
<li>Sunday : Kids - 17:00-18:00; Seniors - 18:00-21:30</li>
<li>Monday : Kids - 16:15-19:00; Seniors - 19:00-21:30</li>
<li>Tuesday : Closed.</li>
<li>Wednesday : Kids - 17:00-19:00; Seniors - 19:00-21:30 </li>
<li>Thursday : Kids - 17:00-18:00; Seniors - 18:00-21:30 </li>
<li>Friday : Seniors - 08:30-22:00</li>
<li>Saturday: Open Mat - 20:00</li>
</ul>
</div>
<div class="footer-center">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Store</li>
</ul>
</div>
<div class="footer-right">
<ul>
<li>1loboteam#gmail.com</li>
<li>086760675</li>
<li>Hagdud Ha-Ivri 4, Gan Ha- ir , Floor -1</li>
<li><img src="facebook_logolink.png" alt="" height="50px" width="50px" >
<img src="instagram_logolink.png" alt="" height="50px" width="50px"></li>
</ul>
</div>
</div>
</section>
</footer>
</html>
a:link{
color: black;
}
a:visited{
color: white;
}
a:hover {
color: red;
}
.top-div{
width: 100%;
height: 6%;
background-color: rgb(0, 0, 0);
padding-top: 5px;
margin-bottom: 10px;
}
.top-div .top-div-left{
display: block;
width: 50%;
color: rgb(182, 182, 182);
font-size: large;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin-left: 25px;
margin-top: 2px;
top: 50px;
}
.top-div .top-div-right{
display: inline-block;
width: 50%;
margin: 10px;
height: 30px;
width: 100%;
}
.top-div .top-div-right .FBNAV{
margin: 0;
border:2px solid red;
}
.nav {
display:inline-flex;
background: rgba(170, 3, 3, 0.151);
box-sizing: border-box;
list-style-type: none;
width: 100%;
margin: 0px;
padding: 0px 0px 0px 650px;
float: left;
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
height: 200px;
}
.nav a{
text-decoration: none;
}
ul li a {
margin: 30px;
color: white;
font-size: large;
}
header {
margin: 0;
padding: 0;
width: 100%;
}
header ul {
list-style-type: none;
display: inline-flex;
align-items: center;
display: flex;
}
#logo {
align-content: center;
text-align: center;
padding: 50px 50px 50px 50px;
}
.social-top ul li{
display: inline-block;
float: right;
}
body{
background-color: black;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
max-height: 100%;
}
.welcome-video{
width: 103%;
padding-top: 150px;
}
#welcome-video-id{
padding-top: 100px;
margin-bottom: 50px;
}
.top-button{
height: 50px;
width: 82%;
color:black;
background: rgb(182, 182, 182);
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: large;
margin-left: 150px;
margin-bottom: 150px;
}
.welcome-text{
color:white;
font-family: Arial, Helvetica, sans-serif;
margin-left: 150px;
width: 82%;
}
.welcome-programs{
display: inline-block;
color: black;
font-family: Arial, Helvetica, sans-serif;
padding: 0px 0 15px 0;
margin-left: 150px;
margin-top: 150px;
margin-bottom: 0px;
height: 30px;
width: 82%;
text-align: left;
background: rgb(255, 255, 255);
text-emphasis: bold;
float: left;
}
#prog-text{
margin: 10px 0 20px 5px;
}
.top-section{
display:block;
position: relative;
background: black;
padding: 50px;
}
.left-wrap{display:block; float:left; width: 33%;}
.left-wrap .left-wrap-inner{
display: block;
padding: 50px 350px 50px 100px;
}
.left-wrap .left-wrap-inner .top_left{
display: block;
height: 400px;
width: 400px;
}
.left-wrap .left-wrap-inner .top-left-text{
color: rgb(182, 182, 182);
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
height: 200px;
width: 400px;
background: rgba(170, 3, 3, 0.151);
}
.left-wrap .left-wrap-inner .top-left-text h2{
padding-top: 20px;
}
.center-wrap{display: block; float: left; width: 33%;}
.center-wrap .center-wrap-inner{
display: block;
padding: 50px 350px 50px 100px;
}
.center-wrap .center-wrap-inner .top_center{
display: block;
height: 400px;
width: 400px;
}
.center-wrap .center-wrap-inner .top-center-text{
color: rgb(182, 182, 182);
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
height: 200px;
width: 400px;
background: rgba(170, 3, 3, 0.151);
}
.center-wrap .center-wrap-inner .top-center-text h2{
padding-top: 20px;
}
.right-wrap{display: block; float: left; width: 33%;}
.right-wrap .right-wrap-inner{
display: block;
padding: 50px 350px 50px 50px;
}
.right-wrap .right-wrap-inner .top_right {
display: block;
height: 400px;
width: 400px;
padding: 0px 0px 0px 20px;
}
.right-wrap .right-wrap-inner .top-right-text{
color: rgb(182, 182, 182);
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
height: 200px;
width: 400px;
background: rgba(170, 3, 3, 0.151);
margin-left: 20px;
}
.right-wrap .right-wrap-inner .top-right-text h2{
padding-top: 20px;
}
.mid-sec-header{
display: inline-block;
color: black;
font-family: Arial, Helvetica, sans-serif;
padding: 0px 0 15px 0;
margin-top: 150px;
margin-left: 150px;
margin-bottom: 50px;
height: 30px;
width: 82%;
text-align: left;
background: rgb(255, 255, 255);
text-emphasis: bold;
float: left;
}
#coach-info{
margin: 10px 0 20px 5px;
}
.mid-section{
display: block;
float: left;
width: 100%;
height: 8%;
}
.mid-section .mid-section-inner-left{
display: block;
float: left;
width: 28%;
}
.mid-section .mid-section-inner-right{
display: block;
float: right;
width: 60%;
background: black;
font-family: Arial, Helvetica, sans-serif;
color: white;
margin-right:190px;
}
.mid-section .mid-section-inner-right .text-mid{
font-family: Arial, Helvetica, sans-serif;
}
.mid-section .kids-img{
display: block;
height: 400px;
width: 400px;
padding: 0px 350px 50px 90px;
margin-left: 60px;
}
.kid-button{
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
font-weight: bold;
height: 200px;
width: 150px;
float: right;
color: rgb(163, 8, 8);
background: white;
}
#adult-testemonial{
color: black;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-right: 150px;
vertical-align: top;
margin-top: 50px;
margin-bottom: 80px;
background-color: white;
}
#children-testemonial{
color: black;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-right: 150px;
margin-top: 100px;
width: 600px;
vertical-align: text-top;
background-color: white;
}
.lower-section-youtube{
display: block;
float: left;
width: 100%;
padding-bottom: 0px;
background-color: rgb(0, 0, 0);
}
.lower-section-youtube .vids .youtube-left {
display: block;
float: left;
width: 40%;
padding: 50px 0px 0px 150px;
margin: 0;
vertical-align: top;
}
.lower-section-youtube .vids .youtube-right {
display: block;
float: right;
width: 45%;
margin: 0;
vertical-align: top;
}
.recent-posts{
width: 82%;
display: inline-block;
margin-bottom: 200px;
margin-left: 160px;
}
.recent-posts .recent-left{
display: block;
width: 15%;
height: 200px;
text-align: center;
background: rgba(170, 3, 3, 0.151);
float: left;
vertical-align: middle;
}
.recent-posts .recent-right{
display: block;
float: right;
background: rgba(170, 3, 3, 0.151);
width: 84.5%;
height: 200px;
}
.recent-posts .recent-left h1{
font-family: Arial, Helvetica, sans-serif;
margin-top: 20px;
vertical-align: text-top;
font-size: xx-large;
color: white;
}
.recent-posts .recent-right a{
text-decoration: none;
}
footer {
display: inline-block;
background: rgba(170, 3, 3, 0.151);
height: 200px;
width: 100%;
}
footer ul{
list-style-type: none;
color: white;
margin: 0px;
}
footer a{
text-decoration: none;
}
footer .footer-inner .footer-left{
display: inline-block;
width: 33%;
list-style: none;
}
footer .footer-inner .footer-left ul li {
padding: 5px;
vertical-align: middle;
}
footer .footer-inner .footer-center {
display: inline-block;
width: 33%;
vertical-align: top;
text-align: center;
margin-top: 5px;
}
footer .footer-inner .footer-center ul li {
padding: 12px;
vertical-align: middle;
}
footer .footer-inner .footer-right{
display: inline-block;
width: 33%;
vertical-align: top;
text-align: center;
}
footer .footer-inner .footer-right ul li {
padding: 13px;
vertical-align: middle;
}
About page HTML and CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css" type="text/css">
<title>About | Lobo Academy</title>
</head>
<body>
<header>
<div class="header">
<div class="top-div">
<div class="top-div-left"> Get a free bjj class NOW
Call us at 456465464</div>
</div>
<div>
<nav><ul class="nav">
<li>Home</li>
<li>About</li>
<img id="logo" src="logo_header.webp">
<li>Contact</li>
<li>Store</li>
</ul>
</div> </nav>
</header>
<main>
<img class="title-img" src="11924.jpg" alt="">
<div class="OurAcademy">
<h1>About Lobo Academy</h1>
<h2>Our Academy</h2>
<p>We are the premiere Brazilian Jiu Jitsu training center in the Charlotte metro area. Head instructor, Lucas Lepri, is among the most decorated jiu jitsu athletes in the entire world, and we are part of the most dominant team in the history of the sport, Alliance.
Our mission is to bring world-class instruction and passion for jiu jitsu to inspire people to be their best selves. We believe jiu jitsu is more than just a sport, self-defense system, or fitness program; it’s a lifestyle that improves the whole person. The physical, mental, and transcendent benefits of jiu jitsu should be accessible to everyone, from beginner to world-class competitor and any age, sex, or ethnicity.
We will help you achieve your goals, whether it is self defense, weight loss, confidence or to be a world champion. In the process, you will transform your life and become tougher, safer, fitter, and better.</p>
<hr>
<h2>Brazilian Jiu Jitsu makes you..</h2>
<p>
<strong> TOUGHER: </strong> Mentally and physically, it prepares you to overcome challenges in life and sport. <br>
<br>
<strong> SAFER: </strong> Widely considered the best self-defense system, it provides confidence in a world with the realities of bullies or attackers. <br>
<br>
<strong> FITTER:</strong> Building aerobic and anaerobic conditioning and incinerating calories, you will be exercising more often and with more intensity. Plus, it’s fun, dynamic, and even addictive. <br>
<br>
<strong> BETTER: </strong> Its life lessons and character-building qualities not only you a better athlete, but also a better father, employee, wife, leader, and friend. <br>
</p>
<hr>
<h2>About our facilities</h2>
<p>
We are located in the Galleria Village shopping center on the Southeast corner of Monroe Rd and Sardis Road North (behind McDonalds & Rite-Aid).
<br>
<br>
Our address is:
1636 Sardis Road North, Suite A-170
Charlotte, NC 28270
<br>
<br>
It is a totally renovated space with:
<br>
<ul>
<li>Nearly 4,000 sq feet</li>
<li>2,000 sq feet of mat space</li>
<li>Men & Women’s locker rooms with showers</li>
<li>Free WiFi</li>
<li>Lounge/ Seating area</li>
</ul>
</p>
<hr>
<h2>Children Program</h2>
<p>
Learning a martial art, and Brazilian jiu jitsu in particular, is one of the best gifts you can provide a child. It provides character development and personal growth that will impact every area of their life, for the rest of their life. It is a fun way for kids to get into fantastic shape, gain confidence, learn respect, improve discipline, and prevent bullying.
<br>
<img src="3.9.png" alt="" width="400px" height="400px">
Our kids program operates in a fun and nurturing environment, where kids flourish and learn important life lessons like:
<br>
<ul>
<li>Through self-discipline, commitment, and perseverance, you can accomplish anything.</li>
<li>Improving focus and concentration helps you ignore distractions and fully engage in lessons at school, in sport, and at home.</li>
<li>Patience pays off.</li>
<li>When you are healthy and fit, you feel better about yourself and are more confident.</li>
</ul>
<h2>Bullying</h2>
<p>
Our Kids Program will also empower your kids to prevent or discourage bullying without violence. Through appropriate and effective self-defense techniques, we instill the self-esteem and confidence needed to allow kids to defuse confrontations before they escalate, and how to protect and defend themselves in the event they are attacked. Bullying is the #1 social issue and epidemic in schools today, and it has ripple effects throughout our communities.
<br>
<ul>
<li>Every 7 minutes a child is bullied in the US</li>
<li>Every month, 3 million children miss school due to fear of bullying</li>
<li>90% of 4th through 8th graders report being victims of bullying</li>
<li>1 out of 10 students drop out of school due to repeated bullying</li>
<li>
70% of students believe schools respond poorly to bullying and that adult help is infrequent</li>
</ul>
</p>
<h2 id="victimchild"><strong>Dont let your child be the victim</strong></h2>
</p>
</div>
</main>
</body>
<footer>
<section class="footer">
<div class="footer-inner">
<div class="footer-left">
<ul>
<li>Sunday : Kids - 17:00-18:00; Seniors - 18:00-21:30</li>
<li>Monday : Kids - 16:15-19:00; Seniors - 19:00-21:30</li>
<li>Tuesday : Closed.</li>
<li>Wednesday : Kids - 17:00-19:00; Seniors - 19:00-21:30 </li>
<li>Thursday : Kids - 17:00-18:00; Seniors - 18:00-21:30 </li>
<li>Friday : Seniors - 08:30-22:00</li>
<li>Saturday: Open Mat - 20:00</li>
</ul>
</div>
<div class="footer-center">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Store</li>
</ul>
</div>
<div class="footer-right">
<ul>
<li>1loboteam#gmail.com</li>
<li>086760675</li>
<li>Hagdud Ha-Ivri 4, Gan Ha- ir , Floor -1</li>
<li><img src="facebook_logolink.png" alt="" height="50px" width="50px" >
<img src="instagram_logolink.png" alt="" height="50px" width="50px"></li>
</ul>
</div>
</div>
</section>
</footer>
</html>
<div>
<nav>
<ul class="nav">
<li>Home</li>
<li>About</li>
<img id="logo" src="logo_header.webp">
<li>Contact</li>
<li>Store</li>
</ul>
</div>
</nav>
You closed your div before closing the nav tag! try to review your HTML code there might be simple mistakes like this causing the problems.
I am trying to make my footer stay at the bottom of the page and have been going through some of the youtube tutorials. For some strange reason, they do work when I tried the footer by itself but when combining with my other elements, I seem to have some problems with not only getting the footer to be at the bottom of the page but I can't also get my display: inline-block to work well....
I have been trying to follow this tutorial: https://www.youtube.com/watch?v=qlCIXXhSX6Y&t=191s and https://www.youtube.com/watch?v=FGBsGqn7ac8&lc=z22eihehdzrajv13qacdp4334oiod53pnruzdum2ru1w03c010c.1541183153454115
I have a separate footer.php and have included into my index.php file.... Should I have my div ids in the index.php page or footer.php?
This is my footer code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="content">
<footer>
<div class="main-footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-bg">
<div class="footer-address">
<h1>Learn Classical Music at <span>PianoCourse101</span></h1>
<h2>Location: Australia, Melbourne</h2>
</div>
<div class="footer-email-phone">
<ul>
<li><i class="fa fa-phone"></i>+123-456-7890</li>
<li><i class="fa fa-envelope"></i>info#pianocourse101.com</li>
</ul>
</div>
<div class="footer-social-icons">
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-google-plus"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<div class="footer-menu">
<ul>
<li>Home</li>
<li>More Information</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-strip">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-text">
<p>2018 # All Rights</p>
</div>
</div>
</div>
</div>
</div>
</footer>
</section>
</body>
</html>
This is my index.php page
<!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>
<!DOCTYPE html><html><head><meta charset="utf-8">
<link
rel="stylesheet"
href = "style.css"
media="screen,projection,tv"
>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<link
rel="stylesheet"
href = "https://fonts.googleapis.com/css?family=Pacifico"
>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to PianoCourse101</title>
<div id="container">
<div id="main">
<header>
<div class="header2_welcome">
<h1>Welcome to PianoCourse101</h1>
</div>
</header>
<section class="content">
<div class="crotchet">
<p>𝅘𝅥</p>
</div>
<div class="minim">
<p>𝅗𝅥</p>
</div>
<div class="quaver">
<p>𝅘𝅥𝅮</p>
</div>
<img class="pc101" src="includes/pictures/pc101.gif" alt="pianocourse101/">
<div class="music"><i class="fas fa-music fa-8x"></i></div>
<div class="sharp"><p>♯</p></div>
<div class="natural"><p>♮</p></div>
<div class="flat"><p>♭</p></div>
<article>
<div class="first">
<h2>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home! We understand that as a busy mum, you might not have the time to take your child for piano lessons and also, it is a daunting process to find a good quality teacher. Put all of those thoughts aside because PianoCourse101 offers a complete course from the beginning to the advanced levels. It is based on "The Bastien Piano Basics Series" for children and for a limited time, students can watch the Primer Level lessons for <span class="first_free">free!</span> If you would like to continue your lessons beyond Primer Level, you can opt to purchase our Level 1, Level 2, or Level 3 course.<br></br>Currently, the lessons are aimed primarily for children but there will be lessons for adults in the near future. We would appreciate if you could donate to our website if you are enjoying your learning experience with us. This will assist us in maintaining our website and to be able to upload more videos.<br></br> Mr Lee has over ten years of piano teaching experience and also has completed an educational degree and obtained a 4th year in psychology degree. We understand that learning the piano can be boring and hence, we are trying our best to make piano learning a fun and interactive experience for you and your child.<br></br>PianoCourse101 is located in Australia, Melbourne and all fees are in the AUD currency. Student will receive an invoice upon the completion of purchasing a course.</h2>
</div>
</article>
<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>
<br></br>
<center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center>
<br></br>
</div>
</form>
</div>
<img class="snoopy" src="includes/pictures/snoopy.jpg" alt="snoopy playing the piano" />
<div class="services_heading">Services</div>
<div class="services">
<div class="service1">
<h1>Level 1</h1>
<p id="piano">🎹</p>
<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>
<p id="violin">🎻</p>
<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>
<p id="sax">🎷</p>
<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">There are <span class="views"><?php echo " ",htmlspecialchars($views); ?></span><?php echo " "; ?>visitors who have visited this page!</span>
</section>
<footer id="footer">
<?php include_once 'footer.php'; ?>
</footer>
</div>
</div>
</body>
</html>
This is my css for my footer:
.main-footer {
width: 100%;
height: auto;
background-image: url(includes/pictures/piano.jpg);
-webkit-background-size: cover;
-ms-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
padding: 20px 0px;
}
.footer-bg {
width: 100%;
height: auto;
margin: auto;
padding: 30px;
background-color: #fff;
text-align: center;
border: 4px solid #ff6a00;
}
.footer-address {
width: 100%;
height: auto;
margin: auto;
margin-top:5px;
}
.footer-address h1 {
font-family: Arial, Helvetica, sans-serif;
color: #222;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 20px;
line-height: 1.5;
}
.footer-address h1 span {
color: #ff6a00;
}
.footer-address h2 {
font-family: Arial, Helvetica, sans-serif;
color: #222;
text-align: center;
font-weight: 500;
text-transform: uppercase;
font-size: 14px;
line-height: 1.5;
}
.footer-email-phone {
width: 100%;
height: auto;
margin: auto;
margin-top: 5px;
}
.footer-email-phone ul {
margin: 0px;
padding: 0px;
text-align: center;
}
.footer-email-phone ul li {
display: inline-block;
}
.footer-email-phone ul li a {
font-family: Arial, Helvetica, sans-serif;
color: #333;
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
padding-left: 20px;
}
.footer-email-phone ul li a i {
color: #ff6a00;
padding-right: 5px;
}
.footer-email-phone ul li a:hover {
color: #ff6a00;
}
.footer-email-phone ul li a:hover i {
color: #333;
}
.footer-social-icons {
width: 100%;
height: auto;
margin: auto;
margin-top: 5px;
}
.footer-social-icons ul {
margin: 0px;
padding: 0px;
text-align: center;
}
.footer-social-icons ul li {
display: inline-block;
width: 30px;
height: 30px;
background: #fff;
margin-right: 10px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(255,106,0,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(255,106,0,1);
box-shadow: 0px 0px 5px 0px rgba(255,106,0,1);
text-align: center;
margin-top: 12px;
}
.footer-social-icons ul li a {
font-size: 15px;
color: #ff6a00;
line-height: 30px;
display: block;
}
.footer-social-icons ul li:nth-child(1):hover {
background: #3b5999;
}
.footer-social-icons ul li:nth-child(2):hover {
background: #55acee;
}
.footer-social-icons ul li:nth-child(3):hover {
background: #dd4b39;
}
.footer-social-icons ul li:nth-child(4):hover {
background: #cd201f;
}
.footer-social-icons ul li:nth-child(5):hover {
background: #0077b5;
}
.footer-social-icons ul li:nth-child(1):hover a{
color: #fff;
}
.footer-social-icons ul li:nth-child(2):hover a{
color: #fff;
}
.footer-social-icons ul li:nth-child(3):hover a{
color: #fff;
}
.footer-social-icons ul li:nth-child(4):hover a{
color: #fff;
}
.footer-social-icons ul li:nth-child(5):hover a{
color: #fff;
}
.footer-menu {
width: 100%;
height: auto;
margin: auto;
margin-top: 10px;
}
.footer-menu ul {
margin: 0px;
padding: 0px;
text-align: center;
}
.footer-menu ul li {
display: inline-block;
}
.footer-menu ul li a {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
}
.footer-menu ul li:after {
content: "|";
font-family: 'FontAwesome';
color: #fff;
margin-left: 8px;
margin-right: 8px;
}
.footer-menu ul li:nth-child(3):after {
content: "";
}
.footer-menu ul li a:hover {
color: #ff6a00;
}
.footer-strip {
width: 100%;
height: auto;
margin: auto;
border-top: 2px solid #fff;
margin-top: 5px;
}
.footer-text {
width: 100%;
height: auto;
margin: auto;
margin-top: 5px;
}
.footer-text p {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
font-weight: 400;
text-transform: uppercase;
font-size: 13px;
}
.footer-text p a {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-weight: 400;
text-transform: uppercase;
font-size: 13px;
}
.footer-text p a:hover {
color: #ff6a00;
}
[enter image description here][1]
all the html you need for your footer include is:
<div class="main-footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-bg">
<div class="footer-address">
<h1>Learn Classical Music at <span>PianoCourse101</span></h1>
<h2>Location: Australia, Melbourne</h2>
</div>
<div class="footer-email-phone">
<ul>
<li><i class="fa fa-phone"></i>+123-456-7890</li>
<li><i class="fa fa-envelope"></i>info#pianocourse101.com</li>
</ul>
</div>
<div class="footer-social-icons">
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-google-plus"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<div class="footer-menu">
<ul>
<li>Home</li>
<li>More Information</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-strip">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-text">
<p>2018 # All Rights</p>
</div>
</div>
</div>
</div>
</div>
So to start off let me just note that I am not tech savy at all. I find most computers difficult and I wouldn't be taking this class unless I needed it to graduate from my university.
I'm trying to make a webpage for class thats due tomorrow and I am struggling to get all my stuff positioned properly. I made a mock up design in photoshop for what I'm trying to achieve but actually implementing it has been beyond fustrating.
Most floats aren't working(Probably my fault since I'm struggling to understand the concept).
I also made a secondary background image but its registering as a normal one I think.
Also is there a string of code I can use to center everyting like it is in my mock up?
How its suppose to look
How mine looks
My code:
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x;
}
#HeaderImage{
background-image: url(../img/HeaderImage.png);
background-repeat: no-repeat;
z-index: 1;
background-position: left;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float:left;
}
.site-navigation ul {
width: 490px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
border-bottom: 1px solid #d9d9d9;
margin: auto;
margin-top: 115px;
padding-bottom: 42px;
}
.search{
}
.SearchGlass{
float: left;
position: top;
}
<div class="container"></div>
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
</ul>
<!-- SEARCH BAR AND MAGNIFYING GLASS!-->
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
<label for="search">search</label>
<input id="search" type="text" name="search"/>
</div>
</form>
</nav>
<div id="HeaderImage">
<img src="img/HeaderImage.png" alt="Dude on a bike">
</div>
<!-- need to close your form element -->
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky-->
<main>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="articleone">
<img src="img/ArticleImageOne.png" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="articletwo">
<img src="img/ArticleImageTwo.png" alt="Bikes by River">
<h1>Krudder Gets a Break</h1>
<P>The powerful German who was a rock in the beginning of the season will now get a break from and is expected to return for the Malecour at the end of the season</P>
<!--readon !-->
</div>
<div>
<img src="img/ArticleImageThree.png" alt="Bike Dudes Biking">
<h1>Kinnick's New Contract</h1>
<P>Peter Kinnick contract is still not settled with the team manager Alistar McDowell saying that a new contract offer has been made</P>
<!--readon !-->
</div>
<div class="articlefour">
<img src="img/ArticleImageFour.png" alt="Single Guy On Bike">
<h1>Froom In Third</h1>
<P>Chris Froom Finished Third in the opening prologue stage at the Criterium du Dauphine with a strong showing on the first day</P>
<!--readon !-->
</div>
</main>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
THANK YOU FOR YOUR HELP
This might help you, but there are lot of issues in the above given code,hope you can get it correct , try this code for now
body {
background-image: url(../img/background.png);
background-repeat: repeat-x;
}
#HeaderImage{
background-image: url(../img/HeaderImage.png);
background-repeat: no-repeat;
z-index: 1;
background-position: left;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float:left;
}
.site-navigation ul {
width: 490px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
border-bottom: 1px solid #d9d9d9;
margin: auto;
margin-top: 115px;
padding-bottom: 42px;
}
.search{
}
.SearchGlass{
float: left;
position: top;
}
.article{
float: left;width: 100%;margin-bottom: 15px
}
.article img {float: left;width: 28%;margin-right: 1%}
.article h1{float:left;width: 70%;margin: 5px 0;text-align: left;}
.article p{float:left;width: 70%;margin: 5px 0;text-align: left;}
h1{text-align: left;}
footer{display: block;width: 100%;float: left;}
<div class="container">
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
</ul>
<!-- SEARCH BAR AND MAGNIFYING GLASS!-->
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
<label for="search">search</label>
<input id="search" type="text" name="search"/>
</div>
</form>
</nav>
<div id="HeaderImage">
<img src="img/HeaderImage.png" alt="Dude on a bike">
</div>
<!-- need to close your form element -->
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky-->
<div>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="article">
<img src="http://via.placeholder.com/600x500" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="article">
<img src="http://via.placeholder.com/600x500" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
</div>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
</div>
Here’s my HTML and CSS for an exercise, I do not understand why my border in the section is wrapping all the content. I would like to have two independent wrapped sections: "intro" and "main".
https://jsfiddle.net/fhd9eLnq/
#font-face {
font-family: myFont src: url(BebasNeue-webfont.woff);
}
body {
font-family: myFont;
width: 90%;
margin: auto;
}
h1,
h2 {
display: inline;
color: #016008;
}
h1 {
font-size: 60px;
}
h2 {
font-size: 40px;
}
li {
display: inline;
}
li a {
text-align: center;
text-decoration: none;
}
img {
position: relative top: 0px;
right: 20px;
float: left;
margin: 5px;
border: 1px solid grey;
}
.intro {
float: right;
}
.primarynav {
list-style-type: none;
color: #016008;
text-align: right;
}
.secondnav {
display: block;
text-align: inherit;
}
.main {
padding: 10px;
border: 1px solid grey;
}
.intro {
border: 1px solid grey;
margin: 15px;
}
.news1 {
width: 60%;
background-color: #dddddd;
margin: 15px;
}
section {} footer {
background-color: #dddddd;
}
fieldset {
background-color: white;
}
mark {
color: black;
background: none;
font-weight: bold;
}
.latestnews {
background-color: #dddddd;
position: relative;
left: 790px;
bottom: 365px;
width: 33%;
padding: 5px;
}
.suscribe {
background-color: #dddddd;
position: relative;
left: 790px;
bottom: 350px;
width: 33%;
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Welcome to BootsWorld</title>
<link rel="stylesheet" type="text/css" href="boots.css" />
</head>
<body>
<header>
<nav>
<div class="logo">
<h1>BOOT</h1>
<h2>WORLD</h2>
</div>
<ul class="primarynav">
<li>Site map
</li>
<li>Privacy policy
</li>
<li>Accessibility
</li>
</ul>
<ul class="secondarynav">
<li>HOME
</li>
<li>SHOP
</li>
<li>NEWS
</li>
<li>ABOUT US
</li>
<li>CONTACT US
</li>
<li>SUBSCRIBE
</li>
</ul>
</nav>
</header>
<article class="intro">
<header>
<img src="boots.png" alt="boots image" />
<h2>Welcome to boot world</h2>
</header>
<p>BootWorld is the largest online footwear retailer in the UK.Our shop always has stock of the latest designer footwear at the most competitive prices. Want to know more about us or our products, why not send us a message.
</p>
</article>
<section class="main">
<article class="news">
<header>
<h2>NEW IN THE SHOP</h2>
</header>
<div class="news1">
<h3>CLASSIC COWBOY BOOTS</h3>
<p>Stand out from the crowd in a pair of classic cowboy boots. Available for Ladies and Gents from only
<mark class="black">£49.99</mark>
</p>
<h3>MILITARY BOOTS</h3>
<p>Hard-wearing Men's military boots, guaranteed to withstand all weathers. From only
<mark class="black">£69.99</mark>
</p>
<h3>ROMAN SANDALS</h3>
<p>Get ready for summer with some stylish roman sandals. From only
<mark class="black">£39.99</mark>
</p>
<h3>OFFICE SHOES</h3>
<p>You don't have to wear boring shoes to the office. Check out our new stock of Ladies and Gents fashionable office shoes from only
<mark class="black">£44.99</mark>
</p>
</div>
</article>
<aside class="latestnews">
<h3>Latest News</h3>
<p>Our seasonal sale has kicked off again! make sure you stop by our online shop to pick up a bargain.</p>
<footer>Posted by: Joe</footer>
</aside>
<aside class="suscribe">
<h3>Subscribe</h3>
<p>Sign up to our newsletter and receive exclusive offers by email weekly.</p>
<form>
<fieldset>
<legend>SIGN UP NOW!</legend>
<p>
<label for="yourname">Your name</label>
<br/>
<input type="text" name="yourname" id="yourname" size="20" />
</p>
<p>
<label for="emailaddress">email address</label>
<br/>
<input type="text" name="emailaddress" id="emailaddress" size="20" />
</p>
<button onclick="myFunction()">Sign Up</button>
</fieldset>
</form>
</aside>
</section>
<footer class="pagefooter">
<h3>OUR ADDRESS:</h3>
<p>Malet Street,
<br/>London, WC1E 7HX</p>
</footer>
</body>
</html>
Because you float the image and intro and never clear them. Add a clear to your .main CSS rule:
.main {
padding: 10px;
border: 1px solid grey;
clear: both;
}
jsFiddle example
I notice you open your main class on line 40 <section class="main"> however you never close it. When I close it I am able to put a border around the separate classes. I also was able to use your CSS:
.main {
padding: 10px;
border: 2px solid grey;
}
to convert over to news1 and was able to wrap it without issue. If you could explain further I can try to help further.
So i was trying to make a copy of the BBC website, and everything was fine until i tried i tried to zoom in.The header's color was slowly going away from right to left as i kept zooming in, is this some kind of browser bug or is there somthing wrong with my code?Everything looks good at 100% size. This is how it looks zoomed in http://i.imgur.com/GyZ6Wov.png
<!doctype html>
<html>
<head>
<title>Hristijan BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body,p,ul{
margin: 0;
font-family: Arial;
color: black;
padding:0;
}
#topMenu{
height: 40px;
font-size: 0.9em;
font-weight: bold;
}
.fixedWidth{
height: inherit;
width: 1000px;
margin: 0 auto;
}
#logo{
float: left;
padding:8px 6px 4.2px 4px ;
border-right: 1px solid gray;
}
#signIn{
float: left;
padding: 12px 85px 10px 10px;
border-right: 1px solid gray;
}
#signIn img{
float:left;
background-color: lightgray;
}
#signIn p{
float: left;
margin-left: 10px;
}
ul{
margin: 0;
list-style: none;
}
.headerItem{
float: left;
padding-left: 14px;
padding-top: 10px;
padding-right: 14px;
border-right: 1px solid gray;
padding-bottom: 13px;
}
#search{
float:left;
padding-top:10px;
padding-left: 10px;
}
#search input{
float:left;
height: 22px;
padding-left:5px;
width:140px;
background-color: lightgray;
border:none;
}
#search img{
float:left;
height: 20px;
}
#newsLine{
background-color: #BB1919;
height: 60px;
}
#newsLine p{
float: left;
color:white;
font-size: 2.5em;
padding-top:4px;
}
#navMenu{
background-color: #A91717;
height: 35px;
}
.mainMenuItem{
float:left;
color:white;
padding-top:0;
padding-left:0px;
padding-right: 15px;
margin-top:10px;
border-right: 1px solid orangered;
padding-left:5px;
}
h1{
color:gray;
}
h1:hover{
color: #1167A8;
}
#mainContent{
float:left;
width: 650px;
}
#description{
float:left;
text-align: justify;
float:left;
width: 225px;
color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="topMenu">
<div class="fixedWidth">
<div id="logo">
<img src="http://static.bbci.co.uk/frameworks/barlesque/2.93.13/orb/4/img/bbc-blocks- dark.png">
</div>
<div id="signIn">
<img src="http://static.bbci.co.uk/id/0.32.25/img/bbcid_orb_signin_dark.png">
<p>Sign in</p>
</div>
<ul >
<li class="headerItem">News</li>
<li class="headerItem">Sport</li>
<li class="headerItem">Weather</li>
<li class="headerItem">Shop</li>
<li class="headerItem">Earth</li>
<li class="headerItem">Travel</li>
<li class="headerItem">More...</li>
</ul>
<div id="search">
<input type="text" placeholder="Search">
<img src="http://static.bbci.co.uk/frameworks/barlesque/2.93.13/orb/4/img/orb-search-dark.png">
</div>
</div>
</div>
<div id="newsLine">
<div class="fixedWidth">
<p>NEWS</p>
</div>
</div>
<div id="navMenu">
<div class="fixedWidth">
<ul>
<li class="mainMenuItem">Home</li>
<li class="mainMenuItem">Video</li>
<li class="mainMenuItem">World</li>
<li class="mainMenuItem">UK</li>
<li class="mainMenuItem">Business</li>
<li class="mainMenuItem">Tech</li>
<li class="mainMenuItem">Science</li>
<li class="mainMenuItem">Magazine</li>
<li class="mainMenuItem">Entertainment & Arts</li>
<li class="mainMenuItem">Health</li>
<li class="mainMenuItem">In Pictures</li>
<li class="mainMenuItem">More</li>
</ul>
</div>
</div>
<div id="content">
<div class="fixedWidth">
<div id="mainContent">
<h1>Pope arrives in conflict with CAR</h1>
<div id="description">
<p>Pope Francis has arrived in the Central African Republic, a country torn apart by violence between Muslim rebels and Christian militias, on the last leg of his African tour.</p>
</div>
</div>
</div>
</div>
</div>