Difference between revisions of "Team:SCUT"

Line 1: Line 1:
−
{{SCUT}}
+
<html xmlns="http://www.w3.org/1999/xhtml">
−
<html>
+
<head>
−
<h2> Project description about SCUT-iGEM </h2>
+
<style>
−
<p>Super cadmium ion killer: Engineering E.coli to adsorb cadmium ion from sewage.</p>
+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />  
−
<p>Cadmium ion pollution has seriously affected people's health, agriculture and graziery from all aspects. This year our team tends to design a new and effective device, helping to remediate global cadmium ion pollution. In order to solve this problem, we combine the curli nanofibers CsgA protein on the surface of E.coli with synthetic phytochelatins(ECs),which are analogs of phytochelatins (PCs).ECs are able to chelate with cadmium ion. Our engineering bacteria can also identify different concentrations of cadmium ion, blue for low concentration while red for high. </p>
+
 +
<!-- mobile meta tag -->
 +
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
−
<h2> Welcome to iGEM 2015! </h2>
+
/* hiding the top section*/
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
body{position:absolute; top:0px; width:100%;height:auto;font-family:微软雅黑;background:transparent;}
 +
#top-section{
 +
    height:0px;
 +
    border:none;
 +
    width:980px;
 +
    margin:5px auto;
 +
    padding:0 0 0 0;
 +
    background-color:transparent;
 +
}
 +
#p-logo{display:none;}
 +
#search-controls{display:none;}
 +
#top{display:none;}
 +
.firstHeading{display:none;}
 +
/* end of hiding the top section*/
  
−
<h4>Before you start: </h4>
+
/* global setting*/
−
<p> Please read the following pages:</p>
+
#globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%;font-family: calibri， Arial, Helvetica, sans-serif;}
−
<ul>
+
#content{
−
<li>  <a href="https://2015.igem.org/Requirements">Requirements page </a> </li>
+
    position:absolute;
−
<li> <a href="https://2015.igem.org/Wiki_How-To">Wiki Requirements page</a></li>
+
    background-color:transparent;
−
</ul>
+
    border:none;
 +
    width:100%;
 +
    height:auto;
 +
    marign:0 auto;
 +
    padding:0 0 0 0;
 +
    top:0px;
 +
    }
 +
#bodyContent{
 +
    background-color:transparent;
 +
    border:none;
 +
   
 +
    }
 +
siteSub{
 +
    display:none;
 +
    border:none;
 +
    }
 +
contentSub{
 +
    display:none;
 +
    }
 +
/* end of global setting*/
  
−
<div class="highlightBox">
+
/*hiding the footer-box*/
−
<h4> Styling your wiki </h4>
+
#footer-box{display:none;}
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
#catlinks{display:none;}
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>
+
/*end of hiding the footer book*/
−
</div>
+
  
−
<h4> Editing your wiki </h4>
+
/* menu (page, edit ...) */
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
#menubar {
−
<p> <a href="https://2015.igem.org/wiki/index.php?title=Team:SCUT&action=edit"> Click here to edit this page! </a></p>
+
    background-color:transparent;
−
<p>See tips on how to edit your wiki on the <a href="https://2015.igem.org/TemplatesforTeams_Code_Documentation">Template Documentation</a> page.</p>
+
    position: relative;
 +
    float:left;
 +
    white-space: nowrap;
 +
    top:-6px;
 +
    width:490px;
 +
    z-index: 5000;
 +
    font-family: sans-serif;
 +
    font-size: 95%;
 +
    line-height: 1em;
 +
    z-index:99;
 +
}
  
 +
.left-menu{margin-left:-180px;}
 +
.left-menu, .left-menu a {
 +
    text-align: left;
 +
 
 +
    text-transform:lowercase;
 +
}
  
−
<h4>Templates </h4>
+
.left-menu:hover {
−
<p> This year we have created templates for teams to use freely. More information on how to use and edit the templates can be found on the
+
 
−
<a href="https://2015.igem.org/TemplatesforTeams_Code_Documentation">Template Documentation </a> page.</p>
+
    background-color: transparent;
 +
    display:block;
 +
}
  
 +
