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

organiznaod os elementos

master
JailtonAraujo 3 years ago
parent
b562761e5c
commit
10d8aece21
4 changed files with 191 additions and 107 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +70
    -27
      css/global.css
  2. +4
    -1
      css/variables.css
  3. BIN
      img/html5
  4. +117
    -79
      index.html

+ 70
- 27
css/global.css View File

@ -15,21 +15,26 @@ 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 sidebar'
'footer footer footer';
grid-gap: 2px;
grid-template-columns: 2fr 1fr;
} }
.header{ .header{
grid-area: header; grid-area: header;
width: 100%;
}
.header__menu{
width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
height: 8vh;
background-color: var(--primary-color); background-color: var(--primary-color);
padding: 0.5em 2em;
border-bottom: 2px solid var(--second-color);
align-items: center;
padding: 0.5em 2em 0.5em 3em;
} }
.header .header__logo > h1{ .header .header__logo > h1{
@ -43,21 +48,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,29 +72,74 @@ 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;
}
.header__title h1{
margin-left: 1em;
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;
}
.main{
grid-area: main;
height: 86vh;
width: 100%;
padding: 0.5em 0em 0em 0em;
}
.main .main__content{
width: 100%;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px;
}
.sidebar{ .sidebar{
grid-area: sidebar; grid-area: sidebar;
height: 82vh;
height: 86vh;
padding: 0.5em 0.5em 0em 0.5em;
}
.sidebar__content{
height: 100%;
width: 100%;
box-shadow: rgba(0, 0, 0, 0.35) 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);
} }
.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;
@ -98,12 +147,6 @@ a{
padding: 1em 0.3em; padding: 1em 0.3em;
} }
.main{
height: 82vh;
grid-area: main;
background-color: blue;
}
.footer{ .footer{
height: 10vh; height: 10vh;
@ -114,6 +157,7 @@ a{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 1em;
} }
@ -138,7 +182,7 @@ a{
.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 +194,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{


+ 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

+ 117
- 79
index.html View File

@ -15,97 +15,135 @@
<header class="header"> <header class="header">
<div class="header__logo">
<h1><span>BLOG</span> Netuno</h1>
<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__logo">
</div>
</div> </div>
<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="header__title">
<h1>BlogNatuno</h1>
</div>
</header> </header>
<main class="main"> <main class="main">
<h1>HELLO</h1>
</main>
<div class="sidebar">
<div class="siderbar__title">
<h1>Ultimas postagens...</h1>
<div class="main__content">
<h1>Hello</h1>
</div> </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>
</main>
<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>
<aside class="sidebar">
<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="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> </div>
</div>
</aside>
<footer class="footer"> <footer class="footer">
<div class="footer_contact"> <div class="footer_contact">


Write Preview
Loading…
Cancel
Save