Difference between revisions of "Template:Bilkent-UNAMBG"

(Undo revision 441922 by Merveisler (talk))
Line 1: Line 1:
−
{{Bilkent-UNAMBG}}
+
 
−
{{Bilkent-UNAMBG/style}}
+
 
<html>
 
<html>
 
<head>
 
<head>
−
<link rel="stylesheet" type="text/css" href="style.css">
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
<meta charset="UTF-8">
+
<title></title>
−
<title>index</title>
+
<meta name="keywords" content="" />
−
</head>
+
<meta name="description" content="" />
−
<body>
+
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
−
<div class="container">
+
−
                    <div class="row">
+
−
                        <div class="heading-title text-center">
+
−
                            <h3 class="text-uppercase">Our professionals </h3>
+
−
                            <p class="p-top-30 half-txt">Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend. Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend. </p>
+
−
                        </div>
+
  
−
                        <div class="col-md-4 col-sm-4">
+
<style>
−
                            <div class="team-member">
+
−
                                <div class="team-img">
+
−
                                    <img src="https://static.igem.org/mediawiki/2018/thumb/a/ae/T--Bilkent-UNAMBG--azra.jpg/180px-T--Bilkent-UNAMBG--azra.jpg" alt="team member" class="img-responsive">
+
−
                                </div>
+
−
                                <div class="team-hover">
+
−
                                    <div class="desk">
+
−
                                        <h4>Hi There !</h4>
+
−
                                        <p>I love to introduce myself as a hardcore Web Designer.</p>
+
−
                                    </div>
+
−
                                    <div class="s-link">
+
−
                                        <a href="#"><i class="fa fa-facebook"></i></a>
+
−
                                        <a href="#"><i class="fa fa-twitter"></i></a>
+
−
                                        <a href="#"><i class="fa fa-google-plus"></i></a>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
  
−
                        </div>
+
.sponsor {width: 100%}
−
                        <div class="col-md-4 col-sm-4">
+
img.sponsors {margin-left:30%; margin-right:30%;width:40%; height: auto;}
−
                            <div class="team-member">
+
−
                                <div class="team-img">
+
−
                                    <img src="https://image.freepik.com/free-photo/elegant-man-with-thumbs-up_1149-1595.jpg" alt="team member" class="img-responsive">
+
−
                                </div>
+
−
                                <div class="team-hover">
+
−
                                    <div class="desk">
+
−
                                        <h4>Hello World</h4>
+
−
                                        <p>I love to introduce myself as a hardcore Web Designer.</p>
+
−
                                    </div>
+
−
                                    <div class="s-link">
+
−
                                        <a href="#"><i class="fa fa-facebook"></i></a>
+
−
                                        <a href="#"><i class="fa fa-twitter"></i></a>
+
−
                                        <a href="#"><i class="fa fa-google-plus"></i></a>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
−
                       
+
−
                        </div>
+
−
                        <div class="col-md-4 col-sm-4">
+
−
                            <div class="team-member">
+
−
                                <div class="team-img">
+
−
                                    <img src="https://image.freepik.com/free-photo/well-dressed-executive-with-crossed-arms_1098-3930.jpg" alt="team member" class="img-responsive">
+
−
                                </div>
+
−
                                <div class="team-hover">
+
−
                                    <div class="desk">
+
−
                                        <h4>I love to design</h4>
+
−
                                        <p>I love to introduce myself as a hardcore Web Designer.</p>
+
−
                                    </div>
+
−
                                    <div class="s-link">
+
−
                                        <a href="#"><i class="fa fa-facebook"></i></a>
+
−
                                        <a href="#"><i class="fa fa-twitter"></i></a>
+
−
                                        <a href="#"><i class="fa fa-google-plus"></i></a>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
  
−
                        </div>
+
#page.team img.safety {width: 240px; height:240px;}
−
                                                <div class="col-md-4 col-sm-4">
+
#page .title h2.headline {line-height:1em; font-size: 4em; overflow:visible; text-shadow: 3px 3px 0 #666666;top: -5em;}
−
                            <div class="team-member">
+
li.noteb { display: inline-block; float: none;}
−
                                <div class="team-img">
