Blooger Website) 5. sidebar 만들기

 

 

 

 

 

사이드바 생성을 위해서 카테고리를 만들어주고 

그에 따른 정보를 넣어주도록 만들었다. 

 

 

 

 

 

1. index. html

반복적 내용은 복사 붙여넣기

<aside class="sidebar">
                <div class="category">
                    <h2>Category</h2>
                    <ul class="category-list">
                        <li class="list-items">
                            <a href="#">Software</a>
                            <span>(05)</span>
                        </li>
                        <li class="list-items">
                            <a href="#">Technology</a>
                            <span>(02)</span>
                        </li>
                        <li class="list-items">
                            <a href="#">Lifestyle</a>
                            <span>(07)</span>
                        </li>
                        <li class="list-items">
                            <a href="#">Shopping</a>
                            <span>(01)</span>
                        </li>
                        <li class="list-items">
                            <a href="#">Food</a>
                            <span>(08)</span>
                        </li>
                    </ul>
                </div>
                <div class="popular-post">
                    <h2>Popular Post</h2>
                    <div class="post-content">
                        <div class="post-image">
                            <div>
                                <img src="./assets/popular-post/m-blog-1.jpg" class="img"alt="blog1">
                            </div>
                            <div class="post-info flex-row">
    
                                <span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;Admin</span>
                                <span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;January 14, 2019</span>
                                <span>2 comments</span>
                            </div>
                        </div>
                        <div class="post-title">
                            <a href="#">New data recording system to better analyse road accidents</a>
                        </div>
                    </div>
                    <div class="post-content">
                        <div class="post-image">
                            <div>
                                <img src="./assets/popular-post/m-blog-2.jpg" class="img"alt="blog1">
                            </div>
                            <div class="post-info flex-row">
    
                                <span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;Admin</span>
                                <span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;January 14, 2019</span>
                                <span>2 comments</span>
                            </div>
                        </div>
                        <div class="post-title">
                            <a href="#">New data recording system to better analyse road accidents</a>
                        </div>
                    </div>
                    <div class="post-content">
                        <div class="post-image">
                            <div>
                                <img src="./assets/popular-post/m-blog-3.jpg" class="img"alt="blog1">
                            </div>
                            <div class="post-info flex-row">
    
                                <span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;Admin</span>
                                <span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;January 14, 2019</span>
                                <span>2 comments</span>
                            </div>
                        </div>
                        <div class="post-title">
                            <a href="#">New data recording system to better analyse road accidents</a>
                        </div>
                    </div>
                    <div class="post-content">
                        <div class="post-image">
                            <div>
                                <img src="./assets/popular-post/m-blog-4.jpg" class="img"alt="blog1">
                            </div>
                            <div class="post-info flex-row">
    
                                <span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;Admin</span>
                                <span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;January 14, 2019</span>
                                <span>2 comments</span>
                            </div>
                        </div>
                        <div class="post-title">
                            <a href="#">New data recording system to better analyse road accidents</a>
                        </div>
                    </div>
                    <div class="post-content">
                        <div class="post-image">
                            <div>
                                <img src="./assets/popular-post/m-blog-5.jpg" class="img"alt="blog1">
                            </div>
                            <div class="post-info flex-row">
    
                                <span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;Admin</span>
                                <span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;January 14, 2019</span>
                                <span>2 comments</span>
                            </div>
                        </div>
                        <div class="post-title">
                            <a href="#">New data recording system to better analyse road accidents</a>
                        </div>
                    </div>
                </div>
                <div class="newsletter">
                    <h2>Newsletter</h2>
                    <div class="form-element">
                        <input type="text" class ="input-element" placeholder="Email">
                        <button class="btn form-btn">Subscribe</button>
                    </div>
                </div>
                <div class="popular-tags">
                    <h2>Popular Tags</h2>
                    <div class="tags flex-row">
                        <span class="tag">Software</span>
                        <span class="tag">Technology</span>
                        <span class="tag">travel</span>
                        <span class="tag">illustration</span>
                        <span class="tag">design</span>
                        <span class="tag">Lifestyle</span>
                        <span class="tag">love</span>
                        <span class="tag">project</span>
                    </div>
                </div>
            </aside>
        </div>
    </section>

    <!---------x------------Site Content-------x-------->

 

 

 

2. style.css

/*----------Sitebar-----------*/

.site-content > .sidebar .category-list{
    font-family: var(--Abel);
}

.site-content > .sidebar .category-list .list-items{
    background: var(--peach);
    padding:.4rem 1rem;
    margin: .8rem 0;
    border-radius: 3rem;
    width: 70%;
    display: flex;
    justify-content: space-between;
}

.site-content > .sidebar .category-list .list-items a{ 
    color:black;
}

.site-content .sidebar .popular-post .post-content{
    padding:1rem 0;

}
.site-content .sidebar .popular-post h2{
    padding-top: 8rem;
}

.site-content .sidebar .popular-post .post-info{
    padding:.4rem .1rem !important;
    bottom: 0rem !important;
    left:1.5rem !important ;
    border-radius: 0rem !important;
    background: white !important;
}

.site-content .sidebar .popular-post .post-title a{
    font-size: 1rem;
}


.site-content .sidebar .newsletter{
    padding-top: 10rem;

}
.site-content .sidebar .newsletter .form-element{
    padding: .5rem 2rem;
}
.site-content .sidebar .newsletter .input-element{
    width:80%;
    height:1.9rem;
    padding: .3rem .5rem;
    font-family: var(--Lexend);
    font-size: 1rem;
}

.site-content .sidebar .newsletter .form-btn{
    border-radius: 0;
    padding: .8rem 32%;
    margin: 1rem 0;
    background: var(--peach);
}

.site-content .sidebar .popular-tags{
    padding: 5rem 0;
}


.site-content .sidebar .popular-tags .tags .tag{
    background: var(--peach);
    padding: .4rem 1rem;
    border-radius: 3rem;
    margin: .4rem .6rem;
}


/*---x------Sitebar---x-------*/

 

 

사진으로 보면, 

 

여러개의 포스트를 작성한다. (형식은 동일)

 

 

 

 

뉴스레터 섹션과 태그 섹션을 만들어 분류해서 디자인한다.