├── LICENSE
├── README.md
├── article.html
├── assets
    ├── 380x80
    │   ├── img1_380x80.jpg
    │   ├── img2_380x80.jpg
    │   ├── img3_380x80.jpg
    │   ├── img4_380x80.jpg
    │   └── img5_380x80.jpg
    ├── avatar.png
    ├── face
    │   ├── face1.jpg
    │   ├── face2.jpg
    │   └── face3.jpg
    ├── img1.jpg
    ├── img10.jpg
    ├── img11.jpg
    ├── img12.jpg
    ├── img13.jpg
    ├── img14.jpg
    ├── img2.jpg
    ├── img3.jpg
    ├── img4.jpg
    ├── img5.jpg
    ├── img6.jpg
    ├── img7.jpg
    ├── img8.jpg
    ├── img9.jpg
    └── slider
    │   ├── img1.jpg
    │   ├── img2.jpg
    │   ├── img3.jpg
    │   ├── img4.jpg
    │   ├── img5.jpg
    │   ├── img6.jpg
    │   └── img7.jpg
├── index.html
├── main.js
├── sidebar.html
└── style.css


/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Complete_HTML_CSS_Blog_Website
2 | In this tutorial We are going to learn how to create a complete HTML and CSS Blog and make it responsive.
3 | 
4 | ## the complete tutorial on [Daily Tuition Youtube Channel](https://youtu.be/PK_mQwVJxkQ)
5 | 


--------------------------------------------------------------------------------
/article.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Gridy Blog</title>
  7 | 
  8 |     <!-- font awesome icons cdn -->
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
 10 | 
 11 |     <!-- swiper slider css file -->
 12 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css" integrity="sha512-m3pAvNriL711NMlhkZHK6K4Tu2/RjtrzyjxZU8mlAbxxoDoURy27KajN1LGTLeEEPvaN12mKAgSCrYEwF9y0jA==" crossorigin="anonymous" />
 13 | 
 14 |     <!-- custom style.css file -->
 15 |     <link rel="stylesheet" href="style.css">
 16 | 
 17 | </head>
 18 | <body>
 19 |     
 20 |     <!-- Header -->
 21 |        <header id="header" class="shadow bg-light">
 22 |            <nav class="container navbar">
 23 |                <a href="/index.html" class="nav-brand text-dark">
 24 |                     Gridy
 25 |                 </a>
 26 | 
 27 |                 <!-- toggle button -->
 28 |                 <button class="toggle-button">
 29 |                     <span><i class="fas fa-bars"></i></span>
 30 |                 </button>
 31 | 
 32 |                 <!-- collapse on toggle button click -->
 33 |                 <div class="collapse">
 34 |                     <ul class="navbar-nav">
 35 |                         <a href="#" class="nav-link">Home</a>
 36 |                         <a href="#" class="nav-link">Blog</a>
 37 |                         <a href="#" class="nav-link">Pages</a>
 38 |                         <a href="#" class="nav-link">Categories</a>
 39 |                         <a href="#" class="nav-link">About</a>
 40 |                         <a href="#" class="nav-link">Contact</a>
 41 |                     </ul>
 42 |                 </div>
 43 | 
 44 |                   <!-- collapse on toggle button click -->
 45 |                   <div class="collapse">
 46 |                       <ul class="navbar-nav">
 47 |                             <div class="search-box">
 48 |                                 <a href="#" class="nav-link"><i class="fas fa-search"></i></a>
 49 |                             </div>
 50 |                             <a href="#" class="nav-link"><i class="fab fa-facebook-f"></i></a>
 51 |                             <a href="#" class="nav-link"><i class="fab fa-twitter"></i></a>
 52 |                             <a href="#" class="nav-link"><i class="fab fa-instagram"></i></a>
 53 |                             <a href="#" class="nav-link"><i class="fab fa-dribbble"></i></a>
 54 |                       </ul>
 55 |                   </div>
 56 |            </nav>
 57 |        </header>
 58 |     <!-- .Header -->
 59 | 
 60 |     <!-- Main Site -->
 61 |        <main id="site-main">
 62 | 
 63 |             <!-- Post Content -->
 64 |                 <section class="container">
 65 |                     <article id="post">
 66 |                         <!-- article heading -->
 67 |                         <div class="headings text-center">
 68 |                             <div class="category">
 69 |                                 <a href="#" class="nav-link">Travel</a>
 70 |                             </div>
 71 | 
 72 |                             <div class="title">
 73 |                                 <h2 class="text-title text-dark display-1">Looking for some feedback for this rejected track technology</h2>
 74 |                             </div>
 75 | 
 76 |                             <div class="meta">
 77 |                                 <a href="#" class="link display-2 text-secondary px-1">
 78 |                                     <i class="fas fa-user text-primary"></i> John Stephens
 79 |                                 </a>
 80 |                                 <a href="#" class="link display-2 text-secondary px-1">
 81 |                                     <i class="fas fa-clock text-primary"></i>  Clock Wed 02, 2019
 82 |                                 </a>
 83 |                                 <a href="#" class="link display-2 text-secondary px-1">
 84 |                                     <i class="fas fa-comments text-primary"></i> 12
 85 |                                 </a>
 86 |                             </div>
 87 | 
 88 |                         </div>
 89 | 
 90 |                         <!-- thumbnail  -->
 91 |                         <div class="thumbnail mt-3">
 92 |                             <img src="./assets/img1.jpg" class="thumbnail" alt="">
 93 |                         </div>
 94 | 
 95 |                         <!-- content -->
 96 |                         <div class="content text-dark display-2 secondary-title mt-3">
 97 |                             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
 98 |                                 blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
 99 |                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