+
.notebooks .buttonx {font-size: 1.2em;}
−
                                    <img src="https://image.freepik.com/free-photo/well-dressed-executive-with-crossed-arms_1098-3930.jpg" alt="team member" class="img-responsive">
+
−
                                </div>
+
−
                                <div class="team-hover">
+
−
                                    <div class="desk">
+
−
                                        <h4>I love to design</h4>
+
−
                                        <p>I love to introduce myself as a hardcore Web Designer.</p>
+
−
                                    </div>
+
−
                                    <div class="s-link">
+
−
                                        <a href="#"><i class="fa fa-facebook"></i></a>
+
−
                                        <a href="#"><i class="fa fa-twitter"></i></a>
+
−
                                        <a href="#"><i class="fa fa-google-plus"></i></a>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
  
−
                        </div>
+
@keyframes example {
−
                                                <div class="col-md-4 col-sm-4">
+
    0%  {text-shadow: 0px 3px 3px 0 red;}
−
                            <div class="team-member">
+
    25%  {text-shadow: 3px 0px 3px 0 blue;}
−
                                <div class="team-img">
+
    50%  {text-shadow: 0px -3px 3px 0 green;}
−
                                    <img src="https://image.freepik.com/free-photo/well-dressed-executive-with-crossed-arms_1098-3930.jpg" alt="team member" class="img-responsive">
+
    75%  {text-shadow: 3px  0 3px gray;}
−
                                </div>
+
    100% {text-shadow: 3px 3px 0 red;}}
−
                                <div class="team-hover">
+
@-webkit-keyframes example {
−
                                    <div class="desk">
+
    0%  {text-shadow: 0px 3px 3px 0 red;}
−
                                        <h4>I love to design</h4>
+
    25%  {text-shadow: 3px 0px 3px 0 blue;}
−
                                        <p>I love to introduce myself as a hardcore Web Designer.</p>
+
    50%  {text-shadow: 0px -3px 3px 0 green;}
−
                                    </div>
+
    75%  {text-shadow: 3px  0 3px gray;}
−
                                    <div class="s-link">
+
    100% {text-shadow: 3px 3px 0 red;}}
−
                                        <a href="#"><i class="fa fa-facebook"></i></a>
+
−
                                        <a href="#"><i class="fa fa-twitter"></i></a>
+
−
                                        <a href="#"><i class="fa fa-google-plus"></i></a>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
  
−
                        </div>
+
#page .title h2.headline:hover{
−
                                                <div class="col-md-4 col-sm-4">
+
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
−
                            <div class="team-member">
+
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
−
                                <div class="team-img">
+
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
−
                                    <img src="https://image.freepik.com/free-photo/well-dressed-executive-with-crossed-arms_1098-3930.jpg" alt="team member" class="img-responsive">
+
    animation-name: example;
−
                                </div>
+
    animation-duration: 2s;
−
                                <div class="team-hover">
+
    animation-iteration-count: infinite;}
−
                                    <div class="desk">
+
−
                                        <h4>I love to design</h4>
+
−
                                        <p>I love to introduce myself as a hardcore Web Designer.</p>
+
−
                                    </div>
+
−
                                    <div class="s-link">
+
−
                                        <a href="#"><i class="fa fa-facebook"></i></a>
+
−
                                        <a href="#"><i class="fa fa-twitter"></i></a>
+
−
                                        <a href="#"><i class="fa fa-google-plus"></i></a>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
  
−
                        </div>
 
−
                                                <div class="col-md-4 col-sm-4">
 
−
                            <div class="team-member">
 
−
                                <div class="team-img">
 
−
                                    <img src="https://image.freepik.com/free-photo/well-dressed-executive-with-crossed-arms_1098-3930.jpg" alt="team member" class="img-responsive">
 
−
                                </div>
 
−
                                <div class="team-hover">
 
−
                                    <div class="desk">
 
−
                                        <h4>I love to design</h4>
 
−
                                        <p>I love to introduce myself as a hardcore Web Designer.</p>
 
−
                                    </div>
 
−
                                    <div class="s-link">
 
−
                                        <a href="#"><i class="fa fa-facebook"></i></a>
 
−
                                        <a href="#"><i class="fa fa-twitter"></i></a>
 
