الدرس الرابع : تكويد مكان نشر المقالات

 <div class="container>  
      <div class="row">  
            <div class="col-md-3">  
                 <!-- sidebar here -->  
            </div><!-- .col -->  
            <div class="col-md-9>  
                 <!-- posts here -->  
            </div><!-- .col -->  
      </div><!-- .row -->  
 </div><!-- .container --> 

ونقوم بكتابة الكود الخاص بال posts مكان التعليق <!– posts here –>

كود HTML الخاص ب posts

 

          <div class="col-md-9">  
             <div class="blog-post">  
                <div class="row">  
                   <div class="col-md-6">  
                      <img src="images/photo.png" alt="post photo">  
                   </div><!-- .col -->  
                   <div class="col-md-6">  
                      <h3 class="title"> Binary Search خوارزمية البحث الثنائى</h3>  
                      <h4 class="meta">  
                         <span class="author">الكاتب .</span> عمرو العربى  
                         <span class="label">تصنيفات .</span> خورزميات  
                      </h4>  
                      <p class="post-content">  
                      بسم الله الرحمن الرحيم  
                      السلام عليكم ورحمة الله وبركاته  
                      أهلا ومرحبا بكم من جديد زوار ومتابعي مدونة الاوائل الكرام  
                      أحضرت لكم اليوم قالب حصري جميل ورائع   
                      قالب Tech Next معرب ومطور  
                      </p>  
                      <button class="read-more">رؤية المزيد</button>  
                   </div><!-- .col -->  
                </div><!-- .row -->  
             </div><!-- .blog-post -->  

الجزء الخاص بالتصفح paggination فى نهاية المقالات

 

 <div class="posts-pagination">  
                <a href="#">  
                   <span class="page page-active">  
                      1  
                   </span>  
                </a>  
                <a href="#">  
                   <span class="page page-active">           
                      2  
                   </span>  
                   </a>  
                <a href="#">  
                   <span class="page page-active">           
                      3  
                   </span>  
                </a>  
             </div><!-- .posts-pagination -->  

 

شرح الكود

 

 .blog-post {  
      border: 1px solid #ebebeb;  
      text-align: right;  
      margin-bottom: 40px;  
 }  
 .blog-post img {  
      width: 100%;  
      height: auto;  
 }  
 .blog-post .title {  
      color: #313030;  
      font-size: 32px;  
      margin: 20px 20px;  
 }  
 .blog-post .meta{  
      color: #313030;  
      font-size: 22px;  
      margin: 20px 20px 20px;  
 }  
 .blog-post .meta span{  
      color: #cb5050;  
      font-weight: normal;  
 }  
 .blog-post .post-content {  
      color: #313030;  
      font-size: 25px;  
      padding: 0 20px 20px 20px;  
      line-height: 30px;  
 }  
 .blog-post .read-more {  
      margin: 0 20px 20px 20px;  
      color: white;  
      font-size: 25px;  
      background: #313030;  
      border: none;  
 }  
 .blog-post .read-more:hover {  
      background: #cb5050;  
      transition: .5s ease all;  
 }  
 .posts-pagination {  
      font-size: 36px;  
      margin-bottom: 40px;  
 }  
 .posts-pagination a {  
      margin-right: 10px;  
      color: #585858;  
      width: 30px;  
      padding: 5px 0 5px 10px;  
      border: 1px solid #d6d6d6;  
 }  
 .posts-pagination a:hover {  
      background: #585858;  
      color: white;  
      transition: .5s ease all;  
      text-decoration: none;  
 }  
 .posts-pagination .page {  
      margin-right: 10px;  
 }  

لو رجعنا لاخر كود خاص بالهيدر

 

<div class="container">  
       <div class="row">  
          <div class="col-md-12">  
             <header id="site-header">  
                <div id="site-logo">  
                   <h2> وادى<span>التقنية </span></h2>  
                </div><!-- #site-logo -->  
                <nav id="site-navbar">  
                   <ul class="list-inline">  
                      <li><a href="#">الرئيسية</a></li>  
                      <li><a href="#">خوارزميات</a></li>  
                      <li><a href="#">دورات</a></li>  
                      <li><a href="#">مصادر التعلم</a></li>  
                   </ul>  
                   <span class="social-icons">  
                      <a href="#"><i class="fa fa-facebook"></i></a>  
                      <a href="#"><i class="fa fa-google"></i></a>  
                      <a href="#"><i class="fa fa-twitter"></i></a>  
                      <a href="#"><i class="fa fa-youtube"></i></a>  
                   </span><!-- .social-icons -->  
                   <div class="clear"></div>  
                </nav><!-- #site-navbar -->  
             </header><!-- #site-header -->  
          </div><!-- .col -->     
       </div><!-- .row -->  
 </div> <!-- .container -->  

     <!-- posts and slider row here -->
 </div><!-- .container -->  

نجد ان لاحاجة لاعادة كتابة الكلاس container
ونكتفى بوضع row فى مكان التعليق  <!– posts and slider row here –> فقط
الى هنا ننتهى من درس اليوم وشكرًا لكم