Skip to content

Commit b805afd

Browse files
Alexanderer159Alexanderer159
committed
determinar espacios
1 parent 4ddd082 commit b805afd

File tree

4 files changed

+112
-0
lines changed

4 files changed

+112
-0
lines changed

‎package-lock.json‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/components/Calendario.jsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
const Calendar = () => {
2+
return (
3+
4+
<div className="All vh-100 container-fluid vh-100 m-auto col-12 col-md-4 d-flex flex-column">
5+
<div className="calendar h-10 d-flex flex-row align-items-center justify-content-center gap-3 my-3">
6+
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25">
7+
<p>Mon</p>
8+
<p>20</p>
9+
<a>X</a>
10+
</div>
11+
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25">
12+
<p>Tue</p>
13+
<p>21</p>
14+
<a>X</a>
15+
</div>
16+
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25">
17+
<p>Wed</p>
18+
<p>22</p>
19+
<a>X</a>
20+
</div>
21+
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25">
22+
<p>Thu</p>
23+
<p>23</p>
24+
<a>Y</a>
25+
</div>
26+
<div className="calendarday rounded-5 shadow-lg border-0 bg-light text-center justify-content-center w-25">
27+
<p>Fri</p>
28+
<p>24</p>
29+
<a>Y</a>
30+
</div>
31+
</div>
32+
33+
<div className="location rounded-5 w-100 my-2 h-30 d-flex flex-column align-items-center justify-content-center bg-light">
34+
35+
<div className="location-top m-2 h-30 w-100 d-flex flex-row align-items-center justify-content-center">
36+
37+
<div className="location-top-left m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">
38+
<div className="car-left m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">1</div>
39+
<div className="car-middle m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">2</div>
40+
<div className="car-right m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">3</div>
41+
</div>
42+
43+
<div className="location-top-right m-2 h-100 w-25 rounded-5 d-flex flex-row align-items-center justify-content-center">
44+
<div className="weather-left m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">1</div>
45+
<div className="weather-right m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">2</div>
46+
</div>
47+
</div>
48+
49+
<div className="location-bottom my-2 w-100 h-70 d-flex flex-row align-items-center justify-content-center">
50+
<div className="location-bottom-left m-2 my-2 h-100 w-75 rounded-5 d-flex flex-column align-items-center justify-content-center">
51+
<div className="car-left m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">Atenolol</div>
52+
<div className="car-middle m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">Lisinopril</div>
53+
<div className="car-right m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">Astorvastatin</div>
54+
</div>
55+
56+
<div className="location-bottom-right m-2 h-100 w-25 rounded-5 d-flex flex-row align-items-center justify-content-center">2</div>
57+
</div>
58+
</div>
59+
60+
<div className="quality my-2 h-60 rounded-5 d-flex flex-column align-items-center justify-content-center bg-light">
61+
62+
<div className="quality-top my-3 h-10 rounded-5 d-flex flex-row align-items-center justify-content-center bg-light">
63+
<div className="quality-top-1 m-2 my-2 h-100 w-50 rounded-5 d-flex align-items-center justify-content-center">Life Quality</div>
64+
<div className="quality-top-2 m-2 my-2 h-100 w-25 rounded-5 d-flex align-items-center justify-content-center">...</div>
65+
<div className="quality-top-3 m-2 my-2 h-100 w-25 rounded-5 d-flex align-items-center justify-content-center">Week ...</div>
66+
</div>
67+
<div className="quality-middle my-2 h-30 rounded-5 d-flex flex-row align-items-center justify-content-center bg-light">
68+
<div className="quality-middle-1 m-2 my-2 h-100 w-25 rounded-5 d-flex flex-row align-items-center justify-content-center">1</div>
69+
<div className="quality-middle-2 m-2 my-2 h-100 w-75 rounded-5 d-flex flex-row align-items-center justify-content-center">2</div>
70+
</div>
71+
<div className="quality-bottom my-2 h-60 rounded-5 d-flex flex-row align-items-center justify-content-center bg-light">3</div>
72+
73+
</div>
74+
</div>
75+
);
76+
};
77+
78+
export default Calendar;

‎src/js/main.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,15 @@ import "bootstrap"
77

88
// index.css'
99
import '../styles/index.css'
10+
import '../styles/calendar.css'
1011

1112
// components
1213
import Home from './components/Home';
14+
import Calendar from './components/Calendario';
1315

1416
ReactDOM.createRoot(document.getElementById('root')).render(
1517
<React.StrictMode>
1618
<Home/>
19+
<Calendar/>
1720
</React.StrictMode>,
1821
)

‎src/styles/calendar.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.All {
2+
height: 100vh;
3+
background-color: grey;
4+
}
5+
6+
.h-10 {
7+
height: 10%;
8+
}
9+
10+
.h-30 {
11+
height: 30%;
12+
}
13+
14+
.h-60 {
15+
height: 60%;
16+
}
17+
18+
.h-70 {
19+
height: 70%
20+
}
21+
22+
.location-top-right {
23+
background-color: gray;
24+
}
25+
26+
.location-top-left {
27+
background-color: gray;
28+
}

0 commit comments

Comments
 (0)