desenvolvendo sidebar de ultimas postagens

3 years ago · b562761e5c
--- a/css/global.css
+++ b/css/global.css
@ -75,7 +75,27 @@ a{
 .sidebar{
    grid-area: sidebar;
    height: 82vh;
    background-color: azure;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--primary-background);
 }

 .sidebar .siderbar__title{
    width: 100%;
    background-color: #4B0082;
    text-align: center;
    padding: 0.4em 0.2em;
    margin-bottom: 1em;
 }

 .sidebar .sidebar__new-posts{
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    width: 100%;
    padding: 1em 0.3em;
 }

 .main{
@ -112,4 +132,49 @@ a{
    border: none;
 }

 .btn--danger{}
 .btn--danger{}


 .card{
    width: 280px;
    border: 1px solid #000;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background-color: #FFF;
    margin-bottom: 2em;
 }

 .card > .card__img{
    width: 100%;
 }

 .card > .card__img > img{
    width: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
 }

 .card > .card__info{
    width: 100%;
 }

 .card > .card__info{
    width: 100%;
    padding: 1em;
 }

 .card > .card__info > .card__title{
    margin-bottom: 1em;
 }

 .card > .card__info > .card__title > *{
    font-size: 1.2em;
 }

 .card > .card__info > .card__body{
    margin-bottom: 1em;
 }

 .card .card__info .card__posted-by{
    
 }
--- a/css/variables.css
+++ b/css/variables.css
@ -2,4 +2,5 @@
    --primary-color: #000;
    --second-color:#00FFFF;
    --font-main:'Roboto', sans-serif;
    --primary-background:#1C1C1C;
 }
--- a/img/html5
+++ b/img/html5
--- a/img/html5.jpg
+++ b/img/html5.jpg
--- a/index.html
+++ b/index.html
@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -7,6 +8,7 @@
    <link rel="stylesheet" href="./css/global.css">
    <title>Document</title>
 </head>

 <body>

    <div class="container">
@ -16,14 +18,14 @@
            <div class="header__logo">
                <h1><span>BLOG</span> Netuno</h1>
            </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>
    

            <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>

        </header>

        <main class="main">
@ -32,19 +34,90 @@


        <div class="sidebar">
            <h1>sidebar</h1>

            <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>
        </div>
    

        <footer class="footer">
           <div class="footer_contact">
            <div class="footer_contact">

           </div>
           <div class="footer_info">
            
           </div>
            </div>
            <div class="footer_info">

            </div>

        </footer>

    </div>
 </body>

 </html>