−
                                        <a href="#"><i class="fa fa-google-plus"></i></a>
 
−
                                    </div>
 
−
                                </div>
 
−
                            </div>
 
  
−
                        </div>
+
ul.notebooks {width: 50%; margin-left:25%; margin-right:25%;}
−
                                                <div class="col-md-4 col-sm-4">
+
.hpgoldbg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/f/fe/Bilkent-hpgoldbg.jpg");background-position: center top;background-size: 100% auto;}
−
                            <div class="team-member">
+
−
                                <div class="team-img">
+
−
                                    <img src="https://image.freepik.com/free-photo/well-dressed-executive-with-crossed-arms_1098-3930.jpg" alt="team member" class="img-responsive">
+
−
                                </div>
+
−
                                <div class="team-hover">
+
−
                                    <div class="desk">
+
−
                                        <h4>I love to design</h4>
+
−
                                        <p>I love to introduce myself as a hardcore Web Designer.</p>
+
−
                                    </div>
+
−
                                    <div class="s-link">
+
−
                                        <a href="#"><i class="fa fa-facebook"></i></a>
+
−
                                        <a href="#"><i class="fa fa-twitter"></i></a>
+
−
                                        <a href="#"><i class="fa fa-google-plus"></i></a>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
  
−
                        </div>
+
.hpgoldbg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
−
                                                <div class="col-md-4 col-sm-4">
+
−
                            <div class="team-member">
+
−
                                <div class="team-img">
+
−
                                    <img src="https://image.freepik.com/free-photo/well-dressed-executive-with-crossed-arms_1098-3930.jpg" alt="team member" class="img-responsive">
+
−
                                </div>
+
−
                                <div class="team-hover">
+
−
                                    <div class="desk">
+
−
                                        <h4>I love to design</h4>
+
−
                                        <p>I love to introduce myself as a hardcore Web Designer.</p>
+
−
                                    </div>
+
−
                                    <div class="s-link">
+
−
                                        <a href="#"><i class="fa fa-facebook"></i></a>
+
−
                                        <a href="#"><i class="fa fa-twitter"></i></a>
+
−
                                        <a href="#"><i class="fa fa-google-plus"></i></a>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
  
−
                        </div>
+
.middle {margin-left: 15%; margin-right:15%; width: 60%; }
−
                                                <div class="col-md-4 col-sm-4">
+
.middle p {text-align:center;}
−
                            <div class="team-member">
+
.middle p b {text-align:center;}
−
                                <div class="team-img">
+
 
−
                                    <img src="https://image.freepik.com/free-photo/well-dressed-executive-with-crossed-arms_1098-3930.jpg" alt="team member" class="img-responsive">
+
.hp img {width:100%;}
−
                                </div>
+
.teambg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/0/05/Bilkent-team.jpg");background-position: center;}
−
                                <div class="team-hover">
+
 
−
                                    <div class="desk">
+
.teambg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
−
                                        <h4>I love to design</h4>
+
 
−
                                        <p>I love to introduce myself as a hardcore Web Designer.</p>
+
.collabsbg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/c/ce/Bilkent-collabs.jpg");background-position: center;}
−
                                    </div>
+
 
−
                                    <div class="s-link">
+
.collabsbg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
−
                                        <a href="#"><i class="fa fa-facebook"></i></a>
+
 
−
                                        <a href="#"><i class="fa fa-twitter"></i></a>
+
.safetybg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/8/8a/Bilkent-safety.jpg");background-position: center;}
−
                                        <a href="#"><i class="fa fa-google-plus"></i></a>
+
 
−
                                    </div>
+
.safetybg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
−
                                </div>
+
 
−
                            </div>
+
.partsbg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/e/ea/Bilkent-parts.jpg");background-position: center;}
 +
 
 +
.partsbg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
 +
 
 +
.attrbg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/9/9f/Bilkent-attr.jpg");background-position: center;background-size: 100% auto;}
 +
 
 +
.attrbg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
 +
 
 +
.hpbg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/8/8e/Bilkent-hp.jpg");background-position: center;}
 +
 
 +
.hpbg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
 +
 
 +
.projectbg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/0/00/Bilkent-teambg.jpg");background-position: center;}
 +
 
 +