100 |                                 blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
101 |                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
102 |                                 blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
103 |                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
104 |                                 blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
105 |                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
106 |                                 blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
107 |                             </p>
108 |                             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
109 |                                 blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
110 |                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
111 |                                 blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
112 |                             </p>
113 |                             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
114 |                                 blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
115 |                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
116 |                                 blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
117 |                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
118 |                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
119 |                                 blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
120 |                             </p>
121 |                         </div>
122 |                     </article>
123 | 
124 |                     <!-- post footer -->
125 |                     <div class="post-footer mb-3">
126 |                         <div class="post-tags d-flex flex-wrap justify-content-center">
127 |                             <a href="#" class="nav-link btn bg-light">Travel</a>
128 |                             <a href="#" class="nav-link btn bg-light">Food</a>
129 |                             <a href="#" class="nav-link btn bg-light">Lifestyle</a>
130 |                             <a href="#" class="nav-link btn bg-light">Techonogy</a>
131 |                             <a href="#" class="nav-link btn bg-light">Fashion</a>
132 |                         </div>
133 | 
134 |                         <div class="post-author text-center">
135 |                             <div class="author-avatar">
136 |                                 <img src="./assets/face/face1.jpg" class="rounded" alt="">
137 |                             </div>
138 | 
139 |                             <div class="author-info py-2">
140 |                                 <h3 class="text-dark">John Stephens</h3>
141 | 
142 |                                 <p class="text-secondary secondary-title">
143 |                                     Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
144 |                                     Recusandae, sequi! In harum laborum ipsa voluptatibus doloremque nulla, tempore aut veritatis.
145 |                                 </p>
146 | 
147 |                                 <div class="post-tags d-flex flex-wrap justify-content-center">
148 |                                     <a href="#" class="nav-link"><i class="fab fa-facebook-f"></i></a>
149 |                                     <a href="#" class="nav-link"><i class="fab fa-twitter"></i></a>
150 |                                     <a href="#" class="nav-link"><i class="fab fa-instagram"></i></a>
151 |                                     <a href="#" class="nav-link"><i class="fab fa-dribbble"></i></a>
152 |                                 </div>
153 |                             </div>
154 | 
155 |                         </div>
156 | 
157 |                         <!-- post related -->
158 |                         <div class="post-realted py-2">
159 |                             <div class="row justify-content-center">
160 |                                 <div class="prev">
161 |                                     <div class="py-2">
162 |                                         <a href="#" class="display-2 text-dark">
163 |                                             <i class="fas fa-chevron-left"></i> 
164 |                                             Previous Post
165 |                                         </a>
166 |                                     </div>
167 |                                     <article class="article text-center">
168 |                                         <div class="d-flex">
169 |                                             <a href="#">
170 |                                                 <img src="./assets/img9.jpg" class="object-fit" alt="">
171 |                                             </a>
172 |                                             <div class="cart-body px-1">
173 |                                                 <div class="category">
174 |                                                     <a href="#" class="link text-primary text-secondary">Fashion</a>
175 |                                                 </div>
176 |                                                 <a href="#" class="text-title display-1 text-dark">
177 |                                                     Looking for some feedback for this rejected track
178 |                                                     technology
179 |                                                 </a>
180 |                                             </div>
181 |                                         </div>
182 |                                     </article>
183 |                                 </div>
184 |                                 <div class="next text-right">
185 |                                     <div class="py-2">
186 |                                         <a href="#" class="display-2 text-dark">
187 |                                             Next Post 
188 |                                             <i class="fas fa-chevron-right"></i> 
189 |                                         </a>
190 |                                     </div>
191 |                                     <article class="article text-center">
192 |                                         <div class="d-flex">
193 |                                             <div class="cart-body px-1">
194 |                                                 <div class="category">
195 |                                                     <a href="#" class="link text-primary text-secondary">Fashion</a>
196 |                                                 </div>
197 |                                                 <a href="#" class="text-title display-1 text-dark">
198 |                                                     Looking for some feedback for this rejected track
199 |                                                     technology
200 |                                                 </a>
201 |                                             </div>
202 |                                             <a href="#">
203 |                                                 <img src="./assets/img8.jpg" class="object-fit" alt="">
204 |                                             </a>
205 |                                         </div>
206 |                                     </article>
207 |                                 </div>
208 |                             </div>
209 |                         </div>
210 | 
211 |                         <div class="post-comments py-2">
212 |                             <h3 class="text-center display-1 secondary-title py-2">5 Comments</h3>
213 |     
214 |                             <div class="comment-details">
215 |                                 <div class="comment-item py-2">
216 |                                     <div class="d-flex">
217 |                                         <div class="avatar px-2">
218 |                                             <img src="./assets/face/face1.jpg" class="rounded" alt="">
219 |                                         </div>
220 |                                         <div class="comment-content">
221 |                                             <h5 class="display-2 m-0">Brandon Kelley</h5>
222 |                                             <p class="title-secondary text-dark">
223 |                                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore aliqua. Quis ipsum suspendisse ultrices gravida lacus vel facilisis.
224 |                                             </p>
225 |                                         </div>
226 |                                     </div>
227 |                                      <!-- comment reply -->
228 |                                      <div class="reply py-2">
229 |                                         <div class="d-flex">
230 |                                             <div class="avatar px-2">
231 |                                                 <img src="./assets/face/face2.jpg" class="rounded" alt="">
232 |                                             </div>
233 |                                             <div class="comment-content">
234 |                                                 <h5 class="display-2 m-0">Brandon Kelley</h5>
235 |                                                 <p class="title-secondary text-dark">
236 |                                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore aliqua. Quis ipsum suspendisse ultrices gravida lacus vel facilisis.
237 |                                                 </p>
238 |                                             </div>
239 |                                         </div>
240 |                                     </div>
241 |     
242 |                                 </div>
243 |                                 <div class="comment-item py-2">
244 |                                     <div class="d-flex">
245 |                                         <div class="avatar px-2">
246 |                                             <img src="./assets/face/face3.jpg" class="rounded" alt="">
247 |                                         </div>
248 |                                         <div class="comment-content">
249 |                                             <h5 class="display-2 m-0">Brandon Kelley</h5>
250 |                                             <p class="title-secondary text-dark">
251 |                                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore aliqua. Quis ipsum suspendisse ultrices gravida lacus vel facilisis.
252 |                                             </p>
253 |     
254 |                                         </div>
255 |                                     </div>
256 |                                 </div>
257 |                             </div>
258 |     
259 |                             <h3 class="text-center display-1 secondary-title py-2">Leave Comment</h3>
260 |     
261 |                             <div class="comment-form">
262 |                                 <div class="d-flex justify-content-between flex-wrap">
263 |                                     <input type="text" class="form-control " placeholder="Name">
264 |                                     <input type="email" class="form-control" placeholder="Email">
265 |                                     <input type="text" class="form-control" placeholder="Website">
266 |                                 </div>
267 |                                 <textarea class="form-control mt-3" placeholder="Message" rows="10"></textarea>
268 |                                 <div class="text-center">
269 |                                     <button type="submit" class="btn btn-primary display-2 text-light mt-2">Submit</button>
270 |                                 </div>
271 |                             </div>
272 |                         </div>
273 | 
274 |                     </div>
275 |                     <!-- .post footer -->
276 | 
277 |                 </section>
278 |             <!-- .Post Content -->
279 | 
280 |             <!-- Swiper slider -->
281 |                 <section class="slider">
282 |                     <div class="container">
283 | 
284 |                         <!-- Slider main container -->
285 |                             <div class="swiper-container">
286 |                                 <!-- Additional required wrapper -->
287 |                                 <div class="swiper-wrapper">
288 |                                     <!-- Slides -->
289 |                                     <div class="swiper-slide">
290 |                                         <a href="#">
291 |                                             <img src="./assets/slider/img1.jpg" class="img-fluid" alt="">
292 |                                         </a>
293 |                                     </div>
294 |                                      <!-- Slides -->
295 |                                       <!-- Slides -->
296 |                                     <div class="swiper-slide">
297 |                                         <a href="#">
298 |                                             <img src="./assets/slider/img2.jpg" class="img-fluid" alt="">
299 |                                         </a>
300 |                                     </div>
301 |                                      <!-- Slides -->
302 |                                       <!-- Slides -->
303 |                                     <div class="swiper-slide">
304 |                                         <a href="#">
305 |                                             <img src="./assets/slider/img3.jpg" class="img-fluid" alt="">
306 |                                         </a>
307 |                                     </div>
308 |                                         <!-- Slides -->
309 |                                              <!-- Slides -->
310 |                                     <div class="swiper-slide">
311 |                                         <a href="#">
312 |                                             <img src="./assets/slider/img4.jpg" class="img-fluid" alt="">
313 |                                         </a>
314 |                                     </div>
315 |                                         <!-- Slides -->
316 |                                         <div class="swiper-slide">
317 |                                             <a href="#">
318 |                                                 <img src="./assets/slider/img5.jpg" class="img-fluid" alt="">
319 |                                             </a>
320 |                                         </div>
321 |                                             <!-- Slides -->
322 |                                             <div class="swiper-slide">
323 |                                                 <a href="#">
324 |                                                     <img src="./assets/slider/img6.jpg" class="img-fluid" alt="">
325 |                                                 </a>
326 |                                             </div>
327 |                                                 <!-- Slides -->
328 |                                                 <div class="swiper-slide">
329 |                                                     <a href="#">
330 |                                                         <img src="./assets/slider/img7.jpg" class="img-fluid" alt="">
331 |                                                     </a>
332 |                                                 </div>
333 |                                                     <!-- Slides -->
334 | 
335 |                                 </div>
336 |                             </div>
337 | 
338 |                     </div>
339 |                 </section>
340 |              <!-- .Swiper slider -->
341 | 
342 |        </main>
343 |     <!-- .Main Site -->
344 | 
345 |     <!-- footer -->
346 |        <footer id="footer">
347 |            <div class="container">
348 |                <div class="row mb-3">
349 |                    <div class="col-3">
350 |                        <h2 class="footer-title secondary-title">About Us</h2>
351 | 
352 |                        <div class="secondary-title text-secondary">
353 |                             <p class="mt-2 ">
354 |                                 Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
355 |                                 Deserunt quis voluptate alias illum modi tenetur, iste voluptatem illo. Accusantium, corrupti!
356 |                             </p>
357 |                             
358 |                             <address>
359 |                                 <i class="fas fa-map-marker-alt text-primary"></i> 
360 |                                 5 South Main Street Los Angeles, ZZ-96110 USA
361 |                             </address>
362 | 
363 |                             <div class="phone">
364 |                                 <i class="fas fa-mobile text-primary"></i> 
365 |                                 125-896-485
366 |                             </div>
367 | 
368 |                             <div class="email">
369 |                                 <i class="fas fa-envelope text-primary"></i> 
370 |                                 dailysupport@gmail.com
371 |                             </div>
372 | 
373 |                        </div>
374 |                    </div>
375 |                    <div class="col-3">
376 |                        <h2 class="footer-title secondary-title">Feature Post</h2>
377 | 
378 |                        <div class="feature-post">
379 |                            <div class="flex-item">
380 |                                <article class="article">
381 |                                    <div class="d-flex">
382 |                                        <a href="#">
383 |                                            <img src="./assets/img9.jpg" class="object-fit px-1" alt="">
384 |                                            <div class="px-1">
385 |                                                <a href="#" class="text-title display-2 text-dark">
386 |                                                 Looking for some feedback for this rejected track
387 |                                                 technology
388 |                                                </a>
389 |                                                <p class="secondary-title text-secondary display-3">
390 |                                                     <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021 </span>
391 |                                                </p>
392 |                                            </div>
393 |                                        </a>
394 |                                    </div>
395 |                                </article>
396 |                            </div>
397 |                            <div class="flex-item">
398 |                             <article class="article">
399 |                                 <div class="d-flex">
400 |                                     <a href="#">
401 |                                         <img src="./assets/img1.jpg" class="object-fit px-1" alt="">
402 |                                         <div class="px-1">
403 |                                             <a href="#" class="text-title display-2 text-dark">
404 |                                              Looking for some feedback for this rejected track
405 |                                              technology
406 |                                             </a>
407 |                                             <p class="secondary-title text-secondary display-3">
408 |                                                  <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021 </span>
409 |                                             </p>
410 |                                         </div>
411 |                                     </a>
412 |                                 </div>
413 |                             </article>
414 |                              </div>
415 |                              <div class="flex-item">
416 |                                 <article class="article">
417 |                                     <div class="d-flex">
418 |                                         <a href="#">
419 |                                             <img src="./assets/img2.jpg" class="object-fit px-1" alt="">
420 |                                             <div class="px-1">
421 |                                                 <a href="#" class="text-title display-2 text-dark">
422 |                                                  Looking for some feedback for this rejected track
423 |                                                  technology
424 |                                                 </a>
425 |                                                 <p class="secondary-title text-secondary display-3">
426 |                                                      <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021 </span>
427 |                                                 </p>
428 |                                             </div>
429 |                                         </a>
430 |                                     </div>
431 |                                 </article>
432 |                             </div>
433 |                        </div>
434 |                    </div>
435 |                    <div class="col-3">
436 |                         <h2 class="footer-title secondary-title">Tags</h2>
437 | 
438 |                         <div class="tags">
439 |                             <div class="d-flex flex-wrap">
440 |                                 <a href="#" class="nav-link btn bg-light">Travel</a>
441 |                                 <a href="#" class="nav-link btn bg-light">Food</a>
442 |                                 <a href="#" class="nav-link btn bg-light">Lifestyle</a>
443 |                                 <a href="#" class="nav-link btn bg-light">Techonogy</a>
444 |                                 <a href="#" class="nav-link btn bg-light">Fashion</a>
445 |                             </div>
446 |                         </div>
447 | 
448 |                         <h2 class="footer-title secondary-title mt-2">Social</h2>
449 | 
450 |                         <div class="tags social">
451 |                             <div class="d-flex flex-wrap">
452 |                                 <a href="#" class="nav-link btn bg-light"><i class="fab fa-facebook-f"></i></a>
453 |                                 <a href="#" class="nav-link btn bg-light"><i class="fab fa-twitter"></i></a>
454 |                                 <a href="#" class="nav-link btn bg-light"><i class="fab fa-instagram"></i></a>
455 |                                 <a href="#" class="nav-link btn bg-light"><i class="fab fa-dribbble"></i></a>
456 |                             </div>
457 |                         </div>
458 | 
459 |                    </div>
460 |                </div>
461 | 
462 |                <!-- copyrights  -->
463 |                <div class="copyrights">
464 |                    <p class="text-center text-secondary display-2">
465 |                         © 2021 <a href="#" class="text-primary">Dailytuition</a> - Personal Blog Theme. All rights reserved.
466 |                    </p>
467 |                </div>
468 |            </div>
469 |        </footer>
470 |     <!-- .footer -->
471 | 
472 | 
473 |     <!-- masonry libray for horizontal grid -->
474 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ==" crossorigin="anonymous"></script>
475 | 
476 |     <!-- swiper slider cdn -->
477 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js" integrity="sha512-1LlEYE0qExJ/GUfAJ0k2K2fB5sIvMv/q6ueo3syohvQ3ElWDQVSMUOf39cxaDWHtNu7M6lF6ZC1H6A1m3SvheA==" crossorigin="anonymous"></script>
478 | 
479 |     <!-- custom javascript main.js file -->
480 |     <script src="main.js"></script>
481 | </body>
482 | </html>


