created the home page
time to implement...
This commit is contained in:
Yamozha
parent
31447796c9
commit
df61af750f
192
assets/css/style.css
Normal file
192
assets/css/style.css
Normal file
@ -0,0 +1,192 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#page-wrap {
|
||||
max-width: 1200px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
-moz-box-shadow: 0 0 20px #469330;
|
||||
-webkit-box-shadow: 0 0 20px #469330;
|
||||
box-shadow: 0 0 20px #469330;
|
||||
text-align: center;
|
||||
border-radius: 25px;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30px 10%;
|
||||
background-color: #469330;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.logo {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav__links a,
|
||||
.cta,
|
||||
.overlay__content a {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size:30px;
|
||||
color: #edf0f1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav__links {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav__links li {
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.nav__links li a {
|
||||
transition: color 0.3s ease 0s;
|
||||
}
|
||||
|
||||
.nav__links li a:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.cta {
|
||||
padding: 9px 25px;
|
||||
color: #469330;
|
||||
background-color: white;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease 0s;
|
||||
}
|
||||
|
||||
.cta:hover {
|
||||
color: white;
|
||||
background-color: darkgreen;
|
||||
}
|
||||
|
||||
/* Mobile Nav */
|
||||
|
||||
.menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #469330;
|
||||
overflow-x: hidden;
|
||||
transition: width 0.5s ease 0s;
|
||||
}
|
||||
|
||||
.overlay--active {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.overlay__content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.overlay a {
|
||||
padding: 15px;
|
||||
font-size: 36px;
|
||||
display: block;
|
||||
transition: color 0.3s ease 0s;
|
||||
}
|
||||
|
||||
.overlay a:hover,
|
||||
.overlay a:focus {
|
||||
color: darkgreen;
|
||||
}
|
||||
.overlay .close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 45px;
|
||||
font-size: 60px;
|
||||
color: #edf0f1;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 450px) {
|
||||
.overlay a {
|
||||
font-size: 20px;
|
||||
}
|
||||
.overlay .close {
|
||||
font-size: 40px;
|
||||
top: 15px;
|
||||
right: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
.nav__links,
|
||||
.cta {
|
||||
display: none;
|
||||
}
|
||||
.menu {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
html{
|
||||
background: linear-gradient(180deg, rgba(70,147,48,1) 33%, rgba(109,126,107,1) 100%) no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
p {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
|
||||
margin: 0 0 30px 0;
|
||||
}
|
||||
|
||||
h1.heading{
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
|
||||
}
|
||||
|
||||
ul.emoji{
|
||||
list-style-type: "♻️";
|
||||
}
|
||||
|
||||
.question{
|
||||
color: gray;
|
||||
font-size:20px;
|
||||
}
|
||||
|
||||
ul.nothing{
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a.footer{
|
||||
/* background:radial-gradient(circle, rgba(0,159,12,1) 0%, rgba(8,96,0,1) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent; */
|
||||
color:lightgreen;
|
||||
}
|
||||
footer{
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
left:50%;
|
||||
}
|
||||
BIN
assets/img/Discord-Logo.png
Normal file
BIN
assets/img/Discord-Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
assets/img/logo.png
Normal file
BIN
assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
assets/img/mail.png
Normal file
BIN
assets/img/mail.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
assets/img/youtube.png
Normal file
BIN
assets/img/youtube.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
12
assets/js/mobile.js
Normal file
12
assets/js/mobile.js
Normal file
@ -0,0 +1,12 @@
|
||||
const doc = document;
|
||||
const menuOpen = doc.querySelector(".menu");
|
||||
const menuClose = doc.querySelector(".close");
|
||||
const overlay = doc.querySelector(".overlay");
|
||||
|
||||
menuOpen.addEventListener("click", () => {
|
||||
overlay.classList.add("overlay--active");
|
||||
});
|
||||
|
||||
menuClose.addEventListener("click", () => {
|
||||
overlay.classList.remove("overlay--active");
|
||||
});
|
||||
107
index.html
107
index.html
@ -1,30 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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="style.css">
|
||||
<title>reValuate</title>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Navbar</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a class="logo" href="/"><img src="assets/img/logo.png" style="max-height: 100px;" alt="logo"></a>
|
||||
<nav>
|
||||
<ul class="nav__links">
|
||||
<li><a href="#">Класация</a></li>
|
||||
<li><a href="#">За нас</a></li>
|
||||
<!-- if logged in: -->
|
||||
<!-- <li><a href="#">Качи</a></li> -->
|
||||
<!-- <li><a href="#">Прогрес</a></li> -->
|
||||
<!-- <li><a href="#">Акаунт</a></li> -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class="navbar">
|
||||
<div class="navbar">
|
||||
<li><a href="#home">Home</a></li>
|
||||
<li><a href="#news">News</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a class="cta" href="#">Влез!</a>
|
||||
<!-- if logged in log out -->
|
||||
|
||||
<li style="float:right" class="dropdown">
|
||||
<a href="javascript:void(0)" class="dropbtn">About</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="#User">User</a>
|
||||
<a href="#Balance">Balance</a>
|
||||
<p class="menu cta">Меню</p>
|
||||
</header>
|
||||
<div class="overlay">
|
||||
<a class="close">×</a>
|
||||
<div class="overlay__content">
|
||||
<a href="#">Класация</a>
|
||||
<a href="#">За нас</a>
|
||||
<a href="#">Влез!</a>
|
||||
<!-- if logged in: -->
|
||||
<!-- <li><a href="#">Качи</a></li> -->
|
||||
<!-- <li><a href="#">Прогрес</a></li> -->
|
||||
<!-- <li><a href="#">Акаунт</a></li> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</div>
|
||||
</ul>
|
||||
</body>
|
||||
<!-- navbar end -->
|
||||
<div id="page-wrap">
|
||||
<h1 class="heading">reValuate</h1>
|
||||
<h3>Остават ни още:<br>123232 reVal точки</h3>
|
||||
<br>
|
||||
<hr>
|
||||
<br>
|
||||
<h1>Нашата цел и основни дейности</h1><br>
|
||||
<p>
|
||||
Основната цел на проекта е запознаване с ползите от рециклирането на учениците и подтикването им да започнат да събират разделно боклук.
|
||||
Това е сайт, в който може да се качват видеа и снимки как ученици изхвърлят разделно боклуци.<br><br> За всеки материал получават конкретен брой точки (ел.валута), която обменят в училище за награди.
|
||||
За една снимка получават 2 точки, а за едно видео 3 точки.
|
||||
</p>
|
||||
<hr><br>
|
||||
<h1>Защо да участвам?</h1>
|
||||
<p>
|
||||
<ul class="emoji" style="text-align: left; padding-left: 5%; margin: auto;">
|
||||
<li> Награден фонд за участие в проекта.</li><br>
|
||||
<li> Наградите се разпределят спрямо натрупаните точки в сайта.</li><br>
|
||||
<li> Сертификат за участие в извънкласни дейности от името на училището при натрупани минимум 30 точки.</li><br>
|
||||
</p>
|
||||
</ul>
|
||||
|
||||
<!-- <br>
|
||||
<hr>
|
||||
<br>
|
||||
<h1>Често задавани въпроси</h1><br>
|
||||
<ul class="nothing" style="text-align: left; padding-left: 5%; margin: auto;">
|
||||
<li class="question"></li>
|
||||
<p>test</p>
|
||||
</ul> -->
|
||||
|
||||
<br>
|
||||
<hr>
|
||||
<br>
|
||||
<h1>Имате въпроси?<br><h2>Свържете се с нас!</h2></h1><br>
|
||||
<p>
|
||||
<a href="https://discord.gg/twDtbKeVXV"><img src="assets/img/Discord-Logo.png" style="max-width:100px;"></a>
|
||||
<a href="mailto://boyan+revaluate@bobokara.com"><img src="assets/img/mail.png" style="max-width:100px;"></a>
|
||||
<a href="https://www.youtube.com/channel/UCIWblGtjXAxwbTMUbhZ_PDQ"><img src="assets/img/youtube.png" style="max-width:100px;" ></a>
|
||||
</p>
|
||||
</div>
|
||||
<script type="text/javascript" src="assets/js/mobile.js"></script>
|
||||
<footer>Frontend, backend and planning:<br> <a class="footer" href="https://yamozha.xyz">Boyan</a></footer>
|
||||
</body>
|
||||
</html>
|
||||
75
style.css
75
style.css
@ -1,75 +0,0 @@
|
||||
body{
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.navbar {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #469330 ;
|
||||
}
|
||||
|
||||
ul.navbar li {float: left;}
|
||||
|
||||
ul.navbar li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.navbar li a:hover:not(.active) {background-color: #111;}
|
||||
|
||||
ul.navbar li a.active {background-color: #92ed77 ;}
|
||||
|
||||
ul.navbar li.right {float: right;}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
ul.navbar li.right,
|
||||
ul.navbar li {float: none;}
|
||||
}
|
||||
|
||||
|
||||
li a, .dropbtn {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li a:hover, .dropdown:hover .dropbtn {
|
||||
background-color: #469330 ;
|
||||
}
|
||||
|
||||
li.dropdown {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
position: absolute;
|
||||
background-color: #469330 ;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {background-color: #f1f1f1;}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
Reference in New Issue
Block a user