Pillow Themes 2021 [Incomplete]

<!DOCTYPE html>
<head>

<link href="https://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<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=Montserrat:wght@700&family=Source+Sans+Pro&display=swap" rel="stylesheet">

<meta name="color:main color" content="#bad0f1"/>
<meta name="color:background color" content="#fbfbfb"/>

<meta name="image:explore icon 1" content=""/>
<meta name="image:explore icon 2" content=""/>
<meta name="image:explore icon 3" content=""/>

<meta name="text:announcement" content=""/>

</head>

<style stype="text/css">

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

::-webkit-scrollbar-track {
background-color:{color:main color};
border-top:6px solid {color:background color};
border-left:6px solid {color:background color};
border-right:6px solid {color:background color};
border-bottom:6px solid {color:background color};
}

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

body {
font-family: 'Source Sans Pro', sans-serif;
font-size:16px;
line-height:1.5;
overflow-x:hidden;
}

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

#container {
width:100vw;
height:auto;
}

.section {
width:100vw;
height:100vh;
}

.halfsection {
width:100vw;
height:50vh;
}

#landing {
background-color:{color:main color};
}

#header {
background-color:{color:background color};
border-radius:0px 0px 50px 50px;
padding:20px;
}

#hlinks {
text-align:center;
}

#hlinks a {
margin-right:50px;
box-shadow:inset 0 0px 0 {color:mainc color};
padding:0px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
}

#hlinks a:hover {box-shadow:inset 0 -6px 0 {color:main color};}

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

#hlinks a:nth-child(4) {
font-family: 'Montserrat', sans-serif;
color:{color:main color};
font-size:18px;
}

#explore {
background-color:{color:background color};
align-items:center;
display:flex;
}

#explorec {
width:60%;
height:auto;
margin:0 auto;
justify-content:space-between;
display:flex;
}

.explorecol {
width:22%;
height:auto;
}

.exploreicon {
max-width:200px;
max-height:200px;
margin:0 auto;
}

.exploreicon img {
max-width:200px;
max-height:200px;
}

.explore-text {
text-align:center;
margin-top:20px;
padding:15px;
border-radius:30px;
}

#information {
background-color:#ffe6d5;
align-items:center;
display:flex;
}

#informationc {
width:60%;
height:auto;
margin:0 auto;
}

#info-text {
border-radius:30px;
font-size:18px;
text-align:center;
}

#info-text-title {
font-family: 'Montserrat', sans-serif;
font-size:24px;
margin-bottom:10px;
}

#stats {
text-align:center;
display:flex;
justify-content:space-between;
margin-top:40px;
}

.stats-button {
width:22%;
height:auto;
}

#content-con {
background-color:{color:background color};
}

#content-c {
width:60%;
height:auto;
margin:100px auto;
display:flex;
justify-content:space-between;
}

#posts {
width:500px;
height:1000px;
background-color:green;
}

#sidebar {
width:280px;
height:500px;
}

.sidebar-title {
background-color:{color:main color};
padding:20px;
border-radius:30px;
}

.sidebar-body {
background:#fff;
width:280px;
height:auto;
border-radius:30px;
border:1px solid #eeeeee;
margin-top:20px;
}

.sidebar-c {
padding:20px;
}

</style>

<body>
<title>Pillow Themes</title>

<div id="container">
    <div id="landing" class="section">
        <div id="header">
            <div id="hlinks">
                <a href="/">Home</a>
                <a href="/ask">Mailbox</a>
                <a href="/about">About</a>
                <a href="/">Pillow Themes</a>
                <a href="/explore">Explore</a>
                <a href="/guide">User Guide</a>
                <a href="/links">Links</a>
            </div>
        </div>
    </div>

    <div id="explore" class="halfsection">
        <div id="explorec">
            <div class="explorecol">
                <div class="exploreicon"><img src="{image:explore icon 1}"></div>
                <div class="explore-text" style="background-color:#dc886b;"><a href="/">Kageyama Tobio</a></div>
            </div>
            <div class="explorecol">
                <div class="exploreicon"><img src="{image:explore icon 2}"></div>
                <div class="explore-text" style="background-color:{color:main color};"><a href="/">Kageyama Tobio</a></div>
            </div>
            <div class="explorecol">
                <div class="exploreicon"><img src="{image:explore icon 3}"></div>
                <div class="explore-text" style="background-color:#dc886b;"><a href="/">Kageyama Tobio</a></div>
            </div>
        </div>
    </div>

    <div id="information" class="halfsection">
        <div id="informationc">
            <div id="info-text">
                <div id="info-text-title">Behind the Scenes</div>
            Pillow Themes was established on the 28th of March in 2018. It started as a coding practice to create a personal theme. But, I enjoyed learning HTML and CSS tutorials in the process. Gradually, Pillow Themes started to release codes for public use, not limited to blog themes only. You can find posts on tabs, popups, and color palettes.<br>Scroll down to view more!</div>
            <div id="stats">
                <div class="stats-button">
                    <div style="font-size:24px;font-family: 'Montserrat', sans-serif;">25</div>
                    Themes Designed
                </div>
                <div class="stats-button">
                    <div style="font-size:24px;font-family: 'Montserrat', sans-serif;">04</div>
                    Other Codes Created
                </div>
                <div class="stats-button">
                    <div style="font-size:24px;font-family: 'Montserrat', sans-serif;">07</div>
                    Color Palettes Made
                </div>
            </div>
        </div>
    </div>

    <div id="content-con" class="section">
        <div id="content-c">
            <div id="posts">hello</div>

            <div id="sidebar">
                <div class="sidebar-title">Updates and Announcements</div>
                <div class="sidebar-body">
                <div class="sidebar-c">{text:announcement}</div>
                </div>

                <div class="sidebar-title" style="margin-top:40px;">[MONTH] Calendar</div>
                <div class="sidebar-body">
                <div class="sidebar-c"><div style="font-family: 'Montserrat', sans-serif;display:inline;margin-right:10px;">00</div>Debugged [NAME] Theme
                    <br>
                    <div style="font-family: 'Montserrat', sans-serif;display:inline;margin-right:10px;">00</div>Debugged [NAME] Theme
                    <br>
                    <div style="font-family: 'Montserrat', sans-serif;display:inline;margin-right:10px;">00</div>Debugged [NAME] Theme
                    <br>
                    <div style="font-family: 'Montserrat', sans-serif;display:inline;margin-right:10px;">00</div>Debugged [NAME] Theme
                </div> <!--end of sidebar-c-->
                </div> <!--end of sidebar-body-->

            </div> <!--end of sidebar-->
        </div> <!--end of content-c-->
    </div> <!--end of content-con-->

</div>

</body>
</html>