Небольшие правки структуры. Добавлена анимация смены страниц.

assets/css/style.css

@@ -114,6 +114,9 @@ header > .header-org-name > .org-caption {
   font-size: 35px;
   font-weight: 700;
 }
+header > .header-org-name > .org-caption > span {
+    color: black;
+}
 
 header > .header-org-name > .org-caption-by {
   font-size: 20px;
@@ -122,6 +125,29 @@ header > .header-org-name > .org-caption-by {
 header {
     flex-shrink: 0;
 }
+
+.navbar {
+    background-color: #ffffff;
+	box-shadow: inset 0 0 16px #f0f0f0;
+	border-radius: 10px;
+	padding: 5px;
+	margin-bottom: 15px;
+}
+nav {
+    display: flex;
+    justify-content: space-between;
+    width: 50%;
+    margin: auto;
+}
+nav > a {
+	text-decoration: none;
+	color: #515151;
+	font-size: 18px;
+}
+nav > a:hover {
+    color: #e91e63;
+}
+
 main {
     background-color: white;
 	height: 100%;
@@ -129,7 +155,6 @@ main {
 	position: relative;
 	border-radius: 20px;
 	box-shadow: 0 0 16px #e8e8e8;
-	margin-top: 10px;
 }
 footer {
     height: 40px;
@@ -171,11 +196,36 @@ p {
 	flex-direction: row;
 	justify-content: center;
     align-items: center;
+    background-color: white;
 }
 .page.active {
     z-index: 10;
     display: flex;
 }
+.page.active.left {
+    z-index: 11;
+    left: -100%;
+    right: 100%;
+    transition: left 400ms linear, right 400ms linear;
+}
+.page.active.right {
+    z-index: 11;
+    left: 100%;
+    right: -100%;
+    transition: left 400ms linear, right 400ms linear;
+}
+.page.active.up {
+    z-index: 11;
+    top: -100%;
+    bottom: 100%;
+    transition: top 400ms linear, bottom 400ms linear;
+}
+.page.active.down {
+    z-index: 11;
+    top: 100%;
+    bottom: -100%;
+    transition: top 400ms linear, bottom 400ms linear;
+}
 
 .page > * {
 	width: 40vh;
@@ -210,7 +260,7 @@ p {
     transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
 }
 
-.dots {
+.page-dots {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -219,17 +269,17 @@ p {
     justify-content: center;
     z-index: 20;
 }
-.dots > div {
+.page-dots > div {
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background-color: rgba(33, 150, 243, 0.35);
     margin: 10px;
 }
-.dots > div.active {
+.page-dots > div.active {
     background-color: rgb(33, 150, 243);
 }
-.dots > div:hover:not(.active) {
+.page-dots > div:hover:not(.active) {
     background-color: rgba(33, 150, 243, 0.75);
     cursor: pointer;
 }

assets/js/script.js

@@ -1,16 +1,27 @@
-let dots = document.querySelectorAll(".dots > div");
+let dots = document.querySelectorAll(".page-dots > div");
+let randomSwipePage = ["left", "right", "up", "down"];
+let isSwipe = false;
 
 for (let d of dots) {
 	d.onclick = function (event) {
+		if (isSwipe) return;
 		if (this.dataset && this.dataset.page) {
+			isSwipe = true;
 			let switchPage = document.querySelector(this.dataset.page);
 			if (switchPage) {
 				if (!this.classList.contains("active") && !switchPage.classList.contains("active")) {
-					let active = document.querySelector(".dots > .active");
+					let active = document.querySelector(".page-dots > .active");
 					let activePage = document.querySelector(".page.active");
 					if (active && activePage) {
 						active.classList.remove("active");
-						activePage.classList.remove("active");
+
+						let arrow = randomSwipePage[Math.round(Math.random() * 3)];
+
+						activePage.classList.add(arrow);
+						setTimeout(function () {
+							activePage.classList.remove("active", arrow);
+							isSwipe = false;
+						}, 400);
 					}
 				}
 				this.classList.add("active");

html/header.html

@@ -8,7 +8,7 @@
     </div>
     <div class="header-org-name">
         <div class="org-type">Государственное бюджетное профессиональное образовательное учреждение</div>
-        <div class="org-caption">Курганский технологический колледж</div>
+        <div class="org-caption"><span>К</span>урганский <span>Т</span>ехнологический <span>К</span>олледж</div>
         <div class="org-caption-by">имени Героя Советского Союза Н.Я. Анфиногенова</div>
     </div>
 </header>

html/index.html

@@ -17,13 +17,15 @@
 <body>
 	{{template "header" .}}
 
-	<nav>
-		<a href="/page/page1">Page 1</a>
-		<a href="/page/page2">Page 2</a>
-		<a href="/page/page3">Page 3</a>
-		<a href="/page/page4">Page 4</a>
-		<a href="/page/page5">Page 5</a>
-	</nav>
+	<div class="navbar">
+		<nav>
+			<a href="/page/page1">Page 1</a>
+			<a href="/page/page2">Page 2</a>
+			<a href="/page/page3">Page 3</a>
+			<a href="/page/page4">Page 4</a>
+			<a href="/page/page5">Page 5</a>
+		</nav>
+	</div>
 
 	<main>
 
@@ -42,82 +44,37 @@
 
 		<!-- Пример вставки выбранной страницы -->
 
-		{{if eq .Page "page1"}}
+		{{if eq .Page "page1+"}}
 		{{template "page1"}}
 		{{end}}
-		{{if eq .Page "page2"}}
+		{{if eq .Page "page2+"}}
 		{{template "page2"}}
 		{{end}}
-		{{if eq .Page "page3"}}
+		{{if eq .Page "page3+"}}
 		{{template "page3"}}
 		{{end}}
-		{{if eq .Page "page4"}}
+		{{if eq .Page "page4+"}}
 		{{template "page4"}}
 		{{end}}
-		{{if eq .Page "page5"}}
+		{{if eq .Page "page5+"}}
 		{{template "page5"}}
 		{{end}}
 
-		<!-- <div id="Page1" class="page active">
-			<img src="/images/1.png">
-			<div>
-				<h2>Lorem, ipsum dolor</h2>
-				<p>
-					Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis dignissimos dolorem debitis atque
-					ratione?
-				</p>
-				<button>Перейти</button>
-			</div>
-		</div>
-		<div id="Page2" class="page">
-			<img src="/images/2.png">
-			<div>
-				<h2>Lorem ipsum dolor sit.</h2>
-				<p>
-					Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores!
-				</p>
-				<button>Перейти</button>
-			</div>
-		</div>
-		<div id="Page3" class="page">
-			<img src="/images/3.png">
-			<div>
-				<h2>Lorem ipsum dolor sit amet.</h2>
-				<p>
-					Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore debitis dolores dolor voluptatibus
-					et.
-				</p>
-				<button>Перейти</button>
-			</div>
-		</div>
-		<div id="Page4" class="page">
-			<img src="/images/4.png">
-			<div>
-				<h2>Lorem, ipsum dolor</h2>
-				<p>
-					Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, accusantium doloremque.
-				</p>
-				<button>Перейти</button>
-			</div>
-		</div>
-		<div id="Page5" class="page">
-			<img src="/images/5.png">
-			<div>
-				<h2>Lorem ipsum dolor sit amet.</h2>
-				<p>
-					Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque sequi impedit quisquam!
-				</p>
-				<button>Перейти</button>
-			</div>
-		</div> -->
+		<!-- Пример переключение страниц без перезагрузки страницы с помощью JS -->
 
-		<!-- <div class="dots">
+		{{template "page1"}}
+		{{template "page2"}}
+		{{template "page3"}}
+		{{template "page4"}}
+		{{template "page5"}}
+
+		<div class="page-dots">
 			<div data-page="#Page1" class="active"></div>
 			<div data-page="#Page2"></div>
 			<div data-page="#Page3"></div>
 			<div data-page="#Page4"></div>
 			<div data-page="#Page5"></div>
-		</div> -->
+		</div>
 
 	</main>
 

html/page2.html

@@ -1,5 +1,5 @@
 {{define "page2"}}
-<div id="Page2" class="page active">
+<div id="Page2" class="page">
     <img src="/images/2.png">
     <div>
         <h2>Lorem ipsum dolor sit.</h2>

html/page3.html

@@ -1,5 +1,5 @@
 {{define "page3"}}
-<div id="Page3" class="page active">
+<div id="Page3" class="page">
     <img src="/images/3.png">
     <div>
         <h2>Lorem ipsum dolor sit amet.</h2>

html/page4.html

@@ -1,5 +1,5 @@
 {{define "page4"}}
-<div id="Page4" class="page active">
+<div id="Page4" class="page">
     <img src="/images/4.png">
     <div>
         <h2>Lorem, ipsum dolor</h2>

html/page5.html

@@ -1,5 +1,5 @@
 {{define "page5"}}
-<div id="Page5" class="page active">
+<div id="Page5" class="page">
     <img src="/images/5.png">
     <div>
         <h2>Lorem ipsum dolor sit amet.</h2>