TripleLog
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<title></title>
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
</style>
</head>
<body>
<div id="header">
<img src="" style="height: 4rem; margin-left: 0rem; margin-top: -0.375rem;"><span class="logo">NAME</span>
<span class="links">
<div style="width: calc(6rem + 6px); border-bottom: 2px solid rgb(0,0,155);">
<a href="" >Link 1</a>
</div>
<div style="display: inline-block; width: 3rem;">
<a href="">Link 2</a>
</div>
<div style="display: inline-block; width: 3rem;">
<a href="">Link 3</a>
</div>
</span>
</div>
<div id="websites">
<div class="card" style="--accent: rgba(0,150,150,0.4);">
<div class="title"><a href="">Title</a></div>
<div class="content">
<ul>
<li>???</li>
<li>???</li>
<li>???</li>
<li>???</li>
</ul>
</div>
<div class="footer">
<span>1</span>
<span>2</span>
<span class="disabled">3</span>
</div>
</div>
<div class="card" style="--accent: rgba(0,150,150,0.4);">
<div class="title"><a href="">Title</a></div>
<div class="content">
<ul>
<li>???</li>
<li>???</li>
<li>???</li>
<li>???</li>
</ul>
</div>
<div class="footer">
<span>1</span>
<span>2</span>
<span class="disabled">3</span>
</div>
</div>
<div class="card" style="--accent: rgba(0,150,150,0.4);">
<div class="title"><a href="">Title</a></div>
<div class="content">
<ul>
<li>???</li>
<li>???</li>
<li>???</li>
<li>???</li>
</ul>
</div>
<div class="footer">
<span>1</span>
<span>2</span>
<span class="disabled">3</span>
</div>
</div>
<div class="card" style="--accent: rgba(0,150,150,0.4);">
<div class="title"><a href="">Title</a></div>
<div class="content">
<ul>
<li>???</li>
<li>???</li>
<li>???</li>
<li>???</li>
</ul>
</div>
<div class="footer">
<span>1</span>
<span>2</span>
<span class="disabled">3</span>
</div>
</div>
<div class="card" style="--accent: rgba(0,150,150,0.4);">
<div class="title"><a href="">Title</a></div>
<div class="content">
<ul>
<li>???</li>
<li>???</li>
<li>???</li>
<li>???</li>
</ul>
</div>
<div class="footer">
<span>1</span>
<span>2</span>
<span class="disabled">3</span>
</div>
</div>
<div class="card" style="--accent: rgba(0,150,150,0.4);">
<div class="title"><a href="">Title</a></div>
<div class="content">
<ul>
<li>???</li>
<li>???</li>
<li>???</li>
<li>???</li>
</ul>
whatever
</div>
<div class="footer">
<span>1</span>
<span>2</span>
<span class="disabled">3</span>
</div>
</div>
<div class="empty-card">
</div>
<div class="empty-card">
</div>
<div class="empty-card">
</div>
<div class="empty-card">
</div>
<div class="empty-card">
</div>
<div class="empty-card">
</div>
</div>
<script src="script.js"></script>
</body>
</html>body {
margin: 0;
box-sizing: border-box;
background-color: #888;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAsNJREFUeJztnEHOpDoMhEtz/5P4Cr6Cr+Ar+Ar1FnGma3jwayIxq/a3cakTGoRcAScA0p3pTjRWyR1V7/Zwo0YAqCru+KR3Xxa5o2qNa5+fY2IuzXSq1ggAHkmPdaxPem1TZBbv9O7zC8MwvAGdpH+8XbE8W+FUvdvTlw93BD7e/BvvZqx9ZZCqNQJAkfL/PQYlqVojAIQHw4M/aQBwGp1rjLzq8zP4bUzG3GfMXJWGQ8ZKM/gOr1ARrJA069T0JFX/7t+1SUmNkl3XZDmf9O4btmwVVlStEQCi9JicO6rWCACWRstlhycNAGXBsvX/V31+Br+NyZjJmOEVWEXKRJJ1OpsVVe/26PuLkPuM7BRMCz7p3bf6XqFoVK1xbSMWsZ4ws6RqjQDg5vTe7kmvY08Gk3f6/Ax+G5Mx9xkzReRwyFhprDS8wlhp7mOGVwgnQ6Y2ncs2zqLq3W5diZtU5JE9hZjBJ7377kpeq/prXNuYpH5X3yyq1ggAYc5oyzxpAKhMVi7bXPX5Gfw2JmPuM2buY4ZDxkoz+J4xGTMZM7xCWDKkEGMXfLSg6t1+V7yR3Y/BJ737Zj/tmW5UrREAUizCLljZXH/79Fur/j/pdexGs15zuujzMzgMAAD3pLs84NxLnpFO1btd03P/Zj2aWyaf9O5bfQUsJ1VrBP6c77HelzGpWiOw7Lct+KQBgOZkX6Wu+vwMfhuTMfcZM0XkcMhYaQbfMyZjJmOGV6g0lsx9eD8F7uFUvdutXxM0eV0weiUzqvikP/vruZcMqtYIACmrknulVFdNrxEA1jPefXwPGvj/XNPdvNPcxwyHjJXGSsMrjJXGSsPwLzEGTZY3qt9frCyq3u3e44DLePD0UYq7D1OwxzOmUbVGAAj50Ib3eObuVK0RAHrFhz9p4OePY+w+M8YMh4yVxkrDK4yV7q00DGf8Bx02Ti1Xxw1iAAAAAElFTkSuQmCC");
}
#header {
width: min(35rem, calc(100% - 2rem));
left: max(calc(50% - 17.5rem), 1rem);
position: relative;
height: 3.25rem;
background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.9) 25%, rgba(255,255,255,0.9));
margin-bottom: 1rem;
margin-top: 1rem;
border: 3px solid;
border-image: linear-gradient(to right, rgb(0,0,155), white 25%, rgb(0,0,155)) 1;
}
#websites {
width: min(80rem, calc(100% - 2rem));
left: max(calc(50% - 40rem), 1rem);
position: relative;
min-height: 20rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
--accent: rgba(0,0,150,0.4);
display: inline-block;
width: 16rem;
flex: 1 1 16rem;
min-height: 12rem;
background: rgba(235,235,235,0.8);
border: 2px solid;
border-image: linear-gradient(to bottom, white, var(--accent)) 1;
position: relative;
font-size: 1.2rem;
line-height: 1.5rem;
}
.empty-card {
display: inline-block;
width: 16rem;
flex: 1 1 16rem;
height: 0;
background: rgba(0,0,0,0);
border: 0;
}
.title {
font-size: 1.5rem;
line-height: 1.5rem;
text-align: center;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid white;
background: linear-gradient(to right, rgba(255,255,255,0.5), var(--accent), rgba(255,255,255,0.5));
text-shadow: 1px 1px 2px #FFF, -1px 1px 2px #FFF, 1px -1px 2px #FFF, -1px -1px 2px #FFF;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.content {
color: #002;
margin-bottom: 2rem;
}
.logo {
font-size: 2.25rem;
line-height: 3.25rem;
margin-left: 0.25rem;
vertical-align: top;
color: white;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.links {
float: right;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.links > div {
height: 1.625rem;
border-left: 2px solid rgb(0,0,155);
text-align: center;
line-height: 1.625rem;
}
.links > div a {
color: rgb(0,0,155);
}
.footer {
position: absolute;
bottom: 0px;
height: 1.5rem;
width: 100%;
color: white;
display: flex;
}
.footer > span {
border-top: 2px solid var(--accent);
display: inline-block;
flex: 1 1 5.33rem;
text-align: center;
border-left: 1px solid white;
border-right: 1px solid white;
background: black;
cursor: pointer;
}
.footer > span:nth-child(1) {
border-left: 0;
}
.footer > span:nth-child(3) {
border-right: 0;
}
.footer > span.disabled {
border-top: 0px;
border-left: 0px;
border-right: 0px;
background: transparent;
color: transparent;
cursor: default;
}This repl creates a web page similar to the TripleLog home page. Customize or strip it for parts.
To view this on TripleLog, click here.
The HTML file contains each card, but you can use a templating system to define each in JSON or something else to make it easier to tweak things.
The style.css file contains the basic styling for the page. Change colors, sizes, or anything else.
The template does not use any JavaScript, but you can add some code to script.js.