|
|
(32 intermediate revisions by 3 users not shown) |
Line 1: |
Line 1: |
− | /* General Slides */
| + | {{Template:Team:CHINA_CD_UESTC/menu}} |
− | /*************************************************
| + | {{Template:Team:CHINA_CD_UESTC/cssstyle}} |
− | first title
| + | |
− | ***********************************************/
| + | |
− | #title {
| + | |
− | position: fixed;
| + | |
− | font-size: 80px;
| + | |
− | left:480px;
| + | |
− | z-index: 5;
| + | |
| | | |
− | }
| |
− | #firstTitle {
| |
− | font-family: Arial, Helvetica, sans-serif;
| |
− | position: fixed;
| |
− | margin-top:0;
| |
− | margin-bottom:0;
| |
− | top: 60px;
| |
− | font-size: 80px;
| |
− | color: #FFFFAA;
| |
− | overflow: hidden;
| |
| | | |
− | }
| + | <!DOCTYPE html> |
| + | <html> |
| + | <head> |
| | | |
| | | |
| + | </head> |
| + | <style type="text/css"> |
| /************************************************* | | /************************************************* |
− | right text frame container
| |
− | ***********************************************/
| |
− | #RightContent {
| |
− | float: right;
| |
− | position: fixed;
| |
− | left: 260px;
| |
− | top: 0px;
| |
− | right: 0;
| |
− | height:100%;
| |
− | overflow-y: scroll;
| |
− | transition: all 200ms ease-out;
| |
− | transform: translate3d(0, 0, 0);
| |
− | z-index:5;
| |
| | | |
− | }
| + | whole right section |
− | .transparent_class {
| + | |
− | border-radius: 0px;
| + | |
− | position: absolute;
| + | |
− | top: 350px;
| + | |
− | left: 50px;
| + | |
− | right: 50px;
| + | |
− | background-color: #0072E3;
| + | |
− | color:#000000;
| + | |
− | filter:alpha(opacity=80);
| + | |
− | -moz-opacity:0.8;
| + | |
− | -khtml-opacity: 0.8;
| + | |
− | opacity: 0.8;
| + | |
− | }
| + | |
− | .blockWords{
| + | |
− | font-family:Arial, Helvetica, sans-serif;
| + | |
− | font-size: 17px;
| + | |
− | padding: 15px;
| + | |
− | color: #ffffff;
| + | |
− | }
| + | |
| | | |
− |
| |
− | #content{
| |
− | height:90px;
| |
− | }
| |
− | #HZpic {
| |
− | background-position:0 0 !important;
| |
− | width:100%;
| |
− | padding:10px 40px 20px 40px;
| |
− | margin-top:20px;
| |
− | }
| |
− | #content{
| |
− | height:90px;
| |
− | padding: 0px 0px 0px 0px;
| |
− | border-left: 0px solid #444444;
| |
− | border-right: 0px solid #444444;
| |
− | background:none;
| |
− | }
| |
− | /*************************************************
| |
− | right text frame container
| |
| ***********************************************/ | | ***********************************************/ |
− | #firstTitle { | + | #RightSection { |
− | font-family: Arial, Helvetica, sans-serif;
| + | position: fixed; |
− | position: fixed;
| + | left: 260px; |
− | width:100%;
| + | top: 0; |
− | margin-top:0;
| + | right: 0; |
− | margin-bottom:0;
| + | height:100%; |
− | top: 60px;
| + | background:#F0F0F0; |
− | font-size: 80px;
| + | background-image:url("https://static.igem.org/mediawiki/2015/8/81/CHINA_CD_UESTC_RESULTSbg.jpg"); |
− | color: #FFFFAA;
| + | overflow-y: scroll; |
− | overflow: hidden;
| + | background-repeat: repeat; |
| + | background-size: 180px; |
| + | transition: all 200ms ease-out; |
| + | transform: translate3d(0, 0, 0); |
| + | z-index:1; |
| | | |
| } | | } |
− | | + | #RightContentText a{ |
− | .transparent_class {
| + | color: #007D92; |
− | border-radius: 0px;
| + | |
− | position: absolute;
| + | |
− | top: 350px;
| + | |
− | width:1000px;
| + | |
− | left: 50px;
| + | |
− | right: 50px;
| + | |
− | background-color: #0072E3;
| + | |
− | color:#000000;
| + | |
− | filter:alpha(opacity=80);
| + | |
− | -moz-opacity:0.8;
| + | |
− | -khtml-opacity: 0.8;
| + | |
− | opacity: 0.8;
| + | |
| } | | } |
| | | |
− | #RightContentText {
| |
− | position: absolute;
| |
− | top: 510px;
| |
− | width: 1040px;
| |
− | left:28px;
| |
− | right:8px;
| |
− | background:#FFFFFF;
| |
− | color: #000000;
| |
− | transition: all 200ms ease-out;
| |
− | transform: translate3d(0, 0, 0);
| |
− | }
| |
| | | |
| + | </style> |
| + | <body id="homeIndexBody"> |
| + | <div id="RightSection"></div> |
| | | |
− | .slide{
| + | <div id="title"> |
− | background-attachment: fixed;
| + | |
− | width:100%;
| + | |
− | height:100%;
| + | |
− | position: relative;
| + | |
− | padding:0 10px 0 10px;
| + | |
− | margin: 0 10px 0 10px;
| + | |
− | z-index:12;
| + | |
− | overflow:hidden;
| + | |
− | }
| + | |
| | | |
| + | <div id="firstTitle"> |
| + | <p> |
| + | <B>JUDGING</B> |
| + | </p> |
| + | </div> |
| + | </div> |
| | | |
− | h2 {
| + | <div id="RightContent"> |
− | display:block;
| + | <div class="transparent_class "> |
− | margin:0 0 23px;
| + | <p class="blockWords"> |
− | padding:0;
| + | We meet all the requirements of 13 medals’ standards, and this year we expect to get two iGEM awards, best integrated human practice and best wiki. In this section, we clearly show each entries up to the standards. Please judge. |
− | text-transform:none;
| + | </p> |
− | text-align:left;
| + | </div> |
− | font-style:normal;
| + | |
− | border-bottom:1px solid #e0e0e0;
| + | |
− | font-family: Helvetica ;
| + | |
− | font-size: 40px;
| + | |
− | line-height: 82px;
| + | |
− | color:#343434;
| + | |
− | font-weight: 300;
| + | |
− | }
| + | |
| | | |
− | h3 {
| + | <div id="RightContentText"> |
− | margin:0;
| + | <div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5" style="background-position: 0px 669px;"> |
− | padding:40px 0 32px 0;
| + | <div class="container clearfix"> |
− | text-align:center;
| + | <div id='bronze'> |
− | font-family: Helvetica ;
| + | <h3>6/6 Bronze Requirements</h3> |
− | font-weight:800;
| + | </div> |
− | font-size:32px;
| + | <div class="req_list"> |
− | font-style:normal;
| + | <h1> |
− | line-height:36px;
| + | Register the team, have a great summer, and plan to have fun at the Giant Jamboree. |
− | }
| + | </h1> |
| + | <p> |
| + | Our team has been registered. And after a wonderful summer, the members will have fun at the Giant Jamboree! |
| + | </p> |
| + | <h1>Complete and submit the Judging form.</h1> |
| + | <p> |
| + | We have accomplished and submitted the <a href="https://igem.org/2015_Judging_Form?id=1779">Judging form</a> on time. |
| | | |
| + | </p> |
| + | <h1>Make a wiki</h1> |
| + | <p> |
| + | We sure did, you are currently on it. |
| + | </p> |
| + | <h1>Plan to present a Poster and Talk at the iGEM Jamboree.</h1> |
| + | <p> |
| + | Our six team members are going to attend the Giant Jamboree in Boston, where we will present a Poster and Talk about our project <strong>in Room 306 on September 27 at 4:00 PM</strong>. If you are interested, please come to our booth. |
| + | </p> |
| + | <h1> |
| + | Clearly attribute work done by the students and distinguish it from work done by others. |
| + | </h1> |
| + | <p> |
| + | We describe how we divided the main responsibilities between us, team members on the section <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Attributions">Attributions</a>, which also describes all the help we have received. |
| + | </p> |
| + | <h1> |
| + | Document one new standard BioBrick and submit it to the iGEM Registry. |
| + | </h1> |
| + | <p> |
| + | <strong>17</strong> new BioBricks can be found in the section <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Parts">Parts</a> which have been submitted. |
| + | </p> |
| + | </div> |
| + | </div> |
| + | </div> |
| | | |
− | h4 {
| + | <div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5" style="background-position: 0px 669px;"> |
− | margin:0;
| + | <div class="container clearfix"> |
− | padding:0 0 15px;
| + | <div id='silver'> |
− | text-transform:none;
| + | <h3>3/3 Silver Requirements</h3> |
− | text-align:left;
| + | </div> |
− | font-family: Helvetica ;
| + | <div class="req_list"> |
− | font-weight:300;
| + | <h1> |
− | font-size:32px;
| + | Experimentally validate a BioBrick of your own design and construction works as expected. |
− | font-style:normal;
| + | </h1> |
− | line-height:36px;
| + | <p> |
− | color:#222;
| + | We have experimentally validated the BioBricks of <a href="http://parts.igem.org/Part:BBa_K1779204">BBa_K1779204</a> and <a href="http://parts.igem.org/Part:BBa_K1779200">BBa_K1779200</a> work as expected. |
− | }
| + | </p> |
| + | <h1>Submit this new part to the iGEM Parts Registry.</h1> |
| + | <p> |
| + | We have successfully submitted these <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Parts">Parts</a>. |
| + | </p> |
| + | <h1>iGEM projects involve important questions beyond the bench.</h1> |
| + | <p> |
| + | Our Human Practices have involved these important questions beyond the bench, including Publicity, NGO of iGEM and Industry. Please read the <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Practices">Overview</a> for more details. |
| + | </p> |
| + | </div> |
| + | </div> |
| + | </div> |
| | | |
− | img.icon_img {
| + | <div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5" style="background-position: 0px 669px;"> |
− | float:left;
| + | <div class="container clearfix"> |
− | margin-right:20px;
| + | <div id='gold'> |
− | margin-top:20px;
| + | <h3>4/4 Gold Requirements</h3> |
− | margin-bottom:25px;
| + | </div> |
− | }
| + | <div class="req_list"> |
| + | <h1> |
| + | Expand on your silver medal Human Practices activity by demonstrating how you have integrated the investigated issues into the design and/or execution of your project. |
| + | </h1> |
| + | <p> |
| + | Our Human Practices have expanded on the silver medal by demonstrating the investigated issues into the design and execution of our project, especially <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/hp_business">Industry</a> and <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/hp_HKU">Safety advice</a>. |
| + | </p> |
| + | <h1>Help any registered iGEM team.</h1> |
| + | <p> |
| + | We helped two registered iGEM teams: UESTC_Software team and SCU_China team. Please read the details on the <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Collaborations">Collaborations</a>. |
| + | </p> |
| + | <h1> |
| + | Improve the function or characterization of a previously existing BioBrick Part. |
| + | </h1> |
| + | <p> |
| + | We have improved the function of a previously existing BioBrick Part: <a href="http://parts.igem.org/Part:BBa_K863005">BBa_K863005</a> in two ways. Please click: <a href="http://parts.igem.org/Part:BBa_K1779204">BBa_K1779204</a> |
| + | and <a href="http://parts.igem.org/Part:BBa_K1779200">BBa_K1779200</a> for more details. |
| + | </p> |
| + | <h1>Demonstrate a functional prototype of your project.</h1> |
| + | <p> |
| + | Different from the projects of pervious teams, we designed and constructed the enzymatic bio-fuel cell by ourselves which could work efficiently. Please read the details on the <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Design">Design</a>. |
| + | </p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5" style="background-position: 0px 669px;"> |
| + | <div class="container clearfix"> |
| + | <div> |
| + | <h3>iGEM Prizes</h3> |
| + | </div> |
| + | <div class="grid_8"> |
| + | <h4>Integrated Human Practices</h4> |
| + | <p> |
| + | <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/hp_business">Safety advice</a> from Prof. Hu who is studying in the Hong Kong University Medicine School, his experience helped us better ensure our project's safety system.<br><br> |
| + | Technicians in <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/hp_business#gocampus">biotechnology companies</a> put forward some opinions to the potential products of our project, which helped us to consider the application of the project.<br><br> |
| + | Chengdu Biology Maker helped us make <a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Results#3Ddevice">a bio-fuel cell device</a>, used by their 3D printer which made by themselves.<br><br> |
| | | |
− | .effect_2 {
| + | </p> |
− | background:url(../images/effect_2.png) repeat left top;
| + | </div> |
− | position:relative;
| + | </div> |
− | top:0;
| + | </div> |
− | bottom:-57px;
| + | </div> |
− | height:100%;
| + | |
− | z-index:999 !important;
| + | |
− | }
| + | |
− | | + | |
− | /*________________________judging__________________*/
| + | |
− | #bronze h3{
| + | |
− | background-image: url();
| + | |
− | background-repeat: no-repeat;
| + | |
− | text-decoration:underline;
| + | |
− | color: #e8b77c;
| + | |
− | }
| + | |
− | #silver h3{
| + | |
− | background-image: url();
| + | |
− | background-repeat: no-repeat;
| + | |
− | text-decoration:underline;
| + | |
− | color: #b4c8cb;
| + | |
− | }
| + | |
− | #gold h3{
| + | |
− | background-image: url();
| + | |
− | background-repeat: no-repeat;
| + | |
− | text-decoration:underline;
| + | |
− | color: #fbca23;
| + | |
− | }
| + | |
− | | + | |
− | .req_list{
| + | |
− | width: 90%;
| + | |
− | }
| + | |
− | .req_list h1{
| + | |
− | background:url(https://static.igem.org/mediawiki/2015/4/4e/CHINA_CD_UESTC_YesIcon.png) no-repeat;
| + | |
− | background-size: 6%;
| + | |
− | margin:0;
| + | |
− | padding:10px 0 0px 50px;
| + | |
− | margin-left: 50px;
| + | |
− | font-family: Helvetica ;
| + | |
− | font-weight:800;
| + | |
− | font-size:20px;
| + | |
− | font-style:normal;
| + | |
− | line-height:36px;
| + | |
− | }
| + | |
− | .req_list p{
| + | |
− | margin:0;
| + | |
− | margin-left: 100px;
| + | |
− | font-family: 'Microsoft Yahei' ;
| + | |
− | font-weight:500;
| + | |
− | font-size:15px;
| + | |
− | font-style:normal;
| + | |
− | line-height:26px;
| + | |
− | }
| + | |
− | /* ____________________________________ Slide 2 标准文本____________________________________ */ | + | |
− | | + | |
− | #slide2 {
| + | |
− | width:100%;
| + | |
− | padding:20px 0 20px;
| + | |
− | }
| + | |
− | | + | |
− | .det_inf {margin-bottom:24px;
| + | |
− | }
| + | |
− | .det_inf li {margin-bottom:10px;
| + | |
− | }
| + | |
− | .det_inf li a {
| + | |
− | color:#929292;
| + | |
− | }
| + | |
− | .det_inf li a:hover {
| + | |
− | color:#f14833;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | /* ___________________________________ //Slide 2 ___________________________________ */ | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | /* ____________________________________ Slide 4 service旋转四列____________________________________ */ | + | |
− | | + | |
− | #slide4 {
| + | |
− | width:100%;
| + | |
− | padding:86px 0 69px;
| + | |
− | }
| + | |
− | #slide4 h2 {
| + | |
− | color:#b8b8b8;
| + | |
− | border-bottom:1px solid #3b3b3b;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /* ____________ SERVICES_BLOCK ___________ */
| + | |
− | a.servc_block {
| + | |
− | display:block;
| + | |
− | position:relative;
| + | |
− | text-align:center;
| + | |
− | color:#6f6f6f;
| + | |
− | }
| + | |
− | | + | |
− | .icon_bord {
| + | |
− | position:relative;
| + | |
− | z-index:10;
| + | |
− | top:0;
| + | |
− | left:50%;
| + | |
− | margin-left:-51px;
| + | |
− | width:102px;
| + | |
− | height:116px;
| + | |
− | }
| + | |
− | | + | |
− | .icon1, .icon1_h {
| + | |
− | position:absolute;
| + | |
− | z-index:1;
| + | |
− | top:0;
| + | |
− | left:0;
| + | |
− | }
| + | |
− | | + | |
− | .servc_block .icon1 {
| + | |
− | transition: all 0.5s ease-out;
| + | |
− | opacity: 1;
| + | |
− | }
| + | |
− | .servc_block:hover .icon1 {
| + | |
− | transform: rotate(720deg) scale(0);
| + | |
− | opacity: 0;
| + | |
− | }
| + | |
− | | + | |
− | .servc_block .icon1_h {
| + | |
− | transition: all 0.5s ease-out;
| + | |
− | transform: rotate(720deg) scale(0);
| + | |
− | opacity: 0;
| + | |
− | }
| + | |
− | .servc_block:hover .icon1_h {
| + | |
− | transform: rotate(720deg) scale(1);
| + | |
− | opacity: 1;
| + | |
− | transition-delay: 0.4s;
| + | |
− | }
| + | |
− | | + | |
− | .servc_block p {
| + | |
− | font-family: Helvetica ;
| + | |
− | font-weight:300;
| + | |
− | font-size:20px;
| + | |
− | line-height:22px;
| + | |
− | color:#a3a3a3;
| + | |
− | transition: all 0.2s ease-in-out;
| + | |
− | -moz-transition: all 0.2s ease-in-out;
| + | |
− | -webkit-transition: all 0.2s ease-in-out;
| + | |
− | -o-transition: all 0.2s ease-in-out;
| + | |
− | }
| + | |
− | .servc_block:hover p {
| + | |
− | color:#f14833;
| + | |
− | transition-delay: 0.7s;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /* ____________ SERVICES_BLOCK ___________ */
| + | |
− | | + | |
− | /* ___________________________________ //Slide 4 ___________________________________ */
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | /* ____________________________________ Slide 6 时间轴____________________________________ */
| + | |
− | | + | |
− | #slide6 {
| + | |
− | background:url(../images/slide6_bg.jpg) repeat left top;
| + | |
− | width:100%;
| + | |
− | padding:30px 0 30px;
| + | |
− | }
| + | |
− | | + | |
− | #slide6 h2 {color:#222;
| + | |
− | }
| + | |
− | | + | |
− | /* ____________________ exhib_block ____________________ */
| + | |
− | .exhib_block {position:relative;}
| + | |
− | .exhib_block .fleft {margin-left:1px;}
| + | |
− | .exhib_line_center {
| + | |
− | position:absolute;
| + | |
− | left:50%;
| + | |
− | top:12px;
| + | |
− | width:1px;
| + | |
− | height:83%;
| + | |
− | background:#c3c3c3;
| + | |
− | }
| + | |
− | .exhib_block p {
| + | |
− | padding-bottom:9px;
| + | |
− | font-family: Helvetica ;
| + | |
− | font-weight:400;
| + | |
− | font-size:20px;
| + | |
− | color:#343434;
| + | |
− | transition: all 0.2s ease-in-out;
| + | |
− | -moz-transition: all 0.2s ease-in-out;
| + | |
− | -webkit-transition: all 0.2s ease-in-out;
| + | |
− | -o-transition: all 0.2s ease-in-out;
| + | |
− | }
| + | |
− | .exhib_cont:hover p {color:#f14833;
| + | |
− | }
| + | |
− | | + | |
− | .exhib_p_top {margin-left:80px;
| + | |
− | }
| + | |
− | | + | |
− | .exhib_cont {
| + | |
− | position:relative;
| + | |
− | width:420px;
| + | |
− | margin-top:30px;
| + | |
− | padding:13px 20px 9px;
| + | |
− | background:#fff;
| + | |
− | color:#8d8d8d;
| + | |
− | border:1px solid #dedede;
| + | |
− | border-radius:12px;
| + | |
− | transition: all 0.2s ease-in-out;
| + | |
− | -moz-transition: all 0.2s ease-in-out;
| + | |
− | -webkit-transition: all 0.2s ease-in-out;
| + | |
− | -o-transition: all 0.2s ease-in-out;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .exhib_block .fright {
| + | |
− | position: relative;
| + | |
− | left:52%;
| + | |
− | margin-top:50px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .exhib_cont:hover {
| + | |
− | -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.15);
| + | |
− | -moz-box-shadow: 0 0 16px rgba(0,0,0,0.15);
| + | |
− | box-shadow: 0 0 16px rgba(0,0,0,0.15);
| + | |
− | }
| + | |
− | | + | |
− | .exhib_date_right, .exhib_date_left, .exhib_date_top {
| + | |
− | display:block;
| + | |
− | position:absolute;
| + | |
− | font-family: Helvetica ;
| + | |
− | font-weight:300;
| + | |
− | font-size:26px;
| + | |
− | line-height:20px;
| + | |
− | color:#91B517;
| + | |
− | transition: all 0.2s ease-in-out;
| + | |
− | -moz-transition: all 0.2s ease-in-out;
| + | |
− | -webkit-transition: all 0.2s ease-in-out;
| + | |
− | -o-transition: all 0.2s ease-in-out;
| + | |
− | }
| + | |
− | .exhib_date_top {
| + | |
− | left:49.5%;
| + | |
− | top:0;
| + | |
− | width:95px;
| + | |
− | text-align:right;
| + | |
− | }
| + | |
− | | + | |
− | .exhib_date_left {
| + | |
− | left:-150px;
| + | |
− | top:27px;
| + | |
− | }
| + | |
− | .exhib_date_right {
| + | |
− | right:-190px;
| + | |
− | top:27px;
| + | |
− | text-align:right;
| + | |
− | }
| + | |
− | .exhib_cont:hover .exhib_date_right, .exhib_cont:hover .exhib_date_left, .exhib_cont:hover .exhib_date_top {font-size:30px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | /* ___________________ //exhib_block ___________________ */
| + | |
− | | + | |
− | | + | |
− | | + | |
− | /* ___________________________________ //Slide 6 ___________________________________ */
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | /* ____________________________________ Slide 10 照片____________________________________ */
| + | |
− | #slide10 {
| + | |
− | background:url(../images/slide10_bg.jpg) repeat left top;
| + | |
− | width:100%;
| + | |
− | padding:86px 0 69px;
| + | |
− | }
| + | |
− | | + | |
− | /* _________________ PORTFOLIO ________________ */
| + | |
− | .gallery-list {
| + | |
− | text-align:center;
| + | |
− | margin-right:-20px !important;
| + | |
− | }
| + | |
− | #slide10 .hover_img {
| + | |
− | overflow:hidden;
| + | |
− | position:relative;
| + | |
− | height:291px;
| + | |
− | width:255px;
| + | |
− | background:#fff;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .img_block {
| + | |
− | display:inline-block;
| + | |
− | margin:0;
| + | |
− | width:251px;
| + | |
− | height:100%;
| + | |
− | }
| + | |
− | | + | |
− | .img_block_bg {
| + | |
− | position:absolute;
| + | |
− | z-index:100;
| + | |
− | left:0;
| + | |
− | top:0;
| + | |
− | }
| + | |
− | | + | |
− | .portfolio_zoom, .portfolio_link {
| + | |
− | width:42px;
| + | |
− | height:42px;
| + | |
− | position:absolute;
| + | |
− | z-index:110;
| + | |
− | bottom:85px;
| + | |
− | background-repeat:no-repeat;
| + | |
− | opacity:0.61;
| + | |
− | filter: alpha(opacity=61);
| + | |
− | transition: all 0.1s ease-in-out;
| + | |
− | -moz-transition: all 0.1s ease-in-out;
| + | |
− | -webkit-transition: all 0.1s ease-in-out;
| + | |
− | -o-transition: all 0.1s ease-in-out;
| + | |
− | }
| + | |
− | .portfolio_zoom {
| + | |
− | left:-77px;
| + | |
− | background-image:url(../images/zoom.png);
| + | |
− | }
| + | |
− | .portfolio_link {
| + | |
− | right:-77px;
| + | |
− | background-image:url(../images/link.png);
| + | |
− | }
| + | |
− | .portfolio_zoom:hover, .portfolio_link:hover {
| + | |
− | opacity:1;
| + | |
− | filter: alpha(opacity=100);
| + | |
− | z-index:310;
| + | |
− | }
| + | |
− | .portfolio_zoom a, .portfolio_link a {
| + | |
− | display:block;
| + | |
− | width:42px;
| + | |
− | height:42px;
| + | |
− | text-indent:-9999px;
| + | |
− | }
| + | |
− | | + | |
− | .img_block:hover .portfolio_zoom {left:83px;transition-delay: 0.3s;
| + | |
− | }
| + | |
− | .img_block:hover .portfolio_link {right:84px;transition-delay: 0.3s;
| + | |
− | }
| + | |
− | | + | |
− | .item_description {
| + | |
− | position:absolute;
| + | |
− | top:-273px;
| + | |
− | width:255px;
| + | |
− | height:291px;
| + | |
− | padding:0;
| + | |
− | background:#f14833;
| + | |
− | font-family: Helvetica ;
| + | |
− | font-size: 14px;
| + | |
− | line-height: 20px;
| + | |
− | font-weight: 400;
| + | |
− | text-align:center;
| + | |
− | color:#fff;
| + | |
− | transition: all 0.3s ease-in-out;
| + | |
− | -moz-transition: all 0.3s ease-in-out;
| + | |
− | -webkit-transition: all 0.3s ease-in-out;
| + | |
− | -o-transition: all 0.3s ease-in-out;
| + | |
− | }
| + | |
− | .item_description p {
| + | |
− | padding:74px 10px 0;
| + | |
− | text-transform:uppercase;
| + | |
− | font-size:18px;
| + | |
− | }
| + | |
− | .img_block:hover .item_description {
| + | |
− | top:20px;
| + | |
− | }
| + | |
− | .img_block .portf_img {
| + | |
− | position:absolute;
| + | |
− | left:18px;
| + | |
− | top:18px;
| + | |
− | transition: all 0.3s ease-in-out;
| + | |
− | -moz-transition: all 0.3s ease-in-out;
| + | |
− | -webkit-transition: all 0.3s ease-in-out;
| + | |
− | -o-transition: all 0.3s ease-in-out;
| + | |
− | }
| + | |
− | .img_block:hover .portf_img {
| + | |
− | position:absolute;
| + | |
− | top:235px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | /* ________________ //PORTFOLIO _______________ */
| + | |
− | | + | |
− | /* ___________________________________ //Slide 10 ___________________________________ */
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | /* ____________________________________ Slide 12 左图右文____________________________________ */
| + | |
− | | + | |
− | #slide12 {
| + | |
− | background:url(..) repeat left top;
| + | |
− | background-position:0 0 !important;
| + | |
− | width:100%;
| + | |
− | padding:10px 0 20px;
| + | |
− | margin-top:20px; | + | |
− | }
| + | |
− | | + | |
− | #slide12 h2 {color:#OOOOOO;
| + | |
− | font-size:50px !important;
| + | |
− | }
| + | |
− | | + | |
− | #slide12 p {color:#888888;
| + | |
− | }
| + | |
− | #slide12 .foto {
| + | |
− | float:left;
| + | |
− | margin:0 20px 20px 0;
| + | |
− | }
| + | |
− | | + | |
− | #slide12 h5 {
| + | |
− | margin:50px 0 0 0;
| + | |
− | padding-bottom:8px;
| + | |
− | text-transform:none;
| + | |
− | font-family: Helvetica ;
| + | |
− | font-size: 32px;
| + | |
− | line-height: 31px;
| + | |
− | font-weight: 300;
| + | |
− | color:#acacac;
| + | |
− | }
| + | |
− | #slide12 h6 {
| + | |
− | margin:0 0 0 0;
| + | |
− | padding-bottom:2px;
| + | |
− | text-transform:none;
| + | |
− | font-family: Helvetica ;
| + | |
− | font-size: 20px;
| + | |
− | line-height: 23px;
| + | |
− | font-weight: 300;
| + | |
− | color:#acacac;
| + | |
− | }
| + | |
− | .client_foto {
| + | |
− | float:left;
| + | |
− | position:relative;
| + | |
− | margin:0 5px 10px 0;
| + | |
− | height:460px;
| + | |
− | width:400px;
| + | |
− | }
| + | |
− | .client_foto img {
| + | |
− | position:absolute;
| + | |
− | left:0;
| + | |
− | top:0;
| + | |
− | z-index:10;
| + | |
− | width: 90%;
| + | |
− | }
| + | |
− | .foto {z-index:5 !important;}
| + | |
− | | + | |
− | .contact_det,
| + | |
− | .contact_det a {
| + | |
− | color:#888888;
| + | |
− | line-height:26px;
| + | |
− | }
| + | |
− | .contact_det a:hover {color:#f14833;}
| + | |
− | | + | |
− | | + | |
− | | + | |
− | /* ____________________________________ //Slide 12 ____________________________________ */ | + | |
− | | + | |
− | | + | |
− | /*______________________________________gallery________________________________________*/
| + | |
− | /***************gallery***/
| + | |
− | @font-face {
| + | |
− | font-family: 'BebasNeueRegular';
| + | |
− | src: url('fonts/BebasNeue-webfont.eot');
| + | |
− | src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
| + | |
− | url('fonts/BebasNeue-webfont.woff') format('woff'),
| + | |
− | url('fonts/BebasNeue-webfont.ttf') format('truetype'),
| + | |
− | url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
| + | |
− | font-weight: normal;
| + | |
− | font-style: normal;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .clr{
| + | |
− | clear: both;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .cr-gallery{
| + | |
− | width: 600px;
| + | |
− | height: 400px;
| + | |
− | position: relative;
| + | |
− | margin: 0 auto;
| + | |
− | overflow: hidden;
| + | |
− | border: 20px solid #fff;
| + | |
− | box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
| + | |
− | }
| + | |
− | .cr-gallery label{
| + | |
− | font-style: italic;
| + | |
− | width: 150px;
| + | |
− | height: 30px;
| + | |
− | cursor: pointer;
| + | |
− | color: #fff;
| + | |
− | line-height: 32px;
| + | |
− | font-size: 24px;
| + | |
− | float:left;
| + | |
− | position: relative;
| + | |
− | margin-top:350px;
| + | |
− | z-index: 1000;
| + | |
− | }
| + | |
− | .cr-gallery label:before{
| + | |
− | content:'';
| + | |
− | width: 34px;
| + | |
− | height: 34px;
| + | |
− | background: rgba(130,195,217,0.9);
| + | |
− | position: absolute;
| + | |
− | left: 50%;
| + | |
− | margin-left: -17px;
| + | |
− | border-radius: 50%;
| + | |
− | box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
| + | |
− | z-index:-1;
| + | |
− | }
| + | |
− | .cr-gallery label:after{
| + | |
− | width: 1px;
| + | |
− | height: 400px;
| + | |
− | content: '';
| + | |
− | background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
| + | |
− | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
| + | |
− | background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
| + | |
− | background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
| + | |
− | background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
| + | |
− | background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
| + | |
− | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
| + | |
− | position: absolute;
| + | |
− | bottom: -20px;
| + | |
− | right: 0px;
| + | |
− | }
| + | |
− | .cr-gallery label.cr-label-img-4:after{
| + | |
− | width: 0px;
| + | |
− | }
| + | |
− | .cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1,
| + | |
− | .cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2,
| + | |
− | .cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3,
| + | |
− | .cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4{
| + | |
− | color: #68abc2;
| + | |
− | }
| + | |
− | .cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
| + | |
− | .cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
| + | |
− | .cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
| + | |
− | .cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
| + | |
− | background: #fff;
| + | |
− | box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
| + | |
− | }
| + | |
− | .cr-gallery input{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .cr-bgimg{
| + | |
− | width: 600px;
| + | |
− | height: 400px;
| + | |
− | position: absolute;
| + | |
− | left: 0px;
| + | |
− | top: 0px;
| + | |
− | z-index: 1;
| + | |
− | }
| + | |
− | .cr-bgimg{
| + | |
− | background-repeat: no-repeat;
| + | |
− | background-position: 0 0;
| + | |
− | }
| + | |
− | .cr-bgimg div{
| + | |
− | width: 150px;
| + | |
− | height: 100%;
| + | |
− | position: relative;
| + | |
− | float: left;
| + | |
− | overflow: hidden;
| + | |
− | background-repeat: no-repeat;
| + | |
− | }
| + | |
− | .cr-bgimg div span{
| + | |
− | position: absolute;
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | top: 0px;
| + | |
− | left: 0px;
| + | |
− | -webkit-transform: scale(1.5);
| + | |
− | -moz-transform: scale(1.5);
| + | |
− | -o-transform: scale(1.5);
| + | |
− | -ms-transform: scale(1.5);
| + | |
− | transform: scale(1.5);
| + | |
− | opacity: 0;
| + | |
− | z-index: 2;
| + | |
− | text-indent: -9000px;
| + | |
− | }
| + | |
− | | + | |
− | .cr-bgimg div:nth-child(1) span{
| + | |
− | background-position: 0px 0px;
| + | |
− | }
| + | |
− | .cr-bgimg div:nth-child(2) span{
| + | |
− | background-position: -150px 0px;
| + | |
− | }
| + | |
− | .cr-bgimg div:nth-child(3) span{
| + | |
− | background-position: -300px 0px;
| + | |
− | }
| + | |
− | .cr-bgimg div:nth-child(4) span{
| + | |
− | background-position: -450px 0px;
| + | |
− | }
| + | |
− | .cr-gallery input:checked ~ .cr-bgimg div span{
| + | |
− | -webkit-animation: scaleOut 0.6s ease-in-out;
| + | |
− | -moz-animation: scaleOut 0.6s ease-in-out;
| + | |
− | -o-animation: scaleOut 0.6s ease-in-out;
| + | |
− | -ms-animation: scaleOut 0.6s ease-in-out;
| + | |
− | animation: scaleOut 0.6s ease-in-out;
| + | |
− | }
| + | |
− | @-webkit-keyframes scaleOut{
| + | |
− | 0%{ -webkit-transform: scale(1); opacity: 1; }
| + | |
− | 100%{ -webkit-transform: scale(1.5); opacity: 0; }
| + | |
− | }
| + | |
− | @-moz-keyframes scaleOut{
| + | |
− | 0%{ -moz-transform: scale(1); opacity: 1; }
| + | |
− | 100%{ -moz-transform: scale(1.5); opacity: 0; }
| + | |
− | }
| + | |
− | @-o-keyframes scaleOut{
| + | |
− | 0%{ -o-transform: scale(1); opacity: 1; }
| + | |
− | 100%{ -o-transform: scale(1.5); opacity: 0; }
| + | |
− | }
| + | |
− | @-ms-keyframes scaleOut{
| + | |
− | 0%{ -ms-transform: scale(1); opacity: 1; }
| + | |
− | 100%{ -ms-transform: scale(1.5); opacity: 0; }
| + | |
− | }
| + | |
− | @keyframes scaleOut{
| + | |
− | 0%{ transform: scale(1); opacity: 1; }
| + | |
− | 100%{ transform: scale(1.5); opacity: 0; }
| + | |
− | }
| + | |
− | .cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
| + | |
− | .cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
| + | |
− | .cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
| + | |
− | .cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
| + | |
− | {
| + | |
− | -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
| + | |
− | -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
| + | |
− | -o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
| + | |
− | -ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
| + | |
− | transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
| + | |
− | -webkit-animation: none;
| + | |
− | -moz-animation: none;
| + | |
− | -o-animation: none;
| + | |
− | -ms-animation: none;
| + | |
− | animation: none;
| + | |
− | opacity: 1;
| + | |
− | -webkit-transform: scale(1);
| + | |
− | -moz-transform: scale(1);
| + | |
− | -o-transform: scale(1);
| + | |
− | -ms-transform: scale(1);
| + | |
− | transform: scale(1);
| + | |
− | z-index:10000;
| + | |
− | }
| + | |
− | .cr-titles h3{
| + | |
− | color: #fff;
| + | |
− | text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
| + | |
− | }
| + | |
− | .cr-titles h3 span{
| + | |
− | z-index: 10000;
| + | |
− | position: absolute;
| + | |
− | width: 100%;
| + | |
− | left: 0px;
| + | |
− | text-align: center;
| + | |
− | opacity: 0;
| + | |
− | top: 50%;
| + | |
− | }
| + | |
− | .cr-titles h3 span:nth-child(1){
| + | |
− | left: 0px;
| + | |
− | font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
| + | |
− | font-size: 70px;
| + | |
− | letter-spacing: 7px;
| + | |
− | color: transparent;
| + | |
− | text-shadow: 0px 0px 10px #fff;
| + | |
− | -webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
| + | |
− | -moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
| + | |
− | -o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
| + | |
− | -ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
| + | |
− | transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
| + | |
− | }
| + | |
− | .cr-titles h3 span:nth-child(2){
| + | |
− | margin-top: 84px;
| + | |
− | letter-spacing: 0px;
| + | |
− | background: rgba(104,171,194,0.9);
| + | |
− | font-size: 14px;
| + | |
− | padding: 10px 0px;
| + | |
− | font-style: italic;
| + | |
− | font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
| + | |
− | -webkit-transition: opacity 0.8s ease-in-out;
| + | |
− | -moz-transition: opacity 0.8s ease-in-out;
| + | |
− | -o-transition: opacity 0.8s ease-in-out;
| + | |
− | -ms-transition: opacity 0.8s ease-in-out;
| + | |
− | transition: opacity 0.8s ease-in-out;
| + | |
− | }
| + | |
− | .cr-gallery input:checked ~ .cr-titles h3 span{
| + | |
− | opacity: 0;
| + | |
− | text-shadow: 0px 0px 30px #fff;
| + | |
− | }
| + | |
− | .cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
| + | |
− | .cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
| + | |
− | .cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
| + | |
− | .cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){
| + | |
− | opacity: 1;
| + | |
− | text-shadow: 0px 0px 1px #fff;
| + | |
− | }
| + | |
− | .cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
| + | |
− | .cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
| + | |
− | .cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
| + | |
− | .cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
| + | |
− | opacity: 1;
| + | |
− | }
| + | |
− | /* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
| + | |
− | @media screen and (max-width: 768px) {
| + | |
− | .cr-gallery input{
| + | |
− | display: inline;
| + | |
− | width: 24%;
| + | |
− | margin-top: 350px;
| + | |
− | z-index: 1000;
| + | |
− | position: relative;
| + | |
− | }
| + | |
− | .cr-gallery label{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | /*________________________________________gallery-end___________________________________________*/
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | /*____________________________grid.css________________________________*/
| + | |
− | | + | |
− | /* Computer */
| + | |
− | .grid_1 { width: 6.5%; }
| + | |
− | .grid_2 { width: 15%; }
| + | |
− | .grid_3 { width: 23.5%; }
| + | |
− | .grid_4 { width: 32%; }
| + | |
− | .grid_5 { width: 40.5%; }
| + | |
− | .grid_6 { width: 49%; }
| + | |
− | .grid_7 { width: 57.5%; }
| + | |
− | .grid_8 { width: 90%; font-family: Verdana,Arial ;
| + | |
− | }
| + | |
− | .grid_9 { width: 74.5%; }
| + | |
− | .grid_10 { width: 83%; }
| + | |
− | .grid_11 { width: 91.5%; }
| + | |
− | .grid_12 { width: 100%; }
| + | |
− | | + | |
− | .grid_1,
| + | |
− | .grid_2,
| + | |
− | .grid_3,
| + | |
− | .grid_4,
| + | |
− | .grid_5,
| + | |
− | .grid_6,
| + | |
− | .grid_7,
| + | |
− | .grid_8,
| + | |
− | .grid_9,
| + | |
− | .grid_10,
| + | |
− | .grid_11,
| + | |
− | .grid_12 {
| + | |
− | margin:20px 0 0 0;
| + | |
− | float: left;
| + | |
− | display: block;
| + | |
− | }
| + | |
− | | + | |
− | .alpha {margin-left:0;}
| + | |
− | .omega {margin-right:0;}
| + | |
− | .gallery-list {margin:0;padding:0;}
| + | |
− | .little_respond {display:none;}
| + | |
− | | + | |
− | .container{
| + | |
− | width: 100%;
| + | |
− | max-width: 1000px;
| + | |
− | margin: auto;
| + | |
− |
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
| + | |
− | .clearfix:after{position:relative;z-index:99;clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
| + | |
− | | + | |
− | @media (max-width: 1024px) {
| + | |
− | .slide{background-attachment: scroll;background-position:0 0 !important;
| + | |
− | }
| + | |
− | }
| + | |
| | | |
| + | </div> |
| | | |
− | /*____________________________//grid.css________________________________*/ | + | </body> |
| + | </html> |