.right-menu{width:400px; float:right;margin-left:100px;}
 +
.right-menu, .right-menu a {
 +
    right: 0px;
 +
    text-align: right;
 +
    color: #999999;
  
−
<h4>Tips</h4>
+
}
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
#menubar ul {
−
<ul>
+
    color: #999999;
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
    list-style: none;
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
}
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
#menubar li {
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
    display: inline;
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read. </li>
+
    position: relative;
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2015.igem.org/Calendar_of_Events">iGEM 2015 calendar</a> </li>
+
    cursor: pointer;
−
<li>Have lots of fun! </li>
+
    padding-left: 0px;
−
</ul>
+
    padding-right: 0px;
 +
}
 +
.left-menu li a {
 +
    padding: 0px 10px 0px 0px;
 +
    color:black;
 +
}
 +
.left-menu .selected {
 +
#    color: #999999;
 +
}
 +
#.left-menu .selected:hover {
 +
#    color: #999999;
 +
#}
  
 +
.left-menu:hover a {
 +
    color:white;
 +
}
  
−
<h4>Inspiration</h4>
+
.left-menu li a:hover {
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
    color: #D00000;
−
<ul>
+
    text-decoration: underline;
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
    color:white;
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
}
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
−
</ul>
+
  
−
<h4> Uploading pictures and files </h4>
 
−
<p> You can upload your pictures and files to the iGEM 2015 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br />
 
−
When you upload, set the "Destination Filename" to <code>Team:YourOfficialTeamName/NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
 
  
−
<a href="https://2015.igem.org/Special:Upload">CLICK HERE TO UPLOAD FILES</a>
+
.right-menu li {
 +
    background-color: transparent;
 +
}
 +
.right-menu li a {
 +
    padding: 0px 15px 0px 0px;
 +
    color: #999999;;
 +
    background-color: transparent;
 +
    color:white;
 +
}
 +
.right-menu li a:hover {
 +
    color: #D00000;
 +
    text-decoration: underline;
 +
color:white;
 +
}
 +
/* end menu (edit, page ...) */
 +
</style>  
  
 +
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 +
 +
<!-- mobile meta tag -->
 +
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
 +
<title>Team:SCUT</title>
 +
 +
<!-- main style -->
 +
<link rel="stylesheet" type="text/css" href="http://3.graduatesession.sinaapp.com/2015SCUT/style.css" media="screen" />
 +
 +
<!-- color scheme -->
 +
<link rel="stylesheet" type="text/css" href="http://3.graduatesession.sinaapp.com/2015SCUT/color-schemes/red/red.css" media="screen" title="red" />
  
−
</div></div> <!--These are the closing tags for div id="mainContainer" and div id="contentContainer". The corresponding opening tags appear in the template that is {{included}} at the top of this page.-->
+
<!--miscellaneous-->
 +
<link rel="stylesheet" type="text/css" href="http://3.graduatesession.sinaapp.com/2015SCUT/css/superfish.css" media="screen">
 +
<link rel="stylesheet" type="text/css" href="http://3.graduatesession.sinaapp.com/2015SCUT/css/prettyPhoto.css" media="screen"/>
 +
<link rel="stylesheet" type="text/css" href="http://3.graduatesession.sinaapp.com/2015SCUT/css/font-awesome.css" media="screen"/>
 +
<link rel="stylesheet" type="text/css" href="http://3.graduatesession.sinaapp.com/2015SCUT/css/audioplayer.css" media="screen" />
 +
 +
<!-- revolution slider settings -->
 +
<link rel="stylesheet" type="text/css" href="http://3.graduatesession.sinaapp.com/2015SCUT/rs-plugin/css/settings.css" media="screen" />
  
 +
<!-- setting mobile environment -->
 +
<link rel="stylesheet" type="text/css" href="http://3.graduatesession.sinaapp.com/2015SCUT/css/responsive.css" media="screen" />
 +
 +
<!--[if IE 7]>
 +
<link rel="stylesheet" type="text/css" href="http://3.graduatesession.sinaapp.com/2015SCUT/css/font-awesome-ie7.min.css">
 +
