jesvijonathan/takshashila-website

CIT's best web-designer builds the most elegant webpage designed for an institution in regards to 'Takshashila' event

profile dashboard :

takshashila-website's Issues

style.css

/--------------STYLE FOR FILE UPLOAD-------------/
.custom-file-upload{
padding: 10px;

cursor: pointer;
font-family: OCRAq;
font-weight:500;
font-size: 1vw;

background: black;
color: white;
border: 2px solid white; position: absolute;
}
.custom-file-upload:hover{
color: black;
background: white;
border: 2px solid black;
}
.file-group{

width: 104px;
height: 39px;
margin: 5%;
display: flex;
position: relative;
}
#file-upload{
display: none;
}
/* ---------------STYLE FOR RANGE-----------------*/
.wrap{
margin-top:5%;
width: 300px;
}

.value {
position: relative;
text-align: center;
font-size: 18px;
margin-top: 20px;
width: 100%;
height: 100px;
line-height: 1.5em;
color: white;
}

.value::after{
content: '';
margin-left: 5px;
}

input[type="range"] {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
background: rgb(255, 255, 255);
width: 300px;
height: 2px;
outline: 0;

font-size: inherit;
  padding:inherit;

}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: rgb(255, 255, 255);
width: 23px;
height: 23px;
border-radius: 50%;
cursor: pointer;
transition: .2s ease-out;
}

input[type="range"]::-webkit-slider-thumb:active {
transform: scale(1.1);
}
/* -------------------STYLE FOR EMAIL PASSWORD AND PHONE NUMBER--------------------------*/
.text-group {
position: relative;
margin-top: 5%;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #b7b7b7;
background-color: transparent;
color: white;
}
input:focus {
outline: none;
}

/* LABEL ======================================= */
.text-group label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}

/* active state */
input:focus ~ label,
input:valid ~ label {
top: -20px;
font-size: 14px;
color: rgba(225, 225, 225, 0.827);
}

/--------------------STYLE FOR CHECK BOX------------------/
.checkbox-group {
font-family: OCRAq;
font-weight: Regular;
font-size: 0.9vw;
margin-top: 5%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
row-gap: 1vw;
}
.checkbox-button {
cursor: pointer;
color: white;
width: fit-content;
}

input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}

input[type="checkbox"] {
font-size: 1rem;
line-height: 1.5;
padding: 11px 23px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0;
outline: 0;
background-color: transparent;
}

.checkbox-button__input {
opacity: 0;
position: absolute;
}

.checkbox-button__control {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 12px;
margin-left: 12px;
vertical-align: middle;
background-color: inherit;
color: #ffffff;
border: 2px solid #666;
}

.checkbox-button__input:checked + .checkbox-button__control:after {
content: "";
display: block;
position: absolute;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
background-color: #ffffff;
}

.checkbox-button__input:checked + .checkbox-button__control {
border-color: #ffffff;
}

