Hackathon-projects/style.css at main · bbhavyadav/Hackathon-projects · 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
/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: url('https://wallpapercave.com/wp/wp2318772.jpg') no-repeat center center fixed;
    background-size: cover;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* Main container */
.container {
    max-width: 1200px;
    width: 100%;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.8);  /* Dark background with more opacity */
    border-radius: 15px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);  /* Slightly stronger shadow */
    text-align: center;
}

/* Main heading */
h1 {
    font-size: 3em;   /* Increased font size for emphasis */
    margin-bottom: 20px;
    color: #f44336;    /* Bright red color */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);  /* Subtle shadow for text */
}

/* Subheading and description */
p {
    font-size: 1.2em;
    margin-bottom: 30px;
    color: #ddd;   /* Slightly lighter gray for text */
}

/* Grid Layout for Anime List and Images */
.anime-list, .anime-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  /* Adjusted for larger cards */
    gap: 20px;
    margin-top: 30px;
}

/* Anime Card Styling */
.anime-card {
    background: rgba(0, 0, 0, 0.6);  /* Darker background for cards */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect for Anime Cards */
.anime-card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);  /* More prominent shadow on hover */
}

/* Image Style inside Cards */
.anime-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.anime-card img:hover {
    transform: scale(1.1);  /* Slight zoom effect when hovering over the image */
}

/* Buttons Styling */
button {
    background-color: #f44336;  /* Red color */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Hover effect for buttons */
button:hover {
    background-color: #d32f2f;  /* Darker red for hover */
    transform: scale(1.05);   /* Slightly grow button on hover */
}

/* Actions Section */
.actions {
    margin-top: 30px;
}

/* Favorite Anime Images Layout */
.anime-images img {
    width: 300px;
    height: auto;
    border-radius: 12px;
    margin: 15px;
    transition: transform 0.3s ease;
}

/* Hover effect on images in the favorites page */
.anime-images img:hover {
    transform: scale(1.1);  /* Slight zoom effect on image hover */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .anime-list {
        grid-template-columns: 1fr 1fr; /* 2 cards per row on medium screens */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2em;  /* Adjusted heading size for small screens */
    }

    .anime-list {
        grid-template-columns: 1fr;  /* 1 card per row on small screens */
    }

    button {
        padding: 10px 20px;  /* Smaller button padding for small screens */
    }
}