Home Explore Help
Register Sign In
Tatsua
/
hackathon_web
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Первый коммит

Evgenui 2 years ago
parent
5b686a3981
commit
f9b46df034
6 changed files with 280 additions and 0 deletions
Split View Show Diff Stats
  1. 144 0
      site/core/css/index-style.css
  2. 0 0
      site/core/css/slider.min.css
  3. BIN
      site/core/images/logo.png
  4. 3 0
      site/core/js/script.js
  5. 7 0
      site/core/js/slider.min.js
  6. 126 0
      site/index.html

+ 144 - 0
site/core/css/index-style.css
View File 

@@ -0,0 +1,144 @@
 
+:root {
 
+    --fill-h: 100vh;
 
+}
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+a {
 
+    text-decoration:none;
 
+    color: black;
 
+    border: none;
 
+}
 
+li { list-style-type: none;}
 
+body {
 
+    width: 100vw;
 
+    min-height: var(--fill-h);
 
+}
 
+.container {
 
+    min-height: var(--fill-h);
 
+    display: flex;
 
+    flex-direction: column;
 
+}
 
+/* ####################################### */
 
+/* HEADER */
 
+header {
 
+    height: 128px;
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+}
 
+header>a img {
 
+    height: 64px;
 
+    width: 64px;
 
+}
 
+header>nav {
 
+    width: 100%;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+}
 
+header>nav>span>svg { cursor: pointer;}
 
+header>nav>span.search { position: relative;}
 
+header>nav>span.search>.searchInput {
 
+    position: absolute;
 
+    opacity: 0;
 
+    pointer-events: none;
 
+    transition: opacity .3s;
 
+}
 
+header>nav>span.search._active>.searchInput {
 
+    opacity: 1;
 
+    pointer-events: all;
 
+}
 
+header>nav>span.search>.searchInput>form {
 
+    display: flex;
 
+    gap: 5px;
 
+}
 
+header>nav>span.search>.searchInput>form>input[type="text"] {
 
+    width: 200px;
 
+    border-radius: 10px;
 
+    padding: 2px 5px;
 
+}
 
+header>nav>span.search>.searchInput>form>button {
 
+    border: none;
 
+    background: none;
 
+    cursor: pointer;
 
+}
 
+/* ####################################### */
 
+/* MAIN */
 
+main { flex: 1;}
 
+
 
+/* ####################################### */
 
+/* SLIDER */
 
+.itc-slider__wrapper {
 
+    overflow: hidden;
 
+}
 
+.itc-slider__item {
 
+    flex: 0 0 50%;
 
+    max-width: 50%;
 
+    height: 250px;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    color: rgba(255, 255, 255, 0.8);
 
+    font-size: 7rem;
 
+}
 
+.itc-slider__item:nth-child(1) {
 
+    background-color: #f44336;
 
+}
 
+.itc-slider__item:nth-child(2) {
 
+    background-color: #9c27b0;
 
+}
 
+.itc-slider__item:nth-child(3) {
 
+    background-color: #3f51b5;
 
+}
 
+.itc-slider__item:nth-child(4) {
 
+    background-color: #03a9f4;
 
+}
 
+.itc-slider__item:nth-child(5) {
 
+    background-color: #4caf50;
 
+}
 
+
 
+/* ####################################### */
 
+/* FOOTER */
 
+footer {
 
+    display: flex;
 
+}
 
+
 
+/* ####################################### */
 
+/* MEDIA REGUEST */
 
+@media (max-width: 575.98px) {
 
+    .container {
 
+        width: 100%;
 
+    }
 
+}
 
+@media (min-width: 575.98px) and (max-width: 767.98px) {
 
+    .container {
 
+        width: 100%;
 
+    }
 
+}
 
+@media (min-width: 767.98px) and (max-width: 991.98px) {
 
+    .container {
 
+        width: 90%;
 
+        margin: 0 auto;
 
+    }
 
+}
 
+@media (min-width: 991.98px) and (max-width: 1199.98px) {
 
+    .container {
 
+        width: 80%;
 
+        margin: 0 auto;
 
+    }
 
+}
 
+@media (min-width: 1199.98px) and (max-width: 1399.98px) {
 
+    .container {
 
+        width: 80%;
 
+        margin: 0 auto;
 
+    }
 
+}
 
+@media (min-width: 1399.98px) {
 
+    .container {
 
+        width: 80%;
 
+        margin: 0 auto;
 
+    }
 
+}

File diff suppressed because it is too large
+ 0 - 0
site/core/css/slider.min.css


BIN
site/core/images/logo.png
View File


+ 3 - 0
site/core/js/script.js
View File 

@@ -0,0 +1,3 @@
 
+function showSearchInput() {
 
+    document.getElementById('search').classList.toggle('_active');
 
+}

File diff suppressed because it is too large
+ 7 - 0
site/core/js/slider.min.js


+ 126 - 0
site/index.html
View File 

@@ -0,0 +1,126 @@
 
+<!DOCTYPE html>
 
+<html lang="ru">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link rel="stylesheet" href="core/css/index-style.css">
 
+    <title>КТК</title>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <header>
 
+            <a href="#">
 
+                <picture>
 
+                    <img src="./core/images/logo.png" alt="Логотип">
 
+                </picture>
 
+            </a>
 
+            <ul>
 
+                <li><a href="#">Версия для слабовидящих</a></li>
 
+                <li>Телефон: (39161) 2-39-52</li>
 
+                <li>Почта: kansk-ktt@mail.ru</li>
 
+            </ul>
 
+            <nav>
 
