How to Clone Hashnode Frontend page using only HTML + CSS || 2021

Subscribe to my newsletter and never miss my upcoming articles

How to Clone Hashnode Frontend page using only HTML + CSS || 2021

Hey there , this is an awesome Tutorial IN WHICH I FULLY CLONED Hashnode frontend page using only plain CSS and html.

Help me reach 100 subscribers.

Best to sharpen your CSS Skills.

Learn advanced CSS Cloning with SOURCE CODE!!!

Best even for beginners.

All the source code need are given below in the post and all you need is just to copy paste the code and create your dream hashnode frontend.

Here is the GOOGLE SEARCH page frontend clone:

share the link: https://youtu.be/eLCGME3dZsI

PLease do suggest me what to clone next?

This is a best project for anyone who started coding.

Skills used:

  • CSS
  • HTML

Yes only this much.

Get the interactive vedio tutorial.

Share the link: https://youtu.be/fiY_rrp0olQ

Get started

The main index.html code is:



    <!-- main container  -->
    <div class="container">

        <!-- fixed left wall -->
        <div class="leftfixed">
            <div><img style="width: 160px;margin: 8px;" src="img/logo.jpg"></div>

            <div class="writebtn">
                <img src="img/plus.svg">
                <p style="margin-left: 10px;">Write</p>
            </div>


            <div class="sb"><img src="img/home.svg">Home</div>
            <div class="sb"><img src="img/explore.svg">Explore</div>
            <div class="sb"><img src="img/tags.svg">Tags</div>
            <div class="sb"><img src="img/bookmark.svg">Bookmarks</div>
            <div class="sb"><img src="img/ama.svg">AMAs</div>
            <div class="sb"><img src="img/search.svg">Search</div>
            <!-- <div class="sb"><img src="img/"></div>
            <div class="sb"><img src="img/"></div>
            <div class="sb"><img src="img/"></div> -->

            <img src="img/moon.svg">
            <img src="img/noti.svg">
            <img class="avater" src="img/avater.jpg">
        </div>


        <!-- middle part     -->

        <div class="middle-container">
            <div class="writewrap">
                <span class="ws"><img class="avater" src="img/avater.jpg"><p style="font-weight: 700;margin-left: 10px;color: #495450;">Abhiprojectz</p></span>

                <div class="ws1"><img src="img/plus.svg">
                <p style="margin-left: 10px;">Write an article...</p></div>
            </div>


            <!-- middle slab1 -->
            <div class="slab1">
                <span class="item"><img src="img/fire.svg">Best</span>
                <span class="item"><img src="img/feature.svg">Featured</span>
                <span class="item"><img src="img/recent.svg">Recent</span>
            </div>
        </div>



        <!-- right part starts  -->
        <div class="rightwall">

            <div class="elem1">
                <div class="elleft">
                    <p style="opacity: 0.7; font-weight: 900;">Become an ambassador</p>
                <p style="color: #495450;">Exclusive Hashnode features, beta access, profile ring and more</p>
                </div>

                <div class="elright">
                    <img style="width: 60px;" src="img/amba.png">
                </div>
            </div>

            <div class="elem1">
                <div class="elleft">
                    <p style="opacity: 0.7; font-weight: 900;">Become an ambassador</p>
                <p style="color: #495450;">Exclusive Hashnode features, beta access, profile ring and more</p>
                </div>

                <div class="elright">
                    <img style="width: 60px;" src="img/amba.png">
                </div>
            </div>


            <!-- footer starts here -->

            <div class="footer">
                <div class="fslab">
                    <div>
                        <ul>
                            <li>About</li>
                            <li>Hashnode APIs</li>
                            <li>Logo & media</li>
                            <li>Privacy</li>
                        </ul>
                    </div>
                    <div>
                        <ul>
                            <li>Site status</li>
                            <li>Careers</li>
                            <li>Terms of service</li>
                            <li>Support</li>
                        </ul>
                    </div>
                </div>

            </div>

© 2021 · Hashnode
        </div>

    </div>

The styling part is as follow:

@import url('https://fonts.googleapis.com/css2?family=Poppins');
body {
    background-color: #F5F7FA;
    font-family: 'Poppins', sans-serif;
}

.container {
    width: 100%;
    display: flex;
}

.leftfixed {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    align-content: center;
    width: 200px;
}

.writebtn {
    background-color: #2962FF;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 800;
    border-radius: 15px;
    margin: 5px;
    width: 100%;
}

.sb {
    color: #495450;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.sb:hover {
    background-color: #fff;
    cursor: pointer;
}

.sb > img {
    margin-right: 10px;
}

.leftfixed > img {
    cursor: pointer;
    padding: 10px;
    margin: auto;
}

.avater {
    border-radius: 100%;
    width: 30px;
    cursor: pointer;
}


.middle-container {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-content: center;
}

.writewrap {
    background-color: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    justify-content: center;
    padding:15px;

}

.ws1 {
    display: flex;
    align-items: center;
    background-color: #E5E7EB;
    padding: 20px;
    color: #495450;
    border-radius: 10px;
    margin:8px;
}

.ws {
    display: flex;
    align-items: center;
}

.slab1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 10px;
    margin-top: 15px;
    background-color: #fff;
    border: 1px solid #E5E7EB;

}

.slab1 > span {
    margin: 10px;
    margin-right: 20px;
    display: flex;
    align-items: center;
}

.slab1 > span > img {
    margin-right: 10px;
}

.rightwall {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.elem1 {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.elleft {
    width: 75%;
}

.elright {
    display: flex;
    justify-content: space-between;
    margin: 10px;
}

.fslab {
    display: flex;
}

.fslab > div {
    width: 50%;
}

ul li {
    list-style-type: none;
}

You may also like:

Node.js Cracker cheatsheet || 2021 MUST WATCH for beginners - part #2

youtu.be/ajTDDm6lfUQ

Ultimate CSS Code Generator tool on the web! 2021 Free

youtu.be/zjPbREldtOY

Animate anything by just 1 line of JS Code! 2021 || Motionia.js

youtube.com/watch?v=tHcFjDVqn-Q&feature..

People looking for:

Buttons, coding, programing , webdevelopment, skills, tutorials

#coding #programing #webdevelopment #CSS

No Comments Yet