Difference between revisions of "Team:Worldshaper-XSHS"

Line 6: Line 6:
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<title>WorldshaperXSHS</title>
 
<title>WorldshaperXSHS</title>
−
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
+
<link href="css/WorldshaperXHSHsinglePageTemplate.css" rel="stylesheet" type="text/css">
 
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
 
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
 
<script>var __adobewebfontsappname__="dreamweaver"</script>
 
<script>var __adobewebfontsappname__="dreamweaver"</script>
Line 19: Line 19:
 
<body>
 
<body>
 
<!-- Main Container -->
 
<!-- Main Container -->
 +
<style>a {
 +
text-decoration: none
 +
}
 +
body {
 +
font-family: source-sans-pro;
 +
background-color: #f2f2f2;
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
font-style: normal;
 +
font-weight: 200;
 +
}
 +
/* Container */
 +
.container {
 +
width: 90%;
 +
margin-left: auto;
 +
margin-right: auto;
 +
height: 1000px;
 +
background-color: #FFB100;
 +
}
 +
/* Navigation */
 +
header {
 +
width: 100%;
 +
height: 5%;
 +
background-color: #FFB100;
 +
 +
}
 +
.logo {
 +
color: #fff;
 +
font-weight: bold;
 +
text-align: undefined;
 +
width: 10%;
 +
float: left;
 +
margin-top: 15px;
 +
margin-left: 25px;
 +
letter-spacing: 4px;
 +
}
 +
nav {
 +
float: right;
 +
width: 50%;
 +
text-align: right;
 +
margin-right: 25px;
 +
}
 +
header nav ul {
 +
list-style: none;
 +
float: right;
 +
}
 +
nav ul li {
 +
float: left;
 +
color: #FFFFFF;
 +
font-size: 14px;
 +
text-align: left;
 +
margin-right: 25px;
 +
letter-spacing: 2px;
 +
font-weight: bold;
 +
transition: all 0.3s linear;
 +
}
 +
ul li a {
 +
color: #FFFFFF;
 +
text-decoration: none;
 +
}
 +
ul li:hover a {
 +
color: #2C9AB7;
 +
}
 +
.hero_header {
 +
color: #FFFFFF;
 +
text-align: center;
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
letter-spacing: 4px;
 +
}
 +
/* Hero Section */
 +
.hero {
 +
background-color: #00C5FF;
 +
padding-top: 150px;
 +
padding-bottom: 150px;
 +
 +
}
 +
.hero1 {
 +
background-color: #00C5FF;
 +
padding-top: 150px;
 +
padding-bottom: 150px;
 +
    height: 1000px;
 +
 +
}
 +
.cover {
 +
background-color: #CFCFCF;
 +
padding-top: 150px;
 +
padding-bottom: 150px;
 +
}
 +
.light {
 +
font-weight: bold;
 +
color: #717070;
 +
}
 +
.tagline {
 +
text-align: center;
 +
color: #FFFFFF;
 +
margin-top: 4px;
 +
font-weight: lighter;
 +
text-transform: uppercase;
 +
letter-spacing: 1px;
 +
font-size: 50px;
 +
}
 +
.HUANGNAN {
 +
text-align: center;
 +
color: #000000;
 +
margin-top: 4px;
 +
font-weight: lighter;
 +
text-transform: uppercase;
 +
letter-spacing: 1px;
 +
font-size: 50px;
 +
}
 +
.emmm {
 +
background-color: #FFB100;
 +
padding-top: 150px;
 +
padding-bottom: 150px;
 +
}
 +
/* About Section */
 +
.about {
 +
background-color: #ffffFF;
 +
padding-top: 150px;
 +
padding-bottom: 150px;
 +
}
 +
.light {
 +
font-weight: bold;
 +
color: #717070;
 +
}
 +
.tagline {
 +
text-align: center;
 +
color: #FFFFFF;
 +
margin-top: 4px;
 +
font-weight: lighter;
 +
text-transform: uppercase;
 +
letter-spacing: 1px;
 +
}
 +
/* Stats Gallery */
 +
.stats {
 +
color: #717070;
 +
margin-bottom: 5px;
 +
}
 +