.projectbg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
 +
 
 +
 
 +
#page img{margin: 20px;}
 +
 
 +
#page.team img {width: 100%; height:auto; margin: 0;}
 +
 
 +
.quote {width: 80%; margin-left: 10%; font-style: italic; color: #333; font-size: 1em;}
 +
.quote_source {margin-left: 10%;}
 +
 
 +
#page h4 {font-size:0.7em; color:#111;}
 +
 
 +
#page h2 {font-size: 1.3em;}
 +
#page .byline {font-size: 0.8em;}
 +
 
 +
/* Clear the default wiki settings */
 +
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
 +
html, body, div, span, applet, object, iframe,
 +
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
a, abbr, acronym, address, big, cite, code,
 +
del, dfn, em, img, ins, kbd, q, s, samp,
 +
small, strike, strong, sub, sup, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td,
 +
article, aside, canvas, details, embed,
 +
figure, figcaption, footer, header, hgroup,
 +
menu, nav, output, ruby, section, summary,
 +
time, mark, audio, video {
 +
margin: 0;
 +
padding: 0;
 +
border: 0;
 +
font-size: 100%;
 +
vertical-align: baseline;
 +
}
 +
 
 +
small {
 +
    font-size: 0.8em;
 +
font-weight: 700;
 +
}
 +
 
 +
/* HTML5 display-role reset for older browsers */
 +
article, aside, details, figcaption, figure,
 +
footer, header, hgroup, menu, nav, section {
 +
display: block;
 +
}
 +
body {
 +
line-height: 1;
 +
}
 +
 
 +
blockquote, q {
 +
quotes: none;
 +
}
 +
blockquote:before, blockquote:after,
 +
q:before, q:after {
 +
content: '';
 +
content: none;
 +
}
 +
table {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
}
 +
 +
 +
html, body
 +
{
 +
height: 100%;
 +
}
 +
 +
body
 +
{
 +
margin: 0px;
 +
padding: 0px;
 +
background: #EEEEEE;
 +
font-family: 'News Cycle', sans-serif;
 +
font-size: 13pt;
 +
font-weight: 300;
 +
color: #656565;
 +
}
 +
 +
 +
h1, h2, h3
 +
{
 +
padding: 0;
 +
font-weight: 700;
 +
color: #2B3F48;
 +
}
 +
 +
p, ol, ul
 +
{
 +
margin-top: 0;
 +
}
 +
 +
ol, ul
 +
{
 +
padding: 0;
 +
}
 +
 +
ul.actions
 +
{
 +
text-align: center;
 +
list-style-type:none;
 +
list-style-image: none;
 +
}
 +
 +
ul.actions li
 +
{
 +
}
 +
 +
p
 +
{
 +
line-height: 180%;
 +
}
 +
 
 +
 
 +
 +
strong
 +
{
 +
}
 +
 +
a
 +
{
 +
color: #0000FF;
 +
}
 +
 +
a:hover
 +
{
 +
text-decoration: none;
 +
}
 +
 +
.container
 +
{
 +
overflow: hidden;
 +
margin: 0em auto;
 +
width: 1000px;
 +
}
 +
 +
/*********************************************************************************/
 +
/* Image Style                                                                  */
 +
/*********************************************************************************/
 +
 
 +
.image
 +
{
 +
display: inline-block;
 +
}
 +
 +
.image img
 +
{
 +
display: block;
 +
width: 100%;
 +
}
 +
 +
.image-full
 +
{
 +
display: block;
 +
width: 100%;
 +
margin: 0 0 2em 0;
 +
}
 +
 +
.image-left
 +
{
 +
float: left;
 +
margin: 0 2em 2em 0;
 +
}
 +
 +
.image-centered
 +
{
 +
display: block;
 +
margin: 0 0 2em 0;
 +
}
 +
 +
.image-centered img
 +
{
 +
margin: 0 auto;
 +
width: auto;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* List Styles                                                                  */
 +
/*********************************************************************************/
 +
 
 +
ul.staff
 +
{
 +
margin-bottom: 3em;
 +
}
 +
 
 +
ul.staff li
 +
{
 +
display: inline-block;
 +
}
 +
 +
ul.staff li img
 +
{
 +
width: 80%;
 +
border-radius: 50%;
 +
}
 +
 
 +
 
 +
/*********************************************************************************/
 +
/* Social Icon Styles                                                            */
 +
/*********************************************************************************/
 +
 
 +
ul.contact
 +
{
 +
margin: 0;
 +
padding: 2em 0em 0em 0em;
 +
list-style: none;
 +
}
 +
 +
ul.contact li
 +
{
 +
display: inline-block;
 +
padding: 0em 0.30em;
 +
font-size: 1em;
 +
}
 +
 +
ul.contact li span
 +
{
 +
display: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
ul.contact li a
 +
{
 +
color: #FFF;
 +
}
 +
 +
ul.contact li a:before
 +
{
 +
display: inline-block;
 +
background: #3f3f3f;
 +
width: 40px;
 +
height: 40px;
 +
line-height: 40px;
 +
border-radius: 20px;
 +
text-align: center;
 +
color: #FFFFFF;
 +
}
 +
 +
ul.contact li a.icon-twitter:before { background: #2DAAE4; }
 +
ul.contact li a.icon-facebook:before { background: #39599F; }
 +
ul.contact li a.icon-dribbble:before { background: #C4376B; }
 +
ul.contact li a.icon-tumblr:before { background: #31516A; }
 +
ul.contact li a.icon-rss:before { background: #F2600B; }
 +
 
 +
/*********************************************************************************/
 +
/* Button Style                                                                  */
 +
/*********************************************************************************/
 +
 
 +
.buttonx
 +
{
 +
display: inline-block;
 +
padding: 0em 1.6em;
 +
background: #27AE61;
 +
border-radius: 8px;
 +
letter-spacing: 0.20em;
 +
line-height: 2.5em;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
font-weight: 400;
 +
font-size: 0.7em;
 +
color: #FFF;
 +
}
 +
a.buttonx:visited {
 +
    color: white;
 +
}
 +
 +
.buttonx:before
 +
{
 +
display: inline-block;
 +
background: #FFC31F;
 +
margin-right: 1em;
 +
width: 40px;
 +
height: 40px;
 +
line-height: 40px;
 +
border-radius: 20px;
 +
text-align: center;
 +
color: #272925;
 +
}
 +
 +
/*********************************************************************************/
 +
/* Heading Titles                                                                */
 +
/*********************************************************************************/
 +
 
 +
.title
 +
{
 +
margin-bottom: 1.8em;
 +
}
 +
 +
.title h2
 +
{
 +
font-size: 2em;
 +
margin: 10px;
 +
overflow: visible;
 +
}
 +
 +
.title .byline
 +
{
 +
font-size: 0.9em;
 +
color: #6F6F6F;
 +
}
 +
 +
/*********************************************************************************/
 +
/* 4-column                                                                      */
 +
/*********************************************************************************/
 +
 
 +
.box1,
 +
.box2,
 +
.box3,
 +
.box4
 +
{
 +
width: 22.5%;
 +
}
 +
 +
.box1,
 +
.box2,
 +
.box3,
 +
{
 +
float: left;
 +
margin-right: 20px;
 +
}
 +
 +
.box4
 +
{
 +
float: right;
 +
}
 +
 +
/*********************************************************************************/
 +
/* 3-column                                                                      */
 +
/*********************************************************************************/
 +
 
 +
.boxA,
 +
.boxB,
 +
.boxC
 +
{
 +
width: 31%;
 +
margin: 1%;
 +
text-align:center;
 +
}
 +
 
 +
.boxA,
 +
.boxB
 +
{
 +
float: left;
 +
 +
}
 +
 +
.boxC
 +
{
 +
float: right;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* 2-column                                                                      */
 +
/*********************************************************************************/
 +
 
 +
.tbox1,
 +
.tbox2
 +
{
 +
width: 45%;
 +
margin-left: 2.5%;
 +
margin-right: 2.5%
 +
}
 +
 +
.tbox1
 +
{
 +
float: left;
 +
}
 +
 
 +
.tbox2
 +
{
 +
float: right;
 +
}
 +
 
 +
hr { margin-top:10px;
 +
margin-bottom: 10px;}
 +
 
 +
/*********************************************************************************/
 +
/* Header                                                                        */
 +
/*********************************************************************************/
 +
 
 +
#header
 +
{
 +
position: relative;
 +
padding: 3em 0em;
 +
overflow: visible;
 +
}
 +
 
 +
#header.container {width: 1200px;}
 +
 
 +
/*********************************************************************************/
 +
/* Logo                                                                          */
 +
/*********************************************************************************/
 +
 
 +
#logo
 +
{
 +
position: absolute;
 +
top: 1em;
 +
left: 0;
 +
}
 +
 +
#logo h1
 +
{
 +
color: #2B3F48;
 +
 +
padding-top: 10px;
 +
}
 +
 +
#logo a
 +
{
 +
text-decoration: none;
 +
color: #2B3F48;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Menu                                                                          */
 +
/*********************************************************************************/
 +
 
 +
#menux
 +
{
 +
width: 70%;
 +
position: absolute;
 +
top: 2em;
 +
right: 0;
 +
}
 +
 +
#menux ul
 +
{
 +
display: inline-block;
 +
}
 +
 +
#menux li
 +
{
 +
display: block;
 +
float: left;
 +
text-align: center;
 +
}
 +
 +
 +
#menux li a, #menu li span
 +
{
 +
padding: 1em 1.5em;
 +
letter-spacing: 1px;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
font-size: 0.6em !important;
 +
color: #2B3F48;
 +
}
 +
 +
#menux li:hover a, #menu li.active a, #menu li.active span
 +
{
 +
color: #2B3F48;
 +
}
 +
 +
#menux .current_page_item a
 +
{
 +
color: #27AE61;
 +
}
 +
 +
#menux .icon
 +
{
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Banner                                                                        */
 +
/*********************************************************************************/
 +
 
 +
#banner
 +
{
 +
overflow: hidden;
 +
background: #27AE61 url(images/banner.png) no-repeat center;
 +
background-size: cover;
 +
text-align: center;
 +
color: rgba(255,255,255,.8);
 +
}
 +
 
 +
#banner .title
 +
{
 +
}
 +
 
 +
#banner .title h2
 +
{
 +
color: #FFF;
 +
}
 +
 
 +
#banner .title .byline
 +
{
 +
color: rgba(255,255,255,.6);
 +
}
 +
 +
#banner .buttonx
 +
{
 +
margin-top: 3em;
 +
background: #2B3F48 !important;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Page                                                                          */
 +
/*********************************************************************************/
 +
 
 +
#page
 +
{
 +
padding: 2em 0em;
 +
text-align: center;
 +
}
 +
 +
#page .buttonx
 +
{
 +
margin-top: 1.2em;
 +
display: inline-block;
 +
text-align: center;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Content                                                                      */
 +
/*********************************************************************************/
 +
 
 +
#content
 +
{
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Sidebar                                                                      */
 +
/*********************************************************************************/
 +
 
 +
#sidebar
 +
{
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Footer                                                                        */
 +
/*********************************************************************************/
 +
 
 +
#footer
 +
{
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Copyright                                                                    */
 +
/*********************************************************************************/
 +
 
 +
#copyright
 +
{
 +
overflow: hidden;
 +
padding: 5em 0em;
 +
border-top: 1px solid rgba(0,0,0,0.08);
 +
}
 +
 +
#copyright p
 +
{
 +
letter-spacing: 0.20em;
 +
text-align: center;
 +
text-transform: uppercase;
 +
font-size: 0.40em;
 +
color: rgba(0,0,0,0.5);
 +
}
 +
 +
#copyright a
 +
{
 +
text-decoration: none;
 +
color: rgba(0,0,0,0.8);
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Featured                                                                      */
 +
/*********************************************************************************/
 +
 
 +
#featured
 +
{
 +
overflow: hidden;
 +
padding: 1em 0em;
 +
background: #27AE61;
 +
text-align: center;
 +
color: rgba(255,255,255,.8);
 +
}
 +
 
 +
#featured a
 +
{
 +
color: rgba(255,255,255,1);
 +
}
 +
 +
#featured .buttonx
 +
 
 +
{
 +
background: #FFF;
 +
margin-top: 1.2em;
 +
font-size: 0.8em;
 +
color: #27AE61;
 +
}
 +
 
 +
#featured .title
 +
{
 +
}
 +
 
 +
#featured .title h2
 +
{
 +
color: #FFF;
 +
}
 +
 
 +
#featured .title .byline
 +
{
 +
color: rgba(255,255,255,.6);
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Featured                                                                      */
 +
/*********************************************************************************/
 +
 
 +
.box
 +
{
 +
padding: 2em 2em;
 +
border: 1px solid rgba(0,0,0,0.1);
 +
border-radius: 8px;
 +
}
 +
 
 +
 
 +
#extra
 +
{
 +
overflow: hidden;
 +
padding: 5em 0em;
 +
}
 +
 +
#extra .title
 +
{
 +
text-align: center;
 +
}
 +
 +
#extra .buttonx
 +
{
 +
margin-top: 5em;
 +
}
 +
 
 +
#page ul, #page ol, #page ol li ul li, #page li {font-size: 0.8em; }
 +
#page li, #page li ul li {text-align: left;}
 +
//DROPDOWN MENU
 +
 
 +
.dropdown {
 +
    position: relative;
 +
    display: inline-block;
 +
}
 +
 
 +
/* Dropdown Content (Hidden by Default) */
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
}
 +
 
 +
/* Links inside the dropdown */
 +
.dropdown-content a {
 +
    color: black;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
 
 +
/* Change color of dropdown links on hover */
 +
.dropdown-content a:hover {background-color: #f1f1f1}
 +
 
 +
/* Show the dropdown menu on hover */
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
 
 +
/* Change the background color of the dropdown button when the dropdown content is shown */
 +
.dropdown:hover .dropbtn {
 +
    background-color: #3e8e41;
 +
}
 +
 
 +
.social {position: fixed; top: 22px; right: 0; width:32px; margin-right: 10px;}
 +
</style>
 +
 
 +
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
 +
 
 +
</head>
 +
<body>
  
−
                        </div>
+
<div class="social">
 +
<a href="https://www.facebook.com/UNAMBG2017/" target="_blank"><img src="https://static.igem.org/mediawiki/2017/d/df/Bilkent-facebook.png"></a>
 +
<a href="https://twitter.com/BilkentUNAMBG?lang=tr" target="_blank"><img src="https://static.igem.org/mediawiki/2017/b/b7/Bilkent-twitter.png"></a>
 +
<a href="mailto:unambgigem@gmail.com" target="_blank"><img src="https://static.igem.org/mediawiki/2017/8/89/Bilkent-mail.png"></a>
 +
</div>
  
−
                    </div>
+
<div id="header" class="container">
 +
<div id="logo">
 +
<a href="#"><img src="https://static.igem.org/mediawiki/2017/4/49/UnambgLogo.png"></a>
 +
</div>
 +
<div id="menux">
 +
<ul>
 +
<li><a href="https://2017.igem.org/Team:Bilkent-UNAMBG" title="">Home</a></li>
 +
<li class="dropdown"><a href="#">Team</a><div class="dropdown-content">
 +
<a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Team">Team Members</a>
 +
    <a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Attributions">Attributions</a>
 +
<a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Collaborations">Collaborations</a>
 +
  </div></li>
 +
<li class="dropdown"><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Project">Project</a><div class="dropdown-content">
  
−
                </div>
+
<a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Project#desc">Description</a>
  
−
</body>
+
<a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Project#const">Constructs</a><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Project#notebooks">Notebooks</a>
−
</html>
+
<a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Project#modeling">Modeling</a>
 +
<a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Project#protocols">Protocols</a><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/InterLab">InterLab</a>
 +
  </div></li>
 +
<li><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Parts">Parts</a></li>
 +
<li><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Safety">Safety</a></li>
 +
<li><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Results">Results</a></li>
 +
<li class="dropdown"><a href="#">Human Practices</a><div class="dropdown-content"><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/HP/Silver">Human Practice</a>
 +
    <a href="https://2017.igem.org/Team:Bilkent-UNAMBG/HP/Gold_Integrated">Integrated Human Practice</a>
 +
  </div></li>
 +
                     
 +
</ul>
 +
</div>
 +
</div>

Revision as of 19:31, 17 October 2018