.checkbox-button__control {
transform: scale(0.6);
}
/-------------------STYLE FOR CHECKBOXES----------------/
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: rgb(255, 255, 255);
font-family: OCRAq;
font-weight: Regular;
font-size: 0.9vw;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ddd;
border-radius: 100%;
background: rgba(0, 0, 0, 0);
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
content: "";
width: 12px;
height: 12px;
background: #ffffff;
position: absolute;
top: 4px;
left: 4px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
[type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
/------------STYLE FOR PHONENUMBER DATALIST--------------/
.phone{
margin-top: 5%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-end; width: 300;
overflow-x: clip;
}
.phone-tel{
margin-left: 10px;
}
@font-face {
font-family: NotoColorEmojiLimited;
unicode-range: U+1F1E6-1F1FF;
src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

.datalist-group * {
width: 75px;
margin-top: 5%;
color: white;
font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
}

datalist option {
font-size: 0.8em;
padding: 0.3em 1em;
background-color: #ccc;
cursor: pointer;
}

/* option active styles */
datalist option:hover,
datalist option:focus {
color: #fff;
background-color: rgb(23, 125, 227);
outline: 0 none;
}
.datalist-group option{

background-color: rgb(255, 255, 255);
}
input::-webkit-calendar-picker-indicator {
opacity: 100;
}
/-------------------STYLE FOR INPUT TYPE SUBMIT------------------/
input[type="submit"]{
margin-top: 5%;
background: rgb(255,255,255);
color: black;
border: 2px solid rgba(255, 255, 255, 0);
cursor: pointer;
transition: 0.2s ease-in-out;
}
input[type="submit"]:hover{
background: rgb(0, 0, 0);
color: rgb(255, 255, 255);
/* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5028512137276786) 30%, rgba(255,255,255,0.5028512137276786) 50%, rgba(255,255,255,0.4972489728313201) 70%, rgba(255,255,255,1) 100%); */

}
/--------------------STYLE FOR INPUT TYPE SUBMIT-------------------/
input[type="number"] {
margin-top:5% ;
/* height: 32px; /
/ border-radius: 4px; /
border: 2px solid #b7b7b7;
position: relative;
text-align: center;
/ font-size: 20px; /
/ width: 80px; /
color: black;
outline: none;
background-image: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2050%2067%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%222%22%3E%3Cline%20x1%3D%221%22%20x2%3D%2250%22%20y1%3D%2233.5%22%20y2%3D%2233.5%22%20stroke%3D%22%23D8D8D8%22%2F%3E%3Cpolyline%20transform%3D%22translate(25%2020)%20rotate(45)%20translate(-25%20-20)%22%20points%3D%2219%2026%2019%2014%2032%2014%22%20stroke%3D%22%23000%22%2F%3E%3Cpolyline%20transform%3D%22translate(25%2045)%20rotate(225)%20translate(-25%20-45)%22%20points%3D%2219%2052%2019%2039%2032%2039%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: center right;
background-size: contain;
background-repeat: no-repeat;
/ background-color: black; /
/ -webkit-filter: invert(1); /
filter: invert(1);
/ filter: invert(100%); */
caret-color: transparent;
}

input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
opacity: 1 !important;
background: transparent !important;
border-width: 0px;
margin: 0;
border-left: 1px solid #d8d8d8;
height: 34px;
width: 23px;
cursor: pointer;
}
/-----------------STYLE FOR DROPDOWN NAVIGATION BAR----------------------/
.custom-select {
font-family: Arial;
position: relative;
width: 300px;
margin-top: 5%;
}

.custom-select select {
display: none; /*hide original SELECT element: */
}

.select-selected {
background-color: rgb(0, 0, 0);
}
.select-selected:hover {
background-color: rgba(255, 255, 255, 0.9);
color: black;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 18px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 10px;
}

/* style the items (options), including the selected item: */
.select-items div,
.select-selected {
color: #ffffff;
padding: 8px 16px;
cursor: pointer;
outline: none;
font-size: 18px;
padding: 10px 10px 10px 10px;
display: block;
border: none;
border-bottom: 2px solid #ffffff;
background-color: transparent;
color: white;
}

.select-items div{
border-bottom: 2px solid rgb(0, 0, 0);
}

/* Style items (options): */
.select-items {
position: absolute;
background-color: rgb(33 33 33);
top: 100%;
left: 0;
right: 0;
z-index: 1;
}

/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}

.select-items div:hover,
.same-as-selected {
background-color: rgba(255, 255, 255, 0.1);
}
/---------------------CUSTOM FONTS---------------/
@font-face {
font-family: "OCRAq";
src: url("./static/OCRAq.TTF") format("opentype");
}
@font-face {
font-family: "Advent Pro";
src: url("../static/TrenchThin-aZ1J.ttf") format("opentype");
}
@font-face {
font-family: "cocoon";
src: url("./static/Eloxy-owYD0.otf") format("opentype");
}

body {
background: black;
}
/* BOTTOM BARS ================================= */
.bar {
position: relative;
display: block;
width: 300px;
}
.bar:before,
.bar:after {
content: "";
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #ffffff;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}

/* active state */
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}

/* active state */
input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ /
@-webkit-keyframes inputHighlighter {
from {
background: #d7d7d7;
}
to {
width: 0;
background: transparent;
}
}
@-moz-keyframes inputHighlighter {
from {
background: #d7d7d7;
}
to {
width: 0;
background: transparent;
}
}
@Keyframes inputHighlighter {
from {
background: #d7d7d7;
}
to {
width: 0;
background: transparent;
}
}
/--------------------DESC_BUTTON------------------*/
.desc_but:hover {
background-color: #eee;
color: #000;
}