<![endif]-->
 +
 +
<!--[if lt IE 9]>
 +
<script src="../../../html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 +
<![endif]-->
 +
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/jquery-1.8.3.min.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/hoverIntent.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/superfish.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/jquery.jcarousel.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/jquery.tweet.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/jflickrfeed.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/jquery.prettyPhoto.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/slides.min.jquery.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/jquery.mobilemenu.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/jquery.contact.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/jquery.preloadify.min.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/jquery.jplayer.min.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/jquery.isotope.min.js"></script>
 +
 +
<!-- jQuery Revolution Slider -->
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
 +
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/custom.js"></script>
 +
 +
<link rel="stylesheet" type="text/css" href="http://3.graduatesession.sinaapp.com/2015SCUT/template-changer.css" media="screen"/>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/jquery.cookie.js"></script>
 +
<script type="text/javascript" src="http://3.graduatesession.sinaapp.com/2015SCUT/js/styleswitch.js"></script>
 +
 +
<!-- Google Web Fonts -->
 +
<link href='../../../fonts.googleapis.com/css@family=Open+Sans_3A300,400,600,700' rel='stylesheet' type='text/css'>
 +
 +
 +
<script type="text/javascript">
 +
$(function()
 +
{
 +
// Call stylesheet init so that all stylesheet changing functions
 +
// will work.
 +
$.stylesheetInit();
 +
 +
// This code loops through the stylesheets when you click the link with
 +
// an ID of "toggler" below.
 +
$('#toggler').bind(
 +
'click',
 +
function(e)
 +
{
 +
$.stylesheetToggle();
 +
return false;
 +
}
 +
);
 +
 +
// When one of the styleswitch links is clicked then switch the stylesheet to
 +
// the one matching the value of that links rel attribute.
 +
$('.styleswitch').bind(
 +
'click',
 +
function(e)
 +
{
 +
$.stylesheetSwitch(this.getAttribute('rel'));
 +
return false;
 +
}
 +
);
 +
}
 +
);
 +
</script>
 +
 +
</head>
 +
 +
<!--very important: setting a class for homepage -->
 +
<body class="home">
 +
 +
<!-- setting a fullscreen image as background:
 +
<img id="bg" src="images/apple.jpg" alt="apple-background" />
 +
-->
 +
 +
 +
 +
<div id="wrapper">
 +
<header id="header">
 +
<div class="centered-wrapper">
 +
<div class="one-third">
 +
<div class="logo"><a href="index.html"></a></div>
 +
</div><!--end one-third-->
 +
 +
<div class="two-third column-last">
 +
<nav id="navigation">
 +
<ul id="mainnav">
 +
<li><a href="index.html"><span>HOME</span></a>
 +
 +
</li>
 +
                        <li><a href="contact.html"><span>TEAM</span></a>
 +
                        <ul>
 +
<li><a href="gallery.html">acknowledgement</a></li>
 +
<li><a href="services.html">Attribution</a></li>
 +
<li><a href="gallery.html">Gallery</a></li>
 +
<li><a href="members.html">Members</a></li>
 +
<li><a href="testimonials.html">Our University</a></li>
 +
</ul>
 +
 +
</li>
 +
                        <li><a href="portfolio-four-columns.html"><span>PROJECT</span></a>
 +
<ul>
 +
<li><a href="portfolio-grid.html">ACHIEVEMENT</a></li>
 +
<li><a href="portfolio-four-columns.html">Cadmium Absorption</a></li>
 +
<li><a href="portfolio-three-columns.html">FUTURE WORK</a></li>
 +
<li><a href="portfolio-two-columns.html">MntA transport</a></li>
 +
<li><a href="portfolio-single.html">NOTEBOOK</a></li>
 +
                                <li><a href="portfolio-single.html">Other Work</a></li>
 +
                                <li><a href="portfolio-single.html">Overview</a></li>
 +
                                <li><a href="portfolio-single.html">protocol</a></li>
 +
                                <li><a href="portfolio-single.html">Sensor System</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#"><span>MODELING</span></a>
 +
