Difference between revisions of "Team:BostonU HW/LearnMARS"

Line 8: Line 8:
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  
−
<title>BostonU_HW Main Page</title>
+
<title>Bronze Medal</title>
  
 
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  
−
<style>
+
<!-- EXTRA STYLING -->
−
#page_background{
+
<style>
−
background-image: url("https://static.igem.org/mediawiki/2017/0/04/MARS_General_Background.png");
+
.Title{
−
background-size:100% 100vh;
+
color: red;
−
}
+
}
−
#Header_Pic{
+
#page_background{
 +
background-image: url("https://static.igem.org/mediawiki/2017/0/04/MARS_General_Background.png");
 +
}
 +
#Header_Pic{
 +
height: 60%;
 +
}
 +
#MARS{
 +
height: 25%;
 +
position: absolute;
 +
z-index: 1;
 +
transform: translate(45%,65%);
 +
}
 +
#BACKGROUND{
 +
width: 100%;
 +
position: absolute;
 +
}
 +
#TITLE{
 +
position: absolute;
 +
width: 70%;
 +
z-index: 2;
 +
transform: translate(35%,95%);
 +
}
 +
.main{
 +
margin-top: 2%;
 +
}
 +
.text_section{
  
−
}
+
}
−
#MARS{
+
.text{
−
width: 100%;
+
 
−
position: absolute;
+
}
−
z-index: 1;
+
</style>
−
transform: translate(0,8%);
+
−
/*margin-left: 4%;*/
+
−
}
+
−
#BACKGROUND{
+
−
width: 100%;
+
−
position: absolute;
+
−
}
+
−
#TITLE{
+
−
position: absolute;
+
−
width: 50%;
+
−
z-index: 2;
+
−
transform: translate(85%,83%);
+
−
}
+
−
#FlowChart{
+
−
height: 90%;
+
−
display: block;
+
−
    margin: 0 auto;
+
−
}
+
−
.text{
+
−
margin-bottom: 5%;
+
−
}
+
−
.main-raised{
+
−
margin-bottom: 10%;
+
−
}
+
−
</style>
+
  
 
</head>
 
</head>
  
 
<body>
 
<body>
−
 
+
<!-- *************THIS IS WHERE PAGE STARTS************* -->
−
<div class ="landing-page">
+
<div class="landing-page">
 
<div class="wrapper" id="page_background">
 
<div class="wrapper" id="page_background">
−
<div class="header" id="Header_Pic">
+
<div class="header" id="Header_Pic">
−
<img src="https://static.igem.org/mediawiki/2017/0/02/MARSbackground.png" id="BACKGROUND">
+
<img src="https://static.igem.org/mediawiki/2017/0/02/MARSbackground.png" id="BACKGROUND">
−
<img src="https://static.igem.org/mediawiki/2017/4/40/MARS_Main.png" id="TITLE">
+
<img src="https://static.igem.org/mediawiki/2017/2/22/MARSLogo2.png" id="MARS">
−
<img src="https://static.igem.org/mediawiki/2017/3/38/MARS_Logo_Large.png" id="MARS">
+
<img src="https://static.igem.org/mediawiki/2017/c/cc/MARS_Project.png" id="TITLE">
−
</div>
+
</div>
−
<div class="main main-raised">
+
<div class="main main-raised">
−
<div class="container">
+
<div class="container">
−
<h1 class="text-center">Welcome to the 2017 BostonU Hardware Project: MARS</h1>
+
<h1 class="text-center">What is MARS?</h1>
−
<div class="text">
+
<div class="row">
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus massa turpis, ullamcorper sit amet mauris eu, porta posuere nunc. Duis gravida lectus sed augue interdum, eu ultricies turpis dictum. Nunc in dolor risus. Ut eget lorem rhoncus, placerat arcu id, tincidunt mauris. Nullam id sapien nulla. Aenean laoreet aliquet enim, eget dignissim dolor tempor in. Proin maximus ligula nunc, eu commodo est laoreet a. Maecenas sollicitudin est nunc, pretium dapibus ex sodales in. Ut orci nunc, pellentesque ac sagittis at, luctus nec nunc. Sed ultrices metus tempus, vestibulum odio a, interdum nunc. Integer bibendum massa est. Ut fringilla semper enim, quis gravida libero. Morbi diam ligula, accumsan eu convallis a, ornare in nunc. Donec gravida scelerisque quam quis fermentum.
+
<h3>Explanation</h3>
 +
<div class="text_section">
 +
