diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 00000000..adf1cb00 --- /dev/null +++ b/assets/css/style.css @@ -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%; +} \ No newline at end of file diff --git a/assets/img/Discord-Logo.png b/assets/img/Discord-Logo.png new file mode 100644 index 00000000..78999fea Binary files /dev/null and b/assets/img/Discord-Logo.png differ diff --git a/assets/img/logo.png b/assets/img/logo.png new file mode 100644 index 00000000..c2dc5e80 Binary files /dev/null and b/assets/img/logo.png differ diff --git a/assets/img/mail.png b/assets/img/mail.png new file mode 100644 index 00000000..bfce86be Binary files /dev/null and b/assets/img/mail.png differ diff --git a/assets/img/youtube.png b/assets/img/youtube.png new file mode 100644 index 00000000..3025d7d0 Binary files /dev/null and b/assets/img/youtube.png differ diff --git a/assets/js/mobile.js b/assets/js/mobile.js new file mode 100644 index 00000000..34bf0766 --- /dev/null +++ b/assets/js/mobile.js @@ -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"); +}); diff --git a/index.html b/index.html index 8b4be937..835cd154 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,89 @@ - - - - - - - reValuate + + + + Navbar + + + + + + +
+ + + Влез! + -
  • - About -
    - User - Balance +

    Меню

    +
    • +
    + × +
    + Класация + За нас + Влез! + + + + + +
    - - - - - + +
    +

    reValuate

    +

    Остават ни още:
    123232 reVal точки

    +
    +
    +
    +

    Нашата цел и основни дейности


    +

    + Основната цел на проекта е запознаване с ползите от рециклирането на учениците и подтикването им да започнат да събират разделно боклук. + Това е сайт, в който може да се качват видеа и снимки как ученици изхвърлят разделно боклуци.

    За всеки материал получават конкретен брой точки (ел.валута), която обменят в училище за награди. + За една снимка получават 2 точки, а за едно видео 3 точки. +

    +

    +

    Защо да участвам?

    +

    +

    + + + +
    +
    +
    +

    Имате въпроси?

    Свържете се с нас!


    +

    + + + +

    +
    + + + \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 92506ed5..00000000 --- a/style.css +++ /dev/null @@ -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; - } \ No newline at end of file