Skip to content

Commit 3685f49

Browse files
RajnikantkeshkarRajnikantkeshkar
committed
added css for product page
1 parent c0c0f10 commit 3685f49

File tree

2 files changed

+189
-1
lines changed

2 files changed

+189
-1
lines changed

‎Frontend/product.html

+2
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@
2323
></script>
2424
</head>
2525
<body>
26+
27+
2628
<div id="container">
2729
<nav id="navbar"></nav>
2830
<div id="flat-title"></div>

‎Frontend/styles/product.css

+187-1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,190 @@
99
display: grid;
1010
}
1111

12-
#flat-images>img {}
12+
13+
/* Container */
14+
#container {
15+
max-width: 1200px;
16+
margin: 0 auto;
17+
padding: 20px;
18+
}
19+
20+
/* Main section */
21+
#main-section {
22+
display: flex;
23+
}
24+
25+
/* Left main section */
26+
#left-main {
27+
flex: 2;
28+
padding: 20px;
29+
}
30+
31+
/* Features section */
32+
#features {
33+
display: flex;
34+
flex-wrap: wrap;
35+
gap: 20px;
36+
}
37+
38+
/* Individual feature */
39+
.feature {
40+
flex: 1;
41+
padding: 10px;
42+
background-color: #f0f0f0;
43+
}
44+
45+
.feature img {
46+
max-width: 100%;
47+
}
48+
49+
/* Description section */
50+
#description {
51+
padding: 20px;
52+
background-color: #f0f0f0;
53+
}
54+
55+
/* Place offer section */
56+
#place-offer {
57+
padding: 20px;
58+
background-color: #f0f0f0;
59+
}
60+
61+
/* Right main section */
62+
#right-main {
63+
flex: 1;
64+
padding: 20px;
65+
}
66+
67+
/* Reserve section */
68+
#reserve {
69+
padding: 20px;
70+
background-color: #f0f0f0;
71+
}
72+
/* Duration section */
73+
#duration {
74+
margin-bottom: 20px;
75+
}
76+
77+
#check-in,
78+
#check-out {
79+
margin-bottom: 10px;
80+
}
81+
82+
#check-in label,
83+
#check-out label {
84+
display: block;
85+
margin-bottom: 5px;
86+
}
87+
88+
#check-in input,
89+
#check-out input {
90+
width: 100%;
91+
padding: 10px;
92+
border: 1px solid #ccc;
93+
border-radius: 5px;
94+
}
95+
96+
/* Guests section */
97+
#guests {
98+
margin-bottom: 20px;
99+
}
100+
101+
#guests label {
102+
display: block;
103+
margin-bottom: 5px;
104+
}
105+
106+
#guests select {
107+
width: 100%;
108+
padding: 10px;
109+
border: 1px solid #ccc;
110+
border-radius: 5px;
111+
}
112+
113+
/* Reserve button */
114+
button {
115+
display: block;
116+
width: 100%;
117+
padding: 15px;
118+
background-color: #ff5a5f;
119+
color: white;
120+
border: none;
121+
border-radius: 5px;
122+
cursor: pointer;
123+
transition: background-color 0.3s;
124+
}
125+
126+
button:hover {
127+
background-color: #e04246;
128+
}
129+
130+
131+
/* images */
132+
/* Flat images */
133+
#flat-images {
134+
display: grid;
135+
grid-template-columns: repeat(5, 1fr);
136+
gap: 10px;
137+
margin-bottom: 20px;
138+
grid-template-areas: "";
139+
140+
}
141+
142+
#flat-images img {
143+
width: 100%;
144+
border-radius: 8px;
145+
}
146+
147+
148+
149+
150+
151+
152+
/* Host section */
153+
#host {
154+
display: flex;
155+
align-items: center;
156+
margin-bottom: 20px;
157+
}
158+
159+
#host img {
160+
width: 60px;
161+
height: 60px;
162+
border-radius: 50%;
163+
margin-right: 20px;
164+
}
165+
166+
/* Host details */
167+
#host-details {
168+
flex: 1;
169+
}
170+
171+
#host-details h3 {
172+
margin-bottom: 5px;
173+
}
174+
175+
/* Description section */
176+
#description {
177+
margin-bottom: 20px;
178+
background-color: #f0f0f0;
179+
padding: 20px;
180+
border-radius: 8px;
181+
}
182+
183+
/* Place offer section */
184+
#place-offer {
185+
margin-bottom: 20px;
186+
background-color: #f0f0f0;
187+
padding: 20px;
188+
border-radius: 8px;
189+
}
190+
191+
/* Reserve section */
192+
#reserve {
193+
margin-bottom: 20px;
194+
background-color: #f0f0f0;
195+
padding: 20px;
196+
border-radius: 8px;
197+
}
198+

0 commit comments

Comments
 (0)