Last change
on this file since a2e5735 was 113029b, checked in by Nace Gjorgjievski <nace.gorgievski123@…>, 2 years ago |
Prototype
|
-
Property mode
set to
100644
|
File size:
1.9 KB
|
Line | |
---|
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;
|
---|
111 | margin-top: 10px;
|
---|
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.