Difference between revisions of "Template:Bilkent-UNAMBG"

(Undo revision 407782 by Hoskan (talk))
Line 1: Line 1:
 
+
{{Bilkent-UNAMBG}}
 +
<!doctype html>
 
<html>
 
<html>
 
<head>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
+
<meta charset="UTF-8">
<meta name="keywords" content="" />
+
<title>index</title>
<meta name="description" content="" />
+
</head>
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
+
<body>
 +
<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>
  
<style>
+
                        <div class="col-md-4 col-sm-4">
 +
                            <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>
  
.sponsor {width: 100%}
+
                        </div>
img.sponsors {margin-left:30%; margin-right:30%;width:40%; height: auto;}
+
                        <div class="col-md-4 col-sm-4">
 +
                            <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>
  
#page.team img.safety {width: 240px; height:240px;}
+
                        </div>
#page .title h2.headline {line-height:1em; font-size: 4em; overflow:visible; text-shadow: 3px 3px 0 #666666;top: -5em;}
+
                                                <div class="col-md-4 col-sm-4">
li.noteb { display: inline-block; float: none;}
+
                            <div class="team-member">
.notebooks .buttonx {font-size: 1.2em;}
+
                                <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>
  
@keyframes example {
+
                        </div>
    0%  {text-shadow: 0px 3px 3px 0 red;}
+
                                                <div class="col-md-4 col-sm-4">
    25%  {text-shadow: 3px 0px 3px 0 blue;}
+
                            <div class="team-member">
    50%  {text-shadow: 0px -3px 3px 0 green;}
+
                                <div class="team-img">
    75%  {text-shadow: 3px  0 3px gray;}
+
                                    <img src="https://image.freepik.com/free-photo/well-dressed-executive-with-crossed-arms_1098-3930.jpg" alt="team member" class="img-responsive">
    100% {text-shadow: 3px 3px 0 red;}}
+
                                </div>
@-webkit-keyframes example {
+
                                <div class="team-hover">
    0%  {text-shadow: 0px 3px 3px 0 red;}
+
                                    <div class="desk">
    25%  {text-shadow: 3px 0px 3px 0 blue;}
+
                                        <h4>I love to design</h4>
    50%  {text-shadow: 0px -3px 3px 0 green;}
+
                                        <p>I love to introduce myself as a hardcore Web Designer.</p>
    75%  {text-shadow: 3px  0 3px gray;}
+
                                    </div>
    100% {text-shadow: 3px 3px 0 red;}}
+
                                    <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>
  
#page .title h2.headline:hover{
+
                        </div>
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
+
                                                <div class="col-md-4 col-sm-4">
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
+
                            <div class="team-member">
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
+
                                <div class="team-img">
    animation-name: example;
+
                                    <img src="https://image.freepik.com/free-photo/well-dressed-executive-with-crossed-arms_1098-3930.jpg" alt="team member" class="img-responsive">
    animation-duration: 2s;
+
                                </div>
    animation-iteration-count: infinite;}
+
                                <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>
 +
                                                <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>
  
ul.notebooks {width: 50%; margin-left:25%; margin-right:25%;}
+
                        </div>
.hpgoldbg {width:100%; height: 450vh; background-image: url("https://static.igem.org/mediawiki/2018/b/b2/T--Bilkent-UNAMBG--bghome.jpg");background-position: center top;background-repeat:no-repeat;background-size: 100% auto;}
+
                                                <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>
  
.hpgoldbg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(0, 0, 0);}
+
                        </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>
  
.middle {margin-left: 15%; margin-right:15%; width: 60%; }
+
                        </div>
.middle p {text-align:center;}
+
                                                <div class="col-md-4 col-sm-4">
.middle p b {text-align:center;}
+
                            <div class="team-member">
 
+
                                <div class="team-img">
.hp img {width:100%;}
+
                                    <img src="https://image.freepik.com/free-photo/well-dressed-executive-with-crossed-arms_1098-3930.jpg" alt="team member" class="img-responsive">
.teambg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/0/05/Bilkent-team.jpg");background-position: center;}
+
                                </div>
 
+
                                <div class="team-hover">
.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);}
+
                                    <div class="desk">
 
+
                                        <h4>I love to design</h4>
.collabsbg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/c/ce/Bilkent-collabs.jpg");background-position: center;}
+
                                        <p>I love to introduce myself as a hardcore Web Designer.</p>
 
