jailton
/
blog-netuno
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity

2 Commits
1afa50f9b3 ... 5c281ebfbb

Author SHA1 Message Date
  JailtonAraujo 5c281ebfbb Implentando pagina de login 3 years ago
  JailtonAraujo 889cf9def0 melhorando respodividade 3 years ago
4 changed files with 407 additions and 267 deletions
Split View
Diff Options
Show Stats
  1. +2
    -1
      css/global.css
  2. +74
    -0
      css/login.css
  3. +266
    -266
      index.html
  4. +65
    -0
      pages/login.html

+ 2
- 1
css/global.css View File

@ -48,6 +48,7 @@ a{
font-size: 1.5em;
font-weight: 300;
text-shadow: 2px 2px 2px var(--second-color);
}
.header .header__logo > h1 > span{
@ -332,4 +333,4 @@ a{
.post__by{
font-weight: bold;
}
}

+ 74
- 0
css/login.css View File

@ -0,0 +1,74 @@
@import url("./variables.css");
.container-login{
width: 100%;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
.login{
width: 400px;
box-shadow: 0px 0px 15px;
border-radius: 5px;
}
.login__title{
width: 100%;
background-color: var(--primary-color);
color: var(--second-color);
text-align: center;
padding: 0.2em;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.form-control{
width: 100%;
padding: 1em 0.5em;
}
.form__form-group{
width: 100%;
display: flex;
flex-direction: column;
gap: 0.3em;
margin-bottom: 1em;
}
.form__form-group > input{
border: 1px solid #000;
outline: none;
padding: 0.4em;
font-size: 1em;
border-radius: 5px;
}
.form__form-group > label{
font-weight: bold;
}
.form-control > button{
width: 100%;
font-size: 1.2em;
padding: 0.3em 0.7em;
font-weight: bold;
cursor: pointer;
border: 2px solid #000;
border-radius: 5px;
background: none;
transition: 0.3s;
}
.form-control > button:hover{
background-color: #000;
color: #FFF;
}
.form-control > p {
text-align: center;
margin: 0.7em 0.3em;
}

+ 266
- 266
index.html View File

@ -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="./pages/login.html">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 &copy;</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 &copy;</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>

+ 65
- 0
pages/login.html View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="../css/login.css">
<title>Document</title>
</head>
<body>
<main>
<div class="container-login">
<div class="login">
<div class="login__title">
<h1>LOGIN</h1>
</div>
<form class="form-control">
<div class="form__form-group">
<label for="username">Username:</label>
<input type="text" name="username">
</div>
<div class="form__form-group">
<label for="password">Password:</label>
<input type="password" name="password">
</div>
<p> <span>Não tem conta? </span> <a href="#">Cadastre-se agora!</a></p>
<button>Logar</button>
</form>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__content">
<div class="footer__info">
<h3>Blog Netuno 2023 &copy;</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>
</body>
</html>

Write Preview
Loading…
Cancel
Save