Gaurav Pandey

Just a another Developer, working on Machine Learning & AI + Research! It is my personal blog built using only HTML5 & CSS3. I have a plan to write a backed in Python using Flask Module. Which might be appear in First Release of this Blog!

Usage

I don’t think you find better template than this one. You can also use this template for your blog, However Understanding file method of this Blgo is might be complex for beginner.

Here is HTML 5 Part:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- for Google -->
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="copyright" content="">
    <meta name="application-name" content="">
    <!-- for Facebook -->
    <meta property="og:url" content="">
    <meta property="og:site_name" content="">
    <meta property="og:title" content="">
    <meta property="og:description"
        content="">
    <meta property="og:image"
        content="">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="1200">
    <!-- for Twitter -->
    <meta property="twitter:site" content="">
    <meta property="twitter:creator" content="">
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:title" content="">
    <meta property="twitter:description"
        content="">
    <meta property="twitter:image:src"
        content="">
    <meta property="twitter:image:width" content="1280">
    <meta property="twitter:image:height" content="640">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="apple-touch-icon" sizes="180x180" href="../../favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../../favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../../favicon/favicon-16x16.png">
    <link rel="manifest" href="../../favicon/site.webmanifest">
    <!-- Add Title -->
    <title>Title</title>
</head>
<body>
    <header>
        <!-- Navigation Bar for All Devices -->
        <div class="nav-desktop">
            <h1 class="nav-title"><a href="" target="_blank" class="text-decoration-blog">Title</a></h1>
        </div>
        <!-- Navigation Bar for Desktop -->
        <div class="nav">
            <ul><a href="" class="text-decoration only-desktop" target="_blank">Home</a></ul>
            <ul><a href="" class="text-decoration only-desktop" target="_blank">About</a></ul>
            <ul><a href="" class="text-decoration only-desktop" target="_blank">Posts</a></ul>
            <ul><a href="" class="text-decoration only-desktop" target="_blank">Support</a></ul>
            <ul><a href="" class="text-decoration only-desktop" target="_blank">Contact</a></ul>
        </div>
        <!-- Navigation Bar for Mobile -->
        <input type="checkbox" id="active" class="button">
        <label for="active" class="menu-btn"><span></span></label>
        <label for="active" class="close"></label>
        <div class="wrapper">
            <ul>
                <li><a href="" target="_blank">Home</a></li>
                <li><a href="" target="_blank">About</a></li>
                <li><a href="" target="_blank">Post</a></li>
                <li><a href="" target="_blank">Support</a></li>
                <li><a href="" target="_blank">Contact</a></li>
            </ul>
        </div>
    </header>
    <hr>
    <main>
        <div class="blog-post-cover">
            <div class="blog-post">
                <!-- Blog Dat -->
                <div class="blog-date">
                    Blog Date
                </div>
                <!-- Blog Title -->
                <div class="blog-title">
                    <h1>Blog Title</h1>
                </div>
                <!-- Blog Content -->
                <div class="blog-content">
                    Blog Content
                </div>
            </div>
            <!-- Add Your Social Media Links -->
            <div class="social-links">
                <div class="twitter-link">
                    <a href=""> <img src="" class="twitter" target="_blank"> </a>
                </div>
                <div class="github-link">
                    <a href=""> <img src="" class="github" target="_blank"> </a>
                </div>
            </div>
        </div>
    </main>
    <!-- Add Footer -->
    <footer>
        <div class="footer-text">
            <p>Copyright © 2021-2022 <a href="" target="_blank" class="text-decoration">Site Name</a></p>
        </div>
    </footer>
</body>
</html>

Here is CSS 3

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:[email protected];400;600;700&display=swap');

body,
html {
    height: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    letter-spacing: 0.01rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    margin: 0 auto;
}

header {
    height: 100px;
}

hr {
    border-top: 1px solid #f1f1f1;
}

.header-title {
    font-size: 5.5em;
}

.header-subtitle {
    font-size: 1.5em;
}

.text-decoration-blog {
    text-decoration: none;
    color: #ae1f1fff;
}
.text-decoration {
    text-decoration: none;
    color: #000;
}

.footer-text {
    font-size: 0.8em;
}

.social-links {
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 7px
}

.twitter {
    height: 60px;
    width: 60px;
}

.github {
    height: 60px;
    width: 60px;
}

a:hover {
    color: #215FA3;
    text-decoration: none;
    -webkit-transition: color .3s ease;
    -moz-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
}

.copyright {
    color: #215FA3;
}