--------------------------------------------------------------------------------
/assets/380x80/img1_380x80.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/380x80/img1_380x80.jpg


--------------------------------------------------------------------------------
/assets/380x80/img2_380x80.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/380x80/img2_380x80.jpg


--------------------------------------------------------------------------------
/assets/380x80/img3_380x80.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/380x80/img3_380x80.jpg


--------------------------------------------------------------------------------
/assets/380x80/img4_380x80.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/380x80/img4_380x80.jpg


--------------------------------------------------------------------------------
/assets/380x80/img5_380x80.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/380x80/img5_380x80.jpg


--------------------------------------------------------------------------------
/assets/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/avatar.png


--------------------------------------------------------------------------------
/assets/face/face1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/face/face1.jpg


--------------------------------------------------------------------------------
/assets/face/face2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/face/face2.jpg


--------------------------------------------------------------------------------
/assets/face/face3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/face/face3.jpg


--------------------------------------------------------------------------------
/assets/img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img1.jpg


--------------------------------------------------------------------------------
/assets/img10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img10.jpg


--------------------------------------------------------------------------------
/assets/img11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img11.jpg


--------------------------------------------------------------------------------
/assets/img12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img12.jpg


--------------------------------------------------------------------------------
/assets/img13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img13.jpg


--------------------------------------------------------------------------------
/assets/img14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img14.jpg


--------------------------------------------------------------------------------
/assets/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img2.jpg


--------------------------------------------------------------------------------
/assets/img3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img3.jpg


--------------------------------------------------------------------------------
/assets/img4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img4.jpg


--------------------------------------------------------------------------------
/assets/img5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img5.jpg


--------------------------------------------------------------------------------
/assets/img6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img6.jpg


--------------------------------------------------------------------------------
/assets/img7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img7.jpg


--------------------------------------------------------------------------------
/assets/img8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img8.jpg


--------------------------------------------------------------------------------
/assets/img9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/img9.jpg


--------------------------------------------------------------------------------
/assets/slider/img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/slider/img1.jpg


--------------------------------------------------------------------------------
/assets/slider/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/slider/img2.jpg


--------------------------------------------------------------------------------
/assets/slider/img3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/slider/img3.jpg


--------------------------------------------------------------------------------
/assets/slider/img4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/slider/img4.jpg


--------------------------------------------------------------------------------
/assets/slider/img5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/slider/img5.jpg


--------------------------------------------------------------------------------
/assets/slider/img6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/slider/img6.jpg


--------------------------------------------------------------------------------
/assets/slider/img7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashyap2013/Complete_HTML_CSS_Blog_Website/3d4f88f7aa634b0bcbd5e44140712c154539881c/assets/slider/img7.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Gridy Blog</title>
  7 | 
  8 |     <!-- font awesome icons cdn -->
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
 10 | 
 11 |     <!-- swiper slider css file -->
 12 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css" integrity="sha512-m3pAvNriL711NMlhkZHK6K4Tu2/RjtrzyjxZU8mlAbxxoDoURy27KajN1LGTLeEEPvaN12mKAgSCrYEwF9y0jA==" crossorigin="anonymous" />
 13 | 
 14 |     <!-- custom style.css file -->
 15 |     <link rel="stylesheet" href="style.css">
 16 | 
 17 | </head>
 18 | <body>
 19 |     
 20 |     <!-- Header -->
 21 |        <header id="header" class="shadow bg-light">
 22 |            <nav class="container navbar">
 23 |                <a href="/index.html" class="nav-brand text-dark">
 24 |                     Gridy
 25 |                 </a>
 26 | 
 27 |                 <!-- toggle button -->
 28 |                 <button class="toggle-button">
 29 |                     <span><i class="fas fa-bars"></i></span>
 30 |                 </button>
 31 | 
 32 |                 <!-- collapse on toggle button click -->
 33 |                 <div class="collapse">
 34 |                     <ul class="navbar-nav">
 35 |                         <a href="#" class="nav-link">Home</a>
 36 |                         <a href="#" class="nav-link">Blog</a>
 37 |                         <a href="#" class="nav-link">Pages</a>
 38 |                         <a href="#" class="nav-link">Categories</a>
 39 |                         <a href="#" class="nav-link">About</a>
 40 |                         <a href="#" class="nav-link">Contact</a>
 41 |                     </ul>
 42 |                 </div>
 43 | 
 44 |                   <!-- collapse on toggle button click -->
 45 |                   <div class="collapse">
 46 |                       <ul class="navbar-nav">
 47 |                             <div class="search-box">
 48 |                                 <a href="#" class="nav-link"><i class="fas fa-search"></i></a>
 49 |                             </div>
 50 |                             <a href="#" class="nav-link"><i class="fab fa-facebook-f"></i></a>
 51 |                             <a href="#" class="nav-link"><i class="fab fa-twitter"></i></a>
 52 |                             <a href="#" class="nav-link"><i class="fab fa-instagram"></i></a>
 53 |                             <a href="#" class="nav-link"><i class="fab fa-dribbble"></i></a>
 54 |                       </ul>
 55 |                   </div>
 56 |            </nav>
 57 |        </header>
 58 |     <!-- .Header -->
 59 | 
 60 |     <!-- Main Site -->
 61 |        <main id="site-main">
 62 | 
 63 |             <!-- Blog Post Section -->
 64 |                 <section id="posts">
 65 |                     <div class="container">
 66 |                         <div class="grid">
 67 |                             <!-- article -->
 68 |                                 <div class="grid-item">
 69 |                                     <article class="article">
 70 |                                         <div class="card">
 71 |                                             <div class="overflow-img">
 72 |                                                 <a href="#">
 73 |                                                     <img src="./assets/img1.jpg" class="img-fluid" alt="">
 74 |                                                 </a>
 75 |                                             </div>
 76 |                                             <div class="card-body text-center px-1">
 77 |                                                 <a href="#" class="text-title display-1 text-dark">
 78 |                                                     Looking for some feedback for this rejected track
 79 |                                                     technology
 80 |                                                 </a>
 81 |                                                 <p class="secondary-title text-secondary display-3">
 82 |                                                     <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
 83 |                                                     <span><i class="far fa-comments text-primary"></i> 12</span>
 84 |                                                 </p>
 85 |                                             </div>
 86 |                                         </div>
 87 |                                     </article>
 88 |                                 </div>
 89 |                             <!-- .article -->
 90 |                             <!-- article -->
 91 |                                 <div class="grid-item">
 92 |                                 <article class="article">
 93 |                                     <div class="card">
 94 |                                         <div class="overflow-img">
 95 |                                             <a href="#">
 96 |                                                 <img src="./assets/img2.jpg" class="img-fluid" alt="">
 97 |                                             </a>
 98 |                                         </div>
 99 |                                         <div class="card-body text-center px-1">