.gallery {
 +
clear: both;
 +
display: inline-block;
 +
width: 100%;
 +
background-color: #FFFFFF;
 +
/* [disabled]min-width: 400px;
 +
*/
 +
padding-bottom: 35px;
 +
padding-top: 0px;
 +
margin-top: -5px;
 +
margin-bottom: 0px;
 +
}
 +
.thumbnail {
 +
width: 25%;
 +
text-align: center;
 +
float: left;
 +
margin-top: 35px;
 +
}
 +
.gallery .thumbnail h4 {
 +
margin-top: 5px;
 +
margin-right: 5px;
 +
margin-bottom: 5px;
 +
margin-left: 5px;
 +
color: #52BAD5;
 +
}
 +
.gallery .thumbnail p {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
color: #A3A3A3;
 +
}
 +
/* Parallax Section */
 +
.banner {
 +
background-color: #2D9AB7;
 +
background-image: url(../images/parallax.png);
 +
height: 400px;
 +
background-attachment: fixed;
 +
background-size: cover;
 +
background-repeat: no-repeat;
 +
}
 +
.parallax {
 +
color: #FFFFFF;
 +
text-align: right;
 +
padding-right: 100px;
 +
padding-top: 110px;
 +
letter-spacing: 2px;
 +
margin-top: 0px;
 +
}
 +
.parallax_description {
 +
color: #FFFFFF;
 +
text-align: right;
 +
padding-right: 100px;
 +
width: 30%;
 +
float: right;
 +
font-weight: lighter;
 +
line-height: 23px;
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
}
 +
/* More info */
 +
footer {
 +
background-color: #FFFFFF;
 +
padding-bottom: 35px;
 +
}
 +
.footer_column {
 +
width: 50%;
 +
text-align: center;
 +
padding-top: 30px;
 +
float: left;
 +
}
 +
footer .footer_column h3 {
 +
color: #B3B3B3;
 +
text-align: center;
 +
}
 +
footer .footer_column p {
 +
color: #717070;
 +
background-color: #FFFFFF;
 +
}
 +
.cards {
 +
width: 100%;
 +
height: auto;
 +
max-width: 400px;
 +
max-height: 200px;
 +
}
 +
.cute {
 +
width: 100%;
 +
height: auto;
 +
max-width: 1920px;
 +
max-height: 1080px;
 +
}
 +
footer .footer_column p {
 +
padding-left: 30px;
 +
padding-right: 30px;
 +
text-align: justify;
 +
line-height: 25px;
 +
font-weight: lighter;
 +
margin-left: 20px;
 +
margin-right: 20px;
 +
}
 +
.button {
 +
width: 200px;
 +
margin-top: 40px;
 +
margin-right: auto;
 +
margin-bottom: auto;
 +
margin-left: auto;
 +
padding-top: 20px;
 +
padding-right: 10px;
 +
padding-bottom: 20px;
 +
padding-left: 10px;
 +
text-align: center;
 +
vertical-align: middle;
 +
border-radius: 0px;
 +
text-transform: uppercase;
 +
font-weight: bold;
 +
letter-spacing: 2px;
 +
border: 3px solid #FFFFFF;
 +
color: #FFFFFF;
 +
transition: all 0.3s linear;
 +
}
 +
.button:hover {
 +
background-color: #FEFEFE;
 +
color: #C4C4C4;
 +
cursor: pointer;
 +
}
 +
.copyright {
 +
text-align: center;
 +
padding-top: 20px;
 +
padding-bottom: 20px;
 +
background-color: #FFB100;
 +
color: #FFFFFF;
 +
text-transform: uppercase;
 +
font-weight: lighter;
 +
letter-spacing: 2px;
 +
border-top-width: 2px;
 +
}
 +
.footer_banner {
 +
background-color: #B3B3B3;
 +
padding-top: 60px;
 +
padding-bottom: 60PX;
 +
margin-bottom: 0px;
 +
background-image: url(../images/pattern.png);
 +
background-repeat: repeat;
 +
}
 +
footer {
 +
display: inline-block;
 +
}
 +
.hidden {
 +
display: none;
 +
}
 +
 +
/* Mobile */
 +