.nav-title {
    font-size: 30px;
    font-weight: 600;
}
@media screen and (min-width: 800px) {

    body,
    html {
        font-size: 22px;
    }

    .nav-desktop {
        display: flex;
        float: left;
        margin-left: 5%;
        margin-top: 35px;
        justify-content: center;
    }

    .nav {
        display: flex;
        float: right;
        margin-right: 5%;
        margin-top: 20px;
        justify-content: center;
    }

    .wrapper {
        display: none;
    }

    .button {
        display: none;
    }

    .blog-post-cover {
        margin: auto;
        width: 50%;
        justify-content: center;
        width: 800px;
        padding-top: 5%;
    }

    .blog-post-1 {
        display: block;
        text-align: left;
    }

    .blog-date {
        display: block;
        font-size: 0.8em;
        color: #999999;
        font-weight: 400;
    }

    h1 {
        font-size: 1.8em;
        font-weight: 600;
        margin: 0;
        line-height: 1.2;
    }

    .content {
        display: contents;
    }

    footer {
        text-align: center;
        padding: 10px
    }
}

@media screen and (max-width: 800px) {

    body,
    html {
        font-size: 19px;
    }

    .nav-desktop {
        display: flex;
        float: left;
        margin-left: 5%;
        margin-top: 35px;
        justify-content: center;
    }

    .nav-title {
        font-size: 27px;
    }

    .only-desktop {
        display: none;
    }

    .nav {
        display: none;
    }

    * {
        box-sizing: border-box;
        font-family: 'Source Sans Pro', sans-serif;
    }

    .wrapper {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100%;
        width: 100%;
        background: rgb(255, 255, 255);
        transition: all 0.6s ease-in-out;
    }

    #active:checked~.wrapper {
        right: 0;
    }

    .menu-btn {
        position: absolute;
        z-index: 2;
        right: 20px;
        top: 20px;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        border-radius: 50%;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }

    .menu-btn span,
    .menu-btn:before,
    .menu-btn:after {
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        left: 30%;
        width: 40%;
        border-bottom: 2px solid #000;
        transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .menu-btn:before {
        transform: translateY(-8px);
    }

    .menu-btn:after {
        transform: translateY(8px);
    }


    .close {
        z-index: 1;
        width: 100%;
        height: 100%;
        pointer-events: none;
        transition: background .6s;
    }

    #active:checked+.menu-btn span {
        transform: scaleX(0);
    }

    #active:checked+.menu-btn:before {
        transform: rotate(45deg);
        border-color: rgb(0, 0, 0);
    }

    #active:checked+.menu-btn:after {
        transform: rotate(-45deg);
        border-color: rgb(0, 0, 0);
    }

    .wrapper ul {
        position: absolute;
        top: 60%;
        left: 50%;
        height: 90%;
        transform: translate(-50%, -50%);
        list-style: none;
        text-align: center;
    }

    .wrapper ul li {
        height: 10%;
        margin: 15px 0;
    }

    .wrapper ul li a {
        text-decoration: none;
        font-size: 30px;
        font-weight: 500;
        padding: 5px 30px;
        color: rgb(0, 0, 0);
        border-radius: 50px;
        position: absolute;
        line-height: 50px;
        margin: 5px 30px;
        opacity: 0;
        transition: all 0.3s ease;
        transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
    }


    .wrapper ul li a:hover:after {
        transform: scaleY(1);
    }

    .wrapper ul li a:hover {
        color: #215FA3;
    }

    input[type="checkbox"] {
        display: none;
    }
    #active:checked~.wrapper ul li a {
        opacity: 1;
    }

    .wrapper ul li a {
        transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translateX(100px);
    }

    #active:checked~.wrapper ul li a {
        transform: none;
        transition-timing-function: ease, cubic-bezier(.1, 1.3, .3, 1);
        transition-delay: .6s;
        transform: translateX(-100px);
    }

    .blog-post-cover {
        margin: 20px;
        width: 50%;
        justify-content: center;
        width: auto;
        padding-top: 5%;
    }

    .blog-post-1 {
        display: block;
        text-align: left;
    }

    .blog-date {
        display: block;
        font-size: 0.8em;
        color: #999999;
        font-weight: 400;
    }

    h1 {
        font-size: 1.8em;
        font-weight: 600;
        margin: 0;
        line-height: 1.2;
    }

    .content {
        display: contents;
    }

    footer {
        text-align: center;
        padding: 12px
    }
}

Future Plan

I have a plan to move this Blog on Google App Engine, but there’s a lot of time in that too. If you’re looking for contibuting in this Project so I think It’s not possible. If you’re facing any Issue simply create a new Issue.

License

This Project is Licensed under Creative Commons License, Please see LICENSE.md file for more Information.

Copyright (c) 2021-2022 Gaurav Pandey

GitHub

View Github