100 |                                             <a href="#" class="text-title display-1 text-dark">
101 |                                                 Looking for some feedback for this rejected track
102 |                                                 technology
103 |                                             </a>
104 |                                             <p class="secondary-title text-secondary display-3">
105 |                                                 <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
106 |                                                 <span><i class="far fa-comments text-primary"></i> 12</span>
107 |                                             </p>
108 |                                         </div>
109 |                                     </div>
110 |                                 </article>
111 |                                 </div>
112 |                             <!-- .article -->
113 |                             <!-- article -->
114 |                             <div class="grid-item">
115 |                                 <article class="article">
116 |                                     <div class="card">
117 |                                         <div class="overflow-img">
118 |                                             <a href="#">
119 |                                                 <img src="./assets/img3.jpg" class="img-fluid" alt="">
120 |                                             </a>
121 |                                         </div>
122 |                                         <div class="card-body text-center px-1">
123 |                                             <a href="#" class="text-title display-1 text-dark">
124 |                                                 Looking for some feedback for this rejected track
125 |                                                 technology
126 |                                             </a>
127 |                                             <p class="secondary-title text-secondary display-3">
128 |                                                 <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
129 |                                                 <span><i class="far fa-comments text-primary"></i> 12</span>
130 |                                             </p>
131 |                                         </div>
132 |                                     </div>
133 |                                 </article>
134 |                             </div>
135 |                          <!-- .article -->
136 |                             <!-- article -->
137 |                             <div class="grid-item">
138 |                                 <article class="article">
139 |                                     <div class="card">
140 |                                         <div class="overflow-img">
141 |                                             <a href="#">
142 |                                                 <img src="./assets/img4.jpg" class="img-fluid" alt="">
143 |                                             </a>
144 |                                         </div>
145 |                                         <div class="card-body text-center px-1">
146 |                                             <a href="#" class="text-title display-1 text-dark">
147 |                                                 Looking for some feedback for this rejected track
148 |                                                 technology
149 |                                             </a>
150 |                                             <p class="secondary-title text-secondary display-3">
151 |                                                 <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
152 |                                                 <span><i class="far fa-comments text-primary"></i> 12</span>
153 |                                             </p>
154 |                                         </div>
155 |                                     </div>
156 |                                 </article>
157 |                             </div>
158 |                          <!-- .article -->
159 |                             <!-- article -->
160 |                             <div class="grid-item">
161 |                                 <article class="article">
162 |                                     <div class="card">
163 |                                         <div class="overflow-img">
164 |                                             <a href="#">
165 |                                                 <img src="./assets/img5.jpg" class="img-fluid" alt="">
166 |                                             </a>
167 |                                         </div>
168 |                                         <div class="card-body text-center px-1">
169 |                                             <a href="#" class="text-title display-1 text-dark">
170 |                                                 Looking for some feedback for this rejected track
171 |                                                 technology
172 |                                             </a>
173 |                                             <p class="secondary-title text-secondary display-3">
174 |                                                 <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
175 |                                                 <span><i class="far fa-comments text-primary"></i> 12</span>
176 |                                             </p>
177 |                                         </div>
178 |                                     </div>
179 |                                 </article>
180 |                             </div>
181 |                          <!-- .article -->
182 |                             <!-- article -->
183 |                             <div class="grid-item">
184 |                                 <article class="article">
185 |                                     <div class="card">
186 |                                         <div class="overflow-img">
187 |                                             <a href="#">
188 |                                                 <img src="./assets/img6.jpg" class="img-fluid" alt="">
189 |                                             </a>
190 |                                         </div>
191 |                                         <div class="card-body text-center px-1">
192 |                                             <a href="#" class="text-title display-1 text-dark">
193 |                                                 Looking for some feedback for this rejected track
194 |                                                 technology
195 |                                             </a>
196 |                                             <p class="secondary-title text-secondary display-3">
197 |                                                 <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
198 |                                                 <span><i class="far fa-comments text-primary"></i> 12</span>
199 |                                             </p>
200 |                                         </div>
201 |                                     </div>
202 |                                 </article>
203 |                             </div>
204 |                          <!-- .article -->
205 |                             <!-- article -->
206 |                             <div class="grid-item">
207 |                                 <article class="article">
208 |                                     <div class="card">
209 |                                         <div class="overflow-img">
210 |                                             <a href="#">
211 |                                                 <img src="./assets/img7.jpg" class="img-fluid" alt="">
212 |                                             </a>
213 |                                         </div>
214 |                                         <div class="card-body text-center px-1">
215 |                                             <a href="#" class="text-title display-1 text-dark">
216 |                                                 Looking for some feedback for this rejected track
217 |                                                 technology
218 |                                             </a>
219 |                                             <p class="secondary-title text-secondary display-3">
220 |                                                 <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
221 |                                                 <span><i class="far fa-comments text-primary"></i> 12</span>
222 |                                             </p>
223 |                                         </div>
224 |                                     </div>
225 |                                 </article>
226 |                             </div>
227 |                          <!-- .article -->
228 |                             <!-- article -->
229 |                             <div class="grid-item">
230 |                                 <article class="article">
231 |                                     <div class="card">
232 |                                         <div class="overflow-img">
233 |                                             <a href="#">
234 |                                                 <img src="./assets/img8.jpg" class="img-fluid" alt="">
235 |                                             </a>
236 |                                         </div>
237 |                                         <div class="card-body text-center px-1">
238 |                                             <a href="#" class="text-title display-1 text-dark">
239 |                                                 Looking for some feedback for this rejected track
240 |                                                 technology
241 |                                             </a>
242 |                                             <p class="secondary-title text-secondary display-3">
243 |                                                 <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
244 |                                                 <span><i class="far fa-comments text-primary"></i> 12</span>
245 |                                             </p>
246 |                                         </div>
247 |                                     </div>
248 |                                 </article>
249 |                             </div>
250 |                          <!-- .article -->
251 |                             <!-- article -->
252 |                             <div class="grid-item">
253 |                                 <article class="article">
254 |                                     <div class="card">
255 |                                         <div class="overflow-img">
256 |                                             <a href="#">
257 |                                                 <img src="./assets/img9.jpg" class="img-fluid" alt="">
258 |                                             </a>
259 |                                         </div>
260 |                                         <div class="card-body text-center px-1">
261 |                                             <a href="#" class="text-title display-1 text-dark">
262 |                                                 Looking for some feedback for this rejected track
263 |                                                 technology
264 |                                             </a>
265 |                                             <p class="secondary-title text-secondary display-3">
266 |                                                 <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
267 |                                                 <span><i class="far fa-comments text-primary"></i> 12</span>
268 |                                             </p>
269 |                                         </div>
270 |                                     </div>
271 |                                 </article>
272 |                             </div>
273 |                          <!-- .article -->
274 |                         </div>
275 | 
276 |                         <div class="text-center">
277 |                             <button class="btn btn-primary secondary-title text-light">Load More Posts...</button>
278 |                         </div>
279 |                     </div>
280 |                 </section>
281 |             <!-- .Blog Post Section -->
282 | 
283 |             <!-- Swiper slider -->
284 |                 <section class="slider">
285 |                     <div class="container">
286 | 
287 |                         <!-- Slider main container -->
288 |                             <div class="swiper-container">
289 |                                 <!-- Additional required wrapper -->
290 |                                 <div class="swiper-wrapper">
291 |                                     <!-- Slides -->
292 |                                     <div class="swiper-slide">
293 |                                         <a href="#">
294 |                                             <img src="./assets/slider/img1.jpg" class="img-fluid" alt="">
295 |                                         </a>
296 |                                     </div>
297 |                                      <!-- Slides -->
298 |                                       <!-- Slides -->
299 |                                     <div class="swiper-slide">
300 |                                         <a href="#">
301 |                                             <img src="./assets/slider/img2.jpg" class="img-fluid" alt="">
302 |                                         </a>
303 |                                     </div>
304 |                                      <!-- Slides -->
305 |                                       <!-- Slides -->
306 |                                     <div class="swiper-slide">
307 |                                         <a href="#">
308 |                                             <img src="./assets/slider/img3.jpg" class="img-fluid" alt="">
309 |                                         </a>
310 |                                     </div>
311 |                                         <!-- Slides -->
312 |                                              <!-- Slides -->
313 |                                     <div class="swiper-slide">
314 |                                         <a href="#">
315 |                                             <img src="./assets/slider/img4.jpg" class="img-fluid" alt="">
316 |                                         </a>
317 |                                     </div>
318 |                                         <!-- Slides -->
319 |                                         <div class="swiper-slide">
320 |                                             <a href="#">
321 |                                                 <img src="./assets/slider/img5.jpg" class="img-fluid" alt="">
322 |                                             </a>
323 |                                         </div>
324 |                                             <!-- Slides -->
325 |                                             <div class="swiper-slide">
326 |                                                 <a href="#">
327 |                                                     <img src="./assets/slider/img6.jpg" class="img-fluid" alt="">
328 |                                                 </a>
329 |                                             </div>
330 |                                                 <!-- Slides -->
331 |                                                 <div class="swiper-slide">
332 |                                                     <a href="#">
333 |                                                         <img src="./assets/slider/img7.jpg" class="img-fluid" alt="">
334 |                                                     </a>
335 |                                                 </div>
336 |                                                     <!-- Slides -->
337 | 
338 |                                 </div>
339 |                             </div>
340 | 
341 |                     </div>
342 |                 </section>
343 |              <!-- .Swiper slider -->
344 | 
345 |        </main>
346 |     <!-- .Main Site -->
347 | 
348 |     <!-- footer -->
349 |        <footer id="footer">
350 |            <div class="container">
351 |                <div class="row mb-3">
352 |                    <div class="col-3">
353 |                        <h2 class="footer-title secondary-title">About Us</h2>
354 | 
355 |                        <div class="secondary-title text-secondary">
356 |                             <p class="mt-2 ">
357 |                                 Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
358 |                                 Deserunt quis voluptate alias illum modi tenetur, iste voluptatem illo. Accusantium, corrupti!
359 |                             </p>
360 |                             
361 |                             <address>
362 |                                 <i class="fas fa-map-marker-alt text-primary"></i> 
363 |                                 5 South Main Street Los Angeles, ZZ-96110 USA
364 |                             </address>
365 | 
366 |                             <div class="phone">
367 |                                 <i class="fas fa-mobile text-primary"></i> 
368 |                                 125-896-485
369 |                             </div>
370 | 
371 |                             <div class="email">
372 |                                 <i class="fas fa-envelope text-primary"></i> 
373 |                                 dailysupport@gmail.com
374 |                             </div>
375 | 
376 |                        </div>
377 |                    </div>
378 |                    <div class="col-3">
379 |                        <h2 class="footer-title secondary-title">Feature Post</h2>
380 | 
381 |                        <div class="feature-post">
382 |                            <div class="flex-item">
383 |                                <article class="article">
384 |                                    <div class="d-flex">
385 |                                        <a href="#">
386 |                                            <img src="./assets/img9.jpg" class="object-fit px-1" alt="">
387 |                                            <div class="px-1">
388 |                                                <a href="#" class="text-title display-2 text-dark">
389 |                                                 Looking for some feedback for this rejected track
390 |                                                 technology
391 |                                                </a>
392 |                                                <p class="secondary-title text-secondary display-3">
393 |                                                     <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021 </span>
394 |                                                </p>
395 |                                            </div>
396 |                                        </a>
397 |                                    </div>
398 |                                </article>
399 |                            </div>
400 |                            <div class="flex-item">
401 |                             <article class="article">
402 |                                 <div class="d-flex">
403 |                                     <a href="#">
404 |                                         <img src="./assets/img1.jpg" class="object-fit px-1" alt="">
405 |                                         <div class="px-1">
406 |                                             <a href="#" class="text-title display-2 text-dark">
407 |                                              Looking for some feedback for this rejected track
408 |                                              technology
409 |                                             </a>
410 |                                             <p class="secondary-title text-secondary display-3">
411 |                                                  <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021 </span>
412 |                                             </p>
413 |                                         </div>
414 |                                     </a>
415 |                                 </div>
416 |                             </article>
417 |                              </div>
418 |                              <div class="flex-item">
419 |                                 <article class="article">
420 |                                     <div class="d-flex">
421 |                                         <a href="#">
422 |                                             <img src="./assets/img2.jpg" class="object-fit px-1" alt="">
423 |                                             <div class="px-1">
424 |                                                 <a href="#" class="text-title display-2 text-dark">
425 |                                                  Looking for some feedback for this rejected track
426 |                                                  technology
427 |                                                 </a>
428 |                                                 <p class="secondary-title text-secondary display-3">
429 |                                                      <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021 </span>
430 |                                                 </p>
431 |                                             </div>
432 |                                         </a>
433 |                                     </div>
434 |                                 </article>
435 |                             </div>
436 |                        </div>
437 |                    </div>
438 |                    <div class="col-3">
439 |                         <h2 class="footer-title secondary-title">Tags</h2>
440 | 
441 |                         <div class="tags">
442 |                             <div class="d-flex flex-wrap">
443 |                                 <a href="#" class="nav-link btn bg-light">Travel</a>
444 |                                 <a href="#" class="nav-link btn bg-light">Food</a>
445 |                                 <a href="#" class="nav-link btn bg-light">Lifestyle</a>
446 |                                 <a href="#" class="nav-link btn bg-light">Techonogy</a>
447 |                                 <a href="#" class="nav-link btn bg-light">Fashion</a>
448 |                             </div>
449 |                         </div>
450 | 
451 |                         <h2 class="footer-title secondary-title mt-2">Social</h2>
452 | 
453 |                         <div class="tags social">
454 |                             <div class="d-flex flex-wrap">
455 |                                 <a href="#" class="nav-link btn bg-light"><i class="fab fa-facebook-f"></i></a>
456 |                                 <a href="#" class="nav-link btn bg-light"><i class="fab fa-twitter"></i></a>
457 |                                 <a href="#" class="nav-link btn bg-light"><i class="fab fa-instagram"></i></a>
458 |                                 <a href="#" class="nav-link btn bg-light"><i class="fab fa-dribbble"></i></a>
459 |                             </div>
460 |                         </div>
461 | 
462 |                    </div>
463 |                </div>
464 | 
465 |                <!-- copyrights  -->
466 |                <div class="copyrights">
467 |                    <p class="text-center text-secondary display-2">
468 |                         © 2021 <a href="#" class="text-primary">Dailytuition</a> - Personal Blog Theme. All rights reserved.
469 |                    </p>
470 |                </div>
471 |            </div>
472 |        </footer>
473 |     <!-- .footer -->
474 | 
475 | 
476 |     <!-- masonry libray for horizontal grid -->
477 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ==" crossorigin="anonymous"></script>
478 | 
479 |     <!-- swiper slider cdn -->
480 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js" integrity="sha512-1LlEYE0qExJ/GUfAJ0k2K2fB5sIvMv/q6ueo3syohvQ3ElWDQVSMUOf39cxaDWHtNu7M6lF6ZC1H6A1m3SvheA==" crossorigin="anonymous"></script>
481 | 
482 |     <!-- custom javascript main.js file -->
483 |     <script src="main.js"></script>
484 | </body>
485 | </html>


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | let toggle = document.querySelector("#header .toggle-button");
 2 | let collapse = document.querySelectorAll("#header .collapse");
 3 | 
 4 | toggle.addEventListener('click' , function(){
 5 |     collapse.forEach(col => col.classList.toggle("collapse-toggle"));
 6 | })
 7 | 
 8 | // with masonry
 9 | new Masonry("#posts .grid", {
10 |     itemSelector : '.grid-item',
11 |     gutter : 20
12 | });
13 | 
14 | // swiper libray initialization
15 | new Swiper('.swiper-container', {
16 |     direction : 'horizontal',
17 |     loop : true,
18 |     slidesPerView : 5,
19 |     autoplay : {
20 |         delay : 3000
21 |     },
22 |     // responsive brakpoints
23 |     breakpoints : {
24 |         '@0' : {
25 |             slidesPerView : 2
26 |         },
27 |         // 888px
28 |         '@1.00' : {
29 |             slidesPerView : 3
30 |         },
31 |         // 1110px
32 |         '@1.25' : {
33 |             slidesPerView : 4
34 |         },
35 |         // 1330px
36 |         '@1.50' : {
37 |             slidesPerView: 5
38 |         }
39 |     }
40 | })
41 | 
42 | // Sticky Navigation
43 | window.onscroll = function(){ myFunction()};
44 | 
45 | // get the current value 
46 | let navbar = document.getElementById("header");
47 | 
48 | // get the navbar position
49 | let sticky = navbar.offsetTop;
50 | 
51 | // sticky function
52 | function myFunction(){
53 |     if(window.pageYOffset >= sticky){
54 |         navbar.classList.add("sticky");
55 |     }else{
56 |         navbar.classList.remove("sticky");
57 |     }
58 | }


