Jump to content

Html5 tags not working need help please


Recommended Posts

Hi what I am trying to is add the Request a Free Qoute to the top right hand side and have a section in the middle for my and also would like to add text to my footer image and for the header image I would like to make width 100% and a height of 85% with loosing contrast of the image can any body please help me out have I done some think wrong here is the html code 

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="description" content="Affordable Gardencare  For Small And Medium-Sized Yards">
        <meta name="author" content="Michael Wright">
        <title>Wright's lawncare service</title>
        <link rel="stylesheet" href="./css/style.css">
		<link rel="stylesheet" href="./css/font-awesome.min.css">
	var bleep = new Audio();
	bleep.src = "bleep.mp3";
	function playBtnSounds(num){
		var div1 = document.getElementById("div1");
		div1.innerHTML = "Loaded content for section =+num;



      <div class="container">

        <div id="branding">

          <h1><i class="fa fa-rocket"></i> <span class="highlight">Wright's</span> Lawncare Service</h1>




            <li><a class="current"><a href="index.html" onmousedown="bleep.play()">Home</a></li>

            <li><a href="about.html" onmousedown="bleep.play()">About</a></li>

            <li><a href="service.html"onmousedown="bleep.play()">Service</a></li>

            <li><a href="garden.html" onmousedown="bleep.play()">Garden Blog</a></li>
			<li><a href="contact.html" onmousedown="bleep.play()">Contact Us</a></li>




    <section id="showcase">

      <div class="container">
        <img src="Images/AdobeStock_85781068_Preview.jpeg" width="1000px" height="100%" alt="header.png">
		<h1>Affordable Gradencare Packages For Small And Medium-Sized Yards</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero  tempore, consequuntur culpa repellendus perspiciatis, atque corporis a ut nobis ratione odit tenetur nesciunt asperiores expedita eius sed, neque optio.</p>



    <section id="newsletter">

      <div class="container">

        <h1>You Grow It We Mow It </h1>



    <section id="boxes">

      <div class="container">

        <div class="woc">

          <i class="fa fa-signal fa-5x"></i>

          <h3> What our Customer say</h3>

          			  <script type="text/javascript">
* IFRAME Scroller script- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

//specify path to your external page:
var iframesrc="external.htm"

//You may change most attributes of iframe tag below, such as width and height:
document.write('<iframe id="datamain" src="'+iframesrc+'" width="180px" height="160px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>')


        <div class="box">

          <i class="fa fa-photo fa-5x"></i>

          <h3>Yard Maintenance</h3>

          <p>Whipper Snipping.<br>Mowing.<br> Weed-Control.<br>Hedging.<br> Green Waste Removal.<br> Rubbish Removal.<br><a href="#">Read More</a></p>

        <div class="box">

       <article id="main-col">
          <aside id="sidebar">

          <div class="dark">

            <h3>Request a Free Quote</h3>

            <form action="" class="contact">



                <input type="text">



                <label>Email Address</label>

                <input type="email">




                <textarea placeholder="Your message ..."></textarea>


              <button class="button_1" type="submit">Send</button>








         <p>Copyright &copy; Wrigh'ts lawncare service 2019-2020 A.B.N:85908204391 All Right's Reserved.</p>
	     <p>you're use of this website is subject to our <a href="#">Terms and Conditions</a> & please read our <a href="#">Pricacy Statement</a><p></nobr>




Link to comment
Share on other sites

A lot of your tags aren't matching up, its screwing up my auto-styler. I ran your code through the HTML checker, and... well, you should see for yourself.

From what I could see though, you could benefit from having a look at this tutorial here through.


Using position:relative on your container, and position:absolute with top:0 and right:0 on your sidebar/box should give you something close to what you're after.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...