Skip to content
This repository was archived by the owner on Nov 21, 2025. It is now read-only.

change div navigation to semantic html header tag #19

Open
lilmubby wants to merge 2 commits into
base: main
Choose a base branch
from
Open

change div navigation to semantic html header tag #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b85709
change div navigation to semantic html header tag
lilmubby May 29, 2023
9088846
implemented semantic html in homepage
lilmubby May 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 94 additions & 58 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,67 +6,103 @@
<link rel="stylesheet" href="src/desktop.css" />
</head>
<body>
<div id="navbar">
<div class="navbutton" onclick="window.location.href='index.html'">
<a href="index.html"><i icon-name="home" class="icon"></i>Home</a>
</div>
<div class="navbutton" onclick="window.location.href='blog.html'">
<a href="blog.html"><i icon-name="newspaper" class="icon"></i>News</a>
</div>
<div class="navbutton" onclick="window.location.href='tools.html'">
<a href="tools.html"><i icon-name="package" class="icon"></i>Tools</a>
</div>
<div class="navbutton" onclick="window.location.href='smp.html'">
<a href="smp.html" id="mc"
><i icon-name="sword" class="icon"></i>Minecraft</a
>
</div>
<div class="navbutton" onclick="window.location.href='clubs.html'">
<a href="clubs.html"
><i icon-name="users" class="icon"></i>Join a Club!</a
>
</div>
</div>
<div id="titlebox">
<h1 style="color: #dedede">Colonel By Student Community</h1>
<div id="directory"></div>
</div>
<div class="boxList">
<div class="descbox">
<h2>Welcome to the Colonel By Student Community Website!</h2>
<p>
You can find tools, info, and communications platforms related and
dedicated to the Colonel By Student Community here, as well as
information on our school minecraft server.
</p>
</div>
<div class="descbox">
<h2>Who we are</h2>
<p>
We are a group of students focused on creating an interconnected
online community for the Students of Colonel By Secondary School
</p>
<p>We are, and will always be For Students, By Students</p>
</div>
</div>
<div class="boxList">
<div class="box">
<a href="blog.html"><h3>Blog + Newspaper</h3></a>
</div>
<div class="box">
<a href="smp.html" style="color: #70b433"><h3>Minecraft Server</h3></a>
</div>
<div class="box">
<a href="tools.html"><h3>Tools + Guides</h3></a>
</div>
</div>
<div
<header>
<!-- This is the header container -->
<!-- Use a custom classname for all previous div element so as to not make changes to the Reset CSS declaration -->
<nav>
<!--This wraps the navigation items-->

<ul id="navbar" class="custom">
<!-- This is the navigation items -->
<li
class="navbutton custom"
onclick="window.location.href='index.html'"
>
<a href="index.html"><i icon-name="home" class="icon"></i>Home</a>
</li>

<li
class="navbutton custom"
onclick="window.location.href='blog.html'"
>
<a href="blog.html"
><i icon-name="newspaper" class="icon"></i>News</a
>
</li>

<li
class="navbutton custom"
onclick="window.location.href='tools.html'"
>
<a href="tools.html"
><i icon-name="package" class="icon"></i>Tools</a
>
</li>

<li
class="navbutton custom"
onclick="window.location.href='smp.html'"
>
<a href="smp.html" id="mc"
><i icon-name="sword" class="icon"></i>Minecraft</a
>
</li>

<li
class="navbutton custom"
onclick="window.location.href='clubs.html'"
>
<a href="clubs.html"
><i icon-name="users" class="icon"></i>Join a Club!</a
>
</li>
</ul>
</nav>
</header>
<main>
<section id="titlebox" class="custom">
<h1 style="color: #dedede">Colonel By Student Community</h1>
<div id="directory"></div>
</section>
<section class="boxList" class="custom">
<article class="descbox">
<h2>Welcome to the Colonel By Student Community Website!</h2>
<p>
You can find tools, info, and communications platforms related and
dedicated to the Colonel By Student Community here, as well as
information on our school minecraft server.
</p>
</article>
<div class="descbox custom">
<h2>Who we are</h2>
<p>
We are a group of students focused on creating an interconnected
online community for the Students of Colonel By Secondary School
</p>
<p>We are, and will always be For Students, By Students</p>
</div>
</section>
<section class="boxList custom">
<div class="box custom">
<a href="blog.html"><h3>Blog + Newspaper</h3></a>
</div>
<div class="box custom">
<a href="smp.html" style="color: #70b433"
><h3>Minecraft Server</h3></a
>
</div>
<div class="box custom">
<a href="tools.html"><h3>Tools + Guides</h3></a>
</div>
</section>
</main>
<footer
id="comunicationsBox"
class="box"
class="box custom"
style="height: auto; padding: 2%; width: 90%"
>
<h3>Come chat with fellow students on the CBSC Discord Server!</h3>
<div style="padding: 1%">
<div class="custom" style="padding: 1%">
<img
src="img/discord-mark-white.svg"
alt="discord logo"
Expand All @@ -84,7 +120,7 @@ <h3>Come chat with fellow students on the CBSC Discord Server!</h3>
target="_blank"
>Click here to join the Server</a
>
</div>
</footer>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
lucide.createIcons();
Expand Down
12 changes: 7 additions & 5 deletions src/desktop.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@
}

/*Reset CSS*/
div {

div, .custom {
margin: 0;
padding: 0;
border: 0;
padding: 0;
border: 0;
border-radius: 5px;
}
img {
Expand Down Expand Up @@ -82,11 +83,12 @@ to {background-position-x: -100px 0px;background-size:150%;}
}
/*^homepage scrolling background animation^*/
#navbar {
background-color: var(--bg1);
display: flex;
flex-direction: row;
background-color: var(--bg1);
width: 100%;
list-style: none;
margin: 5px;
width: 100%;
}

#mc {
Expand Down