|
|
| 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%;
| |
| − | }
| |
| | | | |
| − | .header-item {
| + | <!-- HTML--> |
| − | 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}} |