<ul>
 +
<li><a href="gallery.html">CsgA-ECs ploymerzation</a></li>
 +
<li><a href="services.html">Future work</a></li>
 +
<li><a href="about-us.html">Gene circuit simulation</a></li>
 +
<li><a href="pricing.html">MntA kinetic model</a></li>
 +
<li><a href="testimonials.html">Overview</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="blog-masonry-2-columns.html"><span>RESULT</span></a>
 +
<ul>
 +
<li><a href="blog-masonry-2-columns.html">BIOBRICKS</a></li>
 +
<li><a href="blog-masonry-3-columns.html">EXPERIMENT WORK</a></li>
 +
<li><a href="blog.html">MODELING WORK</a></li>
 +
 +
</ul>
 +
</li>
 +
                        <li><a href="#"><span>POLICY & PRACTICE</span></a>
 +
<ul>
 +
<li><a href="typography.html">Economics and ethics</a></li>
 +
<li><a href="columns.html">OUTDOORS</a></li>
 +
<li><a href="buttons-and-boxes.html">SYN-BIOLOGY STUDY</a></li>
 +
<li><a href="tabs-and-toggles.html">VISITS</a></li>
 +
 +
</ul>
 +
</li>
 +
 +
 +
 +
                        <li><a href="contact.html"><span>SAFETY</span></a>
 +
 +
</li>
 +
                       
 +
                       
 +
</ul>
 +
</nav><!--end navigation-->
 +
</div><!--end two-third-->
 +
<div class="clear"></div>
 +
</div><!--end centered-wrapper-->
 +
</header>
 +
 +
<div class="top-shadow"></div>
 +
<div class="fullwidthbanner-container">
 +
<div class="fullwidthbanner">
 +
<ul>
 +
<!-- THE FIRST SLIDE -->
 +
<li data-transition="slidedown" data-slotamount="15" data-masterspeed="300">
 +
<img src="images/slides/slide5.jpg" alt="" />
 +
 +
<div class="caption box-slide1 lfl ltl" 
 +
data-x="0"
 +
data-y="150"
 +
data-speed="300"
 +
data-start="1000"
 +
data-easing="easeOutExpo"><h2>HEY THERE! WE ARE SYMPATHIQUE</h2><p>This fullwidth slider is a very flexible one, and works with text, images, videos, or all of them in the same slide. Cool!</p></div>
 +
</li>
 +
 +
<!-- THE SECOND SLIDE -->
 +
<li data-transition="fade" data-slotamount="15" data-masterspeed="300">
 +
<!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
 +
<img src="images/slides/slide3.jpg" alt="" />
 +
 +
<!-- THE CAPTIONS IN THIS SLDIE -->
 +
<div class="caption box-slide2 lft ltt" 
 +
data-x="770"
 +
data-y="110"
 +
data-speed="300"
 +
data-start="500"
 +
