|
|
|
@ -2,294 +2,294 @@ |
|
|
|
<html lang="en"> |
|
|
|
|
|
|
|
<head> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
<link rel="stylesheet" href="./css/global.css"> |
|
|
|
<title>Document</title> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
<link rel="stylesheet" href="./css/global.css"> |
|
|
|
<title>Document</title> |
|
|
|
</head> |
|
|
|
|
|
|
|
<body> |
|
|
|
|
|
|
|
<div class="container"> |
|
|
|
<div class="container"> |
|
|
|
|
|
|
|
<header class="header"> |
|
|
|
<header class="header"> |
|
|
|
|
|
|
|
<div class="header__content"> |
|
|
|
<div class="header__content"> |
|
|
|
|
|
|
|
<div class="header__menu"> |
|
|
|
<div class="header__menu"> |
|
|
|
|
|
|
|
<nav class="header__nav"> |
|
|
|
<ul> |
|
|
|
<li class="header__nav-item"><a href="#"> ABOUT </a></li> |
|
|
|
<li class="header__nav-item"><a href="#"> CONTACT US </a></li> |
|
|
|
<li class="header__nav-item"><a href="#"> HOME </a></li> |
|
|
|
<li class="header__nav-item"><a href="#">LOGIN</a></li> |
|
|
|
</ul> |
|
|
|
</nav> |
|
|
|
<nav class="header__nav"> |
|
|
|
<ul> |
|
|
|
<li class="header__nav-item"><a href="#"> ABOUT </a></li> |
|
|
|
<li class="header__nav-item"><a href="#"> CONTACT US </a></li> |
|
|
|
<li class="header__nav-item"><a href="#"> HOME </a></li> |
|
|
|
<li class="header__nav-item"><a href="#">LOGIN</a></li> |
|
|
|
</ul> |
|
|
|
</nav> |
|
|
|
|
|
|
|
<div class="header__options"> |
|
|
|
<div class="header__options"> |
|
|
|
|
|
|
|
<div class="options__search"> |
|
|
|
<input type="text" placeholder="buscar posts..."> |
|
|
|
<button type="button">buscar</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="options__search"> |
|
|
|
<input type="text" placeholder="buscar posts..."> |
|
|
|
<button type="button">buscar</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="header__title"> |
|
|
|
<h1>BlogNetuno</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</header> |
|
|
|
|
|
|
|
<main class="main"> |
|
|
|
|
|
|
|
<div class="main__content"> |
|
|
|
|
|
|
|
<!--posts--> |
|
|
|
|
|
|
|
<div class="content__posts"> |
|
|
|
|
|
|
|
<div class="header__title"> |
|
|
|
<h1>BlogNetuno</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="post"> |
|
|
|
<div class="post__content"> |
|
|
|
|
|
|
|
<div class="post__image"> |
|
|
|
<img src="./img/post.jpg" alt="post_img"> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="post__info"> |
|
|
|
<h1 class="post__title"> |
|
|
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. |
|
|
|
</h1> |
|
|
|
<p class="post__tags"> |
|
|
|
<span>#programação</span> |
|
|
|
<span>#JavaScript</span> |
|
|
|
<span>#HTML</span> |
|
|
|
</p> |
|
|
|
<p class="post__body"> |
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis dolorum |
|
|
|
perspiciatis sit delectus nostrum ex perferendis, dolor maxime officia dolores |
|
|
|
distinctio, nam veniam eum cupiditate ullam ipsum nobis vero. |
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis dolorum |
|
|
|
perspiciatis sit delectus nostrum ex perferendis, dolor maxime officia dolores |
|
|
|
distinctio, nam veniam eum cupiditate ullam ipsum nobis vero. |
|
|
|
</p> |
|
|
|
<span class="post__by"> |
|
|
|
<em>por: Jailton Araujo.</em> |
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
<div class="post"> |
|
|
|
<div class="post__content"> |
|
|
|
|
|
|
|
<div class="post__image"> |
|
|
|
<img src="./img/post.jpg" alt="post_img"> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="post__info"> |
|
|
|
<h1 class="post__title"> |
|
|
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. |
|
|
|
</h1> |
|
|
|
<p class="post__tags"> |
|
|
|
<span>#programação</span> |
|
|
|
<span>#JavaScript</span> |
|
|
|
<span>#HTML</span> |
|
|
|
</p> |
|
|
|
<p class="post__body"> |
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis dolorum |
|
|
|
perspiciatis sit delectus nostrum ex perferendis, dolor maxime officia dolores |
|
|
|
distinctio, nam veniam eum cupiditate ullam ipsum nobis vero. |
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis dolorum |
|
|
|
perspiciatis sit delectus nostrum ex perferendis, dolor maxime officia dolores |
|
|
|
distinctio, nam veniam eum cupiditate ullam ipsum nobis vero. |
|
|
|
</p> |
|
|
|
<span class="post__by"> |
|
|
|
<em>por: Jailton Araujo.</em> |
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
<div class="post"> |
|
|
|
<div class="post__content"> |
|
|
|
|
|
|
|
<div class="post__image"> |
|
|
|
<img src="./img/post.jpg" alt="post_img"> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="post__info"> |
|
|
|
<h1 class="post__title"> |
|
|
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. |
|
|
|
</h1> |
|
|
|
<p class="post__tags"> |
|
|
|
<span>#programação</span> |
|
|
|
<span>#JavaScript</span> |
|
|
|
<span>#HTML</span> |
|
|
|
</p> |
|
|
|
<p class="post__body"> |
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis dolorum |
|
|
|
perspiciatis sit delectus nostrum ex perferendis, dolor maxime officia dolores |
|
|
|
distinctio, nam veniam eum cupiditate ullam ipsum nobis vero. |
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis dolorum |
|
|
|
perspiciatis sit delectus nostrum ex perferendis, dolor maxime officia dolores |
|
|
|
distinctio, nam veniam eum cupiditate ullam ipsum nobis vero. |
|
|
|
</p> |
|
|
|
<span class="post__by"> |
|
|
|
<em>por: Jailton Araujo.</em> |
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</header> |
|
|
|
|
|
|
|
<main class="main"> |
|
|
|
|
|
|
|
<div class="main__content"> |
|
|
|
|
|
|
|
<!--posts--> |
|
|
|
|
|
|
|
<div class="content__posts"> |
|
|
|
|
|
|
|
|
|
|
|
<div class="post"> |
|
|
|
<div class="post__content"> |
|
|
|
|
|
|
|
<div class="post__image"> |
|
|
|
<img src="./img/post.jpg" alt="post_img"> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="post__info"> |
|
|
|
<h1 class="post__title"> |
|
|
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. |
|
|
|
</h1> |
|
|
|
<p class="post__tags"> |
|
|
|
<span>#programação</span> |
|
|
|
<span>#JavaScript</span> |
|
|
|
<span>#HTML</span> |
|
|
|
</p> |
|
|
|
<p class="post__body"> |
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis dolorum |
|
|
|
perspiciatis sit delectus nostrum ex perferendis, dolor maxime officia dolores |
|
|
|
distinctio, nam veniam eum cupiditate ullam ipsum nobis vero. |
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis dolorum |
|
|
|
perspiciatis sit delectus nostrum ex perferendis, dolor maxime officia dolores |
|
|
|
distinctio, nam veniam eum cupiditate ullam ipsum nobis vero. |
|
|
|
</p> |
|
|
|
<span class="post__by"> |
|
|
|
<em>por: Jailton Araujo.</em> |
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
<div class="post"> |
|
|
|
<div class="post__content"> |
|
|
|
|
|
|
|
<div class="post__image"> |
|
|
|
<img src="./img/post.jpg" alt="post_img"> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="post__info"> |
|
|
|
<h1 class="post__title"> |
|
|
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. |
|
|
|
</h1> |
|
|
|
<p class="post__tags"> |
|
|
|
<span>#programação</span> |
|
|
|
<span>#JavaScript</span> |
|
|
|
<span>#HTML</span> |
|
|
|
</p> |
|
|
|
<p class="post__body"> |
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis dolorum |
|
|
|
perspiciatis sit delectus nostrum ex perferendis, dolor maxime officia dolores |
|
|
|
distinctio, nam veniam eum cupiditate ullam ipsum nobis vero. |
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis dolorum |
|
|
|
perspiciatis sit delectus nostrum ex perferendis, dolor maxime officia dolores |
|
|
|
distinctio, nam veniam eum cupiditate ullam ipsum nobis vero. |
|
|
|
</p> |
|
|
|
<span class="post__by"> |
|
|
|
<em>por: Jailton Araujo.</em> |
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
<div class="post"> |
|
|
|
<div class="post__content"> |
|
|
|
|
|
|
|
<div class="post__image"> |
|
|
|
<img src="./img/post.jpg" alt="post_img"> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="post__info"> |
|
|
|
<h1 class="post__title"> |
|
|
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. |
|
|
|
</h1> |
|
|
|
<p class="post__tags"> |
|
|
|
<span>#programação</span> |
|
|
|
<span>#JavaScript</span> |
|
|
|
<span>#HTML</span> |
|
|
|
</p> |
|
|
|
<p class="post__body"> |
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis dolorum |
|
|
|
perspiciatis sit delectus nostrum ex perferendis, dolor maxime officia dolores |
|
|
|
distinctio, nam veniam eum cupiditate ullam ipsum nobis vero. |
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis dolorum |
|
|
|
perspiciatis sit delectus nostrum ex perferendis, dolor maxime officia dolores |
|
|
|
distinctio, nam veniam eum cupiditate ullam ipsum nobis vero. |
|
|
|
</p> |
|
|
|
<span class="post__by"> |
|
|
|
<em>por: Jailton Araujo.</em> |
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--posts--> |
|
|
|
|
|
|
|
<!-- sidebar --> |
|
|
|
|
|
|
|
<!--posts--> |
|
|
|
|
|
|
|
<!-- sidebar --> |
|
|
|
|
|
|
|
<aside class="sidebar"> |
|
|
|
|
|
|
|
<div class="sidebar__content"> |
|
|
|
|
|
|
|
<div class="siderbar__title"> |
|
|
|
<h1>Ultimas postagens...</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="sidebar__new-posts"> |
|
|
|
|
|
|
|
<div class="card"> |
|
|
|
<div class="card__img"> |
|
|
|
<img src="./img/html5.jpg" alt="img_card"> |
|
|
|
</div> |
|
|
|
<div class="card__info"> |
|
|
|
<div class="card__title"> |
|
|
|
<h1>HTMl, a programind language or not?</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card__body"> |
|
|
|
<p> |
|
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde |
|
|
|
reprehenderit, quam |
|
|
|
temporibus qui quo numquam iste totam quisquam, sint eius eos |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="card__posted-by"> |
|
|
|
<em>por: Jailton Araujo</em> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card"> |
|
|
|
<div class="card__img"> |
|
|
|
<img src="./img/html5.jpg" alt="img_card"> |
|
|
|
</div> |
|
|
|
<div class="card__info"> |
|
|
|
<div class="card__title"> |
|
|
|
<h1>HTMl, a programind language or not?</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card__body"> |
|
|
|
<p> |
|
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde |
|
|
|
reprehenderit, quam |
|
|
|
temporibus qui quo numquam iste totam quisquam, sint eius eos |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="card__posted-by"> |
|
|
|
<em>por: Jailton Araujo</em> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
|
<div class="card__img"> |
|
|
|
<img src="./img/html5.jpg" alt="img_card"> |
|
|
|
</div> |
|
|
|
<div class="card__info"> |
|
|
|
<div class="card__title"> |
|
|
|
<h1>HTMl, a programind language or not?</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card__body"> |
|
|
|
<p> |
|
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde |
|
|
|
reprehenderit, quam |
|
|
|
temporibus qui quo numquam iste totam quisquam, sint eius eos |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="card__posted-by"> |
|
|
|
<em>por: Jailton Araujo</em> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
|
<div class="card__img"> |
|
|
|
<img src="./img/html5.jpg" alt="img_card"> |
|
|
|
</div> |
|
|
|
<div class="card__info"> |
|
|
|
<div class="card__title"> |
|
|
|
<h1>HTMl, a programind language or not?</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card__body"> |
|
|
|
<p> |
|
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde |
|
|
|
reprehenderit, quam |
|
|
|
temporibus qui quo numquam iste totam quisquam, sint eius eos |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="card__posted-by"> |
|
|
|
<em>por: Jailton Araujo</em> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</aside> |
|
|
|
<aside class="sidebar"> |
|
|
|
|
|
|
|
<div class="sidebar__content"> |
|
|
|
|
|
|
|
<div class="siderbar__title"> |
|
|
|
<h1>Ultimas postagens...</h1> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
|
|
|
|
<footer class="footer"> |
|
|
|
<div class="sidebar__new-posts"> |
|
|
|
|
|
|
|
<div class="card"> |
|
|
|
<div class="card__img"> |
|
|
|
<img src="./img/html5.jpg" alt="img_card"> |
|
|
|
</div> |
|
|
|
<div class="card__info"> |
|
|
|
<div class="card__title"> |
|
|
|
<h1>HTMl, a programind language or not?</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card__body"> |
|
|
|
<p> |
|
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde |
|
|
|
reprehenderit, quam |
|
|
|
temporibus qui quo numquam iste totam quisquam, sint eius eos |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="card__posted-by"> |
|
|
|
<em>por: Jailton Araujo</em> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card"> |
|
|
|
<div class="card__img"> |
|
|
|
<img src="./img/html5.jpg" alt="img_card"> |
|
|
|
</div> |
|
|
|
<div class="card__info"> |
|
|
|
<div class="card__title"> |
|
|
|
<h1>HTMl, a programind language or not?</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card__body"> |
|
|
|
<p> |
|
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde |
|
|
|
reprehenderit, quam |
|
|
|
temporibus qui quo numquam iste totam quisquam, sint eius eos |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="card__posted-by"> |
|
|
|
<em>por: Jailton Araujo</em> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
|
<div class="card__img"> |
|
|
|
<img src="./img/html5.jpg" alt="img_card"> |
|
|
|
</div> |
|
|
|
<div class="card__info"> |
|
|
|
<div class="card__title"> |
|
|
|
<h1>HTMl, a programind language or not?</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card__body"> |
|
|
|
<p> |
|
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde |
|
|
|
reprehenderit, quam |
|
|
|
temporibus qui quo numquam iste totam quisquam, sint eius eos |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="card__posted-by"> |
|
|
|
<em>por: Jailton Araujo</em> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="footer__content"> |
|
|
|
<div class="footer__info"> |
|
|
|
<h3>Blog Netuno 2023 ©</h3> |
|
|
|
<br> |
|
|
|
<h4>Desenvolvido por Jailton de Araujo Santos</h4> |
|
|
|
<div class="card"> |
|
|
|
<div class="card__img"> |
|
|
|
<img src="./img/html5.jpg" alt="img_card"> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<ul class="footer__network"> |
|
|
|
<li><a href="#">LinkDin</a></li> |
|
|
|
<li><a href="#">Instagran</a></li> |
|
|
|
<li><a href="#">GitHub</a></li> |
|
|
|
<li><a href="#">Telegran</a></li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<div class="card__info"> |
|
|
|
<div class="card__title"> |
|
|
|
<h1>HTMl, a programind language or not?</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card__body"> |
|
|
|
<p> |
|
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde |
|
|
|
reprehenderit, quam |
|
|
|
temporibus qui quo numquam iste totam quisquam, sint eius eos |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="card__posted-by"> |
|
|
|
<em>por: Jailton Araujo</em> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</footer> |
|
|
|
</div> |
|
|
|
</aside> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
|
|
|
|
<footer class="footer"> |
|
|
|
|
|
|
|
<div class="footer__content"> |
|
|
|
<div class="footer__info"> |
|
|
|
<h3>Blog Netuno 2023 ©</h3> |
|
|
|
<br> |
|
|
|
<h4>Desenvolvido por Jailton de Araujo Santos</h4> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<ul class="footer__network"> |
|
|
|
<li><a href="#">LinkDin</a></li> |
|
|
|
<li><a href="#">Instagran</a></li> |
|
|
|
<li><a href="#">GitHub</a></li> |
|
|
|
<li><a href="#">Telegran</a></li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
</div> |
|
|
|
</footer> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</body> |
|
|
|
|
|
|
|
</html> |
