Difference between revisions of "Team:Pasteur Paris/Project"

Line 1: Line 1:
−
{{Pasteur_Paris/MenuBlockProject}}
 
−
{{Pasteur_Paris/Content}}
 
 
<html>
 
<html>
−
<div id="GeneralContent">
+
    <style>      
−
<div id="MainContent">
+
            /* BEGIN : Block Settings */
−
<a href="">
+
                #GeneralContent {
−
<div class="block half onglet">
+
                    position:relative;
−
<div class="imgOnglet">
+
                    width: 100%;
−
<img src="http://selection.readersdigest.ca/wp-content/uploads/2016/03/dites-je-t-aime-avec-fleurs.jpg">
+
                    background-color: #fffafc;
−
</div>
+
                }
−
<div class= "textOnglet">
+
                #MainContent {
−
<h1>DescriptionW</h1>
+
                    max-width: 1100px;
−
</div>
+
                    margin: auto;
−
</div>
+
                    padding-top: 10%;
−
</a>
+
                    padding-bottom: 10%;
−
<a href="">
+
                    text-align: center;
−
<div class="block half onglet">
+
                }
−
<div class="imgOnglet">
+
                footer {
−
<img src="http://selection.readersdigest.ca/wp-content/uploads/2016/03/dites-je-t-aime-avec-fleurs.jpg">
+
                    background-color: #303E91;
−
</div>
+
                    height: 70px;
−
<div class= "textOnglet">
+
                    width: 100%;
−
<h1>Infection</h1>
+
                    bottom: 0%;
−
</div>
+
                    left: 0%;
−
</div>
+
                }
−
<a href="">
+
                .block {
−
</a>
+
                    display: inline-block;
−
<div class="block half onglet">
+
                    vertical-align: middle;
−
<div class="imgOnglet">
+
                    margin: auto;
−
<img src="http://selection.readersdigest.ca/wp-content/uploads/2016/03/dites-je-t-aime-avec-fleurs.jpg">
+
                    margin-top: 2%;
−
</div>
+
                    margin-bottom: 2%;
−
<div class= "textOnglet">
+
                    margin-left: 1%;
−
<h1>Conductivity</h1>
+
                    margin-right: 1%;
−
</div>
+
                }
−
</div>
+
                .block.title {
−
<a href="">
+
                    width: 94%;
−
<div class="block half onglet">
+
                    margin-bottom: 10%;
−
<div class="banner">
+
                }
−
</div>
+
                .block.two-third {
−
<div class= "textOnglet">
+
                    width: 60%;
−
<h1>Design</h1>
+
                }
−
</div>
+
                .block.two-third.center {
−
</div>
+
                    width: 60%;
−
</a>
+
                }
−
</div>
+
                .block.one-third {
−
</div>
+
                    width: 30%;
 +
                }
 +
                .block.full {
 +
                    width: 90%;
 +
                }
 +
                .block.half {
 +
                    width: 45%;
 +
                }
 +
                .block.separator {
 +
                    height: 1px;
 +
                    width: 90%;
 +
                    margin-top: 3%;
 +
                    margin-bottom: 3%;
 +
                }
 +
                .block.separator-invisible {
 +
                    height: 1px;
 +
                    width: 90%;
 +
                }
 +
                .block.separator-mark {
 +
                    height: 2px;
 +
                    width: 70%;
 +
                    margin-top: 15%;
 +
                    margin-bottom: 20%;
 +
                    background-color: black;
 +
                    opacity: 0.3;
 +
                }
 +
                .onglet{
 +
                    position: relative;
 +
                    border-radius: 20px;
 +
                    background-color: red;
 +
                    padding-top: 64%;
 +
                    width: 43%;
 +
                    box-shadow: 5px 5px 30px grey;
 +
                    background-color: #fffafc;
 +
                }
 +
                .onglet:hover{
 +
                    opacity: .8;
 +
                    transform: scale(1.05,1.05);
 +
                }
 +
                .onglet img{
 +
                    border-top-left-radius: 20px;
 +
                    border-top-right-radius: 20px;
 +
                    height: 300px;
 +
                    width: 100%;
 +
                }
 +
                .textOnglet{
 +
                    height: 50px;
 +
                }
 +
                .imgOnglet{
 +
                    width: 100%
 +
                    height: 300px;
 +
                }
 +
                .legend p {
 +
                    text-indent: 0px;
 +
                    font-size: 0.8em;
 +
                }
 +
                p {
 +
                    text-align: justify;
 +
                    text-indent: 30px;
 +
                }
 +
                img {
 +
                    width: 100%;
 +
                }
 +
                a img:hover {
 +
                    opacity: 0.4;
 +
                }
 +
                @media only screen and (max-width: 950px) {
 +
                    .block.two-third, .block.one-third, .block.half {width: 44%; margin-left: 2%; margin-right: 2%;}
 +
                    .block.two-third.center, .block.full, .block.separator, .block.title {width: 92%; margin-left: 4%; margin-right: 4%;}
 +
                    body {padding-top: 40px;}
 +
                }
 +
                @media only screen and (max-width: 760px) {
 +
                    .block.two-third, .block.one-third, .block.two-third.center, .block.full, .block.separator, .block.title, .block.half {width: 96%; margin-left: 2%; margin-right: 2%; max-width: 495px;}
 +
                    #Menu {display:none;}
 +
                    body {padding-top: 40px;}
 +
                }
 +
            /* END : Block Settings */
 +
    </style>
 
</html>
 
</html>

Revision as of 16:38, 20 August 2018