diff --git a/css/colormaticstudios.css b/css/colormaticstudios.css index c44893a..8777dfd 100644 --- a/css/colormaticstudios.css +++ b/css/colormaticstudios.css @@ -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%; diff --git a/css/style.css b/css/style.css index cc40769..23232b3 100644 --- a/css/style.css +++ b/css/style.css @@ -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; } diff --git a/studios/index.html b/studios/index.html index 578f723..5165057 100644 --- a/studios/index.html +++ b/studios/index.html @@ -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 -->