Code nè :>
unknown
css
a year ago
30 kB
3
Indexable
Never
/* General rules */
* {
margin: 0;
padding: 0;
text-decoration: none;
box-sizing: border-box;
}
body {
letter-spacing: 1.5px; /*More readable*/
font-family: sans-serif;
background-color: #000;
}
body p {
letter-spacing: 1.5px; /*More readable*/
line-height: 150%;
}
hr.foot {
width: 100%;
margin: auto;
color: white;
box-sizing: border-box;
border-radius: 5px;
}
html {
scroll-behavior: smooth;
overflow-y: scroll;
}
/*------------------------------------ Nav bar ------------------------------------*/
/* General styling */
header {
background-image: url(./images/nav-bg.jpg);
background-size: cover;
background-position: center; /*Make it so the background image stays at the middle*/
color: #fff;
padding: 5vh 0;
text-align: center;
position: relative;
}
header h1 {
display: inline-block;
margin-top: 5%;
margin-bottom: 5%;
background-size: cover;
border: 3px solid rgb(0, 0, 0);
padding: 3%;
border-radius: 22px;
background-color: rgb(0, 0, 0, 0.7);
font-size: 8vw;
font-family: sans-serif;
text-align: center;
transition: 0.3s; /*For smoothness*/
}
header h1:hover {
background-color: #000000;
border: 7px solid rgb(91, 91, 91);
transition: 0.3s; /*For smoothness*/
font-size: 9vw;
}
header h1 a {
text-decoration: none;
color: #fff;
}
.header-nav ul {
margin: 2% 0;
list-style-type: none;
padding: 0;
text-align: center;
}
.header-nav ul li {
display: inline;
}
.header-nav ul li a {
margin: 3% 1%;
padding: 2vw;
text-decoration: none;
border-style: solid;
border-width: 1px;
border-radius: 5px;
font-family: sans-serif;
position: relative;
white-space: nowrap;
color: white;
}
.header-nav ul li a.active {
background-color: rgba(9, 0, 43, 0.916);
}
/* Hover Animations */
/* The page user is on */
.header-nav ul li a.active:hover {
color: rgb(255, 255, 255);
cursor: pointer;
border-radius: 0px;
}
/* other menu links */
.header-nav ul li a.non-active:hover {
background-color: #000;
color: rgb(255, 255, 255);
cursor: pointer;
border-radius: 0px;
}
/* Enhancement */
.header-nav ul li a span {
position: absolute;
display: block;
background: rgb(255, 255, 255);
}
/* Around the border hover animation */
.header-nav ul li a span:nth-child(1) {
/*The first span in <a> tag*/
left: 0;
top: 0;
width: 100%;
height: 2px;
transform-origin: left;
transform: scaleX(0); /* width * 0 */
transition: 0.15s;
}
.header-nav ul li a:hover span:nth-child(1) {
transition: 0.15s;
transform: scaleX(1); /*normal width*/
}
.header-nav ul li a span:nth-child(2) {
/*The second span in <a> tag*/
right: 0;
top: 0;
width: 2px;
height: 100%;
transform-origin: top;
transform: scaleY(0); /* height * 0 */
transition: 0.15s;
}
.header-nav ul li a:hover span:nth-child(2) {
transition: 0.15s;
transform: scaleY(1); /*normal height*/
transition-delay: 0.1s; /* wait for set time then start the transition*/
}
.header-nav ul li a span:nth-child(3) {
/*The third span in <a> tag*/
right: 0;
bottom: 0;
width: 100%;
height: 2px;
transform-origin: right;
transform: scaleX(0); /* width * 0 */
transition: 0.15s;
}
.header-nav ul li a:hover span:nth-child(3) {
transition: 0.15s;
transform: scaleX(1); /*normal width*/
transition-delay: 0.2s; /* wait for set time then start the transition*/
}
.header-nav ul li a span:nth-child(4) {
/*The fourth span in <a> tag*/
left: 0;
bottom: 0;
width: 2px;
height: 100%;
transform-origin: bottom;
transform: scaleY(0); /* height * 0 */
transition: 0.15s;
}
.header-nav ul li a:hover span:nth-child(4) {
transition: 0.15s;
transform: scaleY(1); /*normal height*/
transition-delay: 0.3s; /* wait for set time then start the transition*/
}
.header-nav ul li a {
color: #ffffff;
background-color: rgb(0, 0, 0, 0.5);
text-decoration: none;
border: 1px solid #e1e1e1;
padding: 2% 4%;
display: inline-block;
border-radius: 5px;
font-size: 2vw;
font-family: sans-serif;
transition: 0.3s; /*For smoothness*/
}
/*-----------------------------------------Index.html-----------------------------------------*/
body.index p {
letter-spacing: 1.5px; /*More readable*/
line-height: 150%; /*More readable*/
}
body.index p.moto {
color: #ffffff;
background-color: rgb(0, 0, 0, 0.5);
text-decoration: none;
border: 1px solid #e1e1e1;
padding: 2% 4%;
display: inline-block;
border-radius: 5px;
font-size: 2vw;
font-family: sans-serif;
transition: 0.3s; /*For smoothness*/
}
body.index section {
color: white;
background-size: cover;
background-position: center; /*Make it so the background image stays at the middle*/
padding: 10vh 0;
text-align: left;
position: relative;
}
body.index #team-vid {
margin: 5% auto;
padding: 3%;
width: 80%;
box-sizing: border-box;
border-radius: 5px;
border: white 1px solid;
text-align: center;
min-height: 30vh;
}
body.index #team-vid h3 {
font-size: 30px;
margin-bottom: 2%;
}
body.index #team-vid a {
display: inline-block;
position: relative;
padding: 1%;
margin: 1% auto;
box-sizing: border-box;
border-radius: 6px;
border: white 1px solid;
color: white;
transition: 0.3s;
}
body.index #team-vid a:hover {
border-radius: 0;
letter-spacing: 2.5px;
}
body.index #team-vid a span {
position: absolute;
display: block;
background: rgb(255, 255, 255);
}
body.index #team-vid a span:nth-child(1) {
/*The first span in <a> tag*/
left: 0;
top: 0;
width: 100%;
height: 2px;
transform-origin: left;
transform: scaleX(0); /* width * 0 */
transition: 0.15s;
}
body.index #team-vid a:hover span:nth-child(1) {
transition: 0.15s;
transform: scaleX(1); /*normal width*/
}
body.index #team-vid a span:nth-child(2) {
/*The second span in <a> tag*/
right: 0;
top: 0;
width: 2px;
height: 100%;
transform-origin: top;
transform: scaleY(0); /* height * 0 */
transition: 0.15s;
}
body.index #team-vid a:hover span:nth-child(2) {
transition: 0.15s;
transform: scaleY(1); /*normal height*/
transition-delay: 0.1s; /* wait for set time then start the transition*/
}
body.index #team-vid a span:nth-child(3) {
/*The third span in <a> tag*/
right: 0;
bottom: 0;
width: 100%;
height: 2px;
transform-origin: right;
transform: scaleX(0); /* width * 0 */
transition: 0.15s;
}
body.index #team-vid a:hover span:nth-child(3) {
transition: 0.15s;
transform: scaleX(1); /*normal width*/
transition-delay: 0.2s; /* wait for set time then start the transition*/
}
body.index #team-vid a span:nth-child(4) {
/*The fourth span in <a> tag*/
left: 0;
bottom: 0;
width: 2px;
height: 100%;
transform-origin: bottom;
transform: scaleY(0); /* height * 0 */
transition: 0.15s;
}
body.index #team-vid a:hover span:nth-child(4) {
transition: 0.15s;
transform: scaleY(1); /*normal height*/
transition-delay: 0.3s; /* wait for set time then start the transition*/
}
body.index #project-gaia {
border: 3px solid rgba(209, 3, 3, 0);
border-radius: 10px;
background-image: url(./images/index-gaia.jpg);
}
body.index #project-mars {
border: 3px solid rgb(124, 62, 30);
border-radius: 10px;
background-image: url(./images/index-mars.jpg);
}
body.index #project-luna {
border: 3px solid rgb(71, 65, 65);
border-radius: 10px;
background-image: url(./images/index-luna.jpg);
}
body.index #project-doge {
border: 3px solid rgb(2, 71, 111);
border-radius: 10px;
background-image: url(./images/index-doge.jpg);
}
body.index #project-doge p,
body.index #project-mars p,
body.index #project-luna p,
body.index #project-gaia p {
border: 3px solid rgb(255, 255, 255);
border-radius: 20px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
width: 50vw;
transition: 0.5s;
}
body.index #project-doge p:hover,
body.index #project-mars p:hover,
body.index #project-gaia p:hover,
body.index #project-luna p:hover {
border: 10px solid rgb(90, 90, 90);
color: rgb(255, 255, 255);
cursor: pointer;
background-color: black;
transition: 0.5s;
}
/* just like we provided a transition effect above to the elements header-nav ul li we do the same thing
for the respective elemnts assigned with IDs */
body.index section h2 {
background-color: rgb(0, 0, 0, 0.5);
padding: 2vw;
display: inline-block;
border: 3px solid rgb(250, 250, 250);
border-radius: 10px;
font-size: 4vw;
font-family: sans-serif;
opacity: 1;
transition: 0.5s;
}
body.index section h2:hover {
border: 5px solid rgb(90, 90, 90);
border-radius: 5px;
color: rgb(255, 255, 255);
cursor: pointer;
background-color: black;
transition: all 0.5s;
}
body.index section p {
font-size: 2vw;
font-family: sans-serif;
}
/*-----------------------------------------About.html-----------------------------------------*/
body.about p {
letter-spacing: 1.5px; /*More readable*/
line-height: 150%; /*More readable*/
}
body.about section.team h2 a {
text-decoration: none;
color: #fff;
}
body.about h2.meet {
margin: 3%;
}
body.about hr {
width: 85%;
margin: auto;
color: white;
box-sizing: border-box;
border-radius: 5px;
}
/* team introduction starts */
body.about section.team {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
body.about section.team .team-col p {
display: inline-flex;
margin: 3px;
}
body.about section.team .team-col p a {
margin-left: 5px;
font-size: 1em;
color: white;
text-decoration: underline;
}
/* pictures not fitting in mobile view( start from here tomorrow)*/
body.about .row {
margin: 5%;
display: flex;
justify-content: center;
flex-wrap: wrap; /* Added to wrap team members on smaller screens */
}
body.about .team-col {
flex-basis: 100%; /* Full width on mobile */
border-radius: 10%;
margin-bottom: 5%;
text-align: left;
margin: 2%;
box-sizing: border-box; /* Added to prevent spacing issues */
}
body.about .team-col img {
width: 100%;
border-radius: 10px;
}
body.about .team-col p {
padding: 0;
color: white;
}
body.about .team-col h3 {
margin-top: 16px;
margin-bottom: 15px;
text-align: left;
color: white;
}
body.about .team h2,
body.about .team-col h2 {
color: white;
margin-bottom: 2%;
}
body.about .team p {
color: white;
}
/* Team introduction ends */
/* contact us box starts */
body.about .contactbox {
margin: 100px auto;
width: 80%;
background-image: url(./images/contact.png);
background-position: center; /*Make it so the background image stays at the middle*/
background-size: cover;
border-radius: 10px;
text-align: center;
padding: 100px 0;
border-radius: 2px;
}
body.about .contactbox h2 {
font-size: x-large;
color: white;
margin-bottom: 40px;
padding: 0;
}
body.about .contactbox:hover {
background-color: #000000;
color: #fff8f8;
border: 5px solid grey;
transition: 0.3s; /*For smoothness*/
}
body.about .button {
background-color: rgba(0, 0, 0, 0.5);
text-decoration: none;
color: white;
border: 1px solid #e1e1e1;
padding: 2% 4%;
border-radius: 5px;
font-size: 2vw;
transition: 0.3s; /*For smoothness*/
}
body.about .button:hover {
background-color: #000000;
color: #fff8f8;
border: 5px solid grey;
transition: 0.3s; /*For smoothness*/
}
/* Timetable starts over here*/
body.about .timetable {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
body.about .address {
width: 100%;
max-width: 80%;
margin-bottom: 20px;
margin-left: 10%;
margin-right: 10%;
}
body.about .address iframe {
width: 100%;
height: 200px;
border: none;
}
body.about .tt {
text-align: center;
width: 80%;
margin: 0 auto;
overflow-x: auto; /* horizontl scrolling */
}
body.about .ext {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
}
body.about .tt p {
margin: 5px;
}
body.about div.timetable h2.title {
color: white;
margin: 2% 0;
}
body.about div.timetable table {
width: 100%;
table-layout: auto;
border-collapse: collapse;
white-space: nowrap;
}
body.about div.timetable th,
td {
border: 1px solid black;
padding: 8px;
text-align: center;
font-weight: bold;
}
body.about div.timetable th {
background-color: #f2f2f2;
}
body.about div.timetable td {
background-color: white;
}
body.about div.timetable table .t1 {
color: rgb(226, 226, 226);
background-color: #393939;
}
body.about div.timetable table .COS10026 {
background-color: #ff6961;
}
body.about div.timetable table .COS10004 {
background-color: #77dd77;
}
body.about div.timetable table .COS10009 {
background-color: #c3b1e1;
}
body.about div.timetable table .TNE10006 {
background-color: #ecbcb4;
}
/* timetable ends now */
/* contact box end */
/*-----------------------------------------Jobs.html-----------------------------------------*/
body.jobs {
word-wrap: break-word;
width: 100%;
text-decoration: none;
color: white;
}
body.jobs p.ref-num {
margin: 3%;
}
body.jobs p {
margin: 1.5%;
}
body.jobs #jobsCareersSpacey {
line-height: 150%; /*More readable*/
letter-spacing: 1.5px; /*More readable*/
width: 100%;
padding: 30px 30px 20px;
text-align: center;
}
body.jobs section {
background-size: cover;
background-position: center; /*Make it so the background image stays at the middle*/
padding: 4vh 0;
margin: 3vh 0.5vh;
text-align: left;
position: relative;
}
/* Borders and hovering transtions for readability*/
body.jobs article {
border: 3px solid white;
border-radius: 20px;
padding: 10px;
box-sizing: border-box;
width: 50vw;
transition: 0.5s;
background-color: rgb(0, 0, 0, 0.5);
}
body.jobs article:hover {
color: rgb(255, 255, 255);
cursor: pointer;
background-color: black;
transition: 0.5s;
}
/* Hovering transition for heading*/
body.jobs h1 {
display: inline-block;
background-size: cover;
border: 3px solid rgb(0, 0, 0);
padding: 3%;
border-radius: 22px;
background-color: rgb(0, 0, 0, 0.7);
font-size: 8vw;
font-family: sans-serif;
text-align: center;
transition: 0.3s; /*For smoothness*/
}
body.jobs h1:hover {
background-color: #000000;
border: 7px solid rgb(91, 91, 91);
transition: 0.3s; /*For smoothness*/
font-size: 10vw;
}
body.jobs h2.jobsH2 {
padding: 2%;
display: inline-block;
border: 3px solid white;
border-radius: 2px;
color: white;
font-size: 3vw;
font-family: sans-serif;
}
body.jobs h3.jobsH3 {
color: white;
font-size: 20px;
font-family: sans-serif;
}
body.jobs h2.doge {
padding: 3px;
display: inline-block;
border: 2px solid black;
border-radius: 2px;
color: black;
font-size: 3vw;
font-family: sans-serif;
}
body.jobs section.job_des {
border: 3px solid white;
border-radius: 10px;
padding: 10px;
background-position: center; /*Make it so the background image stays at the middle*/
background-size: cover;
}
body.jobs #Aerospace {
background-image: url(./images/aerospace.jpg);
}
body.jobs #Astrophysicist {
background-image: url(./images/astrophysic.jpg);
}
body.jobs #SoftwareDeveloper {
background-image: url(./images/aerospace.jpg);
}
/*Transition: Color change when hovering over Apply Now*/
body.jobs .application {
display: inline;
margin-right: 5vw;
border: 1px solid white;
border-radius: 3px;
padding: 8px;
background-color: #00000050;
font-size: 30px;
font-family: sans-serif;
transition: 0.3s;
}
body.jobs .application a {
color: white;
}
body.jobs .application:hover {
background-color: rgb(101, 100, 100);
}
/* Changed the Unordered list from dots to square and made the ordered list to lower roman numbers*/
body.jobs ul.squarelist {
padding-left: 4%;
list-style-type: square;
}
body.jobs ol.romanlist {
padding-left: 4%;
list-style-type: lower-roman;
}
body.jobs aside {
border: 2px solid rgb(132, 2, 239);
border-radius: 1em;
padding: 1em;
width: 25%;
float: right;
background-color: bisque;
color: black;
}
body.jobs #parafirst {
margin: 3%;
text-align: left;
}
.pagination {
text-align: center;
padding: 10px;
}
.pagination a {
color: white;
text-decoration: none;
border: 1px solid #ccc;
margin: 6px;
padding: 5px 10px;
}
.pagination a:hover {
background-color: #001e3d;
}
.pagination .page-link.active {
background-color: #001e3d; /* Dark blue background for the active link */
color: #fff; /* White text for the active link */
}
/*-----------------------------------------Apply.html-----------------------------------------*/
/* Author: Nhu Gia Bao Nguyen */
/* General form styling */
body.apply {
background: url(./images/apply-bg.jpeg) no-repeat;
background-size: cover;
letter-spacing: 1.5px; /*More readable*/
}
form.apply {
line-height: 150%;
background: rgba(255, 255, 255, 0.925);
margin: 10% 15%;
padding: 3%;
box-sizing: border-box;
border-radius: 20px;
}
form.apply fieldset {
box-sizing: border-box;
border-radius: 3px;
margin: 2%;
padding: 1%;
}
form.apply fieldset p,
form.apply fieldset label {
font-size: 1.5vw;
line-height: 40px;
margin: 1%;
}
form.apply fieldset input,
form.apply fieldset select {
box-sizing: border-box;
border-radius: 10px;
margin: 1% 0;
padding: 1%;
line-height: 20px;
}
form.apply h1.apply_title {
font-size: 3vw;
text-align: center;
color: black;
}
form.apply .required::after {
content: " *";
color: red;
}
form.apply fieldset legend {
font-size: 2vw;
font-weight: bold;
color: red;
}
form.apply fieldset ul.rules li {
display: flex;
align-items: center;
}
/*Upload file*/
form.apply fieldset div#apply input.upload-box {
font-size: 1vw;
background: #ffffff;
border-radius: 30px;
box-shadow: 3px 3px 10px #000000;
outline: none;
}
form.apply fieldset p input.texts {
border: 1px solid;
}
div.tacbox h2 {
margin: 1%;
}
div.agree {
margin: 3% 0;
}
/*Use the type="checkbox" to make a list of terms and conditions that can close and open*/
form.apply h2.rules-title {
color: red;
font-weight: bold;
}
form.apply ul.rules {
margin: 1% 5%;
width: 80%;
}
form.apply ul.rules li {
list-style: none;
width: 100%;
margin: 20px;
padding: 10px;
border-radius: 8px;
background: #e3edf7;
box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
-6px 6px 10px -1px rgba(255, 255, 255, 0.7);
}
form.apply ul.rules li label {
display: flex;
align-items: center;
padding: 10px;
font-size: 1.5vw;
font-weight: 500;
cursor: pointer;
}
form.apply ul.rules li label.header::before {
content: "+";
margin-right: 10px;
font-weight: 600;
}
form.apply .rules input[type="checkbox"] {
display: none;
}
form.apply .rules .content {
color: #555;
padding: 0 10px;
line-height: 26px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s, padding 0.5s; /* max-height is for opening and closing, padding is to make the animation smoother by making it looks like fully opened or closed */
}
form.apply .rules input[type="checkbox"]:checked + label + .content {
max-height: 400px;
padding: 10px 10px 20px;
}
form.apply .rules input[type="checkbox"]:checked ~ label.header::before {
content: "-";
}
/*Apply and reset button*/
form.apply button.submit {
background-color: #474143;
color: #eedfc7;
border: 3px solid #eedfc7;
margin: 4px 2px;
padding: 12px 24px;
border-radius: 8px;
text-align: center;
display: inline-block;
font-size: 2vw;
cursor: pointer;
}
form.apply button.submit:hover {
background-color: #7c7a7a;
transform: scale(1.05);
}
form.apply button.redo {
background-color: #474143;
color: #eedfc7;
border: 3px solid #eedfc7;
margin: 4px 2px;
padding: 12px 24px;
border-radius: 8px;
text-align: center;
display: inline-block;
font-size: 2vw;
cursor: pointer;
}
form.apply button.redo:hover {
background-color: #7c7a7a;
transform: scale(1.05);
}
/*----------------------------------------Confirmation----------------------------------------*/
/*----------------------------------------Enhancements----------------------------------------*/
/* Author: Nhu Gia Bao Nguyen */
body.enhancements {
letter-spacing: 1.5px; /*More readable*/
color: white;
}
body.enhancements div.enc1,
body.enhancements div.enc2 {
line-height: 150%;
background-color: rgb(0, 0, 0, 0.5);
box-sizing: border-box;
border-radius: 5px;
border: white 2px solid;
margin: 3% auto;
width: 80%;
padding: 5%;
text-align: center;
min-height: 50vh;
}
body.enhancements div.enc1 h2,
body.enhancements div.enc2 h2 {
font-size: 35px;
margin-bottom: 2.5%;
}
/* Around the border hover animation */
body.enhancements div.enc1 a,
body.enhancements div.enc2 a {
margin: 3% 1%;
padding: 2vw;
text-decoration: none;
border-style: solid;
border-width: 1px;
border-radius: 5px;
font-family: sans-serif;
position: relative;
white-space: nowrap;
color: white;
}
body.enhancements div.enc1 a:hover {
border-radius: 0;
}
body.enhancements div.enc1 a span {
position: absolute;
display: block;
background: rgb(255, 255, 255);
}
body.enhancements div.enc1 a span:nth-child(1) {
/*The first span in <a> tag*/
left: 0;
top: 0;
width: 100%;
height: 2px;
transform-origin: left;
transform: scaleX(0); /* width * 0 */
transition: 0.15s;
}
body.enhancements div.enc1 a:hover span:nth-child(1) {
transition: 0.15s;
transform: scaleX(1); /*normal width*/
}
body.enhancements div.enc1 a span:nth-child(2) {
/*The second span in <a> tag*/
right: 0;
top: 0;
width: 2px;
height: 100%;
transform-origin: top;
transform: scaleY(0); /* height * 0 */
transition: 0.15s;
}
body.enhancements div.enc1 a:hover span:nth-child(2) {
transition: 0.15s;
transform: scaleY(1); /*normal height*/
transition-delay: 0.1s; /* wait for set time then start the transition*/
}
body.enhancements div.enc1 a span:nth-child(3) {
/*The third span in <a> tag*/
right: 0;
bottom: 0;
width: 100%;
height: 2px;
transform-origin: right;
transform: scaleX(0); /* width * 0 */
transition: 0.15s;
}
body.enhancements div.enc1 a:hover span:nth-child(3) {
transition: 0.15s;
transform: scaleX(1); /*normal width*/
transition-delay: 0.2s; /* wait for set time then start the transition*/
}
body.enhancements div.enc1 a span:nth-child(4) {
/*The fourth span in <a> tag*/
left: 0;
bottom: 0;
width: 2px;
height: 100%;
transform-origin: bottom;
transform: scaleY(0); /* height * 0 */
transition: 0.15s;
}
body.enhancements div.enc1 a:hover span:nth-child(4) {
transition: 0.15s;
transform: scaleY(1); /*normal height*/
transition-delay: 0.3s; /* wait for set time then start the transition*/
}
body.enhancements div.enc1 a,
body.enhancements div.enc2 a {
color: #ffffff;
background-color: rgb(0, 0, 0, 0.5);
text-decoration: none;
border: 1px solid #e1e1e1;
padding: 2% 4%;
display: inline-block;
border-radius: 5px;
font-size: 25px;
font-family: sans-serif;
transition: 0.3s; /*For smoothness*/
}
/*----------------------------------------Footer----------------------------------------*/
/* Author: Nhu Gia Bao Nguyen */
footer {
background: black;
}
footer .footer-container {
width: 100%;
padding: 3% 1% 2%;
}
footer .social-icons {
display: flex;
justify-content: center;
}
footer .social-icons a {
text-decoration: none;
padding: 1%;
background-color: white;
margin: 2%;
border-radius: 50%;
}
footer .social-icons a {
font-size: 2em;
color: black;
opacity: 0.9;
overflow: hidden;
}
footer .social-icons a h3 {
display: none;
}
/* Provided a transition effect using hover when you hovwer the mouse over the elements above mentioned element
then the design configurations of the icons in the class will change */
footer .social-icons a:hover {
color: white;
background-color: #111;
transition: 0.5s;
}
footer .footer-nav {
margin: 3% 0;
}
footer .footer-nav ul {
width: 100%;
margin: auto;
text-align: center;
}
footer .footer-nav ul li {
display: inline-block;
margin: 0 2%;
}
footer .footer-nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 5px;
text-transform: uppercase;
position: relative;
display: inline-block;
transition: 0.3s; /*For smoothness*/
}
footer .footer-nav ul li a::after {
content: "";
position: absolute;
bottom: 8px;
height: 1px;
width: 70%;
left: 15%;
background-color: rgb(255, 255, 255);
transition: 0.3s;
transition-timing-function: ease-in-out;
transform: scaleX(0); /* width * 0 */
}
footer .footer-nav ul li a:hover::after {
transform: scaleX(1); /*normal width*/
}
footer .footer-nav ul li a:hover {
color: rgb(255, 255, 255);
letter-spacing: 1.5px; /*More readable*/
cursor: pointer;
}
footer .footer-nav ul li a span {
position: absolute;
display: block;
background: white;
}
/* Around the border hover animation */
footer .footer-nav ul li a span:nth-child(1) {
/*The first span in <a> tag*/
left: 0;
top: 0;
width: 100%;
height: 2px;
transform-origin: left;
transform: scaleX(0); /* width * 0 */
transition: 0.15s;
}
footer .footer-nav ul li a:hover span:nth-child(1) {
transition: 0.15s;
transform: scaleX(1); /*normal width*/
}
footer .footer-nav ul li a span:nth-child(2) {
/*The second span in <a> tag*/
right: 0;
top: 0;
width: 2px;
height: 100%;
transform-origin: top;
transform: scaleY(0); /* height * 0 */
transition: 0.15s;
}
footer .footer-nav ul li a:hover span:nth-child(2) {
transition: 0.15s;
transform: scaleY(1); /*normal height*/
transition-delay: 0.1s; /* wait for set time then start the transition*/
}
footer .footer-nav ul li a span:nth-child(3) {
/*The third span in <a> tag*/
right: 0;
bottom: 0;
width: 100%;
height: 2px;
transform-origin: right;
transform: scaleX(0); /* width * 0 */
transition: 0.15s;
}
footer .footer-nav ul li a:hover span:nth-child(3) {
transition: 0.15s;
transform: scaleX(1); /*normal width*/
transition-delay: 0.2s; /* wait for set time then start the transition*/
}
footer .footer-nav ul li a span:nth-child(4) {
/*The fourth span in <a> tag*/
left: 0;
bottom: 0;
width: 2px;
height: 100%;
transform-origin: bottom;
transform: scaleY(0); /* height * 0 */
transition: 0.15s;
}
footer .footer-nav ul li a:hover span:nth-child(4) {
transition: 0.15s;
transform: scaleY(1); /*normal height*/
transition-delay: 0.3s; /* wait for set time then start the transition*/
}
footer .footer-bot {
background-color: #000;
padding: 20px;
text-align: center;
}
footer .footer-bot p {
color: white;
}
footer .design-name {
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
margin: 0 5px;
}
/*----------------------------------------Responsive Styling (under to 333px)----------------------------------------*/
@media (max-width: 1137px) {
form.apply fieldset input.texts {
width: 95%;
}
form.apply fieldset textarea {
width: 95%;
}
form.apply h1.apply_title {
font-size: 25px;
}
form.apply fieldset legend {
font-size: 20px;
}
form.apply fieldset p,
form.apply fieldset label,
form.apply ul.rules li label {
font-size: 2vw;
line-height: 40px;
margin: 1%;
}
}
@media (max-width: 846px) {
footer .footer-container ul {
position: relative;
width: 100%;
text-align: center;
transition: all 0.5s;
}
footer .footer-container ul li {
display: block;
margin: 10px 0;
line-height: 20px;
}
form.apply fieldset p,
form.apply fieldset label,
form.apply ul.rules li label {
font-size: 2.5vw;
line-height: 40px;
margin: 1%;
}
}
@media (min-width: 768px) {
body.about .team-col {
flex-basis: 31%; /* Display team members*/
}
}
@media (max-width: 700px) {
form.apply h1.apply_title {
font-size: 25px;
}
form.apply fieldset legend {
font-size: 20px;
}
form.apply ul.rules li label {
font-size: 20px;
}
}
@media (max-width: 583px) {
body.jobs .application {
font-size: 20px;
}
}
@media (max-width: 538px) {
form.apply fieldset .upload-box {
width: 95%;
}
form.apply h1.apply_title {
font-size: 25px;
}
form.apply fieldset legend {
font-size: 20px;
}
form.apply fieldset p,
form.apply fieldset label {
font-size: 3vw;
line-height: 40px;
margin: 1%;
}
}
@media (max-width: 390px) {
form.apply h1.apply_title {
font-size: 20px;
}
form.apply fieldset legend {
font-size: 15px;
}
form.apply fieldset p,
form.apply fieldset label {
font-size: 3.5vw;
line-height: 40px;
}
}
/* -------------------------End------------------------------ */