Last change
on this file was 113029b, checked in by Nace Gjorgjievski <nace.gorgievski123@…>, 2 years ago |
Prototype
|
-
Property mode
set to
100644
|
File size:
1.9 KB
|
Rev | Line | |
---|
[b612ab1] | 1 | .container {
|
---|
| 2 | display: flex;
|
---|
| 3 | }
|
---|
| 4 |
|
---|
| 5 | .container img {
|
---|
| 6 | height: 100%;
|
---|
| 7 | }
|
---|
| 8 |
|
---|
| 9 | .left-side {
|
---|
| 10 | flex: 1;
|
---|
| 11 | display: flex;
|
---|
| 12 | flex-direction: column;
|
---|
| 13 | }
|
---|
| 14 |
|
---|
| 15 | .right-side {
|
---|
| 16 | flex: 1;
|
---|
| 17 | display: flex;
|
---|
| 18 | flex-direction: column;
|
---|
| 19 | }
|
---|
| 20 |
|
---|
| 21 | .mainImg {
|
---|
| 22 | height: 500px;
|
---|
| 23 | }
|
---|
| 24 |
|
---|
| 25 | .sideImgContainer {
|
---|
| 26 | height: 150px;
|
---|
| 27 | display: flex;
|
---|
| 28 | justify-content: space-evenly;
|
---|
| 29 | align-items: center;
|
---|
| 30 | }
|
---|
| 31 |
|
---|
| 32 | .sideImg {
|
---|
| 33 | height: 100%;
|
---|
| 34 | }
|
---|
| 35 |
|
---|
| 36 | .name-container {
|
---|
| 37 | display: flex;
|
---|
| 38 | justify-content: center;
|
---|
| 39 | align-items: center;
|
---|
| 40 | }
|
---|
| 41 |
|
---|
| 42 | .price-container {
|
---|
| 43 | display: flex;
|
---|
| 44 | }
|
---|
| 45 |
|
---|
| 46 | .price-left {
|
---|
| 47 | flex: 1;
|
---|
| 48 | display: flex;
|
---|
| 49 | flex-direction: column;
|
---|
| 50 | justify-content: left;
|
---|
| 51 | align-items: center;
|
---|
| 52 | }
|
---|
| 53 |
|
---|
| 54 | .price-left h2 {
|
---|
| 55 | color: red;
|
---|
| 56 | }
|
---|
| 57 |
|
---|
| 58 | .price-left img {
|
---|
| 59 | width: 40px;
|
---|
| 60 | height: 40px;
|
---|
| 61 | }
|
---|
| 62 |
|
---|
| 63 | .price-right {
|
---|
| 64 | flex: 1;
|
---|
| 65 | display: flex;
|
---|
| 66 | flex-direction: column;
|
---|
| 67 | justify-content: center;
|
---|
| 68 | align-items: center;
|
---|
| 69 | }
|
---|
| 70 |
|
---|
| 71 | .price-right button {
|
---|
| 72 | height: 80%;
|
---|
| 73 | width: 80%;
|
---|
| 74 | display: flex;
|
---|
| 75 | justify-content: center;
|
---|
| 76 | align-items: center;
|
---|
| 77 | background-color: red;
|
---|
| 78 | border: none;
|
---|
| 79 | border-radius: 10px;
|
---|
| 80 | cursor: pointer;
|
---|
| 81 | color: white;
|
---|
| 82 | font-size: 19px;
|
---|
| 83 | }
|
---|
| 84 |
|
---|
| 85 | #name {
|
---|
| 86 | text-align: center;
|
---|
| 87 | }
|
---|
| 88 |
|
---|
| 89 | #price {
|
---|
| 90 | color: red;
|
---|
| 91 | }
|
---|
| 92 |
|
---|
| 93 | #icon {
|
---|
| 94 | width: 40px;
|
---|
| 95 | height: 40px;
|
---|
| 96 | filter: invert(0%) sepia(00%) saturate(8000%) hue-rotate(8deg) brightness(0%)
|
---|
| 97 | contrast(234%);
|
---|
| 98 | }
|
---|
| 99 |
|
---|
| 100 | #table {
|
---|
| 101 | margin-top: 10px;
|
---|
| 102 | }
|
---|
| 103 |
|
---|
| 104 | tr {
|
---|
| 105 | cursor: pointer;
|
---|
| 106 | }
|
---|
| 107 |
|
---|
| 108 | .imgRow {
|
---|
| 109 | display: flex !important;
|
---|
| 110 | justify-content: center !important;
|
---|
[113029b] | 111 | margin-top: 10px;
|
---|
[b612ab1] | 112 | }
|
---|
| 113 |
|
---|
| 114 | #sec {
|
---|
| 115 | width: 100px;
|
---|
| 116 | height: 100px;
|
---|
| 117 | }
|
---|
| 118 |
|
---|
| 119 | table img {
|
---|
| 120 | width: 200px;
|
---|
| 121 | }
|
---|
| 122 | #tmp {
|
---|
| 123 | margin-left: 20px;
|
---|
| 124 | }
|
---|
| 125 | #tmp tr,
|
---|
| 126 | #tmp td,
|
---|
| 127 | #tmp th {
|
---|
| 128 | border: 1px solid black;
|
---|
| 129 | height: 40px;
|
---|
| 130 | padding: 3px;
|
---|
| 131 | }
|
---|
| 132 |
|
---|
| 133 | @media only screen and (max-width: 750) {
|
---|
| 134 | #main {
|
---|
| 135 | height: 300px;
|
---|
| 136 | }
|
---|
| 137 | }
|
---|
| 138 |
|
---|
| 139 | @media only screen and (max-width: 400px) {
|
---|
| 140 | #sec {
|
---|
| 141 | height: 50px;
|
---|
| 142 | }
|
---|
| 143 | }
|
---|
| 144 |
|
---|
| 145 | @media only screen and (max-width: 768) {
|
---|
| 146 | #main {
|
---|
| 147 | height: 260px !important;
|
---|
| 148 | }
|
---|
| 149 | }
|
---|
| 150 |
|
---|
| 151 | @media only screen and (max-width: 575) {
|
---|
| 152 | #main {
|
---|
| 153 | height: auto !important;
|
---|
| 154 | }
|
---|
| 155 | }
|
---|
Note:
See
TracBrowser
for help on using the repository browser.