-
Notifications
You must be signed in to change notification settings - Fork 0
/
ai.html
95 lines (95 loc) · 3.8 KB
/
ai.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
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roger Federer's Grand Slams</title>
<style>
body {
font-family: Oswald, sans-serif;
margin: 0;
padding: 0;
background-image: url('federer.jpg'); /* Replace with your image path */
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
header {
background-color: #33adad;
padding: 10px 0;
}
.navbar {
display: flex;
justify-content: space-evenly;
background-color: #33adad;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar a {
color: #cc0066;
text-decoration: none;
font-weight: bold;
}
.container {
background-color: rgba(255, 255, 255, 0.8); /* White with some transparency for better readability */
color: #cc0066;
text-align: center;
padding: 20px;
}
.chart {
display: flex;
justify-content: center;
align-items: flex-end;
}
.bar {
width: 40px; /* Adjust the width of the bars */
margin: 0 10px; /* Spacing between bars */
text-align: center;
padding: 5px 0;
font-weight: bold;
color: #cc0066;
}
.australian-open { background-color: purple; }
.french-open { background-color: orange; }
.wimbledon { background-color: green; }
.us-open { background-color: blue; }
.box {
background-color: #33adad;
padding: 10px;
margin-top: 20px;
color: white; /* White text on the box */
}
</style>
</head>
<body>
<header>
<ul class="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Technical Portfolio</a></li>
<li><a href="qualifications.html">Qualifications Section</a></li>
<li><a href="service.html">Service Section</a></li>
<li><a href="ai.html">AI Generated Page</a></li>
</ul>
</header>
<div class="container">
<h2>Roger Federer's Grand Slams</h2>
<div class="chart">
<div class="bar australian-open" style="height: 60px;">Australian Open<br>6</div>
<div class="bar french-open" style="height: 10px;">French Open<br>1</div>
<div class="bar wimbledon" style="height: 80px;">Wimbledon<br>8</div>
<div class="bar us-open" style="height: 50px;">US Open<br>5</div>
</div>
<div class="box">
Please make html code that displays this data as a bar chart: Australian Open 6, French Open 1, Wimbledon 8, US Open 5.
Also, make the bars narrower and the height should represent the number relative to the other numbers.
Can you make the bars purple, orange, green and blue pastel colors respectively with a high contrast label font.
Add a title 'Roger Federer's Grand Slams'. Now please make the page background an image of roger federer,
the title and labels #cc0066 and the font Oswald. Also, add a small box below the bar chart with a background #33adad that
contains the words given to make this page. Add a navigation bar at the top that can go to 'Home',
'Technical Portfolio', 'Qualifications Section', 'Service Section' and 'AI Generated Page'. Finally, make the background of this
navigation bar #33adad. Change the color of the items in the navigation bar to #cc0066. PLEASE.
</div>
</div>
</body>
</html>