Download Gratis BloksideUX Template | Template HTML CSS

Download Gratis BloksideUX Template | Template HTML CSS
Hello friends! After a break uploading my explorations on dribbble, so here's my latest exploration of the BloksideUX Template.

Idea

In this exploration, I was greatly influenced by my desire to create a website template like dribble. where on the home page there is no sidebar widget that makes the page more professional

Let me know your thoughts and leave love if you like it
<!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">
    <title>BloksideUX Template</title>
    <style>
        *{ margin: 0;padding: 0;box-sizing: border-box;}
        body{width: 100%;background-color:white;}
        .mainmenu{display: flex;background-color: white; width: 100%;height: 80px; padding: 10px 30px 10px 30px; position: fixed; justify-content: space-between;align-items: center;border-bottom: 1px solid #ECECEC;}
        .mainmenu .navmenu {display: flex;justify-content: start;color: white;}
        .mainmenu .navmenu ul{display: flex;justify-content: start;}
        .mainmenu .navmenu ul li{margin-left: 30px;}
        .mainmenu .navmenu ul li a{text-decoration: none; font-size: 18px; font-family:  Calibri, sans-serif; color: black;}
        .mainmenu .logo{font-size: 20px; text-decoration: none;color: black;font-weight: 600;}
        .navmenu .dropdown ul{display: none; padding: 0px 50px 30px 0px;position: absolute;background-color: white;box-shadow: 0px 0px 10px #ECECEC;border-radius: 10px;}
        .navmenu .dropdown:hover > ul{display: grid;grid-template-columns: 1fr 1fr;}
        .navmenu .dropdown ul .dropdownitem{padding: 30px 20px 0px 40px;}
        .navmenu .dropdown ul .dropdownitem .titleitem {font-weight: 600; color: black;}
        .navmenu .dropdown ul .dropdownitem .subtitleitem{font-size: 16px;}
        .mainmenu .search{background-color: grey; width: 50px;}
        .form-grup input{display: block; height: max-content; padding: 10px 15px;background-color:white; border: 1px solid #ECECEC;border-radius: 10px;}
        .maincontent{width: 100%;color: black;padding: 120px 30px 0 40px;text-align: center;}
        .maincontent .creator span{font-size: 12px;letter-spacing: 2;text-transform: uppercase;}
        .maincontent .blogheading h1{font-size: 50px;}
        .maincontent .blogheading h2{font-size: 30px;margin-top: 10px;}
        .maincontent .itemcontent {width: 100%; text-align: left;margin: 60px 0 0 0;padding-bottom: 20px; border-bottom: 1px solid #ECECEC;}
        .maincontent .itemcontent span{margin: 0 40px 0 0;}
        .blogcontent{display: grid;grid-template-columns: 1fr 1fr 1fr;margin: 40px;grid-gap: 20px;text-align: left;}
        .blog-box{transition: all ease .3s;}.blog-box:hover{opacity: .8;transition: all ease .3s;}
        .blogimg{width: 100%;height: 250px;overflow: hidden;border-radius: 15px;}
        .blogimg img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
        .blogtext{display: flex;flex-direction: column;padding: 10px 3px;}
        .blogtext .kategory{color: black;font-size: 16px;letter-spacing: 1px;}
        .blogtext strong{font-size: 20px;margin: 5px 0 0 0;}
        .blogtext span{color: black;margin: 5px 0 0 0;}
        footer{border-top: 1px solid #ECECEC; padding: 30px 30px 30px 30px;}
        footer .footerheading h1{font-size: 50px;text-align: center;}
        footer .footerheading h2{font-size: 30px;margin-top: 10px;text-align: center;}
        footer .footercontent{display: grid;grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; text-align: left; margin-top: 40px;list-style: none;}
        footer .footerlogo{width: 80%;list-style: none;}
        footer .footercontent .footerlogo strong{font-size: 25px;} footer .footercontent .footerlogo p{text-align: left;margin-top: 20px;}
        footer .footercontent .footerbox{display:block;width: 100%;}
        footer .footercontent .footerbox strong{font-size: 20px;margin: 20px 0px 0px 0px ;}
        footer .footercontent .footerbox ul{margin-top: 20px;}
        footer .footercontent .footerbox ul li{list-style: none;} 
        footer .footercopyright{margin-top: 30px;}
        footer .footercopyright .copyright{justify-content: space-between;display: flex; border-top: 1px solid #ECECEC; padding-top: 30px;}
        @media (max-width: 768px) {
            .maincontent{width: 100%;color: black;padding: 120px 10px 0 10px;text-align: center;}
            .maincontent .creator span{font-size: 12px;letter-spacing: 2;text-transform: uppercase;}
            .maincontent .blogheading h1{font-size: 50px;}
            .maincontent .blogheading h2{font-size: 30px;margin-top: 10px;}
            .maincontent .itemcontent {width: 100%; text-align: left;margin: 60px 0 0 0;padding-bottom: 20px; border-bottom: 1px solid #ECECEC;}
            .maincontent .itemcontent span{margin: 0 10px 0 0;}
            .blogcontent{display: grid;grid-template-columns: 1fr 1fr;margin: 10px;grid-gap: 10px;text-align: left;}
            .blog-box{transition: all ease .3s;}.blog-box:hover{opacity: .8;transition: all ease .3s;}
            .blogimg{width: 100%;height: 200px;overflow: hidden;border-radius: 15px;}
            .blogimg img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
            .blogtext{display: flex;flex-direction: column;padding: 10px 3px;}
            .blogtext .kategory{color: black;font-size: 16px;letter-spacing: 1px;}
            .blogtext strong{font-size: 20px;margin: 5px 0 0 0;}
            .blogtext span{color: black;margin: 5px 0 0 0;}
            footer .footercontent .footerbox{display:block;width: 100%;margin-top: 20px;}
            footer .footerheading h1{font-size: 35px;text-align: center;}
            footer .footerheading h2{font-size: 30px;margin-top: 10px;text-align: center;}
            footer .footerlogo{width: 90%;list-style: none;margin-top: 20px;}
            footer{border-top: 1px solid #ECECEC; padding: 10px 10px 10px 10px;}
            footer .footercopyright{margin-top: 10px;margin-bottom: 20px;}
            footer .footercontent{display: grid;grid-template-columns: 1fr 1fr 1fr; text-align: left; margin-top: 40px;list-style: none;}
        }
    </style>
</head>
<body>
    <div class="mainmenu">
        <div class="navmenu">
            <a href="" class="logo">Blokside</a>
            <ul>
                <li class="dropdown"><a href="">Pendidikan</a>
                    <ul>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Matematika</a><br/>
                            <a class="subtitleitem" href="">ilmu yang mempelajari tentang logika dan kesepakatan</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Bahasa Inggris</a><br/>
                            <a class="subtitleitem" href="">ilmu yang mempelajari tentang Bahasa inggris</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Biologi</a><br/>
                            <a class="subtitleitem" href="">ilmu yang mempelajari tentang makluk hidup</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Bahasa Indonesia</a><br/>
                            <a class="subtitleitem" href="">ilmu yang mempelajari tentang bahasa indonesia</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Fisika</a><br/>
                            <a class="subtitleitem" href="">ilmu yang mempelajari tentang hukum semesta</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Bahasa Jepang</a><br/>
                            <a class="subtitleitem" href="">ilmu yang mempelajari tentang bahas jepang</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Kimia</a><br/>
                            <a class="subtitleitem" href="">ilmu yang mempelajari tentang molekul partikel</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Sejarah</a><br/>
                            <a class="subtitleitem" href="">ilmu yang mempelajari tentang kehidupan masa lampau</a>
                        </div>
                        
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Seni Budaya</a><br/>
                            <a class="subtitleitem" href="">ilmu yang mempelajari kesenian budaya daerah</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Kewirausahaan</a><br/>
                            <a class="subtitleitem" href="">ilmu yang mengajarkan untuk menjadi seorang entrepreneur</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Ekonomi</a><br/>
                            <a class="subtitleitem" href="">ilmu yang mempelajari tentang perekonomian</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Penjas</a><br/>
                            <a class="subtitleitem" href="">ilmu yang mempelajari tentang kebugaran jasmani</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Pkn</a><br/>
                            <a class="subtitleitem" href="">ilmu tentang pendidikan kewarganegaraan</a>
                        </div>
                    </ul>
                </li>
                <li class="dropdown"><a href="">Coding</a>
                    <ul>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Android Studio</a><br/>
                            <a class="subtitleitem" href="">buat aplikasi androidmu dengan menggunakan android studio</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Flutter Dart</a><br/>
                            <a class="subtitleitem" href="">buat aplikasi androidmu dengan menggunakan flutter dart</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">HTML</a><br/>
                            <a class="subtitleitem" href="">buat halaman websitemu dengan menggunakan html</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">CSS</a><br/>
                            <a class="subtitleitem" href="">perbagus tampilan halaman websitemu dengan css</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Javascript</a><br/>
                            <a class="subtitleitem" href="">tambahkan animasi pada halaman websitemu dengan javascript</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">PHP</a><br/>
                            <a class="subtitleitem" href="">sambungkan data ke database dengan menggunakan php</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">XML</a><br/>
                            <a class="subtitleitem" href="">buat kerangka websitemu dengan menggunakan xml</a>
                        </div>
                    </ul>
                </li>
                <li class="dropdown"><a href="">Templates</a>
                    <ul>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Templates Powerpoint</a><br/>
                            <a class="subtitleitem" href="">kamu bisa download semuanya secara gratis</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Templates HTML CSS</a><br/>
                            <a class="subtitleitem" href="">kamu bisa download semuanya secara gratis</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Templates Blogger</a><br/>
                            <a class="subtitleitem" href="">kamu bisa download semuanya secara gratis</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">Templates CV</a><br/>
                            <a class="subtitleitem" href="">kamu bisa download semuanya secara gratis</a>
                        </div>
                    </ul>
                </li>
                <li class="dropdown"><a href="">Subtitle</a>
                    <ul>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">The 100</a><br/>
                            <a class="subtitleitem" href="">buruan download subtitle The 100 secara lengkap</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">The Flash</a><br/>
                            <a class="subtitleitem" href="">buruan download subtitle the flash secara lengkap</a>
                        </div>
                        <div class="dropdownitem">
                            <a class="titleitem" href="">The Arrow</a><br/>
                            <a class="subtitleitem" href="">buruan download subtitle the arrow secara lengkap</a>
                        </div>
                    </ul>
                </li>
                <li><a href="">SEO</a></li>
                <li><a href="">Spiritual</a></li>
            </ul>
        </div>
        <form action="">
            <div class="form-grup">
                <input type="email" placeholder="Search...">
            </div>
        </form>
    </div>
    <div class="maincontent">
       
        <div class="blogheading">
            <h1>Imagination is more important than knowledge</h1>
            <h2>Find what you are looking for here</h2>
        </div>
        <div class="itemcontent">
            <span>All</span>
            <span>Flutter Dart</span>
            <span>Android Studio</span>
            <span>Templates Powerpoint</span>
            <span>Templates HTML CSS</span>
            <span>Templates Blogger</span>
            <span>Templates CV</span>
        </div>
        <div class="blogcontent">
            <div class="blogbox">
                <div class="blogimg">
                    <img src="img/1.png" alt="">
                </div>
                <div class="blogtext">
                    <span class="kategory">In Flutter Dart</span>
                    <strong>OVO Apps Flutter</strong>
                    <span class="blogtime">15 Januari 2021 - 5 min read</span>
                </div>
            </div>
            <div class="blogbox">
                <div class="blogimg">
                    <img src="img/2.png" alt="">
                </div>
                <div class="blogtext">
                    <span class="kategory">In Flutter Dart</span>
                    <strong>Centerium Apps Flutter</strong>
                    <span class="blogtime">15 Januari 2021 - 5 min read</span>
                </div>
            </div>
            <div class="blogbox">
                <div class="blogimg">
                    <img src="img/3.png" alt="">
                </div>
                <div class="blogtext">
                    <span class="kategory">In Flutter Dart</span>
                    <strong>Mitra Shoppe Apps Flutter</strong>
                    <span class="blogtime">15 Januari 2021 - 5 min read</span>
                </div>
            </div>

            <div class="blogbox">
                <div class="blogimg">
                    <img src="img/1.png" alt="">
                </div>
                <div class="blogtext">
                    <span class="kategory">In Flutter Dart</span>
                    <strong>OVO Apps Flutter</strong>
                    <span class="blogtime">15 Januari 2021 - 5 min read</span>
                </div>
            </div>
            <div class="blogbox">
                <div class="blogimg">
                    <img src="img/2.png" alt="">
                </div>
                <div class="blogtext">
                    <span class="kategory">In Flutter Dart</span>
                    <strong>Centerium Apps Flutter</strong>
                    <span class="blogtime">15 Januari 2021 - 5 min read</span>
                </div>
            </div>
            <div class="blogbox">
                <div class="blogimg">
                    <img src="img/3.png" alt="">
                </div>
                <div class="blogtext">
                    <span class="kategory">In Flutter Dart</span>
                    <strong>Mitra Shoppe Apps Flutter</strong>
                    <span class="blogtime">15 Januari 2021 - 5 min read</span>
                </div>
            </div>

            <div class="blogbox">
                <div class="blogimg">
                    <img src="img/1.png" alt="">
                </div>
                <div class="blogtext">
                    <span class="kategory">In Flutter Dart</span>
                    <strong>OVO Apps Flutter</strong>
                    <span class="blogtime">15 Januari 2021 - 5 min read</span>
                </div>
            </div>
            <div class="blogbox">
                <div class="blogimg">
                    <img src="img/2.png" alt="">
                </div>
                <div class="blogtext">
                    <span class="kategory">In Flutter Dart</span>
                    <strong>Centerium Apps Flutter</strong>
                    <span class="blogtime">15 Januari 2021 - 5 min read</span>
                </div>
            </div>
            <div class="blogbox">
                <div class="blogimg">
                    <img src="img/3.png" alt="">
                </div>
                <div class="blogtext">
                    <span class="kategory">In Flutter Dart</span>
                    <strong>Mitra Shoppe Apps Flutter</strong>
                    <span class="blogtime">15 Januari 2021 - 5 min read</span>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="footerheading">
            <h1>dont just expect change, create change</h1>
            <h2>Imperfection is perfections</h2>
        </div>
        <div class="footercontent">
            <div class="footerlogo">
                <strong>Blokside</strong>
                <p>blokside adalah website yang menyajikan informasi Pemrograman, Pendidikan, Template, Subtitle, Spiritual, SEO, Sinopsis, Lifestyle, Bursa Saham.</p>
            </div>
            <div class="footerbox">
                <strong>Company</strong>
                <ul class="footerlist">
                    <li>Sitemap</li>
                    <li>Disclaimer</li>
                    <li>Privacy Police</li>
                    <li>Term and Condition</li>
                    <li>About Us</li>
                    <li>Contact Us</li>
                </ul>
            </div>
            <div class="footerbox">
                <strong>Sosial Media</strong>
                <ul class="footerlist">
                    <li>Instagram</li>
                    <li>Facebook</li>
                    <li>Dribble</li>
                    <li>Whatsapp</li>
                    <li>Twitter</li>
                    <li>Tiktok</li>
                </ul>
            </div>
            <div class="footerbox">
                <strong>Directories</strong>
                <ul class="footerlist">
                    <li>Support</li>
                    <li>Donate</li>
                    <li>Careers</li>
                    <li>Media kit</li>
                    <li>API</li>
                </ul>
            </div>
            <div class="footerbox">
                <strong>For Developer</strong>
                <ul class="footerlist">
                    <li>Go Pro!</li>
                    <li>Product</li>
                    <li>Tags</li>
                    <li>Places</li>
                </ul>
            </div>
            <div class="footerbox">
                <strong>Hire Developer</strong>
                <ul class="footerlist">
                    <li>Post a job opening</li>
                    <li>Post a freelance project</li>
                    <li>Search for Developer</li>
                </ul>
            </div>
        </div>
        <div class="footercopyright">
            <div class="copyright">
                <p>Create by Putu Kresna</p>
                <p>© 2021 Blokside. All rights reserved</p>
            </div>
        </div>
    </footer>
</body>
</html>
Download