diff --git a/Venith-MC/media/bg.png b/Venith-MC/media/bg.png new file mode 100644 index 0000000..6a869e5 Binary files /dev/null and b/Venith-MC/media/bg.png differ diff --git a/Venith-MC/media/downarrow.png b/Venith-MC/media/downarrow.png new file mode 100644 index 0000000..e4f254a Binary files /dev/null and b/Venith-MC/media/downarrow.png differ diff --git a/Venith-MC/media/favicon.png b/Venith-MC/media/favicon.png new file mode 100644 index 0000000..654addb Binary files /dev/null and b/Venith-MC/media/favicon.png differ diff --git a/Venith-MC/media/logo.png b/Venith-MC/media/logo.png new file mode 100644 index 0000000..6b553a4 Binary files /dev/null and b/Venith-MC/media/logo.png differ diff --git a/Venith-MC/media/logo_small.png b/Venith-MC/media/logo_small.png new file mode 100644 index 0000000..2711e08 Binary files /dev/null and b/Venith-MC/media/logo_small.png differ diff --git a/Venith-MC/media/member_placeholder.webp b/Venith-MC/media/member_placeholder.webp new file mode 100644 index 0000000..acb6ac5 Binary files /dev/null and b/Venith-MC/media/member_placeholder.webp differ diff --git a/Venith-MC/media/placeholder.png b/Venith-MC/media/placeholder.png new file mode 100644 index 0000000..aa94e7f Binary files /dev/null and b/Venith-MC/media/placeholder.png differ diff --git a/Venith-MC/media/style.css b/Venith-MC/media/style.css new file mode 100644 index 0000000..762dddd --- /dev/null +++ b/Venith-MC/media/style.css @@ -0,0 +1,746 @@ +:root { + --nice-padding: 6rem; + --roundness: 0.75rem; + --accent1: #02db02; + --accent2: #05b305; + --accent2_transp: #05b30555; + --background1: #212529; + --background2: #16191b; + + + color-scheme: dark; +} + +span { + font-family: 'Space Grotesk', sans-serif; +} + +body { + font-family:'Space Grotesk', sans-serif; + background-color: var(--background1); + color: white; + margin:0px; +} + + +#more { + padding-top:5rem; + margin-top: -5rem; +} +#discord { + padding-top:5rem; + margin-top: -5rem; +} +#about { + padding-top:5rem; + margin-top: -5rem; +} +#join { + padding-top:5rem; + margin-top: -5rem; +} + + +.banner { + display: flex; + position: fixed; + background-color: #ff000099; + width: 100%; + height: 3rem; + z-index: 10; + font-size: 2rem; + font-weight: 600; + justify-content: center; + backdrop-filter: blur(15px); + align-content: center; + padding-top: .4rem; +} + + + +.headline { + margin-top: 2rem; + color: #fff; + font-size:3rem; + text-align: center; + font-weight: 600; +} + +.desktop_navbar { + position:fixed; + display: flex; + height: 4rem; + width: 100%; + top: 0; + right: 0; + left: 0; + bottom:0; + background-color: #00000022; + backdrop-filter: blur(15px); + z-index: 5; + align-items: center; + justify-content: center; + flex-direction: row; +} + +.desktop_navbar_logo_img { + width: 5rem; + padding-left: 2rem; + padding-right: 1rem; +} + +.desktop_navbar_link { + font-size: 1.2rem; + padding: .8rem; + transition: all .5s; + text-decoration: none; + color: #fff; + text-align: center; +} +.desktop_navbar_link:hover { + color: var(--accent1); +} + +.desktop_navbar_link2 { + padding:.5rem; + color: #fff; + text-decoration: none; + text-align: center; +} +.desktop_navbar_link2_div { + font-size: 1.2rem; + padding: .8rem; + transition: all .5s; + margin-left: auto; + margin-right: 2rem; + font-weight: 700; + border: solid 1px var(--accent1); + border-radius: var(--roundness); + text-align: center; +} +.desktop_navbar_link2_div:hover { + border: solid 1px var(--accent2); + background-color: var(--accent2); + transform: scale(1.05) +} + +.mobile_navbar { + display: none; + overflow: hidden; + background-color: #00000033; + backdrop-filter: blur(15px); + position: fixed; + width: 100%; + z-index: 5; + flex-direction: row; + min-height: 53px; +} + +.mobile_navbar_logo_img { + position: absolute; + display: block; + height: 42px; + padding-left: .5rem; + top: 0; + left: 0; + padding-top: 3.5px; +} + +.mobile_navbar #mobile_navbar_links { + display: none; + margin-top: 53px; + flex-direction: column; + align-items: center; + width: 100%; + background-color: #00000011; +} + +.mobile_navbar_link { + padding:.5rem; +} + +.mobile_navbar a { + color: white; + text-decoration: none; + font-size: 17px; + display: block; +} + +.mobile_navbar .icon { + background-color: #00000044; + display: block; + position: absolute; + right: 0; + top: 0; + padding: 16px; +} + +.mobile_navbar_logo_img_a { + display: block; + background-color: #00000022; +} + + + +.mainflex { + display: flex; + align-items: center; + align-content: center; + justify-content: center; + flex-direction: column; +} + +.main1 { + padding-top: calc(var(--nice-padding) + 2rem); + display:flex; + width: 100%; + align-self: center; + flex-direction: column; + align-items: center; + align-content: center; + justify-content: center; + background: rgba(0, 0, 0, .5) url('https://imgur.com/cGMLytH.png'); + background-blend-mode: darken; + background-repeat: no-repeat; + background-position: 50% 50%; +} + +.main1_logo_a { + margin-bottom: var(--nice-padding); + cursor: default; +} + +.main1_logo { + display: block; + align-self: center; + margin-left:auto; + margin-right: auto; + transition: all .5s; + max-width: 40rem; +} +.main1_logo:hover { + transform: scale(1.05) +} + +.main1_description { + text-align: center; + font-size:3rem; + margin-bottom: var(--nice-padding); + margin-left: 1rem; + margin-right: 1rem; +} + +.main1_actcent { + font-weight: 800; + color:var(--accent1); +} + +.main1_ipcopier { + padding: 1rem; + padding-left: 2rem; + padding-right: 2rem; + font-size: 2rem; + background-color: var(--accent2_transp); + border: 0px; + border-radius: var(--roundness); + color: white; + transition: all .5s; + cursor:pointer; + position: relative; +} + +.main1_ipcopier:hover { + background-color: var(--accent2); + transform: scale(1.05) +} + +.main1_ipcopier_text1 { + font-size:2rem; + font-weight: 800; +} + +.main1_ipcopier_text2 { + font-size:1.5rem; +} + +.main1_popup { + position: absolute; + left: 50%; + transform: translate(-50%, -0%); + text-align: center; + background-color: rgba(0, 175, 0, 0.1); + border:solid rgba(0, 175, 0, 1) 1px; + color: #fff; + border-radius: var(--roundness); + z-index: 9999; + padding-left: 1rem; + padding-right: 1rem; + margin-top: -10.5rem; +} + +.main1_downarrow { + opacity: 50%; + height: 1.5rem; + padding:2rem; + transition: all .5s; +} + +.main1_downarrow:hover { + opacity: 100%; + transform: scale(1.05) +} + +.main2 { + display: flex; + justify-content: center; + flex-direction: column; + align-content: center; + padding-bottom: 1rem; + background-color: var(--background2); + width: 100%; +} + + + +.main2_features_div { + padding-top: 2rem; + display:flex; + align-items: center; + justify-content: center; + flex-wrap:wrap; +} + +.main2_feature { + display: flex; + background-color: var(--background1); + height: 24rem; + width: 18rem; + margin: 1rem; + border-radius: var(--roundness); + transition: all .5s; + flex-direction: column; +} + +.main2_feature:hover { + background-color: #00000099; + transform: scale(1.05) +} + +@media (max-width: 1599px) { + .main2_features_div { + margin-left: 10rem; + margin-right: 10rem; + } + } +@media (max-width: 1279px) { + .main2_features_div { + margin-left: 0rem; + margin-right: 0rem; + } + } + + +.main2_feature_img { + width: 100%; + height: 50%; + object-fit: cover; + border-radius: var(--roundness); +} + +.main2_feature_headline { + margin-top: 1rem; + text-align: center; + font-size:1.5rem; + font-weight: 700; + margin-top: auto; +} + +.main2_feature_text { + margin:1rem; + text-align: center; + font-size:1.2rem; + margin-bottom: auto; +} + + +.main4 { + min-height: 10rem; + width:100%; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +.main4_dc_widget { + border-radius: var(--roundness); + border: 0; +} + +.main4_dc_div { + margin: 2rem; + display: flex; + flex-direction: row; + background-color: var(--background2); + border-radius: var(--roundness); + max-width: 48rem; +} + +.main4_dc_description_div { + display: flex; + flex-direction: column; +} + +.main4_dc_description_title { + margin: 2rem; + text-align: center; + font-size:1.5rem; + font-weight: 700; + +} + + +.main4_dc_description { + margin-left:1.5rem; + margin-right:1.5rem; + margin-bottom:1.5rem; + font-size:1.2rem; +} +.main4_dc_button_a{ + text-decoration: none; + color: #fff; + text-align: center; + border: solid var(--accent1) 1px; + border-radius: var(--roundness); + margin-top: auto; + margin-left: auto; + margin-right: auto; + margin-bottom: 1.5rem; + transition: all .5s; +} +.main4_dc_button_a:hover{ + border: solid 1px var(--accent2); + background-color: var(--accent2); + transform: scale(1.05) +} +.main4_dc_button { + padding:.5rem; + padding-left: 1.5rem; + padding-right: 1.5rem; +} + + + + +.main5 { + background-color: var(--background2); + min-height: 10rem; + width:100%; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +.main5_admin_div{ + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem 1rem .5rem 1rem; +} +.main5_admins_div{ + display: flex; + max-width: 46rem; + min-height: 18rem; + background-color: var(--background1); + border-radius: var(--roundness); + margin-top: 1rem; + margin-right: 1rem; + margin-left: 1rem; +} +.main5_admins_dev_type1 { + flex-direction:row; + padding-right: 2rem; +} +.main5_admins_dev_type2 { + flex-direction: row-reverse; + padding-left: 2rem; +} + +.main5_admins_img { + border-radius: var(--roundness); + max-width: 45%; + max-height: 100%; + align-self: center; +} +.main5_admins_description_div { + display: flex; + justify-content: center; + justify-self: center; + max-width: 60%; + padding-top: 2rem; + padding-bottom: 2rem; + flex-direction: column; + padding-left: 1rem; + padding-right: 1rem; + margin-left: auto; + margin-right: auto; +} +.main5_admins_description_rank { + text-align: center; + font-size:1.5rem; + font-weight: 700; + margin-bottom: .5rem; +} +.main5_admins_description_rank_owner { + color: #3498db; +} +.main5_admins_description_rank_admin { + color: #f82f2f; +} +.main5_admins_description_title { + text-align: center; + font-size:1.5rem; + font-weight: 700; + color: #fff; + text-decoration: none; + transition: all .5s; + margin-bottom: .5rem; +} +.main5_admins_description_title:hover { + color: var(--accent1); + transform: scale(1.05) +} + +.main5_admins_description { + margin-bottom: auto; + font-size:1.2rem; +} + + +.main5_supporter_div { + display: flex; + max-width: 825px; + justify-content: center; + align-items: center; + flex-direction:row; + flex-wrap: wrap; + margin-bottom: 1.5rem; +} + +.main5_supporters_div { + width: 23.5rem; + min-height: 16rem; + background-color: var(--background1); + border-radius: var(--roundness); + margin: .5rem; + display: flex; +} + +.main5_supporters_img { + border-radius: var(--roundness); + max-width: 25%; + max-height: 100%; + align-self: center; + margin: 1rem; +} +.main5_supporters_description_div { + display: flex; + justify-content: center; + width: 100%; + padding: 1rem 1.5rem 1rem 1rem; + flex-direction: column; +} +.main5_supporters_description_rank { + text-align: center; + font-size:1.2rem; + font-weight: 700; + margin-bottom: .5rem; +} +.main5_supporters_description_rank_supporter { + color: #00f8ff; +} +.main5_supporters_description_title { + text-align: center; + font-size:1.3rem; + font-weight: 700; + color: #fff; + text-decoration: none; + transition: all .5s; + margin-bottom: .5rem; +} +.main5_supporters_description_title:hover { + color: var(--accent1); + transform: scale(1.05) +} + +.main5_supporters_description { + font-size:1.2rem; + margin-bottom: auto; +} + + + + + +.main3 { + background-color: var(--background1); + min-height: 10rem; + width:100%; + display: flex; + justify-content: center; + flex-direction:column; +} + +.main3_join_div_div { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap-reverse; + margin: 1rem; +} + +.main3_join_div { + display: flex; + flex-direction: column; + width: 20rem; + height: 8rem; + background-color: var(--background2); + border-radius: var(--roundness); + margin: 1rem; + padding: 1rem; +} + +.main3_join_title { + text-align: center; + font-size:1.5rem; + font-weight: 700; + color: #fff; + text-decoration: none; + transition: all .5s; + margin-bottom: .5rem; +} + +.main3_join_content_div { + display: flex; + flex-direction: row; + background-color: var(--background1); + height: 100%; + border-radius: var(--roundness); + align-items: center; + justify-content: center; +} + +.main3_join_categories { + display: flex; + flex-direction: column; + text-align: right; + font-size:1.4rem; + line-height: 1.5; + border-right: 3px solid var(--background2); + padding-right: .75rem; +} +.main3_join_values { + display: flex; + flex-direction: column; + text-align: left; + font-size:1.4rem; + line-height: 1.5; + border-left: 3px solid var(--background2); + padding-left: .75rem; +} + + + + + + + +/* Copyright Text */ + +.copyright { + color: #ffffff99; + text-decoration: none; +} + +.copyright_div { + display: flex; + justify-content: center; + padding: 16px; + width:auto; + background-color: #000; +} + + + + +@media only screen and (max-width: 600px) { + .desktop_navbar{ + display:none; + } + .mobile_navbar{ + display:flex; + } + .headline { + font-size:1.9rem; + margin-right: 1rem; + margin-left: 1rem; + } + .main1_logo { + max-width: 16rem; + } + .main1_description { + font-size: 2.5rem; + margin-bottom: 2rem; + } + .main1_ipcopier { + display: none; + } + .main5_admins_img { + align-self: center; + padding-top: 1rem; + } + .main5_admins_div{ + flex-direction: column; + min-height: 0; + } + .main5_admins_description_div { + max-width: 100%; + padding: 2rem; + } + .main4_dc_div { + flex-direction: column; + } + .main4_dc_widget { + height: 20rem; + width: 100%; + } + .main3_join_div { + min-width: 20rem; + min-height: 9rem; + } + .main3_join_content_div { + padding:1rem; + } + .main5_admins_dev_type1 { + padding-right: 0; + } + .main5_admins_dev_type2 { + padding-left: 0; + } +} +@media only screen and (max-width: 360px) { + .main3_join_categories { + font-size:1rem; + } + .main3_join_values { + font-size:1rem; + } + .main3_join_div { + min-width: 10rem; + padding: .5rem; + } + .main3_join_div_div { + margin: .25rem; + } +}