Skip to content

Commit

Permalink
Started on CTF Page
Browse files Browse the repository at this point in the history
  • Loading branch information
kaizez committed Jul 8, 2024
1 parent 7c9f737 commit a2e6385
Show file tree
Hide file tree
Showing 5 changed files with 220 additions and 4 deletions.
56 changes: 56 additions & 0 deletions ctf.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Poppins&amp;_cacheOverride=1718074597376" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
<link rel="stylesheet" href="ctf/styles.css">
<script src="ctf/main.js"></script>
<title>CTF Challenge</title>
</head>

<body>

<nav>
<ul class="sidebar">
<li onclick=hideSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 -960 960 960" width="24px" fill="#000000">
<path
d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
</svg></a></li>
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="#">Certificates</a></li>
<li><a href="#">CTF</a></li>
</ul>
<ul>
<li><a href="#">Wei Kiat</a></li>
<li class="hideonmobile"><a href="index.html">Home</a></li>
<li class="hideonmobile"><a href="projects.html">Projects</a></li>
<li class="hideonmobile"><a href="#">Certificates</a></li>
<li class="hideonmobile"><a href="#">CTF</a></li>
<li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg"
height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000">
<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" />
</svg></a></li>
</ul>
</nav>
<h2 class="ctf-title">The Invisible Password</h2>

<div class="Tags">
<h2>Tags:</h2>
<h3>Web </h3>
</div>
<br>
<hr align="content">
<br>
<p class="author">AUTHOR:WEI KIAT</p>
<h3 class="description-title">Description:</h3>
<p class="p-description">While Developing this website the Web Developer has left some files in this page, find out what it is!</p>
<br>
<hr align="right">
</body>

</html>
9 changes: 9 additions & 0 deletions ctf/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
function showSidebar(){
const sidebar = document.querySelector('.sidebar')
sidebar.style.display = 'flex'
}

function hideSidebar(){
const sidebar = document.querySelector('.sidebar')
sidebar.style.display = 'none'
}
151 changes: 151 additions & 0 deletions ctf/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
html {
font-family: "Poppins";
}

body {
min-height: 100vh;
}

* {
margin: 0;
padding: 0;
}

nav {
background-color: #FFFAFA;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
}

nav ul {
width: 100%;
list-style: none;
display: flex;
justify-content: flex-end;
align-items: center;
}

nav li {
height: 50px;
font-size: larger;
font-weight: 580;
}

a {
text-decoration: none;
}

nav a {
height: 100%;
padding: 0 30px;
text-decoration: none;
display: flex;
align-items: center;
color: black;
}

nav a:hover {
background-color: #f0f0f0;
}

nav li:first-child {
margin-right: auto;
}

.sidebar {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 250px;
z-index: 100;
background-color: white;
box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
display: none;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}

.sidebar li {
width: 100%;
}

.sidebar a {
width: 100%;
}

.menu-button {
display: none;
}


.ctf-title {
margin-left: 20px;
margin-top: 30px;
font-weight: 50;
}

.Tags {
margin-top: 20px;
display: flex;
}

.Tags h2,
h3 {
margin-left: 20px;
font-weight: 50;
font-size: large;
}

.Tags h3 {
background-color: #3e6ff4;
color: white;
width: max-content;
border-radius: 20%;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;
margin-left: 10px;
font-size: large;

}

hr {
border: none;
height: 1px;
color: #3333333b;
background-color: #3333333b;
width: 90%;

}

.author{
font-size: smaller;
margin-left: 20px;
}

.description-title{
margin-left: 20px;
margin-top: 20px;
font-weight: 50;
font-size: large;
margin-top: 10px;
}

.p-description{
padding: 20px;
font-weight: smaller;
}
/* --------------------------------------------------------------------------------------------------------------------------------*/


@media (max-width: 640px) {
.hideonmobile {
display: none;
}

.menu-button {
display: block;
}
}
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,14 @@
<li><a href="#">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="#">Certificates</a></li>
<li><a href="#">CTF</a></li>
<li><a href="ctf.html">CTF</a></li>
</ul>
<ul>
<li><a href="#">Wei Kiat</a></li>
<li class="hideonmobile"><a href="#">Home</a></li>
<li class="hideonmobile"><a href="projects.html">Projects</a></li>
<li class="hideonmobile"><a href="#">Certificates</a></li>
<li class="hideonmobile"><a href="#">CTF</a></li>
<li class="hideonmobile"><a href="ctf.html">CTF</a></li>
<li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg"
height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000">
<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" />
Expand Down
4 changes: 2 additions & 2 deletions projects.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,14 @@
<li><a href="index.html">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Certificates</a></li>
<li><a href="#">CTF</a></li>
<li><a href="ctf.html">CTF</a></li>
</ul>
<ul>
<li><a href="#">Wei Kiat</a></li>
<li class="hideonmobile"><a href="index.html">Home</a></li>
<li class="hideonmobile"><a href="#">Projects</a></li>
<li class="hideonmobile"><a href="#">Certificates</a></li>
<li class="hideonmobile"><a href="#">CTF</a></li>
<li class="hideonmobile"><a href="ctf.html">CTF</a></li>
<li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg"
height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000">
<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" />
Expand Down

0 comments on commit a2e6385

Please sign in to comment.