--------------------------------------------------------------------------------
/sidebar.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Gridy Blog</title>
  7 | 
  8 |     <!-- font awesome icons cdn -->
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
 10 | 
 11 |     <!-- swiper slider css file -->
 12 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css" integrity="sha512-m3pAvNriL711NMlhkZHK6K4Tu2/RjtrzyjxZU8mlAbxxoDoURy27KajN1LGTLeEEPvaN12mKAgSCrYEwF9y0jA==" crossorigin="anonymous" />
 13 | 
 14 |     <!-- custom style.css file -->
 15 |     <link rel="stylesheet" href="style.css">
 16 | 
 17 | </head>
 18 | <body>
 19 |     
 20 |     <!-- Header -->
 21 |        <header id="header" class="shadow bg-light">
 22 |            <nav class="container navbar">
 23 |                <a href="/index.html" class="nav-brand text-dark">
 24 |                     Gridy
 25 |                 </a>
 26 | 
 27 |                 <!-- toggle button -->
 28 |                 <button class="toggle-button">
 29 |                     <span><i class="fas fa-bars"></i></span>
 30 |                 </button>
 31 | 
 32 |                 <!-- collapse on toggle button click -->
 33 |                 <div class="collapse">
 34 |                     <ul class="navbar-nav">
 35 |                         <a href="#" class="nav-link">Home</a>
 36 |                         <a href="#" class="nav-link">Blog</a>
 37 |                         <a href="#" class="nav-link">Pages</a>
 38 |                         <a href="#" class="nav-link">Categories</a>
 39 |                         <a href="#" class="nav-link">About</a>
 40 |                         <a href="#" class="nav-link">Contact</a>
 41 |                     </ul>
 42 |                 </div>
 43 | 
 44 |                   <!-- collapse on toggle button click -->
 45 |                   <div class="collapse">
 46 |                       <ul class="navbar-nav">
 47 |                             <div class="search-box">
 48 |                                 <a href="#" class="nav-link"><i class="fas fa-search"></i></a>
 49 |                             </div>
 50 |                             <a href="#" class="nav-link"><i class="fab fa-facebook-f"></i></a>
 51 |                             <a href="#" class="nav-link"><i class="fab fa-twitter"></i></a>
 52 |                             <a href="#" class="nav-link"><i class="fab fa-instagram"></i></a>
 53 |                             <a href="#" class="nav-link"><i class="fab fa-dribbble"></i></a>
 54 |                       </ul>
 55 |                   </div>
 56 |            </nav>
 57 |        </header>
 58 |     <!-- .Header -->
 59 | 
 60 |     <!-- Main Site -->
 61 |        <main id="site-main">
 62 | 
 63 |             <!-- Post Content -->
 64 |                 <section class="container">
 65 |                     <div class="layout-2 row">
 66 |                         <div class="col-8">
 67 |                             <article id="post">
 68 |                                 <!-- article heading -->
 69 |                                 <div class="headings text-center">
 70 |                                     <div class="category">
 71 |                                         <a href="#" class="nav-link">Travel</a>
 72 |                                     </div>
 73 |         
 74 |                                     <div class="title">
 75 |                                         <h2 class="text-title text-dark display-1">Looking for some feedback for this rejected track technology</h2>
 76 |                                     </div>
 77 |         
 78 |                                     <div class="meta">
 79 |                                         <a href="#" class="link display-2 text-secondary px-1">
 80 |                                             <i class="fas fa-user text-primary"></i> John Stephens
 81 |                                         </a>
 82 |                                         <a href="#" class="link display-2 text-secondary px-1">
 83 |                                             <i class="fas fa-clock text-primary"></i>  Clock Wed 02, 2019
 84 |                                         </a>
 85 |                                         <a href="#" class="link display-2 text-secondary px-1">
 86 |                                             <i class="fas fa-comments text-primary"></i> 12
 87 |                                         </a>
 88 |                                     </div>
 89 |         
 90 |                                 </div>
 91 |         
 92 |                                 <!-- thumbnail  -->
 93 |                                 <div class="thumbnail mt-3">
 94 |                                     <img src="./assets/img1.jpg" class="thumbnail" alt="">
 95 |                                 </div>
 96 |         
 97 |                                 <!-- content -->
 98 |                                 <div class="content text-dark display-2 secondary-title mt-3">
 99 |                                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