+
                                    </div>
.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);}
+
                                    <div class="s-link">
 
+
                                        <a href="#"><i class="fa fa-facebook"></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-twitter"></i></a>
 
+
                                        <a href="#"><i class="fa fa-google-plus"></i></a>
.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;}
+
                            </div>
 
+
.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: #00000;
+
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 class="social">
+
                        </div>
<a href="https://www.facebook.com/UNAMBG/" target="_blank"><img src="https://static.igem.org/mediawiki/2018/1/1c/T--Bilkent-UNAMBG--fb.jpg"></a>
+
<a href="https://twitter.com/bilkentunambg" target="_blank"><img src="https://static.igem.org/mediawiki/2018/0/0a/T--Bilkent-UNAMBG--twitter.png"></a>
+
<a href="https://www.instagram.com/bilkentunambg/" target="_blank"><img src="https://static.igem.org/mediawiki/2018/6/65/T--Bilkent-UNAMBG--insta.png"></a>
+
<a href="mailto:unambgigem@gmail.com" target="_blank"><img src="https://static.igem.org/mediawiki/2018/b/bb/T--Bilkent-UNAMBG--mailim.png"></a>
+
</div>
+
  
<div id="header" class="container">
+
                    </div>
<div id="logo">
+
<a href="#"><img src="https://static.igem.org/mediawiki/2018/d/de/T--Bilkent-UNAMBG--logo.png" width="200" height="120"></a>
+
</div>
+
<div id="menux">
+
<ul>
+
<li><a href="https://2018.igem.org/Team:Bilkent-UNAMBG" title="">Home</a></li>
+
<li class="dropdown"><a href="#">Team</a><div class="dropdown-content">
+
<a href="https://2018.igem.org/Team:Bilkent-UNAMBG/Team">Team Members</a>
+
    <a href="https://2018.igem.org/Team:Bilkent-UNAMBG/Attributions">Attributions</a>
+
<a href="https://2018.igem.org/Team:Bilkent-UNAMBG/Collaborations">Collaborations</a>
+
  </div></li>
+
<li class="dropdown"><a href="https://2018.igem.org/Team:Bilkent-UNAMBG/Project">Project</a><div class="dropdown-content">
+
  
<a href="https://2018.igem.org/Team:Bilkent-UNAMBG/Project#desc">Description</a>
+
                </div>
  
<a href="https://2018.igem.org/Team:Bilkent-UNAMBG/Project#const">Constructs</a><a href="https://2018.igem.org/Team:Bilkent-UNAMBG/Project#notebooks">Notebooks</a>
+
</body>
<a href="https://2018.igem.org/Team:Bilkent-UNAMBG/Project#modeling">Modeling</a>
+
</html>
<a href="https://2018.igem.org/Team:Bilkent-UNAMBG/Project#protocols">Protocols</a><a href="https://2018.igem.org/Team:Bilkent-UNAMBG/InterLab">InterLab</a>
+
  </div></li>
+
<li><a href="https://2018.igem.org/Team:Bilkent-UNAMBG/Parts">Parts</a></li>
+
<li><a href="https://2018.igem.org/Team:Bilkent-UNAMBG/Safety">Safety</a></li>
+
<li><a href="https://2018.igem.org/Team:Bilkent-UNAMBG/Results">Results</a></li>
+
<li class="dropdown"><a href="https://2018.igem.org/Team:Bilkent-UNAMBG/HP">HP & IHP</a></li>
+
                     
+
</ul>
+
</div>
+
</div>
+

Revision as of 19:08, 17 October 2018

<!doctype html> index

Our professionals

Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend. Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend.

team member

Hi There !

I love to introduce myself as a hardcore Web Designer.

team member

Hello World

I love to introduce myself as a hardcore Web Designer.

team member

I love to design

I love to introduce myself as a hardcore Web Designer.

team member

I love to design

I love to introduce myself as a hardcore Web Designer.

team member

I love to design

I love to introduce myself as a hardcore Web Designer.

team member

I love to design

I love to introduce myself as a hardcore Web Designer.

team member

I love to design

I love to introduce myself as a hardcore Web Designer.

team member

I love to design

I love to introduce myself as a hardcore Web Designer.

team member

I love to design

I love to introduce myself as a hardcore Web Designer.

team member

I love to design

I love to introduce myself as a hardcore Web Designer.