Need help with code on website (noob) | HTML and CSS

Hey guys, I’m trying to make a test website in brackets and I think my code is all over the place. Please help correct this. I couldn’t get my img under my h1 at the top with IDs and classes also. I’m trying to make a brochure website so it’s all supposed to be on one page but I need to fix my header and have my buttons up there too.

HTML:





ABC Optical

ABC Optical

About ABC Optical
We are a Brisbane based company which is well regarded locally. We are recognised as being able to manage children’s needs with a professional caring approach. We employ two full-time, in-store qualified optometrists able to diagnose and treat a number of eye related problems. Our optometrists strive to make a positive difference to the health and well-being of our customers, endeavoring to obtain the best visual outcome so that customers realise their full potential in work, study, sport and leisure.

  • Eye Examinations (may be bulk-billed)
  • Spectacles (may be bulk-billed to private Health Fund optical cover)
  • Diabetic eye examinations
  • Color Vision assessments
  • Macular Degeneration tests
  • Glaucoma and eye pressure testing
  • Checks for Cataracts
  • Clearness of vision (myopia, hyperopia, astigmatism)
  • Focusing ability (Presbyopia)
  • Eye muscle movement and control
  • Amblyopia (lazy eye)
  • Contact lens fitting and management
  • Referrals for eye laser surgery
  • Mining and Industrial Safety Spectacles
  • Advice on the correct fitting of good quality sunglasses (both prescription and non-prescription, in both adults and children, especially in a sporting environment)






Our phone number is 07 3256 7101.

  • Our trading hours are:
  • Mon – Thurs: 9am – 5.30pm
  • Fri: 9am – 9pm
  • Sat: 9am – 5pm
  • Sun: 10am – 5pm


CSS:

body {
line-height: 1.5;
}

h1{
text-align: center;
font-family: sans-serif;
font-size: 20px;
border: 5px solid #385170;
height: 80px;
width: 200px;
margin: auto;
padding: 30px;

}

#eyeicon {
float: 0px;
margin-top: 3px;
object-position: center top;
position: relative;
top: 1px;
margin: auto;
}

p {

}

section {
min-height: 35vh;
width: 85%

}

#about {
font-family: sans-serif;
font-size: 14px;
margin: auto;
margin-top: 2%;
margin-bottom: 15%;
width:75%;
height:50px;
padding:50px;
box-sizing: border-box;
background-color: white;
border-radius:1px;
border: 5px solid #385170;
color: black;

}

#services {
min-height: 70vh;
font-family: sans-serif;
font-size: 14px;
margin-right: 10;
margin-top: 1%;
margin-left: 0%;
width:75%;
height:60px;
padding:50px;
box-sizing: border-box;
background-color: white;
border-radius:1px;
border: 5px solid #385170;
color: black;
position: relative;
top: -120px;
margin: auto;
}

img {
float:right;

}

/* Style inputs with type=”text”, select elements and textareas */
input[type=text]select, textarea {
width: 50%; /* Full width */
padding: 6px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 2px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 3px; /* Add a top margin */
margin-bottom: 9px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #385170;
color: white;
padding: 6px 10px;
border: none;
border-radius: 2px;
cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #385170;
}

/* Add a background color and some padding around the form */
.container {
border-radius: 2.5px;
background-color: #385170;
padding: 10px;

}

#contact {
position: absolute;
top: 1107px;
left: 700px;

}

#contact {

}

#hours {
position: absolute;
top: 1107px;
left: 447px;
text-align: center;
font-family: sans-serif;
font-size: 14px;
border: 5px solid #385170;
height: 50px;
width: 150px;
margin: auto;
padding: 30px;

}

footer p {
font-size: 0.9em;
}

Leave a Comment