Difference between revisions of "Team:KoreaSonyeodul"

Line 1: Line 1:
 
{{KoreaSonyeodul}}
 
{{KoreaSonyeodul}}
 +
<!DOCTYPE html>
 
<html lang="en">
 
<html lang="en">
−
<head>
+
  <head>
 +
    <style>
 +
.site .mainBox .mainBox1 {width: 1000px; margin-left: auto; margin-right: auto;}
 +
      <meta name= "viewport" content = "initial-scale=1.0, width= device-width"></meta>
 +
   
 +
      <!--TitlePageSummaryBox-->
 +
      .summary {margin-bottom: 20px;}
 +
      .summary h1 {margin-top:0; margin-botton:5px; margin-left: 15px; margin-right: 15px; font-size: 22px;}
 +
      .summary p {margin-top: 0; margin-bottom: 15px; margin-left: 15px; margin-right: 15px; font-size: 14px;}
 +
      .summary a {display: block; border: solid 1px #ddddd; color: black; text-decoration: none; text-align: center;}
 +
      .summary a:hover {box-shadow:0 0 10px #dddddd; opacity: 0.8;}
 +
      .summary img {max-width: 100%; height: auto; border: none; margin-bottom: 15px; vertical-align: bottom;}
 +
      .mainBox {padding-top: 20px; padding-bottom: 20px;}
 +
      .mainBox1:after {content:''; display:bloxk; clear: both}
 +
      .smallBox1 {float: left; height: 10%; width: 32%; margin-right: 2%;}
 +
      .smallBox2 {float: left; height: 10%; width: 32%; margin-right: 2%;}
 +
      .smallBox3 {float: left; height: 10%; width: 32%;}
  
−
<style>
 
  
−
body{
+
    </style>
 +
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 +
      <meta name= "viewport" content = "initial-scale=1.0, width= device-width" />
 +
      </link>
 +
    </head>
  
−
margin: 0;
+
  <body>
−
background: url('https://static.igem.org/mediawiki/2016/e/ee/T--KoreaSonyeodul--TitleBackground.png');
+
   
−
background-size: 100%;
+
<!--Title-->
−
background-repeat: no-repeat;
+
    <div id="" align="center">
−
background-attachment: top;
+
      <div id="fontlight" class="site">
 +
        <h1>
 +
          <font face="Roboto" weight="200">KOREASONYEODUL</font>
 +
        </h1>
 +
        <h2>
 +
          <font face="Roboto">Main Subtitle</font>
 +
        </h2>
 +
      </div>
 +
    </div>
 +
    <!--Animation-->
 +
    <div id="animation">
 +
     
 +
    </div>
 +
    <!--TitleBoxes-->
 +
    <div class="mainBox">
 +
      <article class="summary">
 +
        <a href="#">
 +
          <img src="https://static.igem.org/mediawiki/2016/thumb/7/74/T--KoreaSonyeodul--Icon.jpeg/600px-T--KoreaSonyeodul--Icon.jpeg"></img>
 +
          <h1>
 +
            This is the Main Content
 +
          </h1>
 +
          <p>Here comes the explanation.</p>
 +
        </a>
 +
      </article>
 +
      </div>
 +
 +
    <div class="mainBox1">
 +
      <article class="summary">
 +
        <div class="smallBox1">
 +
          <a href="#">
 +
            <img src="https://static.igem.org/mediawiki/2016/thumb/7/74/T--KoreaSonyeodul--Icon.jpeg/600px-T--KoreaSonyeodul--Icon.jpeg"></img>
 +
            <h1>
 +
              This is the Main Content1
 +
            </h1>
 +
            <p>Here comes the explanation.</p>
 +
          </a>
 +
        </div>
 +
      </article>
 +
      <article class="summary">
 +
        <div class="smallBox2">
 +
          <a href="#">
 +
            <img src="https://static.igem.org/mediawiki/2016/thumb/7/74/T--KoreaSonyeodul--Icon.jpeg/600px-T--KoreaSonyeodul--Icon.jpeg"></img>
 +
            <h1>
 +
              This is the Main Content1
 +
            </h1>
 +
            <p>Here comes the explanation.</p>
 +
          </a>
 +
        </div>
 +
      </article>
 +
      <article class="summary">
 +
        <div class="smallBox3">
 +
          <a href="#">
 +
            <img src="https://static.igem.org/mediawiki/2016/thumb/7/74/T--KoreaSonyeodul--Icon.jpeg/600px-T--KoreaSonyeodul--Icon.jpeg"></img>
 +
            <h1>
 +
              This is the Main Content1
 +
            </h1>
 +
            <p>Here comes the explanation.</p>
 +
          </a>
 +
        </div>
 +
      </article>
 +
      </div>
  
−
}
+
  </body>
−
 
+
−
<!--mainTitle-->
+
−
.site {width: 100%}
+
−
 
+
−
.site h1 {
+
−
color: #ffffff;
+
−
text-decoration: none;
+
−
font-size: 100px;
+
−
 
+
−
height: 35px;
+
−
background-color: rgba(255, 255, 255, 0.0);}
+
−
 
+
−
.site h2 { position: relative;
+
−
font-size: 50px;
+
−
}
+
−
 
+
−
#fontlight {font-weight: 900;}
+
−
 
+
−
 
+
−
</style>
+
−
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+
−
<meta name= "viewport" content = "initial-scale=1.0, width= device-width" />
+
−
</head>
+
−
 
+
−
<body>
+
−
<div id="" align="center">
+
−
<div id="fontlight" class="site">
+
−
<h1><font face="Roboto" weight=200>KOREASONYEODUL</h1>
+
−
<h2><font face="Roboto">Main Subtitle</h2>
+
−
 
+
−
</div>
+
−
 
+
−
</div>
+
−
 
+
−
</body>
+
 
</html>
 
</html>

Revision as of 16:28, 2 September 2016

<!DOCTYPE html>

KOREASONYEODUL

Main Subtitle