- Joined
- Jul 18, 2022
- Messages
- 1
- Reaction score
- 0
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:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ABC Optical</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>ABC Optical <img src="eyeicon.png" id="eyeicon"> </h1>
<header>
<nav>
<ul>
<li>
<a href="#"> About </a>
</li>
<li>
<a href="#"> Services </a>
</li>
<li>
<a href="#"> Contact </a>
<li>
<a href="#"> Location </a>
</li>
</ul>
</nav>
</header>
<section id="about">
<p>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.
</p></section>
<section id="services"><img src="kidglasses.png" ALIGN=”right”/>
<ul>
<li>Eye Examinations (may be bulk-billed)</li>
<li>Spectacles (may be bulk-billed to private Health Fund optical cover)</li>
<li>Diabetic eye examinations</li>
<li>Colour Vision assessments</li>
<li>Macular Degeneration tests</li>
<li>Glaucoma and eye pressure testing</li>
<li>Checks for Cataracts</li>
<li>Clearness of vision (myopia, hyperopia, astigmatism)</li>
<li>Focusing ability (Presbyopia)</li>
<li>Eye muscle movement and control</li>
<li>Amblyopia (lazy eye)</li>
<li>Contact lens fitting and management</li>
<li>Referrals for eye laser surgery</li>
<li>Mining and Industrial Safety Spectacles</li>
<li>Advice on the correct fitting of good quality sunglasses(both prescription and non-prescription,in both adults and children,particularly in a sporting environment)
</ul>
</section><img id="kidglasses">
<section id="location"><p style="position:relative; left:80px; bottom: 70px; right: 20px;">
<iframe src="https://www.google.com/maps/embed?p...0!3m2!1sen!2sau!4v1658049385959!5m2!1sen!2sau" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</p></section>
<section id="contact">
<form action="action_page.php">
<label for="fname"></label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname"></label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="email"></label>
<input type="text" id="email" name="Email" placeholder="Your email..">
<label for="subject"></label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</section>
<section id="contacta">
Our phone number is 07 3256 7101.
</section>
<section id="hours">
<ul style="list-style-type:none;">
<li>Our trading hours are:</li>
<li>Mon – Thurs: 9am - 5.30pm</li>
<li>Fri: 9am - 9pm</li>
<li>Sat: 9am - 5pm</li>
<li>Sun: 10am - 5pm</li>
</ul>
</section>
<article></article>
<aside>
<img scr>
</aside>
<footer>
<p></p>
</footer>
</body>
</html>
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;
}
#contacta {
}
#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;
}
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ABC Optical</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>ABC Optical <img src="eyeicon.png" id="eyeicon"> </h1>
<header>
<nav>
<ul>
<li>
<a href="#"> About </a>
</li>
<li>
<a href="#"> Services </a>
</li>
<li>
<a href="#"> Contact </a>
<li>
<a href="#"> Location </a>
</li>
</ul>
</nav>
</header>
<section id="about">
<p>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.
</p></section>
<section id="services"><img src="kidglasses.png" ALIGN=”right”/>
<ul>
<li>Eye Examinations (may be bulk-billed)</li>
<li>Spectacles (may be bulk-billed to private Health Fund optical cover)</li>
<li>Diabetic eye examinations</li>
<li>Colour Vision assessments</li>
<li>Macular Degeneration tests</li>
<li>Glaucoma and eye pressure testing</li>
<li>Checks for Cataracts</li>
<li>Clearness of vision (myopia, hyperopia, astigmatism)</li>
<li>Focusing ability (Presbyopia)</li>
<li>Eye muscle movement and control</li>
<li>Amblyopia (lazy eye)</li>
<li>Contact lens fitting and management</li>
<li>Referrals for eye laser surgery</li>
<li>Mining and Industrial Safety Spectacles</li>
<li>Advice on the correct fitting of good quality sunglasses(both prescription and non-prescription,in both adults and children,particularly in a sporting environment)
</ul>
</section><img id="kidglasses">
<section id="location"><p style="position:relative; left:80px; bottom: 70px; right: 20px;">
<iframe src="https://www.google.com/maps/embed?p...0!3m2!1sen!2sau!4v1658049385959!5m2!1sen!2sau" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</p></section>
<section id="contact">
<form action="action_page.php">
<label for="fname"></label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname"></label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="email"></label>
<input type="text" id="email" name="Email" placeholder="Your email..">
<label for="subject"></label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</section>
<section id="contacta">
Our phone number is 07 3256 7101.
</section>
<section id="hours">
<ul style="list-style-type:none;">
<li>Our trading hours are:</li>
<li>Mon – Thurs: 9am - 5.30pm</li>
<li>Fri: 9am - 9pm</li>
<li>Sat: 9am - 5pm</li>
<li>Sun: 10am - 5pm</li>
</ul>
</section>
<article></article>
<aside>
<img scr>
</aside>
<footer>
<p></p>
</footer>
</body>
</html>
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;
}
#contacta {
}
#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;
}
