today i'm creating website user interface(frontend) using pure HTML and CSS. for social icons, FontAwesome is used.

Shreyesh kolhe

November 22, 2021 December 02, 2021

Source Code

myweb.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- boostrap -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit&display=swap" rel="stylesheet">
    <title>Document</title>
    <link rel="stylesheet" href="myweb.css">
</head>

<body>
    <div class="container">
        <header>
            <div class="headstyle">
                <img src="assets/align-left.png" alt="menubar">
                <h1>i'm Developer</h1>
                <input type="text" placeholder="Search here...">
            </div>
            <div class="toggle">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
                    <label>Dark mode</label>
                </div>
            </div>
    </div>
    </header>
    <section>

        <h4>Latest Posts</h4>
        <p style=" padding-top:70px;   margin-left: 89%;">View all</p>
        <div class="card">
            <div class="card1">
                <a class="tags" href="#">#css, #mini-project</a><br>
                <a class="ptitle">This login form is created using pure HTML and CSS, for social icons, fontAwesome is
                    used.</a>
                <p class="pauther">shreyash kolhe</p>
                <p class="pdate">November 21,2021</p>
            </div>
            <div class="card1">
                <a class="tags" href="#">#css, #mini-project</a><br>
                <a class="ptitle">This login form is created using pure HTML and CSS, for social icons, fontAwesome is
                    used.</a>
                <p class="pauther">shreyash kolhe</p>
                <p class="pdate">November 21,2021</p>
            </div>
            <div class="card1">
                <a class="tags" href="#">#css, #mini-project</a><br>
                <a class="ptitle">This login form is created using pure HTML and CSS, for social icons, fontAwesome is
                    used.</a>
                <p class="pauther">shreyash kolhe</p>
                <p class="pdate">November 21,2021</p>
            </div>
            <div class="card1">
                <a class="tags" href="#">#css, #mini-project</a><br>
                <a class="ptitle">This login form is created using pure HTML and CSS, for social icons, fontAwesome is
                    used.</a>
                <p class="pauther">shreyash kolhe</p>
                <p class="pdate">November 21,2021</p>
            </div>
            <div class="card1">
                <a class="tags" href="#">#css, #mini-project</a><br>
                <a class="ptitle">This login form is created using pure HTML and CSS, for social icons, fontAwesome is
                    used.</a>
                <p class="pauther">shreyash kolhe</p>
                <p class="pdate">November 21,2021</p>
            </div>
            <div class="card1">
                <a class="tags" href="#">#css, #mini-project</a><br>
                <a class="ptitle">This login form is created using pure HTML and CSS, for social icons, fontAwesome is
                    used.</a>
                <p class="pauther">shreyash kolhe</p>
                <p class="pdate">November 21,2021</p>
            </div>
            <div class="card1">
                <a class="tags" href="#">#css, #mini-project</a><br>
                <a class="ptitle">This login form is created using pure HTML and CSS, for social icons, fontAwesome is
                    used.</a>
                <p class="pauther">shreyash kolhe</p>
                <p class="pdate">November 21,2021</p>
            </div>
        </div>

    </section>
    <aside class="aside1">
        <div class="menubar">
            <ul>
                <li> <img src="assets/home.png" alt="home">
                    <a href="#"> Home </a>
                </li>
                <li><img src="/assets/folder.png" alt="folder"> <a href="#"> Category </a></li>
                <hr>
                <li><img src="/assets/folder.png" alt="folder"> <a href="#"> ReactJs </a></li>
                <li><img src="/assets/folder.png" alt="folder"> <a href="#"> English </a> </li>
                <li><img src="/assets/folder.png" alt="folder"> <a href="#"> Python </a></li>
                <hr>
                <li><img src="/assets/folder.png" alt="folder"> <a href="#"> Python GUI</a> </li>
                <li> <img src="/assets/folder.png" alt="folder"><a href="#"> java </a></li>
                <li><img src="/assets/folder.png" alt="folder"> <a href="#"> flutter </a></li>
            </ul>
        </div>
        <div class="social">
            <img src="assets/f.png" alt="">
            <img src="assets/i.png" alt="">
            <img src="assets/twitter.png" alt="">
            <img src="assets/youtube.png" alt="">
            <img src="assets/blogger.png" alt="">

        </div>
    </aside>
    <aside class="aside2">
        <h4>Popular post</h4>
        <div class="post">
            <table>
                <tbody>
                    <tr>
                    <td class="count">01</td>
                    <td class="title"><p>Object oriented programming in java(OOPs)</p> <br>
                        <p class="postTitle">java</p><br>
                        <p class="postDate">November 17,2021</p>
                        <img src="assets/comment.png" alt="">
                    </td>
                </tr>
                <tr>
                    <td class="count">02</td>
                    <td class="title"><p>Object oriented programming in java(OOPs)</p> <br>
                        <p class="postTitle">java</p><br>
                        <p class="postDate">November 17,2021</p>
                        <img src="assets/comment.png" alt="">
                    </td>
                </tr>
                <tr>
                    <td class="count">03</td>
                    <td class="title"><p>Object oriented programming in java(OOPs)</p> <br>
                        <p class="postTitle">java</p><br>
                        <p class="postDate">November 17,2021</p>
                        <img src="assets/comment.png" alt="">
                    </td>
                </tr>
                <tr>
                    <td class="count">04</td>
                    <td class="title"><p>Object oriented programming in java(OOPs)</p> <br>
                        <p class="postTitle">java</p><br>
                        <p class="postDate">November 17,2021</p>
                        <img src="assets/comment.png" alt="">
                    </td>
                </tr>
                <tr>
                    <td class="count">05</td>
                    <td class="title"><p>Object oriented programming in java(OOPs)</p> <br>
                        <p class="postTitle">java</p><br>
                        <p class="postDate">November 17,2021</p>
                        <img src="assets/comment.png" alt="">
                    </td>
                </tr>
                <tr>
                    <td class="count">06</td>
                    <td class="title"><p>Object oriented programming in java(OOPs)</p> <br>
                        <p class="postTitle">java</p><br>
                        <p class="postDate">November 17,2021</p>
                        <img src="assets/comment.png" alt="">
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </aside>
    </div>
