scarlett/ITR-Website
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

initial (sorta) commit

Browse Source
This commit is contained in:
scarlett kadan
2023-08-28 09:35:53 -05:00
commit b74b4afe26
64 changed files with 44211 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/assets/stylesheets/about.scss Normal file
View File

@ -0,0 +1,143 @@
@font-face {
font-family: itrFont;
src: url(../font/LeagueSpartan-ExtraBold.ttf);
}
@font-face {
font-family: itrFontMedium;
src: url(../font/LeagueSpartan-Medium.ttf);
}
.about {
background-color: #232323;
width: 100%;
min-height: 100vh;
height: auto;
opacity: 100%;
overflow-x: hidden;
display: flex;
-webkit-animation: fade 0.9s ease-in;
-moz-animation: fade 0.9s ease-in;
-ms-animation: fade 0.9s ease-in;
-o-animation: fade 0.9s ease-in;
animation: fade 0.9s ease-in;
background: linear-gradient(#3b3b3b, #1a1a1a);
}
.about__content {
position: relative;
margin-top: 70px;
width: 100%;
height: auto;
overflow: hidden;
}
.about__content__main {
width: 100vw;
height: auto;
margin-top: 5vh;
display: flex;
justify-content: center;
align-items: center;
}
.about__content__main__container {
padding: 10px 10px 20px 10px;
border-radius: 10px;
background-color: rgb(66, 66, 66);
width: 80vw;
height: auto;
display: flex;
flex-direction: column;
transition: 0.3s;
cursor: default;
}
.about__content__main__container h1,
.about__content__blocks_block h1 {
color: white;
opacity: 100%;
font-size: 40px;
font-weight: bold;
font-family: "itrFont";
padding: 10px;
}
.about__content__main__container span,
.about__content__blocks_block span {
color: rgb(238, 238, 238);
opacity: 100%;
font-size: 20px;
font-family: "itrFontMedium";
padding: 10px;
line-height: 32px;
border-radius: 10px;
}
.about__content__blocks_block span {
margin-bottom: 30px;
}
.about__content__blocks {
margin-top: 6vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: auto;
margin-right: calc(-1 * (100vw - 100%));
}
.about__content__blocks_block {
position: relative;
border-radius: 10px;
background-color: rgb(66, 66, 66);
width: 25vw;
margin-left: 3vw;
margin-right: 3vw;
min-height: 38vh;
height: auto;
padding: 10px;
display: flex;
flex-direction: column;
transition: 0.3s;
cursor: pointer;
}
.about__content__blocks_block p {
position: absolute;
bottom: 0;
color: rgb(136, 136, 136);
opacity: 100%;
font-size: 20px;
font-family: "itrFontMedium";
padding: 10px;
line-height: 32px;
border-radius: 10px;
}
.about__content__blocks_block:hover,
.about__content__main__container:hover {
background-color: #666666;
}
@media screen and (max-width: 1550px) {
.about__content__blocks {
flex-direction: column;
}
.about__content__blocks_block {
margin-bottom: 6vh;
width: 80vw;
}
.about__content__blocks_block h1 {
font-size: 35px;
}
}
@keyframes fade {
0% {
opacity: 0;
}
}

18
src/assets/stylesheets/app.scss Normal file
View File

@ -0,0 +1,18 @@
* {
padding: 0px;
margin: 0px;
background-color: transparent;
}
.container {
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
height: 100%;
background-color: #232323;
}
html {
overflow-y: scroll;
}

41
src/assets/stylesheets/awards.scss Normal file
View File

@ -0,0 +1,41 @@
@font-face {
font-family: itrFont;
src: url(../font/LeagueSpartan-ExtraBold.ttf);
}
@font-face {
font-family: itrFontMedium;
src: url(../font/LeagueSpartan-Medium.ttf);
}
.awards {
position: relative;
width: 100vw;
height: 100vh;
background-color: rgb(54, 54, 54);
display: flex;
justify-content: center;
align-items: center;
}
.awards__content {
background-color: red;
width: 80%;
height: auto;
padding: 10px;
}
.awards__content__title {
font-weight: bold;
font-size: 300%;
color: rgb(255, 255, 255);
font-family: "itrFont";
margin-bottom: 1%;
}
.awards__content__list_item {
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 100%;
height: 100px;
}

78
src/assets/stylesheets/bubble.scss Normal file
View File

@ -0,0 +1,78 @@
@font-face {
font-family: itrFont;
src: url(../font/LeagueSpartan-ExtraBold.ttf);
}
@font-face {
font-family: itrFontMedium;
src: url(../font/LeagueSpartan-Medium.ttf);
}
.bubble {
color: rgb(255, 255, 255);
font-family: "itrFontMedium";
display: flex;
flex-direction: column;
position: relative;
padding-bottom: 50px;
}
.bubble_main {
width: 40vw;
}
.bubble_main h1 {
font-weight: bold;
font-size: 300%;
border-left: 5px solid rgb(255, 142, 142);
padding-left: 15px;
border-top-left-radius: 10px;
margin-bottom: -5px;
}
.bubble_main h2 {
font-weight: bold;
font-size: 400%;
border-left: 5px solid rgb(255, 142, 142);
padding-left: 15px;
border-bottom-left-radius: 10px;
margin-bottom: 25px;
}
.bubble_main div {
height: auto;
display: flex;
overflow-wrap: break-word;
font-weight: normal;
font-size: 150%;
color: #d6d6d6;
background-color: rgb(59, 59, 59);
border-radius: 10px;
line-height: 35px;
padding: 15px;
flex-direction: column;
}
.bubble_main a {
color: rgb(141, 238, 255);
}
@media screen and (max-width: 650px) {
// Phones
.bubble_main {
width: 80vw;
}
.bubble_main h1 {
font-size: 150%;
}
.bubble_main h2 {
font-size: 250%;
}
.bubble_main div {
font-size: 100%;
line-height: 25px;
}
}

124
src/assets/stylesheets/dropdown.scss Normal file
View File

@ -0,0 +1,124 @@
@font-face {
font-family: itrFont;
src: url(../font/LeagueSpartan-ExtraBold.ttf);
}
@font-face {
font-family: itrFontMedium;
src: url(../font/LeagueSpartan-Medium.ttf);
}
@media screen and (max-width: 650px) {
.c {
position: fixed;
width: 100%;
height: 100%;
background: linear-gradient(#353535, #232323);
z-index: 10000000;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
// animation: slide .6s ease;
// animation-iteration-count: 1;
}
.dd {
display: flex;
flex-direction: column;
width: 95%;
margin-top: 10%;
}
li {
margin-bottom: 10%;
margin-left: 8px;
}
.dd__link {
color: white;
font-size: 40px;
padding: 0;
width: 100%;
display: flex;
}
.dd__link_label {
position: relative;
width: 90%;
cursor: pointer;
}
.dd__link_arrow {
text-align: center;
color: white;
padding-top: 7px;
width: 10%;
font-size: 30px;
cursor: pointer;
opacity: 0%;
transition: 0.2s;
}
.dd__link_arrow:hover:focus {
opacity: 100%;
}
.dd__link_label:hover + .dd__link_arrow {
opacity: 100%;
}
.header {
margin-top: 10px;
display: inline-block;
flex-direction: row;
width: 90%;
}
.header__text {
color: white;
font-size: 50px;
font-family: "itrFont";
}
.header__x {
color: white;
font-size: 25px;
font-family: "itrFont";
border: none;
float: right;
margin-top: 13px;
margin-right: 5px;
cursor: pointer;
}
}
.slideIn{
animation: slideIn .6s ease;
}
.slideOut{
animation: slideOut .6s ease;
}
@keyframes slideIn {
0% {
margin-top: 100vh;
opacity: 0%;
}
100% {
margin-top: 0vh;
opacity: 100%;
}
}
@keyframes slideOut {
0% {
margin-top: 0vh;
opacity: 100%;
}
100% {
margin-top: 100vh;
opacity: 0%;
}
}

12
src/assets/stylesheets/error.scss Normal file
View File

@ -0,0 +1,12 @@
.error {
background-color: #232323;
width: 100%;
height: calc(100vh - 166px);
overflow: hidden;
display: flex;
}
.error__photo {
width: 100%;
min-width: 900px;
}

105
src/assets/stylesheets/footer.scss Normal file
View File

@ -0,0 +1,105 @@
@font-face {
font-family: itrFont;
src: url(../font/LeagueSpartan-ExtraBold.ttf);
}
@font-face {
font-family: itrFontMedium;
src: url(../font/LeagueSpartan-Medium.ttf);
}
.footer {
position: relative;
background-color: #232323;
bottom: 0px;
width: 100%;
height: 150px;
overflow: hidden;
border-top: 1px solid rgb(46, 46, 46);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 15px;
}
.footer__links {
margin-right: 0px;
width: 100vw;
height: 6vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.footer__links_svg {
width: 40px;
margin-left: 0.8vw;
margin-right: 0.8vw;
filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg)
brightness(100%) contrast(100%);
opacity: 20%;
transition: 0.3s;
}
.footer__links_svg:hover {
opacity: 50%;
}
.footer__toes {
display: flex;
width: 100vw;
height: 100px;
justify-content: center;
align-items: center;
}
.footer__toes_logo {
color: rgb(197, 197, 197);
text-decoration: none;
font-size: 50px;
font-family: "itrFont";
transition: 0.3s;
text-align: center;
margin-left: 30px;
margin-right: 30px;
text-align: center;
padding-left: 5px;
}
.footer__toes_logo:hover {
color: white;
}
.footer__toes__links_left,
.footer__toes__links_right {
margin-bottom: 9px;
margin-bottom: 9px;
}
@media screen and (max-width: 650px) {
// Phones
.footer__links_svg {
width: 10vw;
background-color: transparent;
margin-left: -4vw;
margin-right: -4vw;
}
.footer__toes {
zoom: 80%;
}
.footer__toes_logo {
font-size: 40px;
font-family: "itrFont";
transition: 0.3s;
padding-left: 5px;
}
.footer__toes__links_left,
.footer__toes__links_right {
visibility: hidden;
}
}

157
src/assets/stylesheets/home.scss Normal file
View File

@ -0,0 +1,157 @@
@font-face {
font-family: itrFont;
src: url(../font/LeagueSpartan-ExtraBold.ttf);
}
@font-face {
font-family: itrFontMedium;
src: url(../font/LeagueSpartan-Medium.ttf);
}
.home {
width: 100%;
opacity: 100%;
-webkit-animation: fade 0.9s ease-in;
-moz-animation: fade 0.9s ease-in;
-ms-animation: fade 0.9s ease-in;
-o-animation: fade 0.9s ease-in;
animation: fade 0.9s ease-in;
}
.home__content__panel {
background-color: transparent;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
overflow: hidden;
}
.home__content__panel__title {
position: absolute;
color: white;
text-align: center;
font-size: 500%;
font-family: "itrFont";
animation: textSlide 1s ease;
animation-iteration-count: 1;
opacity: 100%;
width: 100%;
padding-top: 20px;
padding-bottom: 10px;
letter-spacing: 5px;
filter: drop-shadow(0 0 0.75rem rgb(77, 77, 77));
z-index: 1;
}
.home__content__panel__button {
position: absolute;
color: white;
text-align: center;
font-size: 300%;
animation: textSlide 1s ease, textBreathe 10s ease;
animation-iteration-count: 1, infinite;
opacity: 100%;
filter: drop-shadow(0 0 0.75rem rgb(77, 77, 77));
z-index: 1;
margin-top: 70vh;
border: none;
transition: 0.3s;
cursor: pointer;
overflow: hidden;
}
.home__content__panel__button:hover {
font-size: 370%;
}
.home__content__info {
min-height: 100vh;
height: auto;
width: 100%;
margin: 0px;
padding: 0px;
background: linear-gradient(#353535, #232323);
}
.home__content__info__image {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
right: 0;
margin-top: 20vh;
width: 45vw;
height: 40vw;
}
.home__content__info__image img {
margin-right: 5vw;
width: 30vw;
animation: glow;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@media screen and (max-width: 912px) {
// Tablets
.home__content__panel__video {
zoom: 130%;
}
}
@media screen and (max-width: 650px) {
// Phones
.home__content__info__image {
opacity: 0%;
}
.home__content__panel__title {
color: rgb(255, 255, 255);
font-size: 250%;
padding-top: 20px;
padding-bottom: 10px;
letter-spacing: 5px;
filter: drop-shadow(0 0 0.75rem rgb(77, 77, 77));
z-index: 1;
}
.home__content__panel__button {
margin-top: 80vh;
}
.home__content__panel__video {
zoom: 100%;
}
}
// Animations
@keyframes glow {
0% {
filter: drop-shadow(0vw 0vw 0vw #ff6767c0);
}
100% {
filter: drop-shadow(0vw 0vw 3vw #ff6767c0);
}
}
@keyframes textSlide {
0% {
margin-top: 50vw;
}
0% {
opacity: 0%;
}
}
@keyframes fade {
0% {
opacity: 0;
}
}

203
src/assets/stylesheets/navbar.scss Normal file
View File

@ -0,0 +1,203 @@
@font-face {
font-family: itrFont;
src: url(../font/LeagueSpartan-ExtraBold.ttf);
}
@font-face {
font-family: itrFontMedium;
src: url(../font/LeagueSpartan-Medium.ttf);
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
height: 70px;
background-color: transparent;
position: fixed;
width: 100%;
overflow-y: hidden;
transition: 0.5s;
z-index: 1000;
}
.navbar__logotext {
color: white;
font-size: 50px;
font-family: "itrFont";
margin-top: 6px;
margin-left: 50px;
transition: 0.5s;
background: linear-gradient(
to right,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
-webkit-background-clip: text;
background-clip: text;
animation: navbar__logotext 6s ease-in-out infinite;
background-size: 400% 100%;
cursor: pointer;
}
#logo {
text-decoration: none;
}
.navbar__logotext:hover {
color: transparent;
}
@keyframes navbar__logotext {
0%,
100% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
}
li {
display: inline;
}
li a {
color: rgb(216, 216, 216);
text-decoration: none;
font-family: "itrFontMedium";
font-size: 20px;
margin-left: 3px;
margin-right: 3px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
transition: 0.3s;
}
li a:hover {
color: white;
}
.nav__placeholder {
padding: 10px;
width: 70px;
height: 20px;
border: none;
outline: none;
background: transparent;
position: relative;
z-index: 0;
border-radius: 10px;
margin-right: 50px;
}
.nav__login {
padding: 10px;
text-decoration: none;
font-size: 20px;
text-align: center;
font-family: "itrFontMedium";
width: 70px;
height: 20px;
border: none;
outline: none;
color: #ffffff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
margin-right: 50px;
}
.nav__login::before {
content: "";
background: linear-gradient(
to right,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glow 30s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
@keyframes glow {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.nav__login:active {
color: #000;
}
.nav__login:active:after {
background: transparent;
}
.nav__login:hover:before {
opacity: 1;
}
.navbar__hamburger {
display: none;
}
@media screen and (max-width: 912px) {
// Tablets
}
@media screen and (max-width: 650px) {
// Phones
.navbar__logotext {
margin-top: 6px;
margin-left: 20px;
}
ul {
display: none;
}
.navbar__hamburger {
display: flex;
flex-direction: column;
margin-right: 20px;
cursor: pointer;
}
.navbar__hamburger_line {
background-color: rgb(255, 255, 255);
width: 30px;
height: 3px;
margin: 2px;
border: none;
border-radius: 10px;
}
}