Difference between revisions of "Template:UPMC-Paris"

(Replaced content with " {{UPMC-Paris/Header}} <html> <!-- HTML--> </html> {{UPMC-Paris/Footer}}")
Line 1: Line 1:
  
−
{{UPMC-Paris/Header}}
 
 
<html>
 
<html>
 +
<head>
 +
<style>
 +
.wrapper {
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    flex-direction: column;
 +
    width: 100%;
 +
    height:2500px;
 +
    background-color: orange;
 +
    margin : none;
 +
   
 +
}
 +
.header {
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    width: 95%;
 +
    height:100px;
 +
    background-color: yellow;
 +
    margin : auto;
 +
    margin-bottom: 1%;
 +
}
  
−
<!-- HTML-->
+
.header-item {
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    background-color: pink;
 +
    width: 30%;
 +
    height: 30%;
 +
    margin: 1%;
  
 +
}
  
 +
.flex-container {
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    width: 95%;
 +
    min-height: 500px;
 +
    max-height: 2500px;   
 +
    background-color: lightgreen;
 +
    margin : auto;
 +
    margin-bottom: 1%;
 +
}
  
 +
.flex-item {
 +
    background-color: cornflowerblue;
 +
    width: 100px;
 +
    height: 100px;
 +
    margin: 10px;
 +
   
 +
}
  
 +
.footer {
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    width: 95%;
 +
    height:100px;
 +
    background-color: yellow;
 +
    margin-bottom: 1%;
 +
    margin : auto;
 +
}
 +
.footer-item {
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    background-color: cornflowerblue;
 +
    width: 80px;
 +
    height: 20px;
 +
    margin: 10px;
 +
    margin-bottom: 1%;
 +
}
 +
</style>
  
 +
 +
</head>
 +
<body>
 +
<div class="wrapper">
 +
<div class="header">
 +
  <div class="header-item">flex item 1</div>
 +
  <div class="header-item">flex item 2</div>
 +
  <div class="header-item">flex item 3</div>
 +
</div>
 +
 +
<div class="flex-container">
 +
  <div class="flex-item">flex item 1</div>
 +
  <div class="flex-item">flex item 2</div>
 +
  <div class="flex-item">flex item 3</div>
 +
</div>
 +
<div class="footer">
 +
  <div class="footer-item">flex item 1</div>
 +
  <div class="footer-item">flex item 2</div>
 +
  <div class="footer-item">flex item 3</div>
 +
</div>
 +
</div>
 +
</body>
 
</html>
 
</html>
−
{{UPMC-Paris/Footer}}
 

Revision as of 13:29, 17 August 2016

flex item 1
flex item 2
flex item 3
flex item 1
flex item 2
flex item 3
flex item 1
flex item 2
flex item 3