<div class="text">
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lacinia urna ut lectus dictum ultricies. Phasellus euismod tellus quis felis condimentum ullamcorper. Aenean blandit rutrum viverra. Nam at nisl feugiat, gravida magna non, porttitor libero. Suspendisse at purus mattis, ullamcorper odio at, fringilla mi. Sed ultrices viverra est, eu fermentum justo feugiat vitae. Nunc sed egestas enim. Sed sed eros ac mauris suscipit aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque tincidunt nisi justo, a volutpat risus eleifend non.
 +
</div>
 +
 
 +
<div class="text">
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lacinia urna ut lectus dictum ultricies. Phasellus euismod tellus quis felis condimentum ullamcorper. Aenean blandit rutrum viverra. Nam at nisl feugiat, gravida magna non, porttitor libero. Suspendisse at purus mattis, ullamcorper odio at, fringilla mi. Sed ultrices viverra est, eu fermentum justo feugiat vitae. Nunc sed egestas enim. Sed sed eros ac mauris suscipit aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque tincidunt nisi justo, a volutpat risus eleifend non.
 +
</div>
 +
 
 +
<div class="text">
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lacinia urna ut lectus dictum ultricies. Phasellus euismod tellus quis felis condimentum ullamcorper. Aenean blandit rutrum viverra. Nam at nisl feugiat, gravida magna non, porttitor libero. Suspendisse at purus mattis, ullamcorper odio at, fringilla mi. Sed ultrices viverra est, eu fermentum justo feugiat vitae. Nunc sed egestas enim. Sed sed eros ac mauris suscipit aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque tincidunt nisi justo, a volutpat risus eleifend non.
 +
</div>
 +
 
 +
<div class="text">
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lacinia urna ut lectus dictum ultricies. Phasellus euismod tellus quis felis condimentum ullamcorper. Aenean blandit rutrum viverra. Nam at nisl feugiat, gravida magna non, porttitor libero. Suspendisse at purus mattis, ullamcorper odio at, fringilla mi. Sed ultrices viverra est, eu fermentum justo feugiat vitae. Nunc sed egestas enim. Sed sed eros ac mauris suscipit aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque tincidunt nisi justo, a volutpat risus eleifend non.
 +
</div>
 +
 
 
</div>
 
</div>
−
</div>
 
−
</div>
 
−
<div class="header" id="Header_Pic">
 
−
<img src="https://static.igem.org/mediawiki/2017/3/3b/MARS_Flowchart.png" id="FlowChart">
 
−
</div>
 
 
</div>
 
</div>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</body>
 
</body>

Revision as of 20:16, 27 October 2017

BostonU_HW

Bronze Medal

What is MARS?

Explanation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lacinia urna ut lectus dictum ultricies. Phasellus euismod tellus quis felis condimentum ullamcorper. Aenean blandit rutrum viverra. Nam at nisl feugiat, gravida magna non, porttitor libero. Suspendisse at purus mattis, ullamcorper odio at, fringilla mi. Sed ultrices viverra est, eu fermentum justo feugiat vitae. Nunc sed egestas enim. Sed sed eros ac mauris suscipit aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque tincidunt nisi justo, a volutpat risus eleifend non.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lacinia urna ut lectus dictum ultricies. Phasellus euismod tellus quis felis condimentum ullamcorper. Aenean blandit rutrum viverra. Nam at nisl feugiat, gravida magna non, porttitor libero. Suspendisse at purus mattis, ullamcorper odio at, fringilla mi. Sed ultrices viverra est, eu fermentum justo feugiat vitae. Nunc sed egestas enim. Sed sed eros ac mauris suscipit aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque tincidunt nisi justo, a volutpat risus eleifend non.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lacinia urna ut lectus dictum ultricies. Phasellus euismod tellus quis felis condimentum ullamcorper. Aenean blandit rutrum viverra. Nam at nisl feugiat, gravida magna non, porttitor libero. Suspendisse at purus mattis, ullamcorper odio at, fringilla mi. Sed ultrices viverra est, eu fermentum justo feugiat vitae. Nunc sed egestas enim. Sed sed eros ac mauris suscipit aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque tincidunt nisi justo, a volutpat risus eleifend non.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lacinia urna ut lectus dictum ultricies. Phasellus euismod tellus quis felis condimentum ullamcorper. Aenean blandit rutrum viverra. Nam at nisl feugiat, gravida magna non, porttitor libero. Suspendisse at purus mattis, ullamcorper odio at, fringilla mi. Sed ultrices viverra est, eu fermentum justo feugiat vitae. Nunc sed egestas enim. Sed sed eros ac mauris suscipit aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque tincidunt nisi justo, a volutpat risus eleifend non.