FrankenBuilds

Code Below...

View Live Site

Design Credit: Here

HTML

                            
                                <body>
<div class="container">
    <div class="header-nav">
        <div id="header-img"></div>
        <div id="nav">
            <ul>
                <li><a href="" id="active">Home</a></li>
                <li><a href="">About</a></li>
                <li id="profile-img"></li>
                <li><a href="">Category</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </div>

    <section id="article-container">
        <div class="article-sec">
            <h1>I don't know what I'm doing...</h1>

            <div class="content-area">
                <div class="date">
                    <div>08&nbsp;Oct</div>
                </div>
                <div class="content">
                    <div class="stats">
                        <div>
                            <img src="./catagory.png" alt="">
                            <h3>Web Dev</h3>
                        </div>
                        <div>
                            <img src="./heart.png" alt="">
                            <h3>2 Likes</h3>
                        </div>
                        <div>
                            <img src="./comments.png" alt="">
                            <h3>2 Comments</h3>
                        </div>
                    </div>
                    <div class="article">
                        <h2>I lost so many fingers typing on my keyboard...</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis et, unde aut accusantium obcaecati a voluptatibus blanditiis atque reprehenderit molestiae, tenetur asperiores quaerat amet, est ab nemo. Debitis similique nisi corporis. Incidunt earum quia voluptatum aliquid, molestias aut, soluta at facere nobis est autem in dolor illo, modi placeat iusto enim eveniet officiis. Excepturi quam aliquam minus repellendus voluptate ratione totam, quis sit animi corporis cum, quas architecto officiis cumque qui. Nostrum unde in sed quae doloribus quidem. Quaerat, iste.</p>
                        <a href="">Read More</a>
                    </div>
                </div>
            </div>

            <div class="content-area">
                <div class="date">
                    <div>04&nbsp;Oct</div>
                </div>
                <div class="content">
                    <div class="stats">
                        <div>
                            <img src="./catagory.png" alt="">
                            <h3>Web Dev</h3>
                        </div>
                        <div>
                            <img src="./heart.png" alt="">
                            <h3>0 Likes</h3>
                        </div>
                        <div>
                            <img src="./comments.png" alt="">
                            <h3>0 Comments</h3>
                        </div>
                    </div>
                    <div class="article">
                        <h2>My brain hurts from all this code...</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis et, unde aut accusantium obcaecati a voluptatibus blanditiis atque reprehenderit molestiae, tenetur asperiores quaerat amet, est ab nemo. Debitis similique nisi corporis. Incidunt earum quia voluptatum aliquid, molestias aut, soluta at facere nobis est autem in dolor illo, modi placeat iusto enim eveniet officiis. Excepturi quam aliquam minus repellendus voluptate ratione totam, quis sit animi corporis cum, quas architecto officiis cumque qui. Nostrum unde in sed quae doloribus quidem. Quaerat, iste.</p>
                        <a href="">Read More</a>
                    </div>
                </div>
            </div>

            <div class="content-area">
                <div class="date">
                    <div>02&nbsp;Oct</div>
                </div>
                <div class="content">
                    <div class="stats">
                        <div>
                            <img src="./catagory.png" alt="">
                            <h3>Web Dev</h3>
                        </div>
                        <div>
                            <img src="./heart.png" alt="">
                            <h3>4 Likes</h3>
                        </div>
                        <div>
                            <img src="./comments.png" alt="">
                            <h3>3 Comments</h3>
                        </div>
                    </div>
                    <div class="article">
                        <h2>Have you seen my foot?</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis et, unde aut accusantium obcaecati a voluptatibus blanditiis atque reprehenderit molestiae, tenetur asperiores quaerat amet, est ab nemo. Debitis similique nisi corporis. Incidunt earum quia voluptatum aliquid, molestias aut, soluta at facere nobis est autem in dolor illo, modi placeat iusto enim eveniet officiis. Excepturi quam aliquam minus repellendus voluptate ratione totam, quis sit animi corporis cum, quas architecto officiis cumque qui. Nostrum unde in sed quae doloribus quidem. Quaerat, iste.</p>
                        <a href="">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
</body>