data-easing="easeOutExpo"><h2>JJ ROYAL PROJECT</h2><p>Describing projects it`s so easy. Define a caption, style it as you want and drop in it some content, not any type of content but only awesome content! You can also add HTML code, like buttons:</p><a class="button red" href="#">Find Out More</a></div>
 +
</li>
 +
 +
<!-- THE THIRD SLIDE -->
 +
<li data-transition="papercut" data-slotamount="15" data-masterspeed="300" data-link="portfolio-single.html">
 +
<img src="images/slides/slide2.jpg" alt="" />
 +
 +
<!-- THE FIFTH SLIDE -->
 +
<li data-transition="slideright" data-slotamount="15" data-masterspeed="300">
 +
<img src="images/slides/slide1.jpg" alt="" />
 +
 +
<div class="caption title_text lfl stl" 
 +
data-x="0"
 +
data-y="250"
 +
data-speed="300"
 +
data-start="1000"
 +
data-easing="easeOutExpo">CREATE UNLIMITED CAPTIONS</div>
 +
 +
<div class="caption description_text lfl stl" 
 +
data-x="0"
 +
data-y="292"
 +
data-speed="300"
 +
data-start="1300"
 +
data-easing="easeOutExpo">AND STYLE AND ANIMATE THEM INDIVIDUALLY</div>
 +
</li>
 +
<!-- THE SIX SLIDE -->
 +
<li data-transition="fade" data-slotamount="15" data-masterspeed="300">
 +
<img src="images/slides/slide6.jpg" alt="" />
 +
 +
<div class="caption lfl fadeout" 
 +
data-x="0"
 +
data-y="40"
 +
data-speed="300"
 +
data-start="500"
 +
data-easing="easeOutExpo"><img src="images/slides/layer1.jpg" alt=""></div>
 +
 +
<div class="caption lfl fadeout" 
 +
data-x="15"
 +
data-y="260"
 +
data-speed="300"
 +
data-start="800"
 +
data-easing="easeOutExpo"><img src="images/slides/layer2.jpg" alt=""></div>
 +
<div class="caption lfr fadeout" 
 +
data-x="855"
 +
data-y="60"
 +
data-speed="300"
 +
data-start="1100"
 +
data-easing="easeOutExpo"><img src="images/slides/layer4.jpg" alt=""></div>
 +
 +
<div class="caption lfr fadeout" 
 +
data-x="880"
 +
data-y="290"
 +
data-speed="300"
 +
data-start="1400"
 +
data-easing="easeOutExpo"><img src="images/slides/layer5.jpg" alt=""></div>
 +
</li>
 +
</ul>
 +
<!--enable slider timer
 +
<div class="tp-bannertimer"></div>
 +
-->
 +
</div>
 +
<div class="bottom-shadow"></div>
 +
</div><!--end slider-->
 +
 +
 +
<div class="centered-wrapper">
 +
 +
<section class="intro">
 +
<h2>We`re an award winning digital studio specialised in web design.</h2>
 +
<h5>Our projects stand out from the crowd so if you want to collaborate, <a href="#">get in touch with us</a> to see how we can help you!</h5>
 +
</section>
 +
 +
<section>
 +
<div class="bgtitle"><h2>Our Works</h2></div>
 +
<ul id="portfolio-carousel">
 +
<li>
 +
<a href="images/portfolio/image1.jpg" rel="prettyPhoto[pp_gal]" title="Cervejaria Republica">
 +
<span class="item-on-hover"><span class="hover-image"></span></span>
 +
<img src="images/portfolio/image1-small.jpg" alt=" " />
 +
</a>
 +
<div class="portfolio-carousel-details">
 +
<h3><a href="portfolio-single.html">Cervejaria Republica</a></h3>
 +
<span>rebranding, printing identity</span>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a href="images/portfolio/image2.jpg" rel="prettyPhoto[pp_gal]" title="Website Redesign">
 +
<span class="item-on-hover"><span class="hover-image"></span></span>
 +
<img src="images/portfolio/image2-small.jpg" alt=" " />
 +
</a>
 +
<div class="portfolio-carousel-details">
 +
<h3><a href="portfolio-single.html">Website Redesign</a></h3>
 +
<span>web design, programming</span>
 +
</div>
 +
</li>
 +
               
 +
                <li>
 +
<a href="images/portfolio/image4.jpg" rel="prettyPhoto[pp_gal]" title="Warner Bros">
 +
<span class="item-on-hover"><span class="hover-image"></span></span>
 +
<img src="images/portfolio/image4-small.jpg" alt=" " />
 +
</a>
 +
<div class="portfolio-carousel-details">
 +
<h3><a href="portfolio-single.html">Warner Bros</a></h3>
 +
<span>web design, rebranding</span>
 +
</div>
 +
</li>
 +
                <li>
 +
<a href="images/portfolio/image4.jpg" rel="prettyPhoto[pp_gal]" title="Warner Bros">
 +
<span class="item-on-hover"><span class="hover-image"></span></span>
 +
<img src="images/portfolio/image4-small.jpg" alt=" " />
 +
</a>
 +
<div class="portfolio-carousel-details">
 +
<h3><a href="portfolio-single.html">Warner Bros</a></h3>
 +
<span>web design, rebranding</span>
 +
</div>
 +
</li>
 +
                <li>
 +
