Apophis_Coding/WebPage
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Started playing around with HTML and CSS

Browse Source
This commit is contained in:
TheNightglow
2021-08-09 23:04:45 +02:00
parent 57ca11baf8
commit 8fce073b86
5 changed files with 225 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Images/Logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 382 KiB

BIN
Images/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 296 KiB

58
SubFiles/aboutUs.html Normal file
View File

@@ -0,0 +1,58 @@
<!-- See Tutorial https://www.youtube.com/watch?v=NXG0ETguPsg -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Apophis Coding - About Us</title>
<link rel="shortcut icon" href="../Images/icon.png">
<link rel="stylesheet" href="../style.css">
</head>
<body>
<header class="page-head">
<div>
<img src="../Images/icon.png" alt="Icon of Apophis Coding">
<h1>Apophis Coding - About Us</h1>
</div>
</header>
<nav>
<ul class="navigation">
<li>
<a href="../index.html">
Home
</a>
</li>
<li>
<a href="../SubFiles/aboutUs.html">
Projects
</a>
</li>
<li>
<a href="../SubFiles/aboutUs.html">
About us
</a>
</li>
</ul>
</nav>
<main>
<div class="center-panel">
<p>This page is currently under construction.</p>
</div>
</main>
<footer class="footer">
<div>
<h3>Contact:</h3>
<ul>
<li>
support@apophis-coding.com
</li>
<li>
<a href="../https://discord.gg/zdJ7TVq5gz" target="_blank">
Discord
</a>
</li>
</ul>
</div>
</footer>
</body>
</html>

59
index.html Normal file
View File

@@ -0,0 +1,59 @@
<!-- See Tutorial https://www.youtube.com/watch?v=NXG0ETguPsg -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Apophis Coding</title>
<link rel="shortcut icon" href="Images/icon.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="page-head">
<div>
<img src="Images/icon.png" alt="Icon of Apophis Coding">
<h1>Apophis Coding</h1>
</div>
</header>
<nav>
<ul class="navigation">
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="SubFiles/aboutUs.html">
Projects
</a>
</li>
<li>
<a href="SubFiles/aboutUs.html">
About us
</a>
</li>
</ul>
</nav>
<main>
<div class="center-panel">
<p>Welcome to the home page of Apophis Coding.</p>
<p>This side is currently under construction.</p>
</div>
</main>
<footer class="footer">
<div>
<h3>Contact:</h3>
<ul>
<li>
support@apophis-coding.com
</li>
<li>
<a href="https://discord.gg/zdJ7TVq5gz" target="_blank">
Discord
</a>
</li>
</ul>
</div>
</footer>
</body>
</html>

108
style.css Normal file
View File

@@ -0,0 +1,108 @@
:root
{
--main-bg-color: gray;
--main-bg-overlay-color: rgba(26, 26, 26, 0.596);
--main-font-color: rgb(177, 177, 147);
}
.page-head
{
height: 75px;
}
.page-head div
{
position: fixed;
width: 100%;
background-color: var(--main-bg-overlay-color);
color: white;
padding: 1px;
margin: 0;
vertical-align: middle;
}
.page-head img
{
width: 75px;
display: inline;
vertical-align: middle;
}
.page-head h1
{
display: inline;
vertical-align: middle;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navigation
{
text-align: center;
padding: 0;
}
.navigation li, .navigation a
{
display: inline-block;
width: 100px;
background-color: rgba(39, 39, 39, 0.596);
color: var(--main-font-color);
font-size: larger;
text-decoration: none;
}
body
{
background-color: var(--main-bg-color);
margin: 0;
background-image: url('Images/Logo.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 600px;
}
.center-panel
{
background-color: var(--main-bg-overlay-color);
padding: 10px;
margin: 0px 200px;
border: black;
border-spacing: 3px;
color: var(--main-font-color);
border-style: solid;
vertical-align: middle;
}
.center-panel p
{
margin: 0;
color: var(--main-font-color);
font-size: larger;
}
h1
{
font-size: 40px;
color: var(--main-font-color);
}
.test-class
{
font-size: 80px;
}
.test-class p
{
color: var(--main-font-color);
}
.footer
{
position: fixed;
bottom: 0;
left: 10px;
}