Minus0
سه شنبه 31 تیر 1393, 22:31 عصر
سلام
من markup این قالب (http://www.freecsstemplates.com/preview/css067/index.html) رو با html 5 و تگ های سمانتیک نوشتم و می خوام نظرتون رو در موردش بدونم. خیلی به چیزایی مثل استفاده نکردن از تگ های توضیحات یا کلاس ها در بعضی جاها توجه نکنید چون اونها رو موقع استایل دهی کامل می کنم. بیشتر می خوام بدونم که آیا از تگ های div, section, article, header, nav و... درست و در مکان درست خودش استفاده کردم یا نه؟! لطفا اساتید نظرتون رو بگید. مرسی
<!doctype html>
<html>
<head>
<title>Maximus</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<header class="header">
<div class="header_container">
<div class="logo_txt">
<h1><a href="#">Complete</a></h1>
</div>
<div class="call_us">
<p>Call us toll free: 1-800-123-4567</p>
</div>
</div>
<nav class="navigtion">
<ul class="nav_list container">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="banner">
<img src="images/container-bg.jpg" alt="Our Business">
</div>
<section class="services">
<div class="block1">
<img src="images/read1-img.png" alt="Lorem ipsum dolor">
<h2>Lorem ipsum dolor</h2>
<p>Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat.</p>
<p><a class="read_more" href="#">Read More</a></p>
</div>
<div class="block2">
<img src="images/read2-img.png" alt="Maecenas tempus">
<h2>Maecenas tempus</h2>
<p>Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat.</p>
<p><a class="read_more" href="#">Read More</a></p>
</div>
<div class="block3">
<img src="images/read3-img.png" alt="Vivamus elementum">
<h2>Vivamus elementum</h2>
<p>Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat.</p>
<p><a class="read_more" href="#">Read More</a></p>
</div>
</section>
<article class="welcome">
<h2>Welcome to our company</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Vivamus laoreet era sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat mauris, id viverra leo ante sed leo. Vivamus fermentum dignissim sem, quis pellentesque dolor posuere vel. In vitae lorem ligula, a congue nibh. Lorem ipsum dolor sit amet.</p>
</article>
<section class="more_info">
<article class="why_us">
<h2>Why choose us?</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </p>
</article>
<div class="our_servies">
<h2>Our services</h2>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Aenean commodo ligula eget dolor</a></li>
<li><a href="#">Cum sociis natoque penatibus</a></li>
<li><a href="#">Nulla consequat massa quis enim</a></li>
<li><a href="#">Donec pede justo, fringilla vel</a></li>
<li><a href="#">Aliquet nec, vulputate eget, arcu.</a></li>
<li><a href="#">In enim justo, rhoncus ut, imperdiet</a></li>
<li><a href="#">Venenatis vitae justo</a></li>
</ul>
</div>
<section class="news">
<article>
<h6>December 20, 2013</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</article>
<article>
<h6>December 16, 2013</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.</p>
</article>
</section>
</section>
<footer>
<div class="container">
<div class="social_icons">
<a href="#"><img src="images/face-book.png" alt="Our Page on Facebook"></a>
<a href="#"><img src="images/twitter.png" alt="Our Page on Twitter"></a>
<a href="#"><img src="images/google.png" alt="Our Page on Google Plus"></a>
</div>
<div class="copyright_txt">
<p>Copyright © 2013 WebsiteName. All rights reserved. Design by <a href="http://www.freecsstemplates.com">FreeCSSTemplates.com</a></p>
</div>
</div>
</footer>
</div>
</body>
</html>
من markup این قالب (http://www.freecsstemplates.com/preview/css067/index.html) رو با html 5 و تگ های سمانتیک نوشتم و می خوام نظرتون رو در موردش بدونم. خیلی به چیزایی مثل استفاده نکردن از تگ های توضیحات یا کلاس ها در بعضی جاها توجه نکنید چون اونها رو موقع استایل دهی کامل می کنم. بیشتر می خوام بدونم که آیا از تگ های div, section, article, header, nav و... درست و در مکان درست خودش استفاده کردم یا نه؟! لطفا اساتید نظرتون رو بگید. مرسی
<!doctype html>
<html>
<head>
<title>Maximus</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<header class="header">
<div class="header_container">
<div class="logo_txt">
<h1><a href="#">Complete</a></h1>
</div>
<div class="call_us">
<p>Call us toll free: 1-800-123-4567</p>
</div>
</div>
<nav class="navigtion">
<ul class="nav_list container">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="banner">
<img src="images/container-bg.jpg" alt="Our Business">
</div>
<section class="services">
<div class="block1">
<img src="images/read1-img.png" alt="Lorem ipsum dolor">
<h2>Lorem ipsum dolor</h2>
<p>Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat.</p>
<p><a class="read_more" href="#">Read More</a></p>
</div>
<div class="block2">
<img src="images/read2-img.png" alt="Maecenas tempus">
<h2>Maecenas tempus</h2>
<p>Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat.</p>
<p><a class="read_more" href="#">Read More</a></p>
</div>
<div class="block3">
<img src="images/read3-img.png" alt="Vivamus elementum">
<h2>Vivamus elementum</h2>
<p>Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat.</p>
<p><a class="read_more" href="#">Read More</a></p>
</div>
</section>
<article class="welcome">
<h2>Welcome to our company</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Vivamus laoreet era sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat mauris, id viverra leo ante sed leo. Vivamus fermentum dignissim sem, quis pellentesque dolor posuere vel. In vitae lorem ligula, a congue nibh. Lorem ipsum dolor sit amet.</p>
</article>
<section class="more_info">
<article class="why_us">
<h2>Why choose us?</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </p>
</article>
<div class="our_servies">
<h2>Our services</h2>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Aenean commodo ligula eget dolor</a></li>
<li><a href="#">Cum sociis natoque penatibus</a></li>
<li><a href="#">Nulla consequat massa quis enim</a></li>
<li><a href="#">Donec pede justo, fringilla vel</a></li>
<li><a href="#">Aliquet nec, vulputate eget, arcu.</a></li>
<li><a href="#">In enim justo, rhoncus ut, imperdiet</a></li>
<li><a href="#">Venenatis vitae justo</a></li>
</ul>
</div>
<section class="news">
<article>
<h6>December 20, 2013</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</article>
<article>
<h6>December 16, 2013</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.</p>
</article>
</section>
</section>
<footer>
<div class="container">
<div class="social_icons">
<a href="#"><img src="images/face-book.png" alt="Our Page on Facebook"></a>
<a href="#"><img src="images/twitter.png" alt="Our Page on Twitter"></a>
<a href="#"><img src="images/google.png" alt="Our Page on Google Plus"></a>
</div>
<div class="copyright_txt">
<p>Copyright © 2013 WebsiteName. All rights reserved. Design by <a href="http://www.freecsstemplates.com">FreeCSSTemplates.com</a></p>
</div>
</div>
</footer>
</div>
</body>
</html>