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

2 Commits
b562761e5c ... 1afa50f9b3

Author SHA1 Message Date
  JailtonAraujo 1afa50f9b3 Finalizando organização inicial da pagina principal 3 years ago
  JailtonAraujo 10d8aece21 organiznaod os elementos 3 years ago
5 changed files with 438 additions and 108 deletions
Unified View
Diff Options
Show Stats
  1. +188
    -33
      css/global.css
  2. +4
    -1
      css/variables.css
  3. BIN
      img/html5
  4. BIN
      img/post.jpg
  5. +246
    -74
      index.html

+ 188
- 33
css/global.css View File

@ -15,21 +15,32 @@ a{
height: 100%; height: 100%;
display: grid; display: grid;
grid-template-areas: grid-template-areas:
'header header header header header header header'
'main main main main main main sidebar '
'footer footer footer footer footer footer footer';
'header header header'
'main main main'
'footer footer footer';
grid-gap: 2px;
grid-template-columns: 1fr;
} }
.header{ .header{
grid-area: header; grid-area: header;
width: 100%;
display: flex;
justify-content: center;
background-color: var(--primary-color);
}
.header__content{
width: 1450px;
}
.header__menu{
width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 8vh;
background-color: var(--primary-color);
padding: 0.5em 2em;
border-bottom: 2px solid var(--second-color);
padding: 0.5em 1em 0.5em 1em;
} }
.header .header__logo > h1{ .header .header__logo > h1{
@ -43,21 +54,20 @@ a{
font-weight: 500; font-weight: 500;
} }
.header > .header__menu > ul {
.header__menu > .header__nav > ul {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1.4em; gap: 1.4em;
} }
.header__menu-item > a{
.header__nav-item > a{
color: #FFF; color: #FFF;
font-weight: bold;
font-size: 1em;
font-size: 0.9em;
position: relative; position: relative;
padding: 0.2em 0em; padding: 0.2em 0em;
} }
.header__menu-item > a::after {
.header__nav-item > a::after {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
@ -68,45 +78,124 @@ a{
transition: width 0.3s ease-out; transition: width 0.3s ease-out;
} }
.header__menu-item > a:hover::after {
.header__nav-item > a:hover::after {
width: 100%; width: 100%;
} }
.header__title{
width: 100%;
padding: 1em;
position: relative;
display: flex;
justify-content: center;
}
.header__title h1{
width: 100%;
font-weight:bold;
font-style: italic;
font-family: var(--second-font);
color: var(--second-color);
border-bottom: 2px solid var(--second-color);
padding: 0.2em 0em;
}
.header__options{
display: flex;
}
.header__options > .options__search > input{
border: none;
font-size: 1em;
padding: 0.3em;
outline: none;
border-radius: 4px;
}
.header__options > .options__search > button{
font-size: 1em;
border: none;
background-color: var(--second-color);
padding: 0.3em;
cursor: pointer;
font-weight: bold;
border-radius: 4px;
}
.header__options > .options__search > button:hover{
box-shadow: var(--second-color) 0px 0px 20px;
transition: 0.3s;
}
.main{
grid-area: main;
width: 100%;
display: flex;
justify-content: center;
padding: 0.5em 0em 0em 0em;
}
.main .main__content{
width: 1450px;
height: 100%;
display: flex;
justify-content: space-between;
gap: 1em;
padding: 0.5em;
}
.content__posts{
width: 100%;
box-shadow: 0px 0px 15px;
}
.sidebar{ .sidebar{
grid-area: sidebar; grid-area: sidebar;
height: 82vh;
height: 100vh;
}
.sidebar__content{
height: 100%;
width: 100%;
box-shadow: 0px 0px 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: var(--primary-background);
} }
.sidebar .siderbar__title{ .sidebar .siderbar__title{
width: 100%; width: 100%;
background-color: #4B0082;
text-align: center; text-align: center;
padding: 0.4em 0.2em; padding: 0.4em 0.2em;
margin-bottom: 1em;
background-color: #000;
color: #FFF;
}
.sidebar .siderbar__title > h1{
font-size: 1.4em;
font-style: italic;
font-family: var(--second-font);
color: var(--second-color);
} }
.sidebar .sidebar__new-posts{ .sidebar .sidebar__new-posts{
display: flex; display: flex;
height: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow: auto; overflow: auto;
width: 100%; width: 100%;
padding: 1em 0.3em;
}
.main{
height: 82vh;
grid-area: main;
background-color: blue;
padding: 1em;
} }
.footer{ .footer{
height: 10vh;
grid-area: footer; grid-area: footer;
background-color: var(--primary-color); background-color: var(--primary-color);
border-top: 2px solid var(--second-color); border-top: 2px solid var(--second-color);
@ -114,8 +203,36 @@ a{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 1em;
} }
.footer__content{
width: 1450px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em 0em;
}
.footer__content > .footer__network{
display: flex;
flex-direction: column;
gap: 0.6em;
}
.footer__content > .footer__network > li{
list-style: none
}
.footer__content > .footer__network > li > a{
font-size: 1.1em;
color: #FFF
}
.footer__content > .footer__network > li > a:hover{
transition: 0.3s;
color: var(--second-color)
}
.btn{ .btn{
@ -132,13 +249,11 @@ a{
border: none; border: none;
} }
.btn--danger{}
.card{ .card{
width: 280px; width: 280px;
border: 1px solid #000; border: 1px solid #000;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
background-color: #FFF; background-color: #FFF;
margin-bottom: 2em; margin-bottom: 2em;
@ -150,8 +265,7 @@ a{
.card > .card__img > img{ .card > .card__img > img{
width: 100%; width: 100%;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
} }
.card > .card__info{ .card > .card__info{
@ -175,6 +289,47 @@ a{
margin-bottom: 1em; margin-bottom: 1em;
} }
.card .card__info .card__posted-by{
.post{
width: 100%;
display: flex;
justify-content: center;
padding: 1em;
}
.post > .post__content{
width: 80%;
border: 1px solid #000;
margin: 1em 0em;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.post__image {
width: 100%;
}
.post__image > img{
width: 100%;
}
.post__info{
width: 100%;
padding: 1em;
}
.post__info > .post__title, .post__body, .post__by{
margin-bottom: 0.5em;
}
.post__tags{
display: flex;
width: 100%;
gap: 0.5em;
padding: 0.5em 0em;
color: #0000ff;
}
.post__by{
font-weight: bold;
} }

+ 4
- 1
css/variables.css View File

@ -1,6 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root{ :root{
--primary-color: #000; --primary-color: #000;
--second-color:#00FFFF;
--second-color:#C71585;
--font-main:'Roboto', sans-serif; --font-main:'Roboto', sans-serif;
--second-font:'Pacifico', sans-serif;
--primary-background:#1C1C1C; --primary-background:#1C1C1C;
} }

BIN
img/html5 View File

Before After
Width: 850  |  Height: 478  |  Size: 22 KiB

BIN
img/post.jpg View File

Before After
Width: 1920  |  Height: 1080  |  Size: 603 KiB

+ 246
- 74
index.html View File

@ -15,106 +15,278 @@
<header class="header"> <header class="header">
<div class="header__logo">
<h1><span>BLOG</span> Netuno</h1>
</div>
<div class="header__content">
<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>
<div class="header__options">
<nav class="header__menu">
<ul>
<li class="header__menu-item"><a href="#"> ABOUT </a></li>
<li class="header__menu-item"><a href="#">LOGIN</a></li>
</ul>
</nav>
<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> </header>
<main class="main"> <main class="main">
<h1>HELLO</h1>
</main>
<div class="main__content">
<div class="sidebar">
<!--posts-->
<div class="siderbar__title">
<h1>Ultimas postagens...</h1>
</div>
<div class="content__posts">
<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 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 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>
<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 class="card__posted-by">
<em>por: Jailton Araujo</em>
</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>
<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>
<!--posts-->
<!-- sidebar -->
<aside class="sidebar">
<div class="sidebar__content">
<div class="siderbar__title">
<h1>Ultimas postagens...</h1>
</div> </div>
<div class="card__posted-by">
<em>por: Jailton Araujo</em>
<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>
</div> </div>
</div>
</aside>
</div> </div>
</div>
</main>
<footer class="footer"> <footer class="footer">
<div class="footer_contact">
</div>
<div class="footer_info">
<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> </div>
</footer> </footer>
</div> </div>


Write Preview
Loading…
Cancel
Save