|
|
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}} |