Initial commit. Color scheme. Navbar.

This commit is contained in:
2025-09-11 14:15:40 +03:00
commit 0ab281e96d
8 changed files with 169 additions and 0 deletions

3
.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
.DS_Store
**/.DS_Store
*.zip

BIN
images/website-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

24
index.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Головна » Веб-програмування ПР№1</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="nav-links">
<a href="/" class="nav-logo"><img src="/images/website-logo.png" alt="Логотип компанії"></a>
<a href="/pages/gallery.html">Галерея</a>
<a href="/pages/articles.html">Статті</a>
<a href="/pages/contacts.html">Контакти</a>
<a href="/pages/about.html">Про нас</a>
</div>
</nav>
<!-- Content -->
</body>
</html>

21
pages/about.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Про нас » Веб-програмування ПР№1</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="nav-links">
<a href="/" class="nav-logo"><img src="/images/website-logo.png" alt="Логотип компанії"></a>
<a href="/pages/gallery.html">Галерея</a>
<a href="/pages/articles.html">Статті</a>
<a href="/pages/contacts.html">Контакти</a>
<a href="/pages/about.html"><u>Про нас</u></a>
</div>
</nav>
</body>
</html>

21
pages/articles.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Статті » Веб-програмування ПР№1</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="nav-links">
<a href="/" class="nav-logo"><img src="/images/website-logo.png" alt="Логотип компанії"></a>
<a href="/pages/gallery.html">Галерея</a>
<a href="/pages/articles.html"><u>Статті</u></a>
<a href="/pages/contacts.html">Контакти</a>
<a href="/pages/about.html">Про нас</a>
</div>
</nav>
</body>
</html>

21
pages/contacts.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Контакти » Веб-програмування ПР№1</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="nav-links">
<a href="/" class="nav-logo"><img src="/images/website-logo.png" alt="Логотип компанії"></a>
<a href="/pages/gallery.html">Галерея</a>
<a href="/pages/articles.html">Статті</a>
<a href="/pages/contacts.html"><u>Контакти</u></a>
<a href="/pages/about.html">Про нас</a>
</div>
</nav>
</body>
</html>

21
pages/gallery.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Галерея » Веб-програмування ПР№1</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="nav-links">
<a href="/" class="nav-logo"><img src="/images/website-logo.png" alt="Логотип компанії"></a>
<a href="/pages/gallery.html"><u>Галерея</u></a>
<a href="/pages/articles.html">Статті</a>
<a href="/pages/contacts.html">Контакти</a>
<a href="/pages/about.html">Про нас</a>
</div>
</nav>
</body>
</html>

58
style.css Normal file
View File

@@ -0,0 +1,58 @@
* {
box-sizing: border-box;
}
:root {
--background: #070F2B;
--primary: #9290C3;
--secondary: #535C91;
--highlight: #1B1A55;
}
body {
background-color: var(--background);
color: var(--primary);
margin: 0;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
/* Navbar */
nav {
/* display: flex; */
/* flex-direction: row; */
border-radius: 1rem;
background-color: var(--highlight);
margin: 1rem;
padding: 0.5rem;
}
.nav-links {
display: flex;
justify-content: center;
align-items: center;
}
.nav-links > a {
border-radius: 0.75rem;
padding: 0.25rem 0.5rem;
color: var(--primarxy);
text-decoration: none;
font-size: large;
}
.nav-links > a:hover {
background-color: var(--secondary);
}
.nav-links:last-child {
padding-right: 0.75rem;
}
.nav-logo {
margin-right: auto;
}
.nav-logo > img {
height: 2.5rem;
}