Difference between revisions of "Template:TPHS San Diego"

(Prototype team template page)
 
Line 1: Line 1:
 +
<style>
 +
/*
 +
Coding Guidelines
 +
 +
- use simple class names in nested hierarchy (eg. .parent > .child > ...)
 +
    - pros: easier to read, very organized
 +
    - cons: might require some nasty workarounds
 +
- strive for material theme (https://material.io/)
 +
    - solid, paper-like design
 +
*/
 +
 +
html, body{
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
 +
.fullscreen_section{
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
 +
.small_section{
 +
    width: 100%;
 +
    height: 30%;
 +
}
 +
 +
#section1 > .content_wrapper{
 +
    position: relative;
 +
    top: 50%;
 +
    left: 50%;
 +
    transform: translate(-50%, -50%);
 +
}
 +
 +
#section1 > .content_wrapper > .title{
 +
    text-align: center;
 +
    font-family: Arial;
 +
    font-size: 10em;
 +
    font-weight: bold;
 +
    color: black;
 +
    background: url(https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/2017/5-studyidentif.jpg) no-repeat;
 +
    background-position: 0 60%;
 +
    background-size: cover;
 +
    background-clip: text;
 +
    -moz-background-clip: text;
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;
 +
}
 +
 +
#section1 > .content_wrapper > .desc{
 +
    text-align: center;
 +
    font-family: Arial;
 +
    font-size: 1.5em;
 +
    color: rgb(85, 85, 85);
 +
}
 +
 +
#section2 > .content_wrapper, #section3 > .content_wrapper{
 +
    display: flex;
 +
    display: -webkit-flex;
 +
    flex-direction: row;
 +
    -ms-flex-direction: row;
 +
    flex-wrap: wrap;
 +
    -ms-flex-wrap: wrap;
 +
    justify-content: center;
 +
    align-items: center;
 +
}
 +
 +
#section2 > .content_wrapper > .image, #section3 > .content_wrapper > .image{
 +
    width: 400px;
 +
    height: 400px;
 +
    margin: 10px;
 +
 +
    border-radius: 10px;
 +
    box-shadow: 0 5px 20px rgb(201, 201, 201);
 +
}
 +
 +
#section2 > .content_wrapper > .desc, #section3 > .content_wrapper > .desc{
 +
    width: 300px;
 +
    margin: 10px;
 +
}
 +
 +
#section2 > .content_wrapper > .desc > .title, #section3 > .content_wrapper > .desc > .title{
 +
    font-size: 2em;
 +
    font-family: Arial;
 +
    color: rgb(68, 68, 68);
 +
    margin: 5px;
 +
}
 +
 +
#section2 > .content_wrapper > .desc > .body, #section3 > .content_wrapper > .desc > .body{
 +
    font-family: Arial;
 +
    color: rgb(148, 148, 148);
 +
    margin: 5px;
 +
}
 +
 +
#section4{
 +
    margin-bottom: 10%;
 +
    background-color: rgb(68, 68, 68);
 +
}
 +
 +
#section4 > .content_wrapper{
 +
    position: relative;
 +
    top: 50%;
 +
    left: 50%;
 +
    transform: translate(-50%, -50%);
 +
    text-align: center;
 +
 +
    font-family: Arial;
 +
    font-size: 2em;
 +
    color: whitesmoke;
 +
}
 +
 +
#section5{
 +
    position: relative;
 +
    left: 15%;
 +
    width: 70%;
 +
    margin-bottom: 5%;
 +
}
 +
 +
#section5 > .title{
 +
    font-family: Arial;
 +
    font-size: 2em;
 +
    color: rgb(68, 68, 68);
 +
    margin: 20px;
 +
}
 +
 +
#section5 > .menu{
 +
    width: 100%;
 +
}
 +
 +
#section5 > .menu > .item{
 +
    text-decoration: none;
 +
    height: 250px;
 +
    margin: 10px;
 +
    box-shadow: 0 5px 20px rgb(201, 201, 201);
 +
    border-radius: 10px;
 +
    transition: all 0.2s ease-in-out;
 +
    -webkit-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
}
 +
 +
#section5 > .menu > .item:hover{
 +
    box-shadow: 0 7px 25px rgb(192, 192, 192);
 +
}
 +
 +
