ColormaticStudios/colormaticwebsite
Archived
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add banner image to studios page, rearrange items

Browse Source
This commit is contained in:
Zakarya
2024-11-26 14:51:24 -08:00
parent 2902bc3a54
commit db4cd72cd4
3 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/colormaticstudios.css
View File

@ -1,3 +1,21 @@
div.heading {
background-image: url("/img/colormatic_banner.png");
background-size: cover;
background-repeat: no-repeat;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
div.heading h1 {
color: white;
background-color: #00000088;
padding: 28px 42px;
border-radius: 16px;
backdrop-filter: blur(5px);
}
div.project-grid-container {
display: flex;
width: 80%;

9
css/style.css
View File

@ -191,6 +191,15 @@ ul.linktree li a:hover {
background-color: var(--text-color);
}
div.double-linktree {
display: flex;
justify-content: center;
}
div.double-linktree ul.linktree {
margin: 0;
}
div.footer {
border-top: solid 1px #00000033;
}

36
studios/index.html
View File

@ -20,30 +20,16 @@ $(document).ready(function(){
</head>
<body>
<header id="navbar"></header>
<div style="margin-top: 10%;"></div><!-- Separator -->
<main>
<div class="heading">Colormatic Studios</div>
<div style="margin-top: 5%;"></div><!-- Separator -->
<div class="hero">
<h1>Links:</h1>
<ul class="linktree">
<li><a href="https://mastodon.social/@colormaticstudios" target="_blank" rel="noopener noreferrer">Mastodon</a></li>
<li><a href="https://www.instagram.com/colormaticstudios/" target="_blank" rel="noopener noreferrer">Instagram</a></li>
<li><a href="https://www.youtube.com/@colormaticstudios" target="_blank" rel="noopener noreferrer">Youtube</a></li>
<li><a href="https://github.com/ColormaticStudios" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="https://bsky.app/profile/colormaticstudios.bsky.social" target="_blank" rel="noopener noreferrer">Bluesky</a></li>
<li><a href="https://x.com/ColormaticStudy" target="_blank" rel="noopener noreferrer">X/Twitter</a></li>
</ul>
</div>
<div class="heading"><h1>Colormatic Studios</h1></div>
<div class="project-grid-container">
<div class="project-grid-box">
<h1>A project that we are working on</h1>
<h1>A Silly Game</h1>
<div class="project-grid-box-contents">
<div style="width:100px;height:100px;background-color:green;margin:12px">This is an example image</div>
<p>This is a description of the project that we are working on</p>
<p>This is a silly little game project to get us started.</p>
</div>
</div>
<div class="project-grid-box">
@ -75,6 +61,22 @@ $(document).ready(function(){
</div>
</div>
</div>
<div class="hero">
<h1>Links:</h1>
<div class="double-linktree">
<ul class="linktree">
<li><a href="https://mastodon.social/@colormaticstudios" target="_blank" rel="noopener noreferrer">Mastodon</a></li>
<li><a href="https://www.instagram.com/colormaticstudios/" target="_blank" rel="noopener noreferrer">Instagram</a></li>
<li><a href="https://www.youtube.com/@colormaticstudios" target="_blank" rel="noopener noreferrer">Youtube</a></li>
</ul>
<ul class="linktree">
<li><a href="https://github.com/ColormaticStudios" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="https://bsky.app/profile/colormaticstudios.bsky.social" target="_blank" rel="noopener noreferrer">Bluesky</a></li>
<li><a href="https://x.com/ColormaticStudy" target="_blank" rel="noopener noreferrer">X/Twitter</a></li>
</ul>
</div>
</div>
</main>
<div style="margin-top: 10%;"></div><!-- Separator -->