.desc_but {
transition: 0.1s;
/* margin-top: 8%;
padding: 0.8vw; */
font-size: 0.8vw;
font-weight: 100;
width: 4.5vw;
height: 2vw;
min-width: 1vw;
border-radius: 10%;
border: 1px solid rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.7);
text-align: center;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
text-decoration: none;
}
a {
color: inherit;
text-decoration: none;

  text-decoration: underline;
  color: #fff;  
  outline: none;

}

.rl {
/* font-size: 0.9vw; */
background-color: rgba(0, 0, 0, 0);
height: 4vw;
border: 0px transparent solid;
}
.rl:hover{
background-color: #00000000;
border: 0px transparent solid;
color: white;
}
.underline {
position: relative;
}

.underline::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #ffffff;
transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) and (pointer: fine) {
.underline:hover::before {
left: 0;
right: auto;
width: 100%;
}
}

.underline2 {
position: relative;
animation: oo 4s infinite ease-in-out;
animation-play-state: running;
}

@Keyframes oo {
0% {
right: 0;
width: 0;

  background-color: #00000090;
}
80% {
  border-color: rgba(0, 0, 0, 0.291);
}
100% {
  left: 0;
  right: auto;
  width: 100%;
  border-color: rgba(0, 0, 0, 0.291);
}

}

.link {
height: 3vw;
align-items: center;
color: rgb(255, 255, 255);
text-decoration: none;
display: flex;
width: fit-content;
margin-top: 5%;
/* margin-left: 9%; */
background-color: #4242426c;
background-color: #2e2e2e52;
padding: 1vw;
text-transform: uppercase;
}
.button-group2{
margin-top: 5%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
column-gap: 1vw;
align-items: flex-end;
transition: 1s;
}
.hculi {
padding: 7px 10px;

  border: 2px #00000000 solid;
  border-bottom: 2px solid rgba(255, 255, 255, 0);
  min-width: 6vw;
  transition: 0.1s;

}
.hculi:hover {
background-color: #00000000;
color: white;
border-bottom: 2px solid white;
}

.m2{
border-bottom: 2px #ffffff00 solid;
}
.m2:hover{
border-bottom: 2px #ffffff solid;
}
.m1{ border: 2px solid rgba(255, 255, 255, 0);
}
.m1:hover{
border: 2px #ffffff solid;
}
button{
-webkit-font-smoothing: antialiased;
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;
min-width: 7vw;
padding: 0.7vw 0.3vw;
background-color: #fbfbfb00;
color: white;
font-size: 1vw;
text-align: center;
transition: 0.1s;
cursor: pointer;
border: 2px solid rgba(255, 255, 255, 0);
border-bottom: 2px solid rgba(255, 255, 255, 0.449);
}
button:hover{
background: white;
color: black;
}
.hculi2 {
border: 2px #ffffff solid;
}
/* --------------------COMMENT AREA-----------------*/
.comment_area{
margin-top: 5%;
background: black;
color: white;
}

.comment_area:hover{
background: rgba(71, 71, 71, 0.4);
}

/--------CUSTOM BUTTONS----------/

a{
position: relative;
padding: 20px 60px;
display:flex;
justify-content: center;
align-items: center;
margin: 40px;
overflow: hidden;
transition:1s;
text-decoration: none;

}
a:hover{
background:var(--clr);
box-shadow:0 0 10px var(--clr),
0 0 30px var(--clr),
0 0 60px var(--clr),
0 0 100px var(--clr);

}
a::before{
content:' ';
position: absolute;
width:40px;
height:400%;
background:var(--clr);
transition: 1s;
animation:animate 2s linear infinite;
animation-delay:calc(0.33s * var(--i));
}
a:hover::before{
width:120%;
}
@Keyframes animate
{
0%
{
transform: rotate(0deg);
}
100%
{
transform:rotate(360deg);
}
}
a::after{
content:'';
position:absolute;
inset:4px;
background:#000000;
transition:0.5s;
}
a:hover::after{
background:var(--clr);
}
a span{
position:relative;
z-index:1;
font-size: 1em;
color:white;
opacity:0.5;
text-transform:uppercase;
letter-spacing:4px;
transition:0.5s;

}
a:hover span{
opacity:1;
}

style.css