/*
 +
workaround for adding an element that covers the parent element
 +
*/
 +
.cover{
 +
    position: absolute;
 +
    width: inherit;
 +
    height: inherit;
 +
    z-index: 10;
 +
}
 +
 +
#section5 > .menu > .item > .cover{
 +
    background: rgb(99, 99, 99);
 +
    opacity: 0;
 +
    transition: all 0.2s ease-in-out;
 +
    -webkit-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    border-radius: inherit;
 +
}
 +
 +
#section5 > .menu > .item:hover > .cover{
 +
    opacity: 0.05;
 +
}
 +
 +
#section5 > .menu > .item > .desc{
 +
    color: rgb(68, 68, 68);
 +
    text-align: center;
 +
    font-size: 1.5em;
 +
    font-family: Arial;
 +
 +
    position: relative;
 +
    top: 50%;
 +
    left: 50%;
 +
    transform: translate(-50%, -50%);
 +
}
 +
 +
#section5 > .menu > .project{
 +
    width: 100%;
 +
    min-width: 400px;
 +
    background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
 +
    background-size: cover;
 +
    display: inline-block;
 +
}
 +
 +
#section5 > .menu > .outreach{
 +
    width: 40%;
 +
    min-width: 200px;
 +
    background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
 +
    background-size: cover;
 +
    display: inline-block;
 +
}
 +
 +
#section5 > .menu > .team{
 +
    width: 40%;
 +
    min-width: 200px;
 +
    background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
 +
    background-size: cover;
 +
    display: inline-block;
 +
}
 +
 +
#section5 > .menu > .attribution{
 +
    width: 40%;
 +
    min-width: 200px;
 +
    background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
 +
    background-size: cover;
 +
    display: inline-block;
 +
}
 +
</style>
 +
 +
<!-- everything underneath is commented! -->
 +
<!--
 
<html>
 
<html>
 
<script>
 
<script>
Line 796: Line 1,011:
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 +
-->

Revision as of 01:01, 20 August 2018

