Implement grid containers
This commit is contained in:
parent
0bc6458128
commit
8f665f0bf1
2 changed files with 75 additions and 29 deletions
16
index.html
16
index.html
|
@ -12,9 +12,13 @@
|
|||
<img src="icons/ttt-org.png" alt="TTT Logo" width="64" height="64" style="margin-right: 10px;">
|
||||
<h1>TechTransThai</h1>
|
||||
</div>
|
||||
<div class="grid-container">
|
||||
|
||||
<h2>Services</h2>
|
||||
<div class="left"></div>
|
||||
<div class="middle">
|
||||
|
||||
<h2>บริการ</h2>
|
||||
<div class="list">
|
||||
<h3 class="h3">Dawncraft</h3>
|
||||
<p>เซิร์ฟเวอร์ Minecraft พร้อมม็อด Dawncraft</p>
|
||||
<a href="https://status.techtransthai.org/status/techtransthai" class="button">Status</a>
|
||||
|
@ -38,9 +42,11 @@
|
|||
<h3 class="h3">Syncthing Relay</h3>
|
||||
<p>Relay server สำหรับ Syncthing</p>
|
||||
<a href="https://relays.syncthing.net/" class="button">See stats</a>
|
||||
</div>
|
||||
|
||||
<h2>Projects</h2>
|
||||
<h2>โปรเจกต์</h2>
|
||||
|
||||
<div class="list">
|
||||
<h3 class="h3">FOSS4Change</h3>
|
||||
<p>ร่วมสร้างการเปลี่ยนแปลงด้วยโอเพนซอร์ส</p>
|
||||
<a href="https://www.youtube.com/@FOSS4Change" class="button">Visit</a>
|
||||
|
@ -52,6 +58,12 @@
|
|||
<h3 class="h3">PGTechs (Discontinued)</h3>
|
||||
<p>เทคโนโลยีเพื่อทุกคน</p>
|
||||
<a href="https://www.youtube.com/@PGTechs" class="button">Visit</a>
|
||||
</div>
|
||||
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<a href="https://codeberg.org/latenightdef/ttt-org" class="versionbutton">DATE-VERSION</a>
|
||||
|
|
34
style.css
34
style.css
|
@ -3,6 +3,10 @@ html *
|
|||
font-family: Cantarell, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
display: flex;
|
||||
|
@ -58,3 +62,33 @@ html *
|
|||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'header header header header header'
|
||||
'left middle middle middle right'
|
||||
'footer footer footer footer footer';
|
||||
}
|
||||
|
||||
.left {
|
||||
grid-area: left;
|
||||
}
|
||||
|
||||
/* Style the middle column */
|
||||
.middle {
|
||||
grid-area: middle;
|
||||
}
|
||||
|
||||
/* Style the right column */
|
||||
.right {
|
||||
grid-area: right;
|
||||
}
|
||||
|
||||
/* Invidious */
|
||||
.list {
|
||||
border-radius: 12px 12px 12px 12px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
|
||||
margin-bottom: 50px;
|
||||
}
|
Loading…
Reference in a new issue