File size: 1,733 Bytes
0b0fda2
 
 
 
 
337f1de
 
 
0b0fda2
 
 
 
337f1de
0b0fda2
 
 
337f1de
0b0fda2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
337f1de
0b0fda2
 
337f1de
 
0b0fda2
 
b11895a
 
0b0fda2
 
 
 
b11895a
 
0b0fda2
 
 
 
 
 
 
337f1de
b11895a
 
0b0fda2
337f1de
0b0fda2
 
 
 
 
 
 
 
 
337f1de
0b0fda2
 
337f1de
0b0fda2
337f1de
 
 
 
 
 
 
 
 
 
0b0fda2
 
337f1de
 
 
 
 
0b0fda2
 
 
 
 
 
 
 
337f1de
0b0fda2
337f1de
0b0fda2
337f1de
 
 
0b0fda2
b11895a
337f1de
 
 
b11895a
337f1de
 
 
 
 
 
 
b11895a
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
/* Global Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f9;
  color: #333;
  transition: all 0.3s ease;
}

/* Header */
header {
  background: #6200ea;
  padding: 15px;
  color: white;
  text-align: center;
  position: relative;
}

header nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

header nav ul li {
  margin: 0 15px;
}

header nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

header nav ul li a:hover {
  color: #ffcc00;
}

.burger-menu {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Section */
section {
  padding: 40px;
  text-align: center;
}

.project {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px auto;
  max-width: 500px;
  border-radius: 10px;
  background: #f9f9f9;
  transition: transform 0.3s ease;
}

.project:hover {
  transform: scale(1.05);
}

footer {
  text-align: center;
  padding: 10px;
  background: #6200ea;
  color: white;
}

/* Responsive Styles */
@media (max-width: 768px) {
  header nav ul {
    display: none;
    flex-direction: column;
    background: #6200ea;
    position: absolute;
    top: 60px;
    right: 0;
    width: 100%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  }

  header nav ul.active {
    display: flex;
  }

  .burger-menu {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
  }

  section {
    padding: 20px;
  }

  .project {
    max-width: 90%;
    margin: 10px auto;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  h1, h2 {
    font-size: 1.5rem;
  }

  button, a {
    font-size: 1rem;
  }

  footer {
    font-size: 0.8rem;
  }
}