fixes and comments

This commit is contained in:
CNSeattle 2022-12-31 11:33:38 -08:00
parent 7189038a03
commit c57a50d9e6
3 changed files with 32 additions and 11 deletions

View file

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -1,18 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <!--Definitely didn't steal this image from CNSeattle.co-->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<title>Badge Showcase 2022</title> <title>Badge Showcase 2022</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!--3D Model Embedding-->
<script src="https://scripts.sirv.com/sirv.js"></script> <script src="https://scripts.sirv.com/sirv.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <!--Google Material Icons-->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
</head> </head>
<body> <body>
<div id="heading"> <div id="heading">
<img src="images/LogoWebsite.png" id="logo" class="center" alt="Code Ninjas Seattle"> <img src="images/LogoWebsite.png" id="logo" class="center" alt="Code Ninjas Seattle">
@ -21,6 +27,7 @@
<div id="body"> <div id="body">
<div class="vertical-list"> <div class="vertical-list">
<!--<a href="link">text</a>--> <!--<a href="link">text</a>-->
<!---->
<h4>3D Modeling</h4> <h4>3D Modeling</h4>
<div class="container"> <div class="container">
<div class="box"> <div class="box">
@ -48,6 +55,8 @@
<h5 class="text">Vedanth's Room</h5> <h5 class="text">Vedanth's Room</h5>
</div> </div>
</div> </div>
<h4>MakeCode Arcade</h4> <h4>MakeCode Arcade</h4>
<div class="container"> <div class="container">
<div class="box"> <div class="box">
@ -87,32 +96,39 @@
<h5 class="text">Ash: ASH SPACE</h5> <h5 class="text">Ash: ASH SPACE</h5>
</div> </div>
</div> </div>
<h4>Minecraft Marvel</h4> <h4>Minecraft Marvel</h4>
<div class="container"> <div class="container">
<div class="box"> <div class="box">
<a href="https://makecode.com/_RfbYLV6tUUt7" target="_blank">Easton's Maze-Solver <span class="material-symbols-outlined"> <a href="https://makecode.com/_RfbYLV6tUUt7" target="_blank">Easton's Maze-Solver <span
open_in_new class="material-symbols-outlined">
open_in_new
</span></a> </span></a>
</div> </div>
</div> </div>
<h4>Roblox Rebel</h4> <h4>Roblox Rebel</h4>
<div class="container"> <div class="container">
<div class="box"> <div class="box">
<a href="https://www.roblox.com/games/11957241070/" target="_blank">Weinan's Landmarks <span class="material-symbols-outlined"> <a href="https://www.roblox.com/games/11957241070/" target="_blank">Weinan's Landmarks <span
open_in_new class="material-symbols-outlined">
open_in_new
</span></a> </span></a>
</div> </div>
</div> </div>
<h4>Web Dev 1</h4> <h4>Web Dev 1</h4>
<div class="container"> <div class="container">
<div class="box"> <div class="box">
<a href="kade/index.html" target="_blank">Kade's Website <span class="material-symbols-outlined"> <a href="kade/index.html" target="_blank">Kade's Website <span
open_in_new class="material-symbols-outlined">open_in_new</span></a>
</span></a>
</div> </div>
<div class="box"> <div class="box">
<a href="ethan/index.html" target="_blank">Ethan's Website <span class="material-symbols-outlined"> <a href="ethan/index.html" target="_blank">Ethan's Website <span class="material-symbols-outlined">
open_in_new open_in_new
</span></a> </span></a>
</div> </div>
</div> </div>
@ -120,4 +136,4 @@
</div> </div>
</body> </body>
</html </html>

View file

@ -60,6 +60,7 @@ h5 {
} }
.container { .container {
/* 2x2 grid system */
margin: 20px auto; margin: 20px auto;
background-color: #fff; background-color: #fff;
display: grid; display: grid;
@ -70,6 +71,7 @@ h5 {
} }
.container .box { .container .box {
/* each individual box inside the grid */
padding: 20px; padding: 20px;
background-color: #eee; background-color: #eee;
height: fit-content; height: fit-content;
@ -79,13 +81,16 @@ h5 {
} }
div .container { div .container {
/* fix scaling on thin screens */
--bs-gutter-x: 2vw; --bs-gutter-x: 2vw;
} }
.Sirv { .Sirv {
/* padding between 3D model embed and lower text */
padding-bottom: 10px; padding-bottom: 10px;
} }
iframe { iframe {
/* padding between makeCode embed and lower text */
padding-bottom: 10px; padding-bottom: 10px;
} }