assignment-web-module/BrandSection styles.css at main · AsiriHarischandra/assignment-web-module · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/* styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Styling for the outer div section */
.brands-section {
    background-color: #fff; /* Optional: Add a background color to the section */
    margin: 20px auto; /* Center the section with some margin */
    max-width: 1400px; /* Slightly wider than the inner content for padding */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}
.logo2{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px; /* Adjust width as needed */
    height: 80px; /* Adjust height as needed */
    margin-right: 10px; /* Add spacing if needed */
}

.logo2 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fits within the container */
    border-radius: 50%; /* Optional: Make the image circular */
}
.popular-brands {
    max-width: 1200px;
    margin: 0 auto; /* Center the content inside the section */
    padding: 20px;
}

.popular-brands h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns */
    gap: 15px;
    margin-bottom: 20px;
}

.brand-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brand-btn {
    padding: 15px;
    background-color: #f5f5f5;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    text-align: center;
}

.brand-btn:hover {
    background-color: #e0e0e0;
}

.watch-image {
    display: none; /* Hidden by default */
    position: absolute;
    top: -110px; /* Position above the brand name */
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Show the image when hovering over the brand container */
.brand-container:hover .watch-image {
    display: block;
}

.divider {
    width: 50px;
    height: 2px;
    background-color: #ccc;
    margin: 20px auto;
}

.display-all-btn {
    display: block;
    margin: 0 auto;
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid #333;
    border-radius: 5px;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.display-all-btn:hover {
    background-color: #333;
    color: #fff;
}

/* Responsive Design for smaller screens */
@media (max-width: 768px) {
    .brands-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on smaller screens */
    }

    .watch-image {
        top: -90px; /* Adjust position for smaller screens */
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on very small screens */
    }

    .watch-image {
        top: -70px; /* Adjust position for very small screens */
        width: 60px;
        height: 60px;
    }
}