1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- <style type="text/css">
- #screen-container {
- color: rgb(204, 204, 204);
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: space-around;
- flex-wrap: wrap;
- /* grid-gap: 8px;
- grid-template-areas:
- 'topleft topleft header header header header header header topright topright'
- 'topleft topleft main main main main main main topright topright'
- 'leftside leftside main main main main main main rightside rightside'
- 'leftside leftside main main main main main main rightside rightside'
- 'leftside leftside main main main main main main rightside rightside'
- 'leftside leftside main main main main main main rightside rightside'
- 'bottomleft bottomleft main main main main main main bottomright bottomright'
- 'bottomleft bottomleft footer footer footer footer footer footer bottomright bottomright'; */
- font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
- }
- .header-info {
- text-align: center;
- /* border: 1px solid crimson; */
- }
- .ui-section {
- text-align: left;
- /* margin: 8px; */
- display: flex;
- justify-content: space-evenly;
- /* border: 1px solid crimson; */
- }
- #header { flex-basis: 40%; min-height: 20%;}
- #top-left {flex-basis: 25%;}
- #main { flex-basis: 40%; min-height: 50%; }
- #top-right {flex-basis: 25%;}
- #bottom-left { flex-basis: 25%;}
- #bottom-right {flex-basis: 25%;}
- #footer {flex-basis: 40%; min-height: 20%;}
- #left-side { flex-basis: 25%; min-height: 50%; }
- #right-side { flex-basis: 25%; min-height: 50%; }
- </style>
- <div id="screen-container">
- <div id="top-left" class="ui-section"></div>
- <div id="header" class="ui-section"></div>
- <div id="top-right" class="ui-section"></div>
- <div id="left-side" class="ui-section"></div>
- <div id="main" class="ui-section"></div>
- <div id="right-side" class="ui-section"></div>
- <div id="bottom-left" class="ui-section"></div>
- <div id="footer" class="ui-section"></div>
- <div id="bottom-right" class="ui-section"></div>
- </div>
|