@media (max-width: 320px) {
 +
.logo {
 +
width: 100%;
 +
text-align: center;
 +
margin-top: 13px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
}
 +
.container header nav {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
width: 100%;
 +
float: none;
 +
display: none;
 +
}
 +
header nav ul {
 +
}
 +
nav ul li {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
width: 100%;
 +
text-align: center;
 +
}
 +
.text_column {
 +
width: 100%;
 +
text-align: justify;
 +
padding-top: 0px;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
}
 +
.thumbnail {
 +
width: 100%;
 +
}
 +
.footer_column {
 +
width: 100%;
 +
margin-top: 0px;
 +
}
 +
.parallax {
 +
text-align: center;
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
padding-top: 40%;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
width: 100%;
 +
font-size: 18px;
 +
}
 +
.parallax_description {
 +
padding-top: 0px;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
width: 90%;
 +
margin-top: 25px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 12px;
 +
float: none;
 +
text-align: center;
 +
}
 +
.banner {
 +
background-color: #2D9AB7;
 +
background-image: none;
 +
}
 +
.tagline {
 +
margin-top: 20px;
 +
line-height: 22px;
 +
}
 +
.hero_header {
 +
padding-left: 10px;
 +
padding-right: 10px;
 +
line-height: 22px;
 +
text-align: center;
 +
}
 +
}
 +
 +
/* Small Tablets */
 +
@media (min-width: 321px)and (max-width: 767px) {
 +
.logo {
 +
width: 100%;
 +
text-align: center;
 +
margin-top: 13px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
color: #043745;
 +
}
 +
.container header nav {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
width: 100%;
 +
float: none;
 +
overflow: auto;
 +
display: inline-block;
 +
background: #52bad5;
 +
}
 +
header nav ul {
 +
padding: 0px;
 +
float: none;
 +
}
 +
nav ul li {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
width: 100%;
 +
text-align: center;
 +
padding-top: 8px;
 +
padding-bottom: 8px;
 +
}
 +
.text_column {
 +
width: 100%;
 +
text-align: left;
 +
padding-top: 0px;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
}
 +
.thumbnail {
 +
width: 100%;
 +
}
 +
.footer_column {
 +
width: 100%;
 +
margin-top: 0px;
 +
}
 +
.parallax {
 +
text-align: center;
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
padding-top: 40%;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
width: 100%;
 +
font-size: 18px;
 +
}
 +
.parallax_description {
 +
padding-top: 0px;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
margin-top: 30%;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
float: none;
 +
width: 100%;
 +
text-align: center;
 +
}
 +
.thumbnail {
 +
width: 50%;
 +
}
 +
.parallax {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
padding-top: 20%;
 +
}
 +
.parallax_description {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
width: 100%;
 +
padding-top: 30px;
 +
}
 +
.banner {
 +
padding-left: 20px;
 +
padding-right: 20px;
 +
}
 +
.footer_column {
 +
width: 100%;
 +
}
 +
}
 +
 +
/* Small Desktops */
 +
@media (min-width: 768px) and (max-width: 1096px) {
 +
.text_column {
 +
width: 100%;
 +
}
 +
.thumbnail {
 +
width: 50%;
 +
}
 +
.text_column {
 +
width: 100%;
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
padding-top: 0px;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
}
 +
.banner {
 +
margin-top: 0px;
 +
padding-top: 0px;
 +
}
 +
}
 +
</style>
 
<div class="container">  
 
<div class="container">  
 
   <!-- Navigation -->
 
   <!-- Navigation -->
Line 36: Line 550:
 
     </nav>
 
     </nav>
 
   </header>
 
   </header>
−
   <img src="images/tu.jpg" alt="" width="1920" height="1080" class="cute"/>
+
   <img src="images/worldshaperXSHSfengmian.jpg" alt="" width="1920" height="1080" class="cute"/>
 
   <!-- Hero Section -->
 
   <!-- Hero Section -->
 
   <section class="hero" id="hero">
 
   <section class="hero" id="hero">

Revision as of 07:55, 2 October 2017

<!doctype html> WorldshaperXSHS

E.coli:oxygen is delicious!
BACKGROUND
TEAM
PROJECT
PARTS
SAFETY
HP
AWARDS
©2017 - IGEM worldshaperxshs