<a href="images/portfolio/image4.jpg" rel="prettyPhoto[pp_gal]" title="Warner Bros">
 +
<span class="item-on-hover"><span class="hover-image"></span></span>
 +
<img src="images/portfolio/image4-small.jpg" alt=" " />
 +
</a>
 +
<div class="portfolio-carousel-details">
 +
<h3><a href="portfolio-single.html">Warner Bros</a></h3>
 +
<span>web design, rebranding</span>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="portfolio-single.html">
 +
                    <span class="item-on-hover"><span class="hover-link"></span></span>
 +
<img src="images/portfolio/image3-small.jpg" alt=" " />
 +
</a>
 +
<div class="portfolio-carousel-details">
 +
<h3><a href="portfolio-single.html">BOBO</a></h3>
 +
<span>business cards, branding</span>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a href="portfolio-single.html">
 +
                    <span class="item-on-hover"><span class="hover-link"></span></span>
 +
 +
<img src="images/portfolio/image6-small.jpg" alt=" " />
 +
</a>
 +
<div class="portfolio-carousel-details">
 +
<h3><a href="portfolio-single.html">Old City Streets</a></h3>
 +
<span>urban, photography</span>
 +
</div>
 +
</li>
 +
 +
 +
<li>
 +
<a href="portfolio-single.html">
 +
<span class="item-on-hover"><span class="hover-link"></span></span>
 +
<img src="images/portfolio/image6-small.jpg" alt=" " />
 +
</a>
 +
<div class="portfolio-carousel-details">
 +
<h3><a href="portfolio-single.html">City Photo Session</a></h3>
 +
<span>marketing, photography</span>
 +
</div>
 +
</li>
 +
 +
</ul>
 +
</section>
 +
 +
<div class="space"></div>
 +
 +
<section>
 +
<div class="bgtitle"><h2>From the Blog</h2></div>
 +
<ul id="homeblog-carousel">
 +
<li>
 +
<a href="portfolio-single.html">
 +
<span class="item-on-hover"></span>
 +
<img src="images/blog/homeblog-thumbnail3.jpg" alt="LOREM IPSUM DOLOR SIT AMET" />
 +
</a>
 +
<div class="blog-carousel-details">
 +
<h2><a href="portfolio-single.html">Lorem Ipsum Dolor Sit Amet Consectetur</a></h2>
 +
<div class="carousel-meta">
 +
<span class="post-format"><i class="icon-pencil"></i></span><span class="details">May 18, 2012 / <a href="#">3 Comments</a></span>
 +
</div>
 +
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a href="portfolio-single.html">
 +
<span class="item-on-hover"></span>
 +
<img src="images/blog/homeblog-thumbnail5.jpg" alt="LOREM IPSUM DOLOR SIT AMET" />
 +
</a>
 +
<div class="blog-carousel-details">
 +
<h2><a href="portfolio-single.html">Ut Enim Ad Minim Quis Nostrud</a></h2>
 +
<div class="carousel-meta">
 +
<span class="post-format"><i class="icon-pencil"></i></span><span class="details">December 07, 2012 / <a href="#">4 Comments</a></span>
 +
</div>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="portfolio-single.html">
 +
<span class="item-on-hover"></span>
 +
<img src="images/blog/homeblog-thumbnail1.jpg" alt="LOREM IPSUM DOLOR SIT AMET" />
 +
</a>
 +
<div class="blog-carousel-details">
 +
<h2><a href="portfolio-single.html">Excepteur Sint Occaecat Cupidatat Non Proident</a></h2>
 +
<div class="carousel-meta">
 +
<span class="post-format"><i class="icon-facetime-video"></i></span><span class="details">May 18, 2012 / <a href="#">3 Comments</a></span>
 +
</div>
 +
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a href="portfolio-single.html">
 +
<span class="item-on-hover"></span>
 +
<img src="images/blog/homeblog-thumbnail4.jpg" alt="LOREM IPSUM DOLOR SIT AMET" />
 +
</a>
 +
<div class="blog-carousel-details">
 +
<h2><a href="portfolio-single.html">Itaque Earum Rerum Hic Tenetur</a></h2>
 +
