source: CookCraft-FrontEnd/CookCraft-FrontEnd-master/cookcraft-app/src/css/HomeCss/nationalities.module.css

Last change on this file was d7b7f00, checked in by Gorazd Biskoski <gorazdbiskoskii@…>, 4 weeks ago

Add project

  • Property mode set to 100644
File size: 1.3 KB
Line 
1.nationalities {
2 padding: 30px 0;
3 background-color: #fff;
4}
5
6.container {
7 max-width: 1200px;
8 margin: 0 auto;
9 padding: 0 15px;
10}
11
12.sectionTitle {
13 color: #333;
14 text-align: center;
15 margin-bottom: 40px;
16 font-size: 36px;
17 font-weight: 700;
18}
19
20.nationalitiesList {
21 display: flex;
22 flex-wrap: wrap;
23 justify-content: space-between;
24}
25
26.nationality {
27 width: calc(25% - 20px);
28 text-align: center;
29 margin-bottom: 30px;
30 transition: transform 0.3s ease;
31}
32
33.nationality img {
34 width: 100%;
35 border-radius: 12px;
36 height: 200px;
37 object-fit: cover;
38 transition: transform 0.3s ease;
39}
40
41.nationality img:hover {
42 cursor: pointer;
43 transform: scale(1.05);
44}
45
46.nationality p {
47 margin-top: 10px;
48 font-size: 18px;
49 font-weight: 700;
50}
51@media (max-width: 768px) {
52 .nationalities {
53 padding: 20px 0;
54 }
55
56 .sectionTitle {
57 font-size: 24px;
58 margin-bottom: 15px;
59 }
60
61 .nationalitiesList {
62 flex-direction: column;
63 align-items: center;
64 gap: 10px;
65 }
66
67 .nationality img {
68 width: 100%;
69 height: 200px;
70 object-fit: cover;
71 border-radius: 12px;
72 transition: transform 0.3s ease;
73}
74
75.nationality {
76 flex: 1;
77 min-width: 220px;
78 max-width: calc(25% - 20px);
79 text-align: center;
80 margin-bottom: 30px;
81 transition: transform 0.3s ease;
82}
83 .nationality p {
84 font-size: 16px;
85 }
86}
87
Note: See TracBrowser for help on using the repository browser.