Create a basic web site
authorLukáš Jiřiště <gymnazium.jiriste@gmail.com>
Sat, 21 Oct 2023 10:47:43 +0000 (12:47 +0200)
committerLukáš Jiřiště <gymnazium.jiriste@gmail.com>
Sat, 21 Oct 2023 10:47:43 +0000 (12:47 +0200)
Create a basic html site including:
- home page
- about page
- project page
- navigation "page" (used as iframe for navigation bar)
- placeholder page
- page handling 404 error
- svg "logo"  used on site and as favicon
- css file holding the theme of the site

src/about.html [new file with mode: 0755]
src/errors/status-404.html [new file with mode: 0755]
src/images/favicon.svg [new file with mode: 0755]
src/index.html [new file with mode: 0755]
src/navigation.html [new file with mode: 0755]
src/placeholder.html [new file with mode: 0755]
src/projects.html [new file with mode: 0755]
src/styles/main_style.css [new file with mode: 0755]

diff --git a/src/about.html b/src/about.html
new file mode 100755 (executable)
index 0000000..432a914
--- /dev/null
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+       <head>
+               <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+               <meta charset="UTF-8">
+               <title>About</title>
+               <link rel="stylesheet" href="/styles/main_style.css">
+               <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
+       </head>
+       <body>
+               <iframe src="navigation.html" title="Navigation bar"></iframe>
+               <h1 id="firsth">
+                       About
+               </h1>
+               <p>
+               This site was created because I wanted to share my projects with people
+               who do not particularly like CLI git. I could have used GitHub but I
+               don't like Microsoft all that much and thought that creating this site
+               may be an experience.
+               </p>
+       </body>
+</html> 
diff --git a/src/errors/status-404.html b/src/errors/status-404.html
new file mode 100755 (executable)
index 0000000..1e30655
--- /dev/null
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+       <head>
+               <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+               <meta charset="UTF-8">
+               <title>Error 404</title>
+               <link rel="stylesheet" href="/styles/main_style.css">
+               <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
+       </head>
+       <body>
+               <iframe src="/navigation.html" title="Navigation bar"></iframe>
+               <h1 id="firsth">
+                       This page does not exist
+               </h1>
+               <p>
+               This page does not exist. Check that the web site address is spelled correctly.
+               </p>
+               <p>
+               You can also navigate using the navigation bar above or redirect to <a href="index.html">Home</a> page.
+               </p>
+       </body>
+</html> 
diff --git a/src/images/favicon.svg b/src/images/favicon.svg
new file mode 100755 (executable)
index 0000000..2f814be
--- /dev/null
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="5" height="6">
+       <polygon points="1,1 2,1 2,4 1,5" style="fill:#5CDC1C;" />
+       <polygon points="2,4 4,4 4,5 1,5" style="fill:#3268CD;" />
+</svg>
diff --git a/src/index.html b/src/index.html
new file mode 100755 (executable)
index 0000000..330afb8
--- /dev/null
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+       <head>
+               <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+               <meta charset="UTF-8">
+               <title>Home</title>
+               <link rel="stylesheet" href="/styles/main_style.css">
+               <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
+       </head>
+       <body>
+               <iframe src="navigation.html" title="Navigation bar"></iframe>
+               <h1 id="firsth">Welcome</h1>
+               <p>
+               Hello, I am Lukáš and I welcome you to this site which hosts my
+               projects as well as some information about myself.
+               </p>
+               <p><strong>This site is work in progress!</strong></p>
+       </body>
+</html> 
diff --git a/src/navigation.html b/src/navigation.html
new file mode 100755 (executable)
index 0000000..2217ba8
--- /dev/null
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+       <head>
+               <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+               <meta charset="UTF-8">
+               <title>Navigation bar</title>
+               <style>
+               nav a   {
+                       display:                        inline-block;
+                       color:                          white;
+                       text-align:                     center;
+                       padding-left:           5%;
+                       padding-right:          5%;
+                       padding-top:            10px;
+                       padding-bottom:         10px;
+                       text-decoration:        none;
+               }
+               nav a:link      {
+                       color:                          white;
+                       text-decoration:        none;
+               }
+               nav a:hover     {
+                       background-color:       #202020;
+                       text-decoration:        none;
+               }
+               nav a:visited   {
+                       color:                          white;
+                       text-decoration:        none;
+               }
+               nav a:active    {
+                       color:                          white;
+                       text-decoration:        none;
+               }
+               body    {
+                       margin: 0px;
+               }
+               </style>
+               <link rel="stylesheet" href="/styles/main_style.css">
+               <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
+       </head>
+       <body>
+               <img src="/images/favicon.svg" alt="Logo" style="height:39px;float:left">
+               <nav>
+                       <a href="index.html" target="_parent" title="Home page">Home</a>
+                       <a href="projects.html" target="_parent" title="Page with my projects">Projects</a>
+                       <a href="about.html" target="_parent" title="About this page">About</a>
+               </nav>
+       </body>
diff --git a/src/placeholder.html b/src/placeholder.html
new file mode 100755 (executable)
index 0000000..9d93727
--- /dev/null
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+       <head>
+               <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+               <meta charset="UTF-8">
+               <title>Placeholder</title>
+               <link rel="stylesheet" href="/styles/main_style.css">
+               <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
+       </head>
+       <body>
+               <iframe src="navigation.html" title="Navigation bar"></iframe>
+               <h1 id="firsth">
+                       Placeholder
+               </h1>
+               <p>
+               This is a placeholder page. 
+               </p>
+       </body>
+</html> 
+
diff --git a/src/projects.html b/src/projects.html
new file mode 100755 (executable)
index 0000000..d615e35
--- /dev/null
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+       <head>
+               <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+               <meta charset="UTF-8">
+               <title>Projects</title>
+               <link rel="stylesheet" href="/styles/main_style.css">
+               <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
+       </head>
+       <body>
+               <iframe src="navigation.html" title="Navigation bar"></iframe>
+               <h1 id="firsth">
+                       Projects
+               </h1>
+               <p>
+               This page will be an access point to my projects
+               for my convenience and for anyone to see.
+               </p>
+               <p><strong>WORK IN PROGRESS</strong></p>
+       </body>
+</html> 
diff --git a/src/styles/main_style.css b/src/styles/main_style.css
new file mode 100755 (executable)
index 0000000..46a449f
--- /dev/null
@@ -0,0 +1,35 @@
+body   {
+       background-color:       #383838;
+       color:                          #FFFFFF;
+}
+p      {
+       max-width:      1000px;
+}
+iframe {
+       border: none;
+       height: 45px;
+       width:  100%;
+}
+a:link {
+       color:                          #5CDC1C;
+       background-color:       transparent;
+       text-decoration:        underline;
+}
+a:hover        {
+       color:                          #5CDC1C;
+       background-color:       transparent;
+       text-decoration:        underline;
+}
+a:visited      {
+       color:                          #3268CD;
+       background-color:       transparent;
+       text-decoration:        underline;
+}
+a:active       {
+       color:                          yellow;
+       background-color:       transparent;
+       text-decoration:        underline;
+}
+#firsth        {
+       margin-top:     5px;
+}