├── img
    ├── brand.png
    ├── news1.jpg
    ├── news2.jpg
    ├── news3.jpg
    ├── news4.jpg
    ├── image-five.jpg
    ├── image-four.jpg
    ├── showcase2.jpg
    ├── tech-red.jpg
    └── image-three.jpg
├── screenshot.png
├── README.md
├── main.js
├── styles.css
└── index.html


/img/brand.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/technews-html/HEAD/img/brand.png


--------------------------------------------------------------------------------
/img/news1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/technews-html/HEAD/img/news1.jpg


--------------------------------------------------------------------------------
/img/news2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/technews-html/HEAD/img/news2.jpg


--------------------------------------------------------------------------------
/img/news3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/technews-html/HEAD/img/news3.jpg


--------------------------------------------------------------------------------
/img/news4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/technews-html/HEAD/img/news4.jpg


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/technews-html/HEAD/screenshot.png


--------------------------------------------------------------------------------
/img/image-five.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/technews-html/HEAD/img/image-five.jpg


--------------------------------------------------------------------------------
/img/image-four.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/technews-html/HEAD/img/image-four.jpg


--------------------------------------------------------------------------------
/img/showcase2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/technews-html/HEAD/img/showcase2.jpg


--------------------------------------------------------------------------------
/img/tech-red.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/technews-html/HEAD/img/tech-red.jpg


