-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathHTML_and_CSS_example.html
82 lines (76 loc) · 2.47 KB
/
HTML_and_CSS_example.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Save the World</title>
<style>
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
background-color: #e0f7e9;
color: #2e7d32;
margin: 0;
padding: 20px;
}
.email-container {
background-color: #ffeb3b;
border-radius: 50px;
padding: 40px;
max-width: 600px;
margin: 20px auto;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
text-align: center;
border: 5px solid #ff9800;
}
h1 {
color: #f44336;
font-size: 48px;
text-transform: uppercase;
text-shadow: 2px 2px #ffeb3b;
}
.earth-image {
width: 100%;
max-width: 400px;
margin: 30px 0;
border-radius: 50%;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
border: 5px solid #4caf50;
}
.description {
font-size: 20px;
line-height: 1.8;
margin: 30px 0;
color: #3e2723;
background-color: #a5d6a7;
padding: 20px;
border-radius: 10px;
border: 2px solid #4caf50;
}
.action-button {
background-color: #ff5722;
color: white;
border: none;
padding: 15px 30px;
font-size: 20px;
cursor: pointer;
border-radius: 10px;
transition: background-color 0.3s ease, transform 0.3s ease;
text-transform: uppercase;
}
.action-button:hover {
background-color: #e64a19;
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="email-container">
<h1>Save the World</h1>
<img src="https://t4.ftcdn.net/jpg/05/66/23/45/360_F_566234573_0wRtGNCoV93vm3nCcBuRDIEJOq4BXlQ2.jpg" alt="Earth in Space" class="earth-image">
<p class="description">
Recycling is crucial for the health of our planet. By recycling, we can reduce waste, save energy, and preserve our natural resources. We encourage companies to take an active role in recycling and implementing sustainable practices in their operations.
</p>
<button class="action-button">Learn More</button>
</div>
</body>
</html>