100 |                                         blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
101 |                                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
102 |                                         blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
103 |                                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
104 |                                         blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
105 |                                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
106 |                                         blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
107 |                                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
108 |                                         blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
109 |                                     </p>
110 |                                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
111 |                                         blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
112 |                                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
113 |                                         blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
114 |                                     </p>
115 |                                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
116 |                                         blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
117 |                                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
118 |                                         blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
119 |                                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
120 |                                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum itaque 
121 |                                         blanditiis adipisci aliquam dolore consequuntur fuga sed consectetur quas perspiciatis?
122 |                                     </p>
123 |                                 </div>
124 |                             </article>
125 |         
126 |                             <!-- post footer -->
127 |                             <div class="post-footer mb-3">
128 |                                 <div class="post-tags d-flex flex-wrap justify-content-center">
129 |                                     <a href="#" class="nav-link btn bg-light">Travel</a>
130 |                                     <a href="#" class="nav-link btn bg-light">Food</a>
131 |                                     <a href="#" class="nav-link btn bg-light">Lifestyle</a>
132 |                                     <a href="#" class="nav-link btn bg-light">Techonogy</a>
133 |                                     <a href="#" class="nav-link btn bg-light">Fashion</a>
134 |                                 </div>
135 |         
136 |                                 <div class="post-author text-center">
137 |                                     <div class="author-avatar">
138 |                                         <img src="./assets/face/face1.jpg" class="rounded" alt="">
139 |                                     </div>
140 |         
141 |                                     <div class="author-info py-2">
142 |                                         <h3 class="text-dark">John Stephens</h3>
143 |         
144 |                                         <p class="text-secondary secondary-title">
145 |                                             Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
146 |                                             Recusandae, sequi! In harum laborum ipsa voluptatibus doloremque nulla, tempore aut veritatis.
147 |                                         </p>
148 |         
149 |                                         <div class="post-tags d-flex flex-wrap justify-content-center">
150 |                                             <a href="#" class="nav-link"><i class="fab fa-facebook-f"></i></a>
151 |                                             <a href="#" class="nav-link"><i class="fab fa-twitter"></i></a>
152 |                                             <a href="#" class="nav-link"><i class="fab fa-instagram"></i></a>
153 |                                             <a href="#" class="nav-link"><i class="fab fa-dribbble"></i></a>
154 |                                         </div>
155 |                                     </div>
156 |         
157 |                                 </div>
158 |         
159 |                                 <!-- post related -->
160 |                                 <div class="post-realted py-2">
161 |                                     <div class="row justify-content-center">
162 |                                         <div class="prev">
163 |                                             <div class="py-2">
164 |                                                 <a href="#" class="display-2 text-dark">
165 |                                                     <i class="fas fa-chevron-left"></i> 
166 |                                                     Previous Post
167 |                                                 </a>
168 |                                             </div>
169 |                                             <article class="article text-center">
170 |                                                 <div class="d-flex">
171 |                                                     <a href="#">
172 |                                                         <img src="./assets/img9.jpg" class="object-fit" alt="">
173 |                                                     </a>
174 |                                                     <div class="cart-body px-1">
175 |                                                         <div class="category">
176 |                                                             <a href="#" class="link text-primary text-secondary">Fashion</a>
177 |                                                         </div>
178 |                                                         <a href="#" class="text-title display-1 text-dark">
179 |                                                             Looking for some feedback for this rejected track
180 |                                                             technology
181 |                                                         </a>
182 |                                                     </div>
183 |                                                 </div>
184 |                                             </article>
185 |                                         </div>
186 |                                         <div class="next text-right">
187 |                                             <div class="py-2">
188 |                                                 <a href="#" class="display-2 text-dark">
189 |                                                     Next Post 
190 |                                                     <i class="fas fa-chevron-right"></i> 
191 |                                                 </a>
192 |                                             </div>
193 |                                             <article class="article text-center">
194 |                                                 <div class="d-flex">
195 |                                                     <a href="#">
196 |                                                         <img src="./assets/img8.jpg" class="object-fit" alt="">
197 |                                                     </a>
198 |                                                     <div class="cart-body px-1">
199 |                                                         <div class="category">
200 |                                                             <a href="#" class="link text-primary text-secondary">Fashion</a>
201 |                                                         </div>
202 |                                                         <a href="#" class="text-title display-1 text-dark">
203 |                                                             Looking for some feedback for this rejected track
204 |                                                             technology
205 |                                                         </a>
206 |                                                     </div>
207 |                                                 </div>
208 |                                             </article>
209 |                                         </div>
210 |                                     </div>
211 |                                 </div>
212 |         
213 |                                 <!-- comments -->
214 |                                 <div class="post-comments py-2">
215 |                                     <h3 class="text-center display-1 secondary-title py-2">5 Comments</h3>
216 |         
217 |                                     <div class="comment-details">
218 |                                         <div class="comment-item py-2">
219 |                                             <div class="d-flex">
220 |                                                 <div class="avatar px-2">
221 |                                                     <img src="./assets/face/face1.jpg" class="rounded" alt="">
222 |                                                 </div>
223 |                                                 <div class="comment-content">
224 |                                                     <h5 class="display-2 m-0">Brandon Kelly</h5>
225 |                                                     <p class="title-secondary text-dark">
226 |                                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore aliqua. Quis ipsum suspendisse ultrices gravida lacus vel facilisis.
227 |                                                     </p>
228 |                                                 </div>
229 |                                             </div>
230 |         
231 |                                             <!-- comment reply -->
232 |                                             <div class="reply py-2">
233 |                                                 <div class="d-flex">
234 |                                                     <div class="avatar px-2">
235 |                                                         <img src="./assets/face/face2.jpg" class="rounded" alt="">
236 |                                                     </div>
237 |                                                     <div class="comment-content">
238 |                                                         <h5 class="display-2 m-0">Brandon Kelly</h5>
239 |                                                         <p class="title-secondary text-dark">
240 |                                                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore aliqua. Quis ipsum suspendisse ultrices gravida lacus vel facilisis.
241 |                                                         </p>
242 |                                                     </div>
243 |                                                 </div>
244 |                                             </div>
245 |                                         </div>
246 |         
247 |                                         <div class="comment-item py-2">
248 |                                             <div class="d-flex">
249 |                                                 <div class="avatar px-2">
250 |                                                     <img src="./assets/face/face3.jpg" class="rounded" alt="">
251 |                                                 </div>
252 |                                                 <div class="comment-content">
253 |                                                     <h5 class="display-2 m-0">Brandon Kelly</h5>
254 |                                                     <p class="title-secondary text-dark">
255 |                                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore aliqua. Quis ipsum suspendisse ultrices gravida lacus vel facilisis.
256 |                                                     </p>
257 |                                                 </div>
258 |                                             </div>
259 |                                         </div>
260 |                                     </div>   
261 |                                     
262 |                                     <!-- comment form -->
263 |                                     <div class="comment-form">
264 |         
265 |                                         <h3 class="text-center display-1 secondary-title py-2">Leave Comment</h3>
266 |         
267 |                                         <div class="d-flex justify-content-between flex-wrap">
268 |                                             <input type="text" class="form-control" placeholder="Name">
269 |                                             <input type="email" class="form-control" placeholder="Email">
270 |                                             <input type="text" class="form-control" placeholder="Website">
271 |                                         </div>
272 |         
273 |                                         <textarea class="form-control mt-3" placeholder="Message" rows="10"></textarea>
274 |                                         <div class="text-center">
275 |                                             <button class="btn btn-primary display-2 text-light mt-2">Submit</button>
276 |                                         </div>
277 |                                     </div>
278 |                                 </div>
279 |         
280 |                             </div>
281 |                             <!-- .post footer -->
282 |                         </div>
283 |                         <div class="col-4">
284 |                             <aside id="sidebar" class="px-1">
285 | 
286 |                                 <!-- categories -->
287 |                                 <section class="categories">
288 |                                     <h2 class="text-center text-dark">Categories</h2>
289 | 
290 |                                     <a href="#" class="d-flex justify-content-between text-dark">
291 |                                         <span>Design</span>
292 |                                         <span>5</span>
293 |                                     </a>
294 |                                     <a href="#" class="d-flex justify-content-between text-dark">
295 |                                         <span>Graphic</span>
296 |                                         <span>8</span>
297 |                                     </a>
298 |                                     <a href="#" class="d-flex justify-content-between text-dark">
299 |                                         <span>Illistration</span>
300 |                                         <span>3</span>
301 |                                     </a>
302 |                                     <a href="#" class="d-flex justify-content-between text-dark">
303 |                                         <span>Fashion</span>
304 |                                         <span>2</span>
305 |                                     </a>
306 |                                 </section>
307 | 
308 |                                 <!-- Trending post -->
309 |                                 <section class="trending-post mt-3">
310 | 
311 |                                     <h2 class="text-center text-dark py-2">Trending Post</h2>
312 | 
313 |                                     <!-- post-items -->
314 |                                     <div class="post-item py-1">
315 |                                         <article class="article">
316 |                                             <div class="d-flex">
317 |                                                 <a href="#">
318 |                                                     <img src="./assets/img1.jpg" class="rounded px-1" alt="">
319 |                                                 </a>
320 |                                                 <div class="cart-body">
321 |                                                     <div class="trending-category">
322 |                                                         <a href="#" class="link text-primary">
323 |                                                             Fashion
324 |                                                         </a>
325 |                                                     </div>
326 |                                                     <a href="#" class="text-title display-2 text-dark">
327 |                                                         Looking for some feedback for this rejected track technology
328 |                                                     </a>
329 |                                                     <p class="secondary-title text-secondary display-3">
330 |                                                         <span>
331 |                                                             <i class="far fa-clock text-primary"></i>
332 |                                                              Clock Wed 02, 2019
333 |                                                         </span>
334 |                                                     </p>                                                    
335 |                                                 </div>
336 |                                             </div>
337 |                                         </article>
338 |                                     </div>
339 | 
340 |                                        <!-- post-items -->
341 |                                        <div class="post-item py-1">
342 |                                         <article class="article">
343 |                                             <div class="d-flex">
344 |                                                 <a href="#">
345 |                                                     <img src="./assets/img2.jpg" class="rounded px-1" alt="">
346 |                                                 </a>
347 |                                                 <div class="cart-body">
348 |                                                     <div class="trending-category">
349 |                                                         <a href="#" class="link text-primary">
350 |                                                             Fashion
351 |                                                         </a>
352 |                                                     </div>
353 |                                                     <a href="#" class="text-title display-2 text-dark">
354 |                                                         Looking for some feedback for this rejected track technology
355 |                                                     </a>
356 |                                                     <p class="secondary-title text-secondary display-3">
357 |                                                         <span>
358 |                                                             <i class="far fa-clock text-primary"></i>
359 |                                                              Clock Wed 02, 2019
360 |                                                         </span>
361 |                                                     </p>                                                    
362 |                                                 </div>
363 |                                             </div>
364 |                                         </article>
365 |                                         </div>
366 | 
367 |                                            <!-- post-items -->
368 |                                     <div class="post-item py-1">
369 |                                         <article class="article">
370 |                                             <div class="d-flex">
371 |                                                 <a href="#">
372 |                                                     <img src="./assets/img3.jpg" class="rounded px-1" alt="">
373 |                                                 </a>
374 |                                                 <div class="cart-body">
375 |                                                     <div class="trending-category">
376 |                                                         <a href="#" class="link text-primary">
377 |                                                             Fashion
378 |                                                         </a>
379 |                                                     </div>
380 |                                                     <a href="#" class="text-title display-2 text-dark">
381 |                                                         Looking for some feedback for this rejected track technology
382 |                                                     </a>
383 |                                                     <p class="secondary-title text-secondary display-3">
384 |                                                         <span>
385 |                                                             <i class="far fa-clock text-primary"></i>
386 |                                                              Clock Wed 02, 2019
387 |                                                         </span>
388 |                                                     </p>                                                    
389 |                                                 </div>
390 |                                             </div>
391 |                                         </article>
392 |                                     </div>
393 | 
394 |                                        <!-- post-items -->
395 |                                        <div class="post-item py-1">
396 |                                         <article class="article">
397 |                                             <div class="d-flex">
398 |                                                 <a href="#">
399 |                                                     <img src="./assets/img4.jpg" class="rounded px-1" alt="">
400 |                                                 </a>
401 |                                                 <div class="cart-body">
402 |                                                     <div class="trending-category">
403 |                                                         <a href="#" class="link text-primary">
404 |                                                             Fashion
405 |                                                         </a>
406 |                                                     </div>
407 |                                                     <a href="#" class="text-title display-2 text-dark">
408 |                                                         Looking for some feedback for this rejected track technology
409 |                                                     </a>
410 |                                                     <p class="secondary-title text-secondary display-3">
411 |                                                         <span>
412 |                                                             <i class="far fa-clock text-primary"></i>
413 |                                                              Clock Wed 02, 2019
414 |                                                         </span>
415 |                                                     </p>                                                    
416 |                                                 </div>
417 |                                             </div>
418 |                                         </article>
419 |                                     </div>
420 | 
421 |                                 </section>
422 | 
423 |                             </aside>
424 |                         </div>
425 |                     </div>
426 | 
427 | 
428 |                 </section>
429 |             <!-- .Post Content -->
430 | 
431 |             <!-- Swiper slider -->
432 |                 <section class="slider">
433 |                     <div class="container">
434 | 
435 |                         <!-- Slider main container -->
436 |                             <div class="swiper-container">
437 |                                 <!-- Additional required wrapper -->
438 |                                 <div class="swiper-wrapper">
439 |                                     <!-- Slides -->
440 |                                     <div class="swiper-slide">
441 |                                         <a href="#">
442 |                                             <img src="./assets/slider/img1.jpg" class="img-fluid" alt="">
443 |                                         </a>
444 |                                     </div>
445 |                                      <!-- Slides -->
446 |                                       <!-- Slides -->
447 |                                     <div class="swiper-slide">
448 |                                         <a href="#">
449 |                                             <img src="./assets/slider/img2.jpg" class="img-fluid" alt="">
450 |                                         </a>
451 |                                     </div>
452 |                                      <!-- Slides -->
453 |                                       <!-- Slides -->
454 |                                     <div class="swiper-slide">
455 |                                         <a href="#">
456 |                                             <img src="./assets/slider/img3.jpg" class="img-fluid" alt="">
457 |                                         </a>
458 |                                     </div>
459 |                                         <!-- Slides -->
460 |                                              <!-- Slides -->
461 |                                     <div class="swiper-slide">
462 |                                         <a href="#">
463 |                                             <img src="./assets/slider/img4.jpg" class="img-fluid" alt="">
464 |                                         </a>
465 |                                     </div>
466 |                                         <!-- Slides -->
467 |                                         <div class="swiper-slide">
468 |                                             <a href="#">
469 |                                                 <img src="./assets/slider/img5.jpg" class="img-fluid" alt="">
470 |                                             </a>
471 |                                         </div>
472 |                                             <!-- Slides -->
473 |                                             <div class="swiper-slide">
474 |                                                 <a href="#">
475 |                                                     <img src="./assets/slider/img6.jpg" class="img-fluid" alt="">
476 |                                                 </a>
477 |                                             </div>
478 |                                                 <!-- Slides -->
479 |                                                 <div class="swiper-slide">
480 |                                                     <a href="#">
481 |                                                         <img src="./assets/slider/img7.jpg" class="img-fluid" alt="">
482 |                                                     </a>
483 |                                                 </div>
484 |                                                     <!-- Slides -->
485 | 
486 |                                 </div>
487 |                             </div>
488 | 
489 |                     </div>
490 |                 </section>
491 |              <!-- .Swiper slider -->
492 | 
493 |        </main>
494 |     <!-- .Main Site -->
495 | 
496 |     <!-- footer -->
497 |        <footer id="footer">
498 |            <div class="container">
499 |                <div class="row mb-3">
500 |                    <div class="col-3">
501 |                        <h2 class="footer-title secondary-title">About Us</h2>
502 | 
503 |                        <div class="secondary-title text-secondary">
504 |                             <p class="mt-2 ">
505 |                                 Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
506 |                                 Deserunt quis voluptate alias illum modi tenetur, iste voluptatem illo. Accusantium, corrupti!
507 |                             </p>
508 |                             
509 |                             <address>
510 |                                 <i class="fas fa-map-marker-alt text-primary"></i> 
511 |                                 5 South Main Street Los Angeles, ZZ-96110 USA
512 |                             </address>
513 | 
514 |                             <div class="phone">
515 |                                 <i class="fas fa-mobile text-primary"></i> 
516 |                                 125-896-485
517 |                             </div>
518 | 
519 |                             <div class="email">
520 |                                 <i class="fas fa-envelope text-primary"></i> 
521 |                                 dailysupport@gmail.com
522 |                             </div>
523 | 
524 |                        </div>
525 |                    </div>
526 |                    <div class="col-3">
527 |                        <h2 class="footer-title secondary-title">Feature Post</h2>
528 | 
529 |                        <div class="feature-post">
530 |                            <div class="flex-item">
531 |                                <article class="article">
532 |                                    <div class="d-flex">
533 |                                        <a href="#">
534 |                                            <img src="./assets/img9.jpg" class="object-fit px-1" alt="">
535 |                                            <div class="px-1">
536 |                                                <a href="#" class="text-title display-2 text-dark">
537 |                                                 Looking for some feedback for this rejected track
538 |                                                 technology
539 |                                                </a>
540 |                                                <p class="secondary-title text-secondary display-3">
541 |                                                     <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021 </span>
542 |                                                </p>
543 |                                            </div>
544 |                                        </a>
545 |                                    </div>
546 |                                </article>
547 |                            </div>
548 |                            <div class="flex-item">
549 |                             <article class="article">
550 |                                 <div class="d-flex">
551 |                                     <a href="#">
552 |                                         <img src="./assets/img1.jpg" class="object-fit px-1" alt="">
553 |                                         <div class="px-1">
554 |                                             <a href="#" class="text-title display-2 text-dark">
555 |                                              Looking for some feedback for this rejected track
556 |                                              technology
557 |                                             </a>
558 |                                             <p class="secondary-title text-secondary display-3">
559 |                                                  <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021 </span>
560 |                                             </p>
561 |                                         </div>
562 |                                     </a>
563 |                                 </div>
564 |                             </article>
565 |                              </div>
566 |                              <div class="flex-item">
567 |                                 <article class="article">
568 |                                     <div class="d-flex">
569 |                                         <a href="#">
570 |                                             <img src="./assets/img2.jpg" class="object-fit px-1" alt="">
571 |                                             <div class="px-1">
572 |                                                 <a href="#" class="text-title display-2 text-dark">
573 |                                                  Looking for some feedback for this rejected track
574 |                                                  technology
575 |                                                 </a>
576 |                                                 <p class="secondary-title text-secondary display-3">
577 |                                                      <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021 </span>
578 |                                                 </p>
579 |                                             </div>
580 |                                         </a>
581 |                                     </div>
582 |                                 </article>
583 |                             </div>
584 |                        </div>
585 |                    </div>
586 |                    <div class="col-3">
587 |                         <h2 class="footer-title secondary-title">Tags</h2>
588 | 
589 |                         <div class="tags">
590 |                             <div class="d-flex flex-wrap">
591 |                                 <a href="#" class="nav-link btn bg-light">Travel</a>
592 |                                 <a href="#" class="nav-link btn bg-light">Food</a>
593 |                                 <a href="#" class="nav-link btn bg-light">Lifestyle</a>
594 |                                 <a href="#" class="nav-link btn bg-light">Techonogy</a>
595 |                                 <a href="#" class="nav-link btn bg-light">Fashion</a>
596 |                             </div>
597 |                         </div>
598 | 
599 |                         <h2 class="footer-title secondary-title mt-2">Social</h2>
600 | 
601 |                         <div class="tags social">
602 |                             <div class="d-flex flex-wrap">
603 |                                 <a href="#" class="nav-link btn bg-light"><i class="fab fa-facebook-f"></i></a>
604 |                                 <a href="#" class="nav-link btn bg-light"><i class="fab fa-twitter"></i></a>
605 |                                 <a href="#" class="nav-link btn bg-light"><i class="fab fa-instagram"></i></a>
606 |                                 <a href="#" class="nav-link btn bg-light"><i class="fab fa-dribbble"></i></a>
607 |                             </div>
608 |                         </div>
609 | 
610 |                    </div>
611 |                </div>
612 | 
613 |                <!-- copyrights  -->
614 |                <div class="copyrights">
615 |                    <p class="text-center text-secondary display-2">
616 |                         © 2021 <a href="#" class="text-primary">Dailytuition</a> - Personal Blog Theme. All rights reserved.
617 |                    </p>
618 |                </div>
619 |            </div>
620 |        </footer>
621 |     <!-- .footer -->
622 | 
623 | 
624 |     <!-- masonry libray for horizontal grid -->
625 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ==" crossorigin="anonymous"></script>
626 | 
627 |     <!-- swiper slider cdn -->
628 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js" integrity="sha512-1LlEYE0qExJ/GUfAJ0k2K2fB5sIvMv/q6ueo3syohvQ3ElWDQVSMUOf39cxaDWHtNu7M6lF6ZC1H6A1m3SvheA==" crossorigin="anonymous"></script>
629 | 
630 |     <!-- custom javascript main.js file -->
631 |     <script src="main.js"></script>
632 | </body>
633 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Poppins&family=Roboto&display=swap');
  2 | 
  3 | /* root styling */
  4 | 
  5 | :root{
  6 |     --light : #f8f9fa;
  7 |     --secondary: #adb5bd;
  8 |     --dark: #343a40;
  9 |     --primary-color: #f15bb5;
 10 |     --secondary-color: #2ec4b6;
 11 |     --border : #e9ecef;
 12 | }
 13 | 
 14 | body{
 15 |     font-family: 'Roboto', sans-serif;
 16 |     padding: 0;
 17 |     margin: 0;
 18 | }
 19 | 
 20 | a{
 21 |     text-decoration: none;
 22 | }
 23 | 
 24 | * > *{
 25 |     box-sizing: border-box;
 26 | }
 27 | 
 28 | /* global styling */
 29 | .text-light{
 30 |     color: var(--light);
 31 | }
 32 | 
 33 | .text-secondary{
 34 |     color: var(--secondary);
 35 | }
 36 | 
 37 | .text-dark{
 38 |     color: var(--dark);
 39 | }
 40 | 
 41 | .text-primary{
 42 |     color: var(--primary-color);
 43 | }
 44 | 
 45 | .bg-light{
 46 |     background-color: var(--light);
 47 | }
 48 | 
 49 | .container{
 50 |     max-width: 1200px;
 51 |     padding: 0 15px;
 52 |     margin: auto;
 53 | }
 54 | 
 55 | .img-fluid{
 56 |     width: 100%;
 57 | }
 58 | 
 59 | .text-title{
 60 |     font-family: 'DM Sans', sans-serif;
 61 |     font-weight: bold;
 62 | }
 63 | 
 64 | .secondary-title{
 65 |     font-family: 'Poppins' , sans-serif;
 66 | }
 67 | 
 68 | .display-1{
 69 |     font-size: 22px;
 70 | }
 71 | 
 72 | .display-2{
 73 |     font-size: 16px;
 74 | }
 75 | 
 76 | .display-3{
 77 |     font-size: 14px;
 78 | }
 79 | 
 80 | .text-center{
 81 |     text-align: center;
 82 | }
 83 | 
 84 | .text-right{
 85 |     text-align: right;
 86 | }
 87 | 
 88 | .btn{
 89 |     padding: 15px 20px;
 90 |     border: none;
 91 | }
 92 | 
 93 | .btn-primary{
 94 |     border-radius: 4px;
 95 |     background-color: var(--secondary-color);
 96 | }
 97 | 
 98 | .object-fit{
 99 |     max-height: 120px;
100 |     height: 80px;
101 |     width: 80px;
102 |     object-fit: fill;
103 | }
104 | 
105 | .d-flex{
106 |     display: flex;   
107 | }
108 | 
109 | .flex-wrap{
110 |     flex-wrap: wrap;
111 | }
112 | 
113 | .justify-content-center{
114 |     justify-content: center;
115 | }
116 | 
117 | .justify-content-between{
118 |     justify-content: space-between;
119 | }
120 | 
121 | .mt-2{
122 |     margin-top: 10px;
123 | }
124 | 
125 | .mt-3{
126 |     margin-top: 50px;
127 | }
128 | 
129 | .mb-3{
130 |     margin-bottom: 30px;
131 | }
132 | 
133 | .m-0{
134 |     margin: 0;
135 | }
136 | 
137 | .px-1{
138 |     padding-left: 5px;
139 |     padding-right: 5px;
140 | }
141 | 
142 | .px-2{
143 |     padding-left: 20px;
144 |     padding-right: 20px;
145 | }
146 | 
147 | .py-1{
148 |     padding-top: 10px;
149 |     padding-bottom: 10px;
150 | }
151 | 
152 | .py-2{
153 |     padding-top: 20px;
154 |     padding-bottom: 20px;
155 | }
156 | 
157 | .py-3{
158 |     padding-top: 30px;
159 |     padding-bottom: 30px;
160 | }
161 | 
162 | .thumbnail{
163 |     width: 100%;
164 |     height: 500px;
165 |     object-fit: cover;
166 | }
167 | 
168 | .rounded{
169 |     height: 120px;
170 |     width: 120px;
171 |     object-fit: fill;
172 |     border-radius: 99px;
173 | }
174 | 
175 | .shadow{
176 |     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
177 | }
178 | 
179 | 
180 | /* section styling */
181 |  
182 | /* ------- Navigation Menu ---------- */
183 | .navbar{
184 |     position: relative;
185 |     display: flex;
186 |     flex-direction: row;
187 |     justify-content: space-between;
188 |     padding: 10px;
189 | }
190 | 
191 | .nav-brand{
192 |     font-family: 'DM Sans', sans-serif;
193 |     font-weight: bold;
194 |     align-self: center;
195 |     font-size: 32px;
196 | }
197 | 
198 | .collapse{
199 |     align-self: center;
200 | }
201 | 
202 | .nav-link{
203 |     font-size: 18px;
204 |     margin: 12px;
205 |     color: var(--dark);
206 |     font-family: 'Poppins', sans-serif;
207 | }
208 | 
209 | .nav-link:hover{
210 |     color: var(--primary-color);
211 | }
212 | 
213 | .search-box{
214 |     display: inline;
215 |     border-right: 1px solid var(--secondary);
216 |     padding-right: 12px;
217 |     margin-right: 10px;
218 | }
219 | 
220 | .toggle-button{
221 |     font-size: 21px;
222 |     background-color: transparent;
223 |     border: none;
224 |     position: absolute;
225 |     right: 0;
226 |     margin: 8px 10px;
227 |     display: none;
228 | }
229 | 
230 | .toggle-button:focus{
231 |     outline: none;
232 | }
233 | 
234 | 
235 | /* ------- .Navigation Menu ---------- */
236 | 
237 | /* ----------- Main Section ---------- */
238 | 
239 | #site-main{
240 |     margin-top: 8em;
241 | }
242 | 
243 | #posts{
244 |     margin-bottom: 5em;
245 | }
246 | 
247 | .grid{
248 |     margin: 0 auto;
249 | }
250 | 
251 | .grid .grid-item{
252 |     width: calc(33.3333% - 20px);
253 |     margin-bottom: 3em;
254 | }
255 | 
256 | /* ----------- .Main Section ---------- */
257 | 
258 | /* ----------- footer ---------- */
259 | #footer{
260 |     padding-top: 4em;
261 | }
262 | 
263 | #footer .feature-post .flex-item{
264 |     margin-bottom: 10px;
265 | }
266 | 
267 | #footer .tags a{
268 |     border-radius: 40px;
269 |     padding: 10px 20px;
270 |     font-size: 15px;
271 | }
272 | 
273 | #footer .copyrights{
274 |     padding: 10px 0;
275 |     border-top: 2px solid var(--light);
276 | }
277 | 
278 | 
279 | /* ----------- .footer ---------- */
280 | 
281 | /* ----------- article page ------- */
282 | 
283 | #post{
284 |     padding: 0 2em;
285 |     margin-bottom: 4em;
286 | }
287 | 
288 | .post-footer .post-author{
289 |     position: relative;
290 |     margin-top: 4em;
291 |     background-color: var(--light);
292 | }
293 | 
294 | .post-footer .post-author::after{
295 |     background-color: white;
296 |     content: '';
297 |     position: absolute;
298 |     top: 0;
299 |     left: 0;
300 |     right: 0;
301 |     height: 4em;
302 |     z-index: 0;
303 | }
304 | 
305 | .post-footer .post-author .author-avatar{
306 |     margin: 0 auto;
307 |     margin-bottom: 1em;
308 |     position: inherit;
309 |     z-index: 1;
310 | }
311 | 
312 | .post-footer .post-comments .reply{
313 |     padding-left: 7em;
314 | }
315 | 
316 | .form-control{
317 |     width: 100%;
318 |     border: 2px solid var(--border);
319 |     padding: 1em;
320 |     font-size: 18px;
321 |     margin-right: 10px;
322 |     font-family: 'Poppins', sans-serif;
323 | }
324 | 
325 | /* ----------- .article page ------- */
326 | 
327 | /* ----------- sidebar page ------- */
328 | #sidebar .categories a{
329 |     padding: 1em 3em;
330 |     font-size: 18px;
331 |     margin-bottom: 1em;
332 |     background-color: var(--light);
333 |     border-radius: 99px;
334 | }
335 | 
336 | #sidebar .categories a:hover{
337 |     background-color: var(--primary-color);
338 |     color: var(--light);
339 | }
340 | 
341 | /* ----------- .sidebar page ------- */
342 | 
343 | /* ----------- sticky ------- */
344 | 
345 | .sticky{
346 |     position: fixed;
347 |     top: 0;
348 |     z-index: 99;
349 |     width: 100%;
350 | }
351 | 
352 | .sticky + .content{
353 |     padding-top: 60px;
354 | }
355 | 
356 | /* ----------- .sticky ------- */
357 | 
358 | 
359 | 
360 | /* Media Query */
361 | 
362 | .row{
363 |     display: flex;
364 | }
365 | 
366 | .col-3{
367 |     flex: 0 0 33.3333%;
368 |     max-width: 33.3333%;
369 |     padding-right: 35px;
370 | }
371 | 
372 | .col-8{
373 |     flex: 0 0 70%;
374 |     max-width: 70%;
375 | }
376 | 
377 | .col-4{
378 |     flex: 0 0 30%;
379 |     max-width: 30%;
380 | }
381 | 
382 | @media (max-width : 1024px){
383 |     .row{
384 |        flex-wrap: wrap;
385 |     }
386 | 
387 |     .col-3{
388 |         flex: 0 0 50%;
389 |         max-width: 50%;
390 |     }
391 | 
392 |     .col-8{
393 |         flex: 0 0 100%;
394 |         max-width: 100%;
395 |     }
396 | 
397 |     .col-4{
398 |         flex: 0 0 100%;
399 |         max-width: 100%;
400 |     }
401 | 
402 | }
403 | 
404 | 
405 | @media (max-width : 992px){
406 |     .navbar{
407 |         flex-direction: column;
408 |     }
409 | 
410 |     #site-main{
411 |         margin-top: 14em;
412 |     }
413 | }
414 | 
415 | @media (max-width : 768px){
416 |     .grid .grid-item{
417 |         width: calc(50% - 20px);
418 |     }
419 | 
420 |     .col-3{
421 |         flex: 0 0 100%;
422 |         max-width: calc(100% - 50px);
423 |         padding-top: 40px 50px;
424 |     }
425 | }
426 | 
427 | @media (max-width : 574px){
428 |     .toggle-button{
429 |         display: initial;
430 |     }
431 | 
432 |     .collapse{
433 |         max-height: 0;
434 |         overflow: hidden;
435 |         transition: all 0.8s cubic-bezier(0.51,-0.15, 0, 0.98);
436 |     }
437 | 
438 |     .collapse .nav-link{
439 |         display: block;
440 |         text-align: center;
441 |     }
442 | 
443 |     .search-box{
444 |         border-right: none;
445 |     }
446 | 
447 |     .collapse-toggle{
448 |         max-height: 500px;
449 |     }
450 | 
451 |     .grid .grid-item{
452 |         width: calc(100% - 20px);
453 |     }
454 | 
455 |     #site-main{
456 |         margin-top: 6em;
457 |     }
458 | 
459 | }
460 | 


--------------------------------------------------------------------------------