--------------------------------------------------------------------------------
/img/image-three.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/technews-html/HEAD/img/image-three.jpg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tech News HTML
 2 | ![](./screenshot.png)
 3 | 
 4 | # Recomendations
 5 | * Minimize the size of Images
 6 | * put a favicon
 7 | 
 8 | # Resources
 9 | * [Pexels.com](https://www.pexels.com/)
10 | * [HeroPatterns.com](https://www.heropatterns.com/). Death Start is choosen in this project


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | document.querySelector(".menu-btn").addEventListener("click", () => {
 2 |   document.querySelector(".nav-menu").classList.toggle("show");
 3 | });
 4 | 
 5 | ScrollReveal().reveal('.showcase');
 6 | ScrollReveal().reveal('.news-cards', { delay: 500 });
 7 | ScrollReveal().reveal('.cards-banner-one', { delay: 500 });
 8 | ScrollReveal().reveal('.cards-banner-two', { delay: 500 });
 9 | 
10 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | /* Global */
  2 | * {
  3 |   box-sizing: border-box;
  4 |   margin: 0;
  5 |   padding: 0;
  6 | }
  7 | 
  8 | body {
  9 |   font-family: "Oswald", sans-serif;
 10 |   background-color: #000000;
 11 |   /* Pattern from https://www.heropatterns.com/ */
 12 |   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='105' viewBox='0 0 80 105'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='death-star' fill='%23540606' fill-opacity='0.4'%3E%3Cpath d='M20 10a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm15 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zM20 75a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zm30-65a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm0 65a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zM35 10a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zM5 45a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zm60 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 13 |   color: #1e272e;
 14 |   color: #fff;
 15 |   font-size: 16px;
 16 | }
 17 | 
 18 | a {
 19 |   color: #ffffff;
 20 |   text-decoration: none;
 21 | }
 22 | 
 23 | ul {
 24 |   list-style: none;
 25 | }
 26 | 
 27 | .container {
 28 |   width: 90%;
 29 |   margin: auto;
 30 | }
 31 | 
 32 | /* Navigation */
 33 | .nav-main {
 34 |   font-size: 17px;
 35 |   display: flex;
 36 |   justify-content: space-between;
 37 |   align-items: center;
 38 |   height: 60px;
 39 |   padding: 20px 0;
 40 | }
 41 | 
 42 | .nav-brand {
 43 |   width: 50px;
 44 | }
 45 | 
 46 | /* Navbar Left */
 47 | .nav-main ul {
 48 |   display: flex;
 49 | }
 50 | 
 51 | .nav-main ul li {
 52 |   padding: 10px;
 53 | }
 54 | 
 55 | .nav-main ul li a {
 56 |   padding: 2px;
 57 | }
 58 | 
 59 | .nav-main ul li a:hover {
 60 |   border-bottom: 2px solid #fff;
 61 | }
 62 | 
 63 | .nav-main ul.nav-menu {
 64 |   flex: 1;
 65 |   margin-left: 20px;
 66 | }
 67 | 
 68 | hr {
 69 |   margin: 10px 0;
 70 | }
 71 | 
 72 | /* Responsive Button */
 73 | .menu-btn {
 74 |   cursor: pointer;
 75 |   position: absolute;
 76 |   top: 15px;
 77 |   right: 30px;
 78 |   z-index: 2;
 79 |   display: none;
 80 | }
 81 | 
 82 | /* SHOWCASE */
 83 | 
 84 | .btn {
 85 |   cursor: pointer;
 86 |   display: inline-block;
 87 |   border: 0;
 88 |   font-weight: bold;
 89 |   padding: 10px 20px;
 90 |   background: #262626;
 91 |   color: #fff;
 92 |   font-size: 15px;
 93 |   border: 1px solid #fff;
 94 | }
 95 | 
 96 | .btn:hover {
 97 |   opacity: 0.9;
 98 | }
 99 | 
100 | .showcase {
101 |   width: 100%;
102 |   height: 550px;
103 |   background: url("./img/showcase2.jpg") no-repeat center center/cover;
104 |   display: flex;
105 |   flex-direction: column;
106 |   align-items: center;
107 |   text-align: center;
108 |   justify-content: flex-end;
109 |   padding-bottom: 50px;
110 |   margin-bottom: 20px;
111 |   color: #fff;
112 | }
113 | 
114 | .showcase h2,
115 | .showcase p {
116 |   margin-bottom: 10px;
117 | }
118 | 
119 | .showcase .btn {
120 |   margin-top: 20px;
121 | }
122 | 
123 | /* News Cards */
124 | .news-cards {
125 |   display: grid;
126 |   grid-template-columns: repeat(4, 1fr);
127 |   gap: 25px;
128 |   margin: 70px 0;
129 | }
130 | 
131 | .news-cards img {
132 |   width: 100%;
133 |   height: 180px;
134 | }
135 | 
136 | .news-cards h3 {
137 |   font-size: 20px;
138 |   margin: 10px 0;
139 | }
140 | 
141 | .news-cards a {
142 |   padding: 10px 0;
143 |   color: #f2f2f2;
144 |   text-transform: uppercase;
145 |   display: inline-block;
146 |   font-weight: bold;
147 | }
148 | 
149 | /* CARDS BANNER ONE */
150 | .cards-banner-one {
151 |   width: 100%;
152 |   height: 350px;
153 |   background: url("./img/tech-red.jpg");
154 |   margin-bottom: 40px;
155 | }
156 | 
157 | .cards-banner-one .content {
158 |   width: 40%;
159 |   padding: 90px 0 0 30px;
160 |   color: #fff;
161 | }
162 | 
163 | .cards-banner-one p,
164 | .cards-banner-two p {
165 |   margin: 10px 0 20px 0;
166 | }
167 | 
168 | /* CARDS BANNER TWO*/
169 | .cards-banner-two {
170 |   width: 100%;
171 |   height: 350px;
172 |   background: url("./img/image-five.jpg") no-repeat center center/cover;
173 | }
174 | 
175 | .cards-banner-two .content {
176 |   width: 50%;
177 |   padding: 100px 0 0 30px;
178 | }
179 | 
180 | /* Follow */
181 | .social {
182 |   margin: 50px;
183 | }
184 | .social p {
185 |   text-align: center;
186 |   font-size: 30px;
187 |   margin-bottom: 20px;
188 | }
189 | .links {
190 |   display: flex;
191 |   align-items: center;
192 |   justify-content: center;
193 | }
194 | 
195 | .links a {
196 |   margin: 0 30px;
197 | }
198 | 
199 | .links a i {
200 |   font-size: 3rem;
201 | }
202 | 
203 | /* Links */
204 | .footer-links {
205 |   background: #2f3640;
206 |   color: #616161;
207 |   font-size: 12px;
208 |   padding: 35px 0;
209 | }
210 | 
211 | .footer-container {
212 |   display: grid;
213 |   grid-template-columns: repeat(4, 1fr);
214 |   gap: 10px;
215 |   align-items: flex-start;
216 |   justify-content: center;
217 | }
218 | 
219 | .footer-container ul {
220 |   margin: 0 auto;
221 | }
222 | 
223 | .footer-links li {
224 |   line-height: 2.8;
225 | }
226 | 
227 | .footer {
228 |   background: #2f3640;
229 |   color: #616161;
230 |   font-size: 12px;
231 |   padding: 20px 0;
232 |   text-align: center;
233 |   font-size: 1rem;
234 |   padding-bottom: 20px;
235 | }
236 | 
237 | /* Mobil */
238 | @media (max-width: 700px) {
239 |   .menu-btn {
240 |     display: block;
241 |   }
242 | 
243 |   .menu-btn:hover {
244 |     opacity: 0.5;
245 |   }
246 | 
247 |   .nav-main ul.nav-menu {
248 |     display: block;
249 |     position: absolute;
250 |     top: 0;
251 |     left: 0;
252 |     background: #2f3640;
253 |     width: 50%;
254 |     height: 100%;
255 |     border-right: #ccc 1px solid;
256 |     opacity: 0.9;
257 |     padding: 30px;
258 |     transform: translateX(-500px);
259 |     transition: transform 0.5s ease-in-out;
260 |   }
261 | 
262 |   .nav-main ul.nav-menu li {
263 |     padding: 20px;
264 |     border-bottom: #ccc solid 1px;
265 |     font-size: 14px;
266 |   }
267 |   .nav-main ul.nav-menu li:last-child {
268 |     border-bottom: 0;
269 |   }
270 | 
271 |   .nav-main ul.nav-menu.show {
272 |     transform: translateX(-20px);
273 |   }
274 | 
275 |   .nav-main ul.nav-menu-right {
276 |     margin-right: 50px;
277 |   }
278 | 
279 |   .news-cards {
280 |     grid-template-columns: repeat(2, 1fr);
281 |   }
282 | 
283 |   .cards-banner-one .content,
284 |   .cards-banner-two .content {
285 |     width: 80%;
286 |   }
287 | 
288 |   .footer-links .footer-container {
289 |     grid-template-columns: repeat(2, 1fr);
290 |   }
291 | }
292 | 
293 | @media (max-width: 500px) {
294 |   .news-cards {
295 |     grid-template-columns: 1fr;
296 |   }
297 | 
298 |   .cards-banner-one .content,
299 |   .cards-banner-two .content {
300 |     width: 100%;
301 |     padding: 60px 20px;
302 |   }
303 |   .footer-links .footer-container {
304 |     grid-template-columns: 1fr;
305 |   }
306 | 
307 |   .footer-links .footer-container ul {
308 |     text-align: center;
309 |   }
310 | }
311 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>TechNews</title>
  8 |   <!-- Font -->
  9 |   <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&display=swap" rel="stylesheet">
 10 |   <!-- Font Awesome -->
 11 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
 12 |   <!-- CUSTOM CSS -->
 13 |   <link rel="stylesheet" href="styles.css">
 14 | </head>
 15 | 
 16 | <body>
 17 | 
 18 |   <div class="menu-btn">
 19 |     <i class="fas fa-bars fa-2x"></i>
 20 |   </div>
 21 | 
 22 |   <div class="container">
 23 |     <!-- Navigation -->
 24 |     <nav class="nav-main">
 25 |       <!-- Brand -->
 26 |       <img src="img/brand.png" alt="TechNews Logo" class="nav-brand">
 27 |       <!-- Left Nav -->
 28 |       <ul class="nav-menu">
 29 |         <li>
 30 |           <a href="#">Web Development</a>
 31 |         </li>
 32 |         <li>
 33 |           <a href="#">Blockchain</a>
 34 |         </li>
 35 |         <li>
 36 |           <a href="#">Machine Learning</a>
 37 |         </li>
 38 |         <li>
 39 |           <a href="#">Artificial Intelligence</a>
 40 |         </li>
 41 |         <li>
 42 |           <a href="#">Quantum Computing</a>
 43 |         </li>
 44 |         <li>
 45 |           <a href="#">Startup</a>
 46 |         </li>
 47 |         <li>
 48 |           <a href="#">Cryptocurrencies</a>
 49 |         </li>
 50 |         <li>
 51 |           <a href="#">More</a>
 52 |         </li>
 53 |       </ul>
 54 | 
 55 |       <!-- Right Nav -->
 56 |       <ul class="nav-menu-right">
 57 |         <li>
 58 |           <a href="#">
 59 |             <i class="fas fa-search"></i>
 60 |           </a>
 61 |         </li>
 62 |       </ul>
 63 |     </nav>
 64 |     <hr>
 65 | 
 66 |     <!-- SHOWCASE -->
 67 |     <header class="showcase">
 68 |       <h2>Big News Today!</h2>
 69 |       <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id dolor laudantium rerum, excepturi est praesentium
 70 |         natus qui? Tempora rerum, numquam inventore eligendi in, nostrum reprehenderit, eum cumque fugit eaque
 71 |         similique!</p>
 72 |       <a href="#" class="btn">
 73 |         SignUp <i class="fas fa-chevron-right"></i>
 74 |       </a>
 75 |     </header>
 76 | 
 77 |     <!-- NEWS CARDS -->
 78 |     <div class="news-cards">
 79 |       <div>
 80 |         <img src="img/news1.jpg" alt="" />
 81 |         <h3>Lorem, ipsum dolor.</h3>
 82 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolore fugit esse corporis nesciunt minima
 83 |           doloremque modi mollitia rerum, similique optio eligendi itaque amet qui ullam vel incidunt asperiores fuga?
 84 |         </p>
 85 |         <a href="#">Learn More <i class="fas fa-angle-double-right"></i></a>
 86 |       </div>
 87 |       <div>
 88 |         <img src="img/news2.jpg" alt="" />
 89 |         <h3>Lorem, ipsum dolor.</h3>
 90 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolore fugit esse corporis nesciunt minima
 91 |           doloremque modi mollitia rerum, similique optio eligendi itaque amet qui ullam vel incidunt asperiores fuga?
 92 |         </p>
 93 |         <a href="#">Learn More <i class="fas fa-angle-double-right"></i></a>
 94 |       </div>
 95 |       <div>
 96 |         <img src="img/news3.jpg" alt="" />
 97 |         <h3>Lorem, ipsum dolor.</h3>
 98 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolore fugit esse corporis nesciunt minima
 99 |           doloremque modi mollitia rerum, similique optio eligendi itaque amet qui ullam vel incidunt asperiores fuga?
100 |         </p>
101 |         <a href="#">Learn More <i class="fas fa-angle-double-right"></i></a>
102 |       </div>
103 |       <div>
104 |         <img src="img/news4.jpg" alt="" />
105 |         <h3>Lorem, ipsum dolor.</h3>
106 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolore fugit esse corporis nesciunt minima
107 |           doloremque modi mollitia rerum, similique optio eligendi itaque amet qui ullam vel incidunt asperiores fuga?
108 |         </p>
109 |         <a href="#">Learn More <i class="fas fa-angle-double-right"></i></a>
110 |       </div>
111 |     </div>
112 | 
113 |     <!-- Card Banner 1-->
114 |     <section class="cards-banner-one">
115 |       <div class="content">
116 |         <h2>Lorem, ipsum dolor.</h2>
117 |         <!-- lorem 20 -->
118 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat maxime facilis quasi alias illo, fugiat
119 |           cupiditate porro dolores tenetur delectus!</p>
120 |         <a href="#" class="btn">Learn More<i class="fas fa-chevron-right"></i></a>
121 |       </div>
122 |     </section>
123 | 
124 |     <!-- NEWS CARDS -->
125 |     <div class="news-cards">
126 |       <div>
127 |         <img src="img/news1.jpg" alt="" />
128 |         <h3>Lorem, ipsum dolor.</h3>
129 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolore fugit esse corporis nesciunt minima
130 |           doloremque modi mollitia rerum, similique optio eligendi itaque amet qui ullam vel incidunt asperiores fuga?
131 |         </p>
132 |         <a href="#">Learn More <i class="fas fa-angle-double-right"></i></a>
133 |       </div>
134 |       <div>
135 |         <img src="img/news2.jpg" alt="" />
136 |         <h3>Lorem, ipsum dolor.</h3>
137 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolore fugit esse corporis nesciunt minima
138 |           doloremque modi mollitia rerum, similique optio eligendi itaque amet qui ullam vel incidunt asperiores fuga?
139 |         </p>
140 |         <a href="#">Learn More <i class="fas fa-angle-double-right"></i></a>
141 |       </div>
142 |       <div>
143 |         <img src="img/news3.jpg" alt="" />
144 |         <h3>Lorem, ipsum dolor.</h3>
145 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolore fugit esse corporis nesciunt minima
146 |           doloremque modi mollitia rerum, similique optio eligendi itaque amet qui ullam vel incidunt asperiores fuga?
147 |         </p>
148 |         <a href="#">Learn More <i class="fas fa-angle-double-right"></i></a>
149 |       </div>
150 |       <div>
151 |         <img src="img/news4.jpg" alt="" />
152 |         <h3>Lorem, ipsum dolor.</h3>
153 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolore fugit esse corporis nesciunt minima
154 |           doloremque modi mollitia rerum, similique optio eligendi itaque amet qui ullam vel incidunt asperiores fuga?
155 |         </p>
156 |         <a href="#">Learn More <i class="fas fa-angle-double-right"></i></a>
157 |       </div>
158 |     </div>
159 | 
160 |     <!-- third card -->
161 |     <section class="cards-banner-two">
162 |       <div class="content">
163 |         <h2>Lorem, ipsum dolor.</h2>
164 |         <!-- lorem 30 -->
165 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut qui laudantium id quam magni accusantium,
166 |           veritatis, ipsam labore, reprehenderit dolore repudiandae nemo sint deserunt! Suscipit facilis qui inventore
167 |           consequatur fugit.</p>
168 |         <a href="#" class="btn">Learn More <i class="fas fa-chevron-right"></i></a>
169 |       </div>
170 |     </section>
171 | 
172 |     <!-- Follow -->
173 |     <section class="social">
174 |       <p>Follow TechNews</p>
175 |       <div class="links">
176 |         <a href="https://facebook.com">
177 |           <i class="fab fa-facebook-f"></i>
178 |         </a>
179 |         <a href="https://twitter.com">
180 |           <i class="fab fa-twitter"></i>
181 |         </a>
182 |         <a href="https://linkdin.com">
183 |           <i class="fab fa-linkedin"></i>
184 |         </a>
185 |       </div>
186 |     </section>
187 |   </div>
188 | 
189 |   <!-- Footer Links -->
190 |   <div class="footer-links">
191 |     <div class="footer-container">
192 |       <ul>
193 |         <li>
194 |           <a href="#">
195 |             <h3>Title One</h3>
196 |           </a>
197 |         </li>
198 |         <li>
199 |           <a href="#">Blockchain</a>
200 |         </li>
201 |         <li>
202 |           <a href="#">Machine Learning</a>
203 |         </li>
204 |         <li>
205 |           <a href="#">Artificial Intelligence</a>
206 |         </li>
207 |         <li>
208 |           <a href="#">Quantum Computing</a>
209 |         </li>
210 |         <li>
211 |           <a href="#">Startup</a>
212 |         </li>
213 |         <li>
214 |           <a href="#">Cryptocurrencies</a>
215 |         </li>
216 |       </ul>
217 |       <ul>
218 |         <li>
219 |           <a href="#">
220 |             <h3>Title Two</h3>
221 |           </a>
222 |         </li>
223 |         <li>
224 |           <a href="#">Blockchain</a>
225 |         </li>
226 |         <li>
227 |           <a href="#">Machine Learning</a>
228 |         </li>
229 |         <li>
230 |           <a href="#">Artificial Intelligence</a>
231 |         </li>
232 |         <li>
233 |           <a href="#">Quantum Computing</a>
234 |         </li>
235 |         <li>
236 |           <a href="#">Startup</a>
237 |         </li>
238 |         <li>
239 |           <a href="#">Cryptocurrencies</a>
240 |         </li>
241 |       </ul>
242 |       <ul>
243 |         <li>
244 |           <a href="#">
245 |             <h3>Title Three</h3>
246 |           </a>
247 |         </li>
248 |         <li>
249 |           <a href="#">Blockchain</a>
250 |         </li>
251 |         <li>
252 |           <a href="#">Machine Learning</a>
253 |         </li>
254 |         <li>
255 |           <a href="#">Artificial Intelligence</a>
256 |         </li>
257 |         <li>
258 |           <a href="#">Quantum Computing</a>
259 |         </li>
260 |         <li>
261 |           <a href="#">Startup</a>
262 |         </li>
263 |         <li>
264 |           <a href="#">Cryptocurrencies</a>
265 |         </li>
266 |       </ul>
267 |       <ul>
268 |         <li>
269 |           <a href="#">
270 |             <h3>Title Four</h3>
271 |           </a>
272 |         </li>
273 |         <li>
274 |           <a href="#">Blockchain</a>
275 |         </li>
276 |         <li>
277 |           <a href="#">Machine Learning</a>
278 |         </li>
279 |         <li>
280 |           <a href="#">Artificial Intelligence</a>
281 |         </li>
282 |         <li>
283 |           <a href="#">Quantum Computing</a>
284 |         </li>
285 |         <li>
286 |           <a href="#">Startup</a>
287 |         </li>
288 |         <li>
289 |           <a href="#">Cryptocurrencies</a>
290 |         </li>
291 |       </ul>
292 |     </div>
293 |   </div>
294 | 
295 |   <!-- Footer -->
296 |   <footer class="footer">
297 |     <h3>Tech News Copyright</h3>
298 |   </footer>
299 | 
300 |   <!-- Scroll Reveal -->
301 |   <script src="https://unpkg.com/scrollreveal"></script>
302 |   <script src="main.js"></script>
303 | </body>
304 | 
305 | </html>


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