CSS

                            
                                    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body{
        width: 100%;
        background-color: #2f2c2c;
    }
    
    .container{
        width: 92%;
        margin: auto;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
        font-family: "Poppins";
        background-color: white;
    }
    
        #header-img{
            height: 50vh;
            background-image: url(../header.PNG);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
    
        #nav{
            height: 20vh;
            background-color: white;
        }
            #nav ul{
                width: 60vw;
                margin: auto;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
    
                #nav li{
                    list-style: none;
                }
    
                    #nav li a{
                        text-decoration: none;
                        color: #1e1a1aa4;
                        font-size: 1.5rem;
                    }
    
                    #profile-img{
                        padding: 1rem;
                        background-color:#8cb670;
                        border-radius: 50%;
                        border: 6px solid white;
                        width: 210px;
                        height: 210px;
                        margin-top: -100px;
                        margin-right: -80px;
                        margin-left: -80px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-image: url(../../../img/Confused_Logo.png);
                        background-position: center;
                        background-size: cover;
                        background-repeat: no-repeat;
                    }
    
                #active{
                    font-weight: bold;
                    font-size: 1.2rem;
                }
    
        /* Article Sec */
        #article-container{
            padding: 1rem 0;
            background-color: white;
        }
    
            .article-sec{
                background-color: white;
            }
    
                .article-sec h1{
                    text-align: center;
                    font-size: 1rem;
                    margin-bottom: 4rem;
                    color: #1e1a1aa4;
                }
    
                .content-area{
                    display: flex;
                    margin-bottom: 4rem;
                }
    
                    .date{
                        flex: 1;
                        display: flex;
                        justify-content: flex-end;
                        padding-right: 2rem;
                    }
    
                        .date div{
                            padding: 3rem;
                            background-color: #8cb6701a;
                            border-radius: 50%;
                            width: 40px;
                            height: 40px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 1.5rem;
                            color: #8cb670;
                            border: 2px solid #8cb67081;
                        }
    
                    .content{
                        flex: 4;
                    }
    
                        .stats{
                            display: flex;
                        }
    
                            .stats div{
                                margin-right: 2rem;
                                margin-bottom: 1rem;
                                display: flex;
                            }
    
                                .stats div img{
                                    width: 20px;
                                    margin-right: 0.5rem;
                                }
    
                                .stats div h3{
                                    font-size: 0.8rem;
                                    color: #8cb670;
                                }
    
                        .article{
                            padding-right: 10rem;
                        }
    
                            .article h2{
                                margin-bottom: 0.8rem;
                            }
    
                            .article p{
                                line-height: 1.4;
                                margin-bottom: 1.5rem;
                            }
    
                            .article a{
                                text-decoration: none;
                                font-size: 0.9rem;
                                color: #8cb670;
                                font-weight: bold;
                            }
    
    /* Media Queries*/
    @media only screen and (max-width: 1024px) {
    
        .container{
            width: 90%;
            margin: auto;
        }
    
        #header-img{
            height: 20vh;
        }
    
        #nav{
            height: 100%;
        }
    
        #nav ul{
            width: 100%;
        }
    
        #nav li a{
            font-size: 1rem;
        }
    
        #profile-img{
            border: 2px solid white;
            width: 150px;
            height: 150px;
            margin-top: -80px;
        }
    
        .article-sec h1{
            margin-bottom: 2rem;
            font-size: 0.8rem;
        }
    
        .date div{
            padding: 2.5rem;
            font-size: 1rem;
        }
    
        .stats div{
            margin-right: 0.5rem;
            margin-bottom: 0.8rem;
        }
    
        .stats div img{
            width: 12px;
            height: 12px;
            margin-right: 0.5rem;
        }
    
        .stats div h3{
            font-size: 0.7rem;
            color: #8cb670;
        }
    
        .article{
            padding: 0 1.5rem 0 0;
        }
    
        .article h2{
            font-size: 1.1rem;
        }
    
        .article p{
            font-size: 0.8rem;
        }
    
        .article a{
            font-size: 0.65rem;
        }
    }
    
    @media only screen and (max-width: 700px) {
    
        .container{
            width: 100%;
            margin: 0;
        }
    
        #nav li a{
            font-size: 0.7rem;
        }
    
        #profile-img{
            border: 2px solid white;
            width: 100px;
            height: 100px;
            margin-top: -80px;
            margin-left: 0.1vw;
            margin-right: 0.1vw;
        }
        
        .date div{
            padding: 1.4rem;
            font-size: 0.7rem;
        }
    }
    
    @media only screen and (max-width: 320px) {
        #profile-img{
            margin-top: -50px;
            margin-left: 0;
            margin-right: 0;
        }
    
        #nav li a{
            font-size: 0.6rem;
        }
    
        .date{
            display: none;
        }
    
        .stats{
            padding-left: 1rem;
        }
    
        .article{
            padding: 0 1.5rem 0 1.5rem;
        }
    }

Code Display

Code Below...

Remember this is not "THE" way to build this site. Just merely FrankenBuilds way.

If you build this site please share your build with me at @FrankenBuilds. I would love to see how great you did!

Code Below...

**Remember this is not "THE" way to build this site. Just merely FrankenBuilds way.**

If you build this site please share your build with me at @FrankenBuilds. I would love to see how great you did!

Remember this is not "THE" way to build this site. Just merely FrankenBuilds way.