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

Finalizando organização inicial da pagina principal

master
JailtonAraujo 3 years ago
parent
10d8aece21
commit
1afa50f9b3
3 changed files with 386 additions and 140 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +130
    -18
      css/global.css
  2. BIN
      img/post.jpg
  3. +256
    -122
      index.html

+ 130
- 18
css/global.css View File

@ -16,24 +16,30 @@ a{
display: grid;
grid-template-areas:
'header header header'
'main main sidebar'
'main main main'
'footer footer footer';
grid-gap: 2px;
grid-template-columns: 2fr 1fr;
grid-template-columns: 1fr;
}
.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;
justify-content: space-between;
background-color: var(--primary-color);
align-items: center;
padding: 0.5em 2em 0.5em 3em;
padding: 0.5em 1em 0.5em 1em;
}
@ -81,10 +87,12 @@ a{
width: 100%;
padding: 1em;
position: relative;
display: flex;
justify-content: center;
}
.header__title h1{
margin-left: 1em;
width: 100%;
font-weight:bold;
font-style: italic;
font-family: var(--second-font);
@ -93,31 +101,69 @@ a{
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;
height: 86vh;
width: 100%;
display: flex;
justify-content: center;
padding: 0.5em 0em 0em 0em;
}
.main .main__content{
width: 100%;
width: 1450px;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px;
display: flex;
justify-content: space-between;
gap: 1em;
padding: 0.5em;
}
.content__posts{
width: 100%;
box-shadow: 0px 0px 15px;
}
.sidebar{
grid-area: sidebar;
height: 86vh;
padding: 0.5em 0.5em 0em 0.5em;
height: 100vh;
}
.sidebar__content{
height: 100%;
width: 100%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px;
box-shadow: 0px 0px 15px;
display: flex;
flex-direction: column;
align-items: center;
@ -134,7 +180,8 @@ a{
.sidebar .siderbar__title > h1{
font-size: 1.4em;
font-style: italic;
font-family: var(--second-font);
font-family: var(--second-font);
color: var(--second-color);
}
.sidebar .sidebar__new-posts{
@ -144,12 +191,11 @@ a{
align-items: center;
overflow: auto;
width: 100%;
padding: 1em 0.3em;
padding: 1em;
}
.footer{
height: 10vh;
grid-area: footer;
background-color: var(--primary-color);
border-top: 2px solid var(--second-color);
@ -160,6 +206,33 @@ a{
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{
@ -176,8 +249,6 @@ a{
border: none;
}
.btn--danger{}
.card{
width: 280px;
@ -218,6 +289,47 @@ a{
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;
}

BIN
img/post.jpg View File

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

+ 256
- 122
index.html View File

@ -15,144 +15,278 @@
<header class="header">
<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__content">
<div class="header__logo">
<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">
<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>
<div class="header__title">
<h1>BlogNatuno</h1>
</div>
</header>
<main class="main">
<div class="main__content">
<h1>Hello</h1>
</div>
</main>
<!--posts-->
<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>
<div class="content__posts">
<footer class="footer">
<div class="footer_contact">
</div>
<div class="footer_info">
<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>
<!--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>
</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>


Write Preview
Loading…
Cancel
Save