12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- body {
- background-color: #f2f2f2;
- }
- /* If you want the content centered horizontally and vertically */
- /*.centered {
- position: absolute;
- top: 50%;
- left: 40%;
- transform: translate(-50%, -50%);
- text-align: center;
- margin: 10;
- }
- .header_centered {
- position: absolute;
- top: 8%;
- left: 50%;
- transform: translate(-50%, -50%);
- text-align: center;
- margin: 10;
- }
- .thick-border {
- border: 3px solid black;
- border-collapse: collapse;
- }*/
- /* Style the image inside the centered container, if needed */
- img {
- max-width: 100%;
- }
- .images{
- flex: 1 1 auto;
- min-width: 15em;
- max-width: 800px;
- }
- .container {
- display: flex;
- flex-wrap: row wrap;
- }
- .column {
- flex: 1;
- /*for demo purposes only */
- background: #f2f2f2;
- /*border: 1px solid #e6e6e6;*/
- box-sizing: border-box;
- }
- .column-one {
- order: 1;
- }
- .column-two {
- order: 2;
- }
- .column-three {
- order: 3;
- }
- @media (max-width: 50em) { /* 2 x 15em (.text & .images) + 2em (left & right margin of the body element) + 1em (.text margin-right) */
- .container {flex-wrap: wrap}
- }
- .red{
- background: red;
- opacity: 0.4;
- width: 20px;
- height: 20px;
- position: absolute;
- left: 0px;
- top: 0px;
- }
|