<div class="carousel-meta">
 +
<span class="post-format"><i class="icon-quote-left"></i></span><span class="details">December 07, 2012 / <a href="#">4 Comments</a></span>
 +
</div>
 +
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.</p>
 +
</div>
 +
</li>
 +
</ul>
 +
</section>
 +
 +
</div><!--end centered-wrapper-->
 +
 +
<div class="space"></div>
 +
 +
<footer id="footer">
 +
<div class="centered-wrapper">
 +
<div id="topfooter">
 +
<div class="one-half">
 +
<h3>About Us</h3>
 +
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam veritatis et quasi nam liber tempore.</p>
 +
<div class="footer-logo"></div>
 +
</div><!--end percent-one-half-->
 +
<div class="one-half column-last">
 +
<div class="percent-one-half">
 +
<h3>We are on Twitter</h3>
 +
<div class="tweet"></div>
 +
</div>
 +
 +
<div class="percent-one-half column-last">
 +
<h3>Get in Touch with Us</h3>
 +
<ul>
 +
<li>Address: 1600 Amphitheatre Parkway, Mountain View, CA 94043</li>
 +
<li>Phone: +321 123 456 7<br/>
 +
E-mail: <a href="mailto:">johndoe@ipsum.com</a></li>
 +
</ul>
 +
</div><!--end one-half-->
 +
</div><!--end one-half-->
 +
</div><!--end topfooter-->
 +
</div><!--end centered-wrapper-->
 +
 +
<div id="bottomfooter">
 +
<div class="centered-wrapper">
 +
<div class="one-half">
 +
<p>COPYRIGHT &copy; 2013 - SYMPATHIQUE | ALL RIGHTS RESERVED</p>
 +
</div><!--end one-half-->
 +
 +
<div class="one-half column-last">
 +
<ul id="social">
 +
<li><a class="rss" href="#">RSS Feed</a></li>
 +
<li><a class="facebook" href="#">Facebook</a></li>
 +
<li><a class="twitter" href="#">Twitter</a></li>
 +
<li><a class="flickr" href="#">Flickr</a></li>
 +
<li><a class="google" href="#">Google</a></li>
 +
 +
<!-- You can add social icons for forrst, dribbble, vimeo, linkedin and skype. Take the ones you need from the list and paste them above
 +
 +
<li><a class="forrst" href="#">Forrst</a></li>
 +
<li><a class="dribbble" href="#">Dribbble</a></li>
 +
<li><a class="vimeo" href="#">Vimeo</a></li>
 +
<li><a class="linkedin" href="#">LinkedIn</a></li>
 +
<li><a class="skype" href="#">Skype</a></li>
 +
-->
 +
</ul>
 +
</div><!--end one-half-->
 +
</div><!--end centered-wrapper-->
 +
</div><!--end bottomfooter-->
 +
</footer><!--end footer-->
 +
 +
</div><!--end wrapper-->
 +
</body>
 
</html>
 
</html>

Revision as of 19:09, 16 September 2015

Team:SCUT

  • HEY THERE! WE ARE SYMPATHIQUE

    This fullwidth slider is a very flexible one, and works with text, images, videos, or all of them in the same slide. Cool!

  • JJ ROYAL PROJECT

    Describing projects it`s so easy. Define a caption, style it as you want and drop in it some content, not any type of content but only awesome content! You can also add HTML code, like buttons:

    Find Out More
  • CREATE UNLIMITED CAPTIONS
    AND STYLE AND ANIMATE THEM INDIVIDUALLY

We`re an award winning digital studio specialised in web design.

Our projects stand out from the crowd so if you want to collaborate, get in touch with us to see how we can help you!

Our Works

From the Blog

About Us

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam veritatis et quasi nam liber tempore.

We are on Twitter

Get in Touch with Us

  • Address: 1600 Amphitheatre Parkway, Mountain View, CA 94043
  • Phone: +321 123 456 7
    E-mail: johndoe@ipsum.com

COPYRIGHT © 2013 - SYMPATHIQUE | ALL RIGHTS RESERVED