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 @@ - -
- - - - -