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------------------------------ */