Difference between revisions of "Team:Rice/Notebook"

(Replaced content with "{{Rice}} <html > </html>")
Line 1: Line 1:
 
{{Rice}}
 
{{Rice}}
−
<html >
+
<html>
 +
<style>
  
 +
        #topbox{
 +
            height:50vh;
 +
            width: 100%;
 +
            background-image: url(https://static.igem.org/mediawiki/2018/6/6d/T--Rice--header.png);
 +
            background-size: cover;
 +
            background-position: 50% 50%;
 +
            background-attachment: fixed;
 +
            display: table;
 +
        }
 +
 +
        div#topbox h1{
 +
            font-size: 80px;
 +
            color: white !important;
 +
            text-align: center;
 +
            margin: 0px;
 +
            display: table-cell;
 +
            vertical-align: middle;
 +
            line-height: 80px;
 +
        }
 +
hr {
 +
    display: block;
 +
    margin-top: 0.5em;
 +
    margin-bottom: 0.5em;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    border-style: solid;
 +
    border-color: #3333ff;
 +
    border-width: 1px;
 +
    width: 50px;
 +
}
 +
 +
button[data-balloon] {
 +
    overflow: visible;
 +
    background-color: white !important;
 +
    border-color: white !important;
 +
    border-width: 0px !important;
 +
  }
 +
 
 +
[data-balloon] {
 +
  position: relative;
 +
}
 +
[data-balloon]:before,
 +
[data-balloon]:after {
 +
  filter: alpha(opacity=0);
 +
  -khtml-opacity: 0;
 +
  -moz-opacity: 0;
 +
  opacity: 0;
 +
  pointer-events: none;
 +
  -webkit-transition: all 0.18s ease-out 0.18s;
 +
  transition: all 0.18s ease-out 0.18s;
 +
  bottom: 100%;
 +
  left: 50%;
 +
  position: absolute;
 +
  z-index: 10;
 +
  -webkit-transform: translate(-50%, 10px);
 +
  -ms-transform: translate(-50%, 10px);
 +
  transform: translate(-50%, 10px);
 +
  -webkit-transform-origin: top;
 +
  -ms-transform-origin: top;
 +
  transform-origin: top;
 +
}
 +
[data-balloon]:after {
 +
  background: rgba(17, 17, 17, 0.9);
 +
  border-radius: 4px;
 +
  color: #fff;
 +
  content: attr(data-balloon);
 +
  font-size: 12px;
 +
  padding: .5em 1em;
 +
  white-space: nowrap;
 +
  margin-bottom: 11px;
 +
}
 +
[data-balloon]:before {
 +
  background-size: 100% auto;
 +
  height: 6px;
 +
  width: 18px;
 +
  content: "";
 +
  margin-bottom: 5px;
 +
}
 +
[data-balloon]:hover:before,
 +
[data-balloon][data-balloon-visible]:before,
 +
[data-balloon]:hover:after,
 +
[data-balloon][data-balloon-visible]:after {
 +
 +
  filter: alpha(opacity=100);
 +
  -khtml-opacity: 1;
 +
  -moz-opacity: 1;
 +
  opacity: 1;
 +
  pointer-events: auto;
 +
  -webkit-transform: translate(-50%, 0);
 +
  -ms-transform: translate(-50%, 0);
 +
  transform: translate(-50%, 0);
 +
}
 +
 +
 +
}
 +
 +
[data-balloon-length]:after {
 +
  white-space: normal;
 +
}
 +
[data-balloon-length="small"]:after {
 +
  width: 80px;
 +
}
 +
[data-balloon-length="medium"]:after {
 +
  width: 150px;
 +
}
 +
[data-balloon-length="large"]:after {
 +
  width: 260px;
 +
}
 +
[data-balloon-length="xlarge"]:after {
 +
  width: 90vw;
 +
}
 +
 +
}
 +
[data-balloon-length="fit"]:after {
 +
  width: 100%;
 +
}
 +
 +
.foo img:last-child{display:none;  background-color: white !important; }
 +
.foo:hover img:first-child{display:none;  background-color: white !important; }
 +
.foo:hover img:last-child{display:inline-block;  background-color: white !important; }
 +
 +
figure:hover+span {
 +
bottom: -36px;
 +
opacity: 1;
 +
}
 +
 +
</head>
 +
<style>
 +
             
 +
      div.center{
 +
    text-align: center!important;
 +
}
 +
 
 +
.container{
 +
  width: 80%;
 +
  margin-left: 10% !important;
 +
                        margin-top: 2% !important;
 +
                        padding-bottom: 50px;
 +
 +
  }
 +
 +
h1{
 +
color:#000000!important;
 +
font-family: 'Montserrat', sans-serif!important;
 +
font-size: 50px!important;
 +
                        line-height: 100%;
 +
}
 +
h2{
 +
color:#000000!important;
 +
font-family: 'Montserrat', sans-serif!important;
 +
font-size: 30px!important;
 +
                        line-height: 100%;
 +
}
 +
 +
              h3{
 +
color:#000000!important;
 +
font-family: 'Montserrat', sans-serif!important;
 +
font-size: 25px!important;
 +
                        line-height: 0%;
 +
                        padding-bottom: 25px;
 +
 +
}
 +
 +
 +
table.center{
 +
    margin-left:auto!important;
 +
    margin-right:auto!important;
 +
 +
  }
 +
  table.text{
 +
color:#000000!important;
 +
font-family: 'Open Sans', sans-serif!important;
 +
font-size: 16px!important;
 +
  }
 +
  .tableheader{
 +
color:##0145ac!important;
 +
font-family: 'Didact Gothic', sans-serif!important;
 +
font-size: 22px!important;
 +
  }
 +
 +
 +
</style>
 +
<body>
 +
        <div id="topbox">
 +
            <h1>Notebook
 +
            </h1>
 +
        </div>
 +
 +
 +
<div class = "container">
 +
<table class = "center text" align = "center">
 +
 +
<thead>
 +
 +
<div class = "center">
 +
<h2>Notebook</h2>
 +
</div>
 +
<hr>
 +
<p>
 +
<br>
 +
</p>
 +
</thead>
 +
 +
<body>
 
</html>
 
</html>

Revision as of 03:11, 2 October 2018

Notebook

Notebook