<style> /* Coding Guidelines

- use simple class names in nested hierarchy (eg. .parent > .child > ...) 

   - pros: easier to read, very organized
   - cons: might require some nasty workarounds

- strive for material theme (https://material.io/) 

   - solid, paper-like design
  • /

html, body{ 

   margin: 0;
   padding: 0;

}

.fullscreen_section{ 

   width: 100%;
   height: 100%;

}

.small_section{ 

   width: 100%;
   height: 30%;

}

  1. section1 > .content_wrapper{
   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

}

  1. section1 > .content_wrapper > .title{
   text-align: center;
   font-family: Arial;
   font-size: 10em;
   font-weight: bold;
   color: black;
   background: url(5-studyidentif.jpg) no-repeat;
   background-position: 0 60%;
   background-size: cover;
   background-clip: text;
   -moz-background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

}

  1. section1 > .content_wrapper > .desc{
   text-align: center;
   font-family: Arial;
   font-size: 1.5em;
   color: rgb(85, 85, 85);

}

  1. section2 > .content_wrapper, #section3 > .content_wrapper{
   display: flex;
   display: -webkit-flex;
   flex-direction: row;
   -ms-flex-direction: row;
   flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   justify-content: center;
   align-items: center;

}

  1. section2 > .content_wrapper > .image, #section3 > .content_wrapper > .image{
   width: 400px;
   height: 400px;
   margin: 10px;

   border-radius: 10px;
   box-shadow: 0 5px 20px rgb(201, 201, 201);

}

  1. section2 > .content_wrapper > .desc, #section3 > .content_wrapper > .desc{
   width: 300px;
   margin: 10px;

}

  1. section2 > .content_wrapper > .desc > .title, #section3 > .content_wrapper > .desc > .title{
   font-size: 2em;
   font-family: Arial;
   color: rgb(68, 68, 68);
   margin: 5px;

}

  1. section2 > .content_wrapper > .desc > .body, #section3 > .content_wrapper > .desc > .body{
   font-family: Arial;
   color: rgb(148, 148, 148);
   margin: 5px;

}

  1. section4{
   margin-bottom: 10%;
   background-color: rgb(68, 68, 68);

}

  1. section4 > .content_wrapper{
   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;

   font-family: Arial;
   font-size: 2em;
   color: whitesmoke;

}

  1. section5{
   position: relative;
   left: 15%;
   width: 70%;
   margin-bottom: 5%;

}

  1. section5 > .title{
   font-family: Arial;
   font-size: 2em;
   color: rgb(68, 68, 68);
   margin: 20px;

}

  1. section5 > .menu{
   width: 100%;

}

  1. section5 > .menu > .item{
   text-decoration: none;
   height: 250px;
   margin: 10px;
   box-shadow: 0 5px 20px rgb(201, 201, 201);
   border-radius: 10px;
   transition: all 0.2s ease-in-out;
   -webkit-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;

}

  1. section5 > .menu > .item:hover{
   box-shadow: 0 7px 25px rgb(192, 192, 192);

}

/* workaround for adding an element that covers the parent element

  • /

.cover{ 

   position: absolute;
   width: inherit;
   height: inherit;
   z-index: 10;

}

  1. section5 > .menu > .item > .cover{
   background: rgb(99, 99, 99);
   opacity: 0;
   transition: all 0.2s ease-in-out;
   -webkit-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   border-radius: inherit;

}

  1. section5 > .menu > .item:hover > .cover{
   opacity: 0.05;

}

  1. section5 > .menu > .item > .desc{
   color: rgb(68, 68, 68);
   text-align: center;
   font-size: 1.5em;
   font-family: Arial;

   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

}

  1. section5 > .menu > .project{
   width: 100%;
   min-width: 400px;
   background: url(41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
   background-size: cover;
   display: inline-block;

}

  1. section5 > .menu > .outreach{
   width: 40%;
   min-width: 200px;
   background: url(41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
   background-size: cover;
   display: inline-block;

}

  1. section5 > .menu > .team{
   width: 40%;
   min-width: 200px;
   background: url(41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
   background-size: cover;
   display: inline-block;

}

  1. section5 > .menu > .attribution{
   width: 40%;
   min-width: 200px;
   background: url(41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
   background-size: cover;
   display: inline-block;

} </style>


<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>




<img src="https://static.igem.org/mediawiki/2018/4/4f/2018_igem_mobile_menu_logo.svg">


<img id="menu_control_image" src="https://static.igem.org/mediawiki/igem.org/3/3b/Menu_icon.svg">




<a href="https://2018.igem.org/Team:TPHS_San_Diego"> <img src="http://placehold.it/350x150/e4dede/c4baba"> </a>


<a href="https://2018.igem.org/Team:TPHS_San_Diego">

HOME

</a>

TEAM

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Team">

Team Members

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Collaborations">

Collaborations

</a>


PROJECT

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Description">

Description

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Design">

Design

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Experiments">

Experiments

</a>


<a href="https://2018.igem.org/Team:TPHS_San_Diego/Notebook">

Notebook

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/InterLab">

InterLab

</a>


<a href="https://2018.igem.org/Team:TPHS_San_Diego/Model">

Model

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Results">

Results

</a>


<a href="https://2018.igem.org/Team:TPHS_San_Diego/Demonstrate">

Demonstrate

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Improve">

Improve

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Attributions">

Attributions

</a>


PARTS

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Parts">

Parts Overview

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Basic_Part">

Basic Parts

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Composite_Part">

Composite Parts

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Part_Collection">

Part Collection

</a>




<a href="https://2018.igem.org/Team:TPHS_San_Diego/Safety">

SAFETY

</a>




HUMAN PRACTICES

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Human_Practices">

Human Practices

</a>


<a href="https://2018.igem.org/Team:TPHS_San_Diego/Public_Engagement">

Education & Engagement

</a>



AWARDS

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Applied_Design">

Applied Design

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Entrepreneurship">

Entrepreneurship

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Hardware">

Hardware

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Measurement">

Measurement

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Model">

Model

</a>

<a href="https://2018.igem.org/Team:TPHS_San_Diego/Plant">

Plant

</a>


<a href="https://2018.igem.org/Team:TPHS_San_Diego/Software">

Software

</a>


<a href="https://igem.org/2018_Judging_Form?team=TPHS_San_Diego">

JUDGING FORM ⇗

</a>





-->