2 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 6 years 10 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Hey guys , was just given a task of building a footer and i came up with the following:

Fiddle here: http://jsfiddle.net/dangLLkL/1/

The html is here:

<footer>
    <div class="footer-color-line"></div>
    <div class="footer-header">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <img src="http://heartkidsnsw.org.au/wp-content/uploads/2012/01/HCF-New-Logo-100-pixels.jpg" alt="logo">
                </div>
                <div class="col-md-6">
                    <div class="subscribe">
                        <div class="subscribe-wrapper">
                            <input type="text" placeholder="ENTER EMAIL ADDRESS"> <a role="button" href="" type="submit">subscribe</a>
 
                        </div>
                    </div>
                </div>
                <div class="col-md-3"> <i class="fa fa-envelope"></i>
 
                </div>
            </div>
        </div>
    </div>
    <!-- footer header ends here -->
    <div class="footer-shadow"></div>
    <div class="sitemap">
        <div class="container">
            <div class="row sitemap-wrapper">
                <div class="col-md-2">
                     <h4>Social media</h4>
 
                    <p>Find us online</p>
                    <ul class="footer-social-media">
                        <li> <a href="">
                                       <i class="fa fa-facebook"></i>    
                                   </a>
 
                        </li>
                        <li> <a href="">
                                       <i class="fa fa-twitter"></i>    
                                   </a>
 
                        </li>
                        <li> <a href="">
                                       <i class="fa fa-youtube"></i>    
                                   </a>
 
                        </li>
                    </ul>
                </div>
                <div class="col-md-2">
                     <h4>The heading</h4>
 
                    <p>about us</p>
                    <p>lalala Services</p>
                    <p>Our Specialities</p>
                    <p>International lalala</p>
                </div>
                <div class="col-md-2">
                     <h4>PATIENT INFO</h4>
 
                    <p>lalala Booklets</p>
                    <p>Departmental Booklets</p>
                </div>
                <div class="col-md-2">
                     <h4>EMPLOYEE </h4>
 
                    <p>Careers</p>
                </div>
                <div class="col-md-4 address">
                     <h4>ADDRESS</h4>
 <address>
                               <h5>MUMBAI</h5>
                               <p>lala lala</p>
                               <p>Andheri East,</p>
                               <p>Mumbai – 400059</p>
                           </address>
 <address>
                               <h5>Enquiry :</h5>
                               <p>022-67676767</p>
                               <p>response@lalalaat.com</p>
                           </address>
 
                </div>
            </div>
        </div>
    </div>
</footer>

I know there is a bit of bootstrap in there , please overlook that tell me , if i have done a good enough semantic job? Where could i improve ? if possibe check the css too and give your reviews on that . Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 38 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Oh, my

some notes in no particular order:

The address element is not what you think it is. See the address element.

The proper container for form controls is the form element, not three or four nested div elements.

The placeholder attribute is not a substitute for the label element. Always label form controls.

The entries under "The Heading" look like a list to me.

The div and span elements are non-semantic. They should be added after you have the content semantically marked. The div is used to aggregate related blocks to provide a context hook for styling or scripting. The span is for segregating inline content from its context for special handling.

It is not possible to ignore or overlook the bootstrap junk. The stench of that crap is overwhelming.

The css looks more befuddling than it needs to be. I think it's primarily due to some over nested multiple classes. That's a result of the bootstrap stink.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 6 years 10 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks gary

Thanks gary , your awesome .