</body>

</html>

myweb.css

*{
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    
}
.container{
    padding: 1.5rem;
    padding-top:0.5rem;
    position: relative;
    height:550px;
    margin-bottom: 0;

}

header{
    position: absolute;
    top: 0rem;
    padding: 0.5rem;
    width: 100%;
    left: 0;
    box-shadow: -2px 5px 12px -4px rgba(0,0,0,1);
-webkit-box-shadow: -2px 5px 12px -4px rgb(183 183 183);
-moz-box-shadow: -2px 5px 12px -4px rgba(0,0,0,1);
}

header .headstyle{
    display: flex;
}
header img{
    height: 2rem;
    max-width: 2rem;
}
header h1{
    font-size: 1.2rem;
    padding: 0.3rem;
    padding-left: 2rem;
    padding-right: 3rem;
}
header input{
    width: 40%;
    border-radius: 6px;
    border: none;
    padding: 10px;
    background-color: rgba(184, 213, 252, 0.705);    
}
header .toggle{
    position: absolute;
    right: 1.2rem;
    top: .5rem;
    font-weight: bold;
    
}


section{
    background-color: rgb(234, 242, 250);
    position: relative;
    top: -33rem;
    left: 17%;
    width: 58%;
    height: 40rem;
    box-shadow: -2px 5px 12px -4px rgba(0,0,0,1);
-webkit-box-shadow: -2px 5px 12px -4px rgb(183 183 183);
-moz-box-shadow: -2px 5px 12px -4px rgba(0,0,0,1);
}

section h4{
    position: absolute;
    top: 3rem;
    padding: 1rem;
    font-weight: 900;
}

section .card{
display: flex;
flex-wrap: wrap;
position: absolute;
top: 16%;
    
}
section .card1{
    padding: 2rem;
    margin: 0.7rem;
    width: 13rem;
    background: white;
    padding: .5rem;
    border-radius: 5px;
    box-shadow: -2px 5px 12px -4px rgba(0,0,0,1);
-webkit-box-shadow: 1px 2px 10px -2px rgb(193 193 193);
-moz-box-shadow: -2px 5px 12px -4px rgba(0,0,0,1);
}

section .tags{
    font-size: 11px;
    text-decoration: none;
    padding-bottom: 1rem;
}
section .ptitle {
    font-weight: 900;
    font-size: 14px;
    margin-top: 10rem;
    cursor: pointer;
    padding: 1rem;
    padding-left: 0;
}

section .pauther{
    font-size: 11px;
    color: rgb(68, 68, 68);
    padding-top: 1rem;
}
section .pdate{
    font-size: 11px;
    color: rgb(75, 75, 75);
}




.aside1{
    position: absolute;
    top: 4rem;
    height: 90%;
    width: 17%;
    /* box-shadow: 4px 0px 6px -3px rgba(0,0,0,0.46);
-webkit-box-shadow: 2px 3px 4px -2px rgb(0 0 0 / 46%);
-moz-box-shadow: 4px 0px 6px -3px rgba(0,0,0,0.46); */
}
.aside1 .menubar{
    position: absolute;
    text-align: left;
    width: 100%;
    padding: 1.5rem;
}

.aside1 li{
    list-style-type: none;
    padding: .5rem;
    font-weight: 800;
    font-size: 14px;
}
.aside1 hr{
    margin: 1rem;
    width: 10rem;
    margin-left: 0rem;
    background: rgb(58, 58, 58);
}

.menubar img{
    max-width: 1.1rem;

}

.menubar a{
    text-decoration: none;
    color: black;
    padding: 1.5rem;
    padding-bottom: 2rem;
}



.aside1 .social{
    position: absolute;
    display: flex;
    bottom: 0;
    align-content: center;
    margin-left: 1rem;
    padding-bottom: 1rem;

}
.social img{
    max-width: 1.2rem;
    padding: 0.4rem;
}

.aside2{
    position: absolute;
    right:1.4rem;
    top: 5rem;
    height: 80%;
    width: 23.1%;

}
.aside2 .post{
    position: relative;

}
.post .count{
    font-weight:900;
    font-size: larger;
    padding: 0 18px 53px 16px;
    
}

.aside2 h4{
    padding-bottom: 2rem;
    padding-left: 1rem;
}

.post img{
    position: absolute;
    right:0;
    padding-right:1rem;
    max-width: 18px;
    margin-top: -20px;
}

table .title{
    font-size: 14px;
    font-weight: 900;
}

table .postTitle{
    font-size: 10px;
    margin-bottom:-1rem;
    color: rgb(105, 105, 105);
}

table .postDate{
    font-size: 10px;
    padding-bottom: 2rem;
    color: rgb(105, 105, 105);
}

table tr{
    margin-bottom: 4rem;
}

css mini-project

Shreyash Kolhe

today i'm creating website user interface(frontend) using pure HTML and CSS. for social icons, FontAwesome is used.

Post a Comment