changed ui
This commit is contained in:
abhiram v
@@ -1,3 +1,5 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
margin-top: 0;
|
||||
@@ -6,6 +8,7 @@ body {
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
color: white;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
@@ -120,6 +123,17 @@ nav {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.competition-header {
|
||||
flex-direction: column!important;
|
||||
gap: 0%!important;
|
||||
margin: 0%!important;
|
||||
padding: 0%!important;
|
||||
}
|
||||
|
||||
.middle-dot {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -249,12 +263,13 @@ nav {
|
||||
|
||||
.contact {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 8vh;
|
||||
margin: 0;
|
||||
padding-top: 8vh;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* height: 100%; */
|
||||
justify-content: center;
|
||||
/* background-color: purple; */
|
||||
}
|
||||
|
||||
#logo {
|
||||
@@ -274,6 +289,18 @@ nav {
|
||||
padding-left: 25%;
|
||||
}
|
||||
|
||||
#spon {
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
#team {
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
#stats2 {
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.header-container4 {
|
||||
color: white;
|
||||
display: flex;
|
||||
@@ -301,6 +328,17 @@ nav {
|
||||
/* 1.5vw */
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 1.5rem;
|
||||
color: rgb(250, 250, 250);
|
||||
font-family: sans-serif;
|
||||
padding-left: 10%;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: rgb(64, 64, 64)
|
||||
}
|
||||
|
||||
.header2 {
|
||||
color: white;
|
||||
padding-right: 1vh;
|
||||
@@ -368,7 +406,9 @@ nav {
|
||||
} */
|
||||
|
||||
.info {
|
||||
font-family: Sans-Serif;
|
||||
font-family: "Orbitron", serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 1.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -383,7 +423,7 @@ nav {
|
||||
.card {
|
||||
width: 30%;
|
||||
height: 50vh;
|
||||
background-color: black;
|
||||
background-color: rgb(15, 15, 15);
|
||||
border-radius: 1.5vh;
|
||||
overflow: hidden;
|
||||
margin-bottom: 4%;
|
||||
@@ -447,6 +487,7 @@ nav {
|
||||
/* object-fit: cover;
|
||||
overflow: hidden; */
|
||||
transition: .5s;
|
||||
filter: brightness(0.85);
|
||||
}
|
||||
|
||||
.bg::after {
|
||||
@@ -490,8 +531,14 @@ nav {
|
||||
color: white;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.home-info {
|
||||
width: 75%;
|
||||
width: 80%;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
display: block;
|
||||
@@ -503,23 +550,33 @@ nav {
|
||||
|
||||
.sub-header {
|
||||
padding: 0 1vh;
|
||||
font-family: Sans-Serif;
|
||||
font-size: 4rem;
|
||||
font-family: "Orbitron", serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 4.25rem;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.sub-content {
|
||||
padding-left: 1vh;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
font-family: Sans-Serif;
|
||||
font-weight: 50;
|
||||
letter-spacing: .15vw;
|
||||
}
|
||||
|
||||
#comp {
|
||||
margin-top: 19%;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
border: 0.25vh white solid;
|
||||
width: 100%;
|
||||
background-color: rgb(15, 15, 15);
|
||||
border-radius: 1.5vh;
|
||||
margin-top: 8%;
|
||||
height: auto;
|
||||
@@ -641,11 +698,10 @@ nav {
|
||||
|
||||
.sponsors {
|
||||
margin: 0;
|
||||
margin-top: 8vh;
|
||||
padding: 0;
|
||||
padding-top: 8vh;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* height: 100%; */
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -659,7 +715,7 @@ nav {
|
||||
.card-sponsors {
|
||||
width: 23%;
|
||||
height: 50vh;
|
||||
background-color: black;
|
||||
background-color: rgb(15, 15, 15);
|
||||
border-radius: 1.5vh;
|
||||
overflow: hidden;
|
||||
margin-bottom: 4%;
|
||||
@@ -861,12 +917,11 @@ nav {
|
||||
margin: auto;
|
||||
padding-bottom: 5%;
|
||||
gap: 3%;
|
||||
border-top: white 0.25vh solid;
|
||||
/* border-top: white 0.25vh solid;
|
||||
border-right: white 0.25vh solid;
|
||||
border-left: white 0.25vh solid;
|
||||
border-top-right-radius: 1.5vh;
|
||||
border-top-left-radius: 1.5vh;
|
||||
padding-top: 2%;
|
||||
border-top-left-radius: 1.5vh; */
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 850px) {
|
||||
@@ -888,9 +943,22 @@ nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.member-card {
|
||||
width: 100% !important;
|
||||
;
|
||||
height: 50vh !important;
|
||||
;
|
||||
}
|
||||
|
||||
.members-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.member-card {
|
||||
width: 25%;
|
||||
height: 25vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: sans-serif;
|
||||
@@ -899,6 +967,14 @@ nav {
|
||||
align-items: center;
|
||||
margin-top: 3%;
|
||||
padding: 2%;
|
||||
transition: 0.5s;
|
||||
background-color: rgb(15, 15, 15);
|
||||
border-radius: 10px;
|
||||
border: white 0.25vh solid;
|
||||
}
|
||||
|
||||
.member-card:hover {
|
||||
transform: scale(1.075);
|
||||
}
|
||||
|
||||
.member-image {
|
||||
@@ -1000,7 +1076,9 @@ nav {
|
||||
}
|
||||
|
||||
.competition-year {
|
||||
font-family: sans-serif;
|
||||
font-family: "Orbitron", serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 8vh;
|
||||
margin-top: 2%;
|
||||
padding: 0;
|
||||
@@ -1016,8 +1094,11 @@ nav {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 3vh;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
font-family: "Orbitron", serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
/* font-weight: bold; */
|
||||
text-wrap: wrap;
|
||||
}
|
||||
|
||||
.competition-card {
|
||||
@@ -1049,14 +1130,17 @@ nav {
|
||||
|
||||
.middle-dot {
|
||||
opacity: .5;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.competition-subtitle {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 2.5vh;
|
||||
font-family: sans-serif;
|
||||
font-weight: 750;
|
||||
font-size: 2.55vh;
|
||||
font-family: "Orbitron", serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
/* font-weight: 750; */
|
||||
}
|
||||
|
||||
.competition-description {
|
||||
@@ -1107,105 +1191,105 @@ span.contact::before,
|
||||
span.contact::after {
|
||||
content: "📱";
|
||||
font-size: 2.5vh;
|
||||
top: -75%;
|
||||
left: -10%;
|
||||
top: -5%;
|
||||
left: -1%;
|
||||
}
|
||||
|
||||
span.contact::after {
|
||||
top: revert;
|
||||
left: revert;
|
||||
bottom: -60%;
|
||||
right: -10%;
|
||||
bottom: -5%;
|
||||
right: -1%;
|
||||
}
|
||||
|
||||
span.about::before,
|
||||
span.about::after {
|
||||
content: "👋";
|
||||
font-size: 2.5vh;
|
||||
top: -75%;
|
||||
left: -10%;
|
||||
top: -5%;
|
||||
left: -1%;
|
||||
}
|
||||
|
||||
span.about::after {
|
||||
top: revert;
|
||||
left: revert;
|
||||
bottom: -60%;
|
||||
right: -10%;
|
||||
bottom: -5%;
|
||||
right: -1%;
|
||||
}
|
||||
|
||||
span.stats::before,
|
||||
span.stats::after {
|
||||
content: "📊";
|
||||
font-size: 2.5vh;
|
||||
top: -75%;
|
||||
left: -10%;
|
||||
top: -5%;
|
||||
left: -1%;
|
||||
}
|
||||
|
||||
span.stats::after {
|
||||
top: revert;
|
||||
left: revert;
|
||||
bottom: -60%;
|
||||
right: -10%;
|
||||
bottom: -5%;
|
||||
right: -1%;
|
||||
}
|
||||
|
||||
span.gallary::before,
|
||||
span.gallary::after {
|
||||
content: "✊";
|
||||
font-size: 2.5vh;
|
||||
top: -75%;
|
||||
left: -10%;
|
||||
top: -5%;
|
||||
left: -1%;
|
||||
}
|
||||
|
||||
span.gallary::after {
|
||||
top: revert;
|
||||
left: revert;
|
||||
bottom: -60%;
|
||||
right: -10%;
|
||||
bottom: -5%;
|
||||
right: -1%;
|
||||
}
|
||||
|
||||
span.sponsors::before,
|
||||
span.sponsors::after {
|
||||
content: "❤️";
|
||||
font-size: 2.5vh;
|
||||
top: -75%;
|
||||
left: -10%;
|
||||
top: -5%;
|
||||
left: -1%;
|
||||
}
|
||||
|
||||
span.sponsors::after {
|
||||
top: revert;
|
||||
left: revert;
|
||||
bottom: -60%;
|
||||
right: -10%;
|
||||
bottom: -5%;
|
||||
right: -1%;
|
||||
}
|
||||
|
||||
span.team::before,
|
||||
span.team::after {
|
||||
content: "👥";
|
||||
font-size: 2.5vh;
|
||||
top: -75%;
|
||||
left: -10%;
|
||||
top: -5%;
|
||||
left: -1%;
|
||||
}
|
||||
|
||||
span.team::after {
|
||||
top: revert;
|
||||
left: revert;
|
||||
bottom: -60%;
|
||||
right: -10%;
|
||||
bottom: -5%;
|
||||
right: -1%;
|
||||
}
|
||||
|
||||
span.competitions::before,
|
||||
span.competitions::after {
|
||||
content: "🥇";
|
||||
font-size: 2.5vh;
|
||||
top: -55%;
|
||||
left: -10%;
|
||||
top: -5%;
|
||||
left: -1%;
|
||||
}
|
||||
|
||||
span.competitions::after {
|
||||
top: revert;
|
||||
left: revert;
|
||||
bottom: -55%;
|
||||
right: -10%;
|
||||
bottom: -5%;
|
||||
right: 80%;
|
||||
}
|
||||
|
||||
span.emoji:hover::before,
|
||||
@@ -1223,31 +1307,48 @@ span.emoji:active::after {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-left: 10%;
|
||||
padding-bottom: 1%;
|
||||
padding-right: 10%;
|
||||
|
||||
}
|
||||
|
||||
.about-sec-img {
|
||||
|
||||
width: 100%;
|
||||
/* Example size, adjust as needed */
|
||||
height: 75vh;
|
||||
overflow: hidden;
|
||||
transition: .5s;
|
||||
border: 2px rgb(250, 250, 250) solid;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.about-section-imgp img {
|
||||
max-width: 40%; /* Example size, adjust as needed */
|
||||
max-height: 60%;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
transition: .5s;
|
||||
border: 2px white solid;
|
||||
height: auto;
|
||||
;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.about-section-imgp p {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 850px) {
|
||||
/* @media only screen and (min-width: 850px) {
|
||||
.about-section-imgp p {
|
||||
padding-left: 10%;
|
||||
}
|
||||
|
||||
.about-section-imgp-l p {
|
||||
padding-right: 10%;
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
.about-section-imgp-l {
|
||||
@@ -1260,7 +1361,8 @@ span.emoji:active::after {
|
||||
}
|
||||
|
||||
.about-section-imgp-l img {
|
||||
max-width: 40%; /* Example size, adjust as needed */
|
||||
max-width: 40%;
|
||||
/* Example size, adjust as needed */
|
||||
max-height: 60%;
|
||||
border-radius: 5px;
|
||||
transition: .5s;
|
||||
@@ -1280,12 +1382,15 @@ span.emoji:active::after {
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 850px) {
|
||||
|
||||
.about-section-imgp,
|
||||
.about-section-imgp-l {
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack image and text vertically */
|
||||
flex-direction: column;
|
||||
/* Stack image and text vertically */
|
||||
align-items: center;
|
||||
justify-content: flex-start; /* Align content to the top */
|
||||
justify-content: flex-start;
|
||||
/* Align content to the top */
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
@@ -1300,10 +1405,13 @@ span.emoji:active::after {
|
||||
|
||||
.about-section-imgp img,
|
||||
.about-section-imgp-l img {
|
||||
max-width: 80vw; /* Image takes 80% of the viewport width */
|
||||
max-width: 80vw;
|
||||
/* Image takes 80% of the viewport width */
|
||||
max-height: auto;
|
||||
width: 80%; /* Ensure the image scales properly */
|
||||
margin-bottom: 10px; /* Adds some space between the image and the paragraph */
|
||||
width: 80%;
|
||||
/* Ensure the image scales properly */
|
||||
margin-bottom: 10px;
|
||||
/* Adds some space between the image and the paragraph */
|
||||
border-radius: 5px;
|
||||
transition: .5s;
|
||||
}
|
||||
@@ -1313,7 +1421,7 @@ span.emoji:active::after {
|
||||
}
|
||||
|
||||
.about-section-imgp-l img,
|
||||
.about-section-imgp img{
|
||||
.about-section-imgp img {
|
||||
min-width: 100%;
|
||||
height: 75vh;
|
||||
border-radius: 10px;
|
||||
@@ -1335,4 +1443,5 @@ span.emoji:active::after {
|
||||
.about-section-imgp-l img:hover {
|
||||
transform: scale(1.025);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user