(Created page with "<!DOCTYPE html> <html> <script> /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////...") |
|||
Line 456: | Line 456: | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
</style> | </style> | ||
+ | </head> | ||
+ | |||
+ | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | ||
+ | <!--- THIS IS WHERE THE HTML BEGINS ---> | ||
+ | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | ||
+ | |||
+ | <head> | ||
+ | |||
+ | <!-- This tells the browser that your page is responsive --> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | |||
+ | </head> | ||
+ | |||
+ | <!-- ADDING PRELIMINARY DESCRIPTION --> | ||
+ | <style> | ||
+ | * { | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | /* Create two equal columns that floats next to each other */ | ||
+ | .column { | ||
+ | float: left; | ||
+ | width: 50%; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | /* Clear floats after the columns */ | ||
+ | .row:after { | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | clear: both; | ||
+ | } | ||
+ | /* USE THIS FOR PAGE HEADINGS */ | ||
+ | h6 { | ||
+ | font-family: 'IBM Plex Sans', serif; | ||
+ | color: #0BB4C1; | ||
+ | font-size: 30px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | /* USE THIS FOR PARAGRAPH TEXT */ | ||
+ | h2 { | ||
+ | font-family: 'IBM Plex Sans', serif; | ||
+ | color: black; | ||
+ | font-size: 15px; | ||
+ | text-align: justify; | ||
+ | margin-right: 90px; | ||
+ | margin-left: 90px; | ||
+ | } | ||
+ | /* USE THIS FOR ANYTHING UNDER SUBHEADING TO BE IN A DIFFERENT COLOUR*/ | ||
+ | h3 { | ||
+ | font-family: 'IBM Plex Sans', serif; | ||
+ | color: #101F40; | ||
+ | font-size: 19px; | ||
+ | text-align: left; | ||
+ | margin-right: 90px; | ||
+ | margin-left: 90px; | ||
+ | } | ||
+ | /* USE THIS FOR SUBHEADINGS */ | ||
+ | h4 { | ||
+ | font-family: 'IBM Plex Sans', serif; | ||
+ | color: #274F96; | ||
+ | font-size: 15px; | ||
+ | text-align: left; | ||
+ | margin-right: 90px; | ||
+ | margin-left: 90px; | ||
+ | } | ||
+ | h5 { | ||
+ | font-family: 'IBM Plex Sans', serif; | ||
+ | color: #0085B6; | ||
+ | font-size: 15px; | ||
+ | text-align: left; | ||
+ | margin-right: 90px; | ||
+ | margin-left: 90px; | ||
+ | } | ||
+ | body { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/d/d8/T--NYU_Abu_Dhabi--backgroundlong.png"); | ||
+ | background-size: cover; | ||
+ | background-repeat: repeat; | ||
+ | } | ||
+ | div{ | ||
+ | /* width: 1000px; */ | ||
+ | margin: auto; | ||
+ | border: none; | ||
+ | } | ||
+ | .center { | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | width: 50%; | ||
+ | } | ||
+ | .tablinks { | ||
+ | margin-top: 15px; | ||
+ | /* margin-left: 50%; | ||
+ | transform: translateX(-50%); */ | ||
+ | min-width: 80px; | ||
+ | padding: 10px 15px 10px 15px; | ||
+ | border: 2px solid black; | ||
+ | border-radius: 20px; | ||
+ | transition: background-color 0.1s linear, color 0.1s linear; | ||
+ | text-transform: uppercase; | ||
+ | font-family: 'IBM Plex Sans', sans-serif; | ||
+ | font-size: 0.7rem; | ||
+ | letter-spacing: 2px; | ||
+ | font-weight: 800; | ||
+ | } | ||
+ | .tablinks2 { | ||
+ | margin-top: 15px; | ||
+ | /* margin-left: 50%; | ||
+ | transform: translateX(-50%); */ | ||
+ | min-width: 80px; | ||
+ | padding: 10px 15px 10px 15px; | ||
+ | border: 2px solid black; | ||
+ | border-radius: 20px; | ||
+ | transition: background-color 0.1s linear, color 0.1s linear; | ||
+ | text-transform: uppercase; | ||
+ | font-family: 'IBM Plex Sans', sans-serif; | ||
+ | font-size: 0.7rem; | ||
+ | letter-spacing: 2px; | ||
+ | font-weight: 800; | ||
+ | } | ||
+ | .tablinks3 { | ||
+ | margin-top: 15px; | ||
+ | /* margin-left: 50%; | ||
+ | transform: translateX(-50%); */ | ||
+ | min-width: 80px; | ||
+ | padding: 10px 15px 10px 15px; | ||
+ | border: 2px solid black; | ||
+ | border-radius: 20px; | ||
+ | transition: background-color 0.1s linear, color 0.1s linear; | ||
+ | text-transform: uppercase; | ||
+ | font-family: 'IBM Plex Sans', sans-serif; | ||
+ | font-size: 0.7rem; | ||
+ | letter-spacing: 2px; | ||
+ | font-weight: 800; | ||
+ | } | ||
+ | .tablinks4 { | ||
+ | margin-top: 15px; | ||
+ | /* margin-left: 50%; | ||
+ | transform: translateX(-50%); */ | ||
+ | min-width: 80px; | ||
+ | padding: 10px 15px 10px 15px; | ||
+ | border: 2px solid black; | ||
+ | border-radius: 20px; | ||
+ | transition: background-color 0.1s linear, color 0.1s linear; | ||
+ | text-transform: uppercase; | ||
+ | font-family: 'IBM Plex Sans', sans-serif; | ||
+ | font-size: 0.7rem; | ||
+ | letter-spacing: 2px; | ||
+ | font-weight: 800; | ||
+ | } | ||
+ | .tablinks5 { | ||
+ | margin-top: 15px; | ||
+ | /* margin-left: 50%; | ||
+ | transform: translateX(-50%); */ | ||
+ | min-width: 80px; | ||
+ | padding: 10px 15px 10px 15px; | ||
+ | border: 2px solid black; | ||
+ | border-radius: 20px; | ||
+ | transition: background-color 0.1s linear, color 0.1s linear; | ||
+ | text-transform: uppercase; | ||
+ | font-family: 'IBM Plex Sans', sans-serif; | ||
+ | font-size: 0.7rem; | ||
+ | letter-spacing: 2px; | ||
+ | font-weight: 800; | ||
+ | } | ||
+ | .tablinks:hover { | ||
+ | background-color: #7E5BD3; | ||
+ | color: white; } | ||
+ | .tablinks2:hover { | ||
+ | background-color: #0BB4C1; | ||
+ | color: white; } | ||
+ | .tablinks3:hover { | ||
+ | background-color: #0085B6; | ||
+ | color: white; } | ||
+ | .tablinks4:hover { | ||
+ | background-color: #274F96; | ||
+ | color: white; } | ||
+ | .tablinks5:hover { | ||
+ | background-color: #101F40; | ||
+ | color: white; } | ||
+ | |||
+ | .tabcontent { | ||
+ | display: none; | ||
+ | padding: 3px 9px; | ||
+ | } | ||
+ | button:focus {outline:0;} | ||
+ | |||
+ | </style> | ||
+ | |||
</head> | </head> | ||
Revision as of 08:00, 25 September 2018
<!DOCTYPE html>