Explore Page - Code Drive

<!DOCTYPE html>

<!---
  ___ ___ _    _    _____      __  _____ _  _ ___ __  __ ___ ___
 | _ \_ _| |  | |  / _ \ \    / / |_   _| || | __|  \/  | __/ __|
 |  _/| || |__| |_| (_) \ \/\/ /    | | | __ | _|| |\/| | _|\__ \
 |_| |___|____|____\___/ \_/\_/     |_| |_||_|___|_|  |_|___|___/

                             BY CARA

Rules:
    1. Do not steal snippets or all of my codes.
    2. Do not claim theme as yours.
    3. Do not remove the credit.
-->

<head>
    <title>{Title}</title>

    <link rel="shortcut icon" href="{FavIcon}" />
    <link rel="alternate" type="application/rss+xml" href="{RSS}" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link href="https://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://static.tumblr.com/vowb075/m9vpc1yxe/animate.min.css">

   <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Roboto&family=Roboto+Mono&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

    <link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">

<!--- START META TAGS --->
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Accent" content="#5ea6a5"/>
<meta name="color:sub color 1" content="#f2a8a2"/>
<meta name="color:sub color 2" content="#f9b132"/>
<meta name="color:Border" content="#eeeeee"/>

<meta name="if:infinite scroll" content="1"/>

<meta name="image:logo" content=""/>
<meta name="image:purpose icon 1" content=""/>
<meta name="image:purpose icon 2" content=""/>
<meta name="image:purpose icon 3" content=""/>
<!-- END OF META TAGS -->

</head>
<style type="text/css">

/* SCROLLBAR */
::-webkit-scrollbar {
width:15px;
}

::-webkit-scrollbar-track {
background-color:#5EA6A5;
border-top:6px solid #fff;
border-left:6px solid #fff;
border-right:6px solid #fff;
border-bottom:6px solid #fff;
}

::-webkit-scrollbar-thumb {
background-color:#F9B132;
border-top:4px solid #fff;
border-left:4px solid #fff;
border-right:4px solid #fff;
border-bottom:4px solid #fff;
border-radius:30px;
}

body {
color:#000;
background-color:#fbfbfb;
font-size:14pt;
font-family: 'Roboto', sans-serif;
line-height:1.5;
overflow-x:hidden;
}

a {
text-decoration:none;
color:#000;
}

iframe, img, embed, object, video {
max-width: 100%;
}

blockquote {
border-left:1.5px solid #5ea6a5;
color:#000;
margin-left:20px;
padding-left:20px;
}

#links {
top:0;
width:100%;
height:auto;
background-color:#5ea6a5;
padding:50px 0px 0px 0px;
text-align:center;
}

#links a {
margin-right:60px;
color:#fff;
}

#links a:last-child {margin-right:0px;}

#links a:hover {
text-decoration-line: underline;
text-decoration-style:wavy;
text-decoration-color:#f2a8a2;
}

#header {
width:100%;
height:30vh;
background-image:url('https://static.tumblr.com/vowb075/sZCqos1d7/website_header7.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:cover;
display:flex;
align-items:center;
justify-content:space-around;
}

#cont {
width:550px;
height:auto;
}

#blog-title {
width:250px;
height:120px;
margin:0 auto;
}

#blog-title img {
width:250px;
height:auto;
margin:0 auto;
}

#about-page {
width:100%;
height:auto;
display:flex;
align-items:center;
justify-content:space-around;
margin-top:50px;
margin-bottom:50px;
}

#about-page-con {width:950px;}

.nav-title {
font-family: 'Archivo Black', sans-serif;
font-size: 20pt;
color: #5ea6a5;
text-transform: uppercase;
margin-bottom: 20px;
}

#navtable1 {
width:950px;
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:40px;
}

#navcol1 {
width:250px;
}

#navcolim {
width:250px;
height:250px;
margin:0 auto;
}

#navcol1 img {
width:250px;
height:250px;
margin:0 auto;
}

#navtable2 {
width:950px;
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:40px;
}

#navcol2 img {
width:250px;
height:250px;
margin:0 auto;
}

#navcol2 {
width:250px;
}

.navtext {margin-top:10px;}

#footer {
width:100%;
height:30vh;
background-color:#000;
display:flex;
align-items:center;
justify-content:space-around;
color:#fff;
text-align:center;
}

#footer-con {width:950px;}

#icons {
display:inline-block;
margin-bottom:40px;
}

#icons a {color:#fff;margin-right:40px;}
#icons a:last-child {margin-right:0px;}

.lnr-chevron-down-circle {
margin-right:10px;
font-weight:600;
}

.tmblr-iframe {
position:fixed!important;
top:0;
margin-top:7px;
right:0;
margin-right:20px;
z-index:999999!important;
-webkit-transform:scale(0.8,0.8);
-webkit-transform-origin: 100% 0%;
-ms-transform-origin:100% 0%;
-ms-transform:scale(0.8,0.8);
transform:scale(0.8,0.8);
transform-origin:100% 0%;
}

</style>
<body>

<div id="links">
    <a href="/">Index</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
    <a href="/explore">Explore</a>
</div>

<div id="header">
    <div id="cont">
        <div id="blog-title"><img src="https://64.media.tumblr.com/38a94e0bd1d0b926f229eb8c91f45695/9ab14fa733b69c5e-2d/s2048x3072/88f8020e156a1ce93cf0e4da05b7e26a48193a44.png"></div>
    </div>
</div>

<div id="about-page">
    <div id="about-page-con">
        <div class="nav-title">Articles</div>
        <div id="navtable1">
            <div id="navcol1">
                <img src="https://dummyimage.com/250x/000/fff">
                <div class="navtext"><span style="font-family: 'Roboto Mono', monospace;text-transform:uppercase;">Category 1</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>
            <div id="navcol1">
                <img src="https://dummyimage.com/250x/000/fff">
                <div class="navtext"><span style="font-family: 'Roboto Mono', monospace;text-transform:uppercase;">Category 2</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>
            <div id="navcol1">
                <img src="https://dummyimage.com/250x/000/fff">
                <div class="navtext"><span style="font-family: 'Roboto Mono', monospace;text-transform:uppercase;">Category 3</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>
        </div>

        <div class="nav-title">Other materials</div>
        <div id="navtable2">
            <div id="navcol2">
                <img src="https://dummyimage.com/250x/000/fff">
                <div class="navtext"><span style="font-family: 'Roboto Mono', monospace;text-transform:uppercase;">Category 1</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>
            <div id="navcol2">
                <img src="https://dummyimage.com/250x/000/fff">
                <div class="navtext"><span style="font-family: 'Roboto Mono', monospace;text-transform:uppercase;">Category 2</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>
            <div id="navcol2">
                <img src="https://dummyimage.com/250x/000/fff">
                <div class="navtext"><span style="font-family: 'Roboto Mono', monospace;text-transform:uppercase;">Category 3</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>
        </div>
    </div>
</div>

<div id="footer">
    <div id="footer-con">
        <div id="icons">
            <a href="https://www.facebook.com/codedriveph"><i class="lni lni-facebook-oval"></i></a>
            <a href="https://www.instagram.com/codedriveph"><i class="lni lni-instagram-filled"></i></a>
            <a href="mailto:[email protected]"><i class="lni lni-google"></i></a>
            <a href="https://www.linkedin.com/company/codedriveph/"><i class="lni lni-linkedin-original"></i></a>
        </div>
        <br>© Code Drive 2021
        <br>Powered by Tumblr
    </div>
</div>

<!--- DO NOT TOUCH THIS PART --->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>

<script>
(function() {
    var $tumblelog = $('#content');
    {block:IfInfiniteScroll}
    $tumblelog.infinitescroll({
        navSelector  : ".pagination",
        nextSelector : ".pagination a:first",
        itemSelector : "article",
        bufferPx     : 50,
        done : "",
        loading: {
            img : "",
            msgText: ""
        },
    },
      function( newElements ) {
            var $newElems = $( newElements ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
                $newElems.animate({ opacity: 1 });
                $tumblelog.masonry( 'appended', $newElems);
            });
          }
    );
    {/block:IfInfiniteScroll}
    $tumblelog.imagesLoaded( function(){
      $tumblelog.masonry({
        columnWidth: function( containerWidth ) {
            return containerWidth / 100;
          }
      });
    });
})();
</script>
<!--- DO NOT TOUCH THIS PART --->

</body>
</html>