+                <span class="search" id="search">
 
+                    <svg version="1.1" id="btnSearch" onclick="showSearchInput()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
+                            width="36px" height="36px" viewBox="0 0 485.213 485.213" style="enable-background:new 0 0 485.213 485.213;"
 
+                            xml:space="preserve">
 
+                        <g>
 
+                            <g>
 
+                                <path d="M471.882,407.567L360.567,296.243c-16.586,25.795-38.536,47.734-64.331,64.321l111.324,111.324
 
+                                    c17.772,17.768,46.587,17.768,64.321,0C489.654,454.149,489.654,425.334,471.882,407.567z"/>
 
+                                <path d="M363.909,181.955C363.909,81.473,282.44,0,181.956,0C81.474,0,0.001,81.473,0.001,181.955s81.473,181.951,181.955,181.951
 
+                                    C282.44,363.906,363.909,282.437,363.909,181.955z M181.956,318.416c-75.252,0-136.465-61.208-136.465-136.46
 
+                                    c0-75.252,61.213-136.465,136.465-136.465c75.25,0,136.468,61.213,136.468,136.465
 
+                                    C318.424,257.208,257.206,318.416,181.956,318.416z"/>
 
+                                <path d="M75.817,181.955h30.322c0-41.803,34.014-75.814,75.816-75.814V75.816C123.438,75.816,75.817,123.437,75.817,181.955z"/>
 
+                            </g>
 
+                        </g>
 
+                    </svg>
 
+                    <div class="searchInput">
 
+                        <form action="#" method="post">
 
+                            <input type="text" name="search" placeholder="Что искать?">
 
+                            <button type="submit">
 
+                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36px" height="36px" viewBox="0 0 485.213 485.213" style="enable-background:new 0 0 485.213 485.213;" xml:space="preserve">
 
+                                    <g>
 
+                                        <g>
 
+                                            <path d="M471.882,407.567L360.567,296.243c-16.586,25.795-38.536,47.734-64.331,64.321l111.324,111.324
 
+                                                c17.772,17.768,46.587,17.768,64.321,0C489.654,454.149,489.654,425.334,471.882,407.567z"/>
 
+                                            <path d="M363.909,181.955C363.909,81.473,282.44,0,181.956,0C81.474,0,0.001,81.473,0.001,181.955s81.473,181.951,181.955,181.951
 
+                                                C282.44,363.906,363.909,282.437,363.909,181.955z M181.956,318.416c-75.252,0-136.465-61.208-136.465-136.46
 
+                                                c0-75.252,61.213-136.465,136.465-136.465c75.25,0,136.468,61.213,136.468,136.465
 
+                                                C318.424,257.208,257.206,318.416,181.956,318.416z"/>
 
+                                            <path d="M75.817,181.955h30.322c0-41.803,34.014-75.814,75.816-75.814V75.816C123.438,75.816,75.817,123.437,75.817,181.955z"/>
 
+                                        </g>
 
+                                    </g>
 
+                                </svg>
 
+                            </button>
 
+                        </form>
 
+                    </div>
 
+                </span>
 
+                <span>
 
+                    <a href="#">Сведение об образовательной организации</a>
 
+                </span>
 
+                <span>
 
+                    <a href="#">Абитуриентам</a>
 
+                </span>
 
+                <span>
 
+                    <a href="#">Студентам/Родителям</a>
 
+                </span>
 
+                <span>
 
+                    <a href="#">Жизнь колледжа</a>
 
+                </span>
 
+                <span>
 
+                    <a href="#">Новости</a>
 
+                </span>
 
+            </nav>
 
+        </header>
 
+        <main>
 
+            <section class="slider">
 
+                <div class="itc-slider" data-autoplay="true" data-interval="7000" data-loop="true" data-slider="itc-slider">
 
+                    <div class="itc-slider__wrapper">
 
+                        <div class="itc-slider__items">
 
+                            <div class="itc-slider__item">
 
+                                <!-- Контент 1 слайда -->
 
+                                1
 
+                            </div>
 
+                            <div class="itc-slider__item">
 
+                                <!-- Контент 2 слайда -->
 
+                                2
 
+                            </div>
 
+                            <div class="itc-slider__item">
 
+                                <!-- Контент 3 слайда -->
 
+                                3
 
+                            </div>
 
+                            <div class="itc-slider__item">
 
+                                <!-- Контент 4 слайда -->
 
+                                4
 
+                            </div>
 
+                            <div class="itc-slider__item">
 
+                                <!-- Контент 5 слайда -->
 
+                                5
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <button class="itc-slider__btn itc-slider__btn_prev"></button>
 
+                    <button class="itc-slider__btn itc-slider__btn_next"></button>
 
+                    <ol class="itc-slider__indicators">
 
+                      <li class="itc-slider__indicator" data-slide-to="0"></li>
 
+                      <li class="itc-slider__indicator" data-slide-to="1"></li>
 
+                      <li class="itc-slider__indicator" data-slide-to="2"></li>
 
+                      <li class="itc-slider__indicator" data-slide-to="3"></li>
 
+                      <li class="itc-slider__indicator" data-slide-to="4"></li>
 
+                    </ol>
 
+                </div>
 
+            </section>
 
+            <section class="important"></section>
 
+            <section class="news"></section>
 
+            <section class="gallery"></section>
 
+        </main>
 
+        <footer>
 
+            footer
 
+        </footer>
 
+    </div>
 
+    <script src="./core/js/script.js"></script>
 
+</body>
 
+</html>

Some files were not shown because too many files changed in this diff