Skip to content

Commit bda5ce9

Browse files
author
Frederick Thomas
authored
Update AI.html
I tried 😂😢😂
1 parent 4e7fe49 commit bda5ce9

File tree

1 file changed

+130
-16
lines changed

1 file changed

+130
-16
lines changed

‎AI.html

Lines changed: 130 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,46 +6,153 @@
66

77
<style>
88
body, html {
9-
height: 50%;
10-
margin: 0;
9+
height: 50%;
10+
margin: 0 auto;
11+
min-height: 100vh;
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
max-width: 625px;
16+
text-align: center;
1117
}
1218

13-
14-
.bg {
19+
/* Cool AI Bot Background Vid */
20+
.bg2 {
21+
position: absolute;
22+
top: auto;
23+
right: 0;
24+
bottom: 0;
25+
left: 0;
26+
z-index: -1;
27+
min-height: 100vh;
28+
}
29+
30+
@media (min-aspect-ratio: 16/9) {
31+
.bg2 {
32+
width: 100%;
33+
height: auto;
34+
}
35+
}
36+
@media (max-aspect-ratio: 16/9) {
37+
.bg2 {
38+
width: auto;
39+
height: 100%;
40+
}
41+
}
42+
43+
/* Responsiveness: Smartphones and other devices */
44+
/* Small phones, tablets, large smartphones */
45+
@media (max-width: 768px) {
46+
nav {
47+
height: 68px;
48+
color: whitesmoke;
49+
}
50+
51+
h1 {
52+
font-size: 12px;
53+
text-align: center;
54+
}
55+
56+
.p1 {
57+
font-family: "Gill Sans", sans-serif;
58+
text-align: center;
59+
font-size: 12px;
60+
}
61+
62+
.queryPrompt {
63+
font-family: "Fantasy", Copperplate, Papyris;
64+
text-align: center;
65+
color: whitesmoke;
66+
font-size: 8px;
67+
}
68+
}
69+
70+
@media (max-width: 1366px) {
71+
nav {
72+
height: 68px;
73+
color: whitesmoke;
74+
}
75+
76+
h1 {
77+
font-size: 16px;
78+
text-align: center;
79+
}
80+
81+
.p1 {
82+
font-family: "Gill Sans", sans-serif;
83+
text-align: center;
84+
font-size: 8px;
85+
}
86+
87+
.queryPrompt {
88+
font-family: "Fantasy", Copperplate, Papyris;
89+
text-align: center;
90+
color: whitesmoke;
91+
font-size: 12px;
92+
}
93+
}
94+
95+
96+
/* .bg { */
1597
/* The image used */
16-
<!-- background: url("https://sallysbakingaddiction.com/wp-content/uploads/2013/05/classic-chocolate-chip-cookies.jpg"); -->
17-
<video autoplay loop muted plays-inline>
18-
<source src="./aiBot.mov">
19-
</video>
98+
/* background: url("https://sallysbakingaddiction.com/wp-content/uploads/2013/05/classic-chocolate-chip-cookies.jpg");
99+
20100
21101
/* Full height */
22-
height: 100%;
102+
/* height: 100%; */
23103

24104
/* Centers and scales my image smooth and professional */
25-
background-position: center;
105+
/*background-position: center;
26106
background-repeat: no-repeat;
27107
background-size: cover;
28-
}
108+
}*/
29109

110+
/* All Font (particuraly the answers to query). */
111+
font {
112+
color: whitesmoke;
113+
font-size: x-large;
114+
}
30115

31116
/* Style for my header */
32117
.h1 {
118+
font-size: xx-large;
33119
font-family: "san-serif", Playfair Display, Bodoni;
34120
text-align: center;
121+
padding: 7px;
122+
background: linear-gradient(to right, gold, #71713a, #544478, silver, whitesmoke, gold, #71713a, #544478, silver, whitesmoke);
123+
-webkit-background-clip: text;
124+
-webkit-text-fill-color: transparent;
35125
}
36126

37127

38128
/* First paragraph style */
39129
.p1 {
130+
min-height: 100vh;
40131
font-family: "Gill Sans", sans-serif;
41132
text-align: center;
133+
color: whitesmoke;
134+
font-size: 24px;
135+
display: flex;
136+
flex-direction: column;
137+
align-items: center;
138+
max-width: 625px;
139+
margin: 0 auto;
140+
}
141+
142+
.para {
143+
font-size: 24px;
144+
margin-top: 2px;
145+
margin-bottom: 16px;
146+
color: whitesmoke;
42147
}
43148

44149

45150
/* My query prompt style */
46151
.queryPrompt {
152+
font-size: 24px;
47153
font-family: "Fantasy", Copperplate, Papyris;
48154
text-align: center;
155+
color: whitesmoke;
49156
}
50157

51158

@@ -56,6 +163,8 @@
56163
justify-content: center;
57164
align-items: center;
58165
gap: 5px;
166+
overflow: hidden;
167+
color: whitesmoke;
59168
}
60169

61170

@@ -66,12 +175,13 @@
66175
text-align: center;
67176
width: fit-content;
68177
min-width: 150px;
178+
max-width: 625px;
69179
}
70180

71181

72182
/* My AI button style */
73183
button {
74-
background-color: black;
184+
background-color: gol;
75185
color: white;
76186
border: none;
77187
border-radius: 50%;
@@ -86,17 +196,21 @@
86196

87197
<body>
88198

199+
<video autoplay loop muted plays-inline class="bg2">
200+
<source src="./aiBot.mov">
201+
</video>
202+
89203
<!-- For association with my background style -->
90-
<div class="bg"></div>
204+
<!-- <div class="bg"></div> -->
91205

92206

93207
<!-- My header -->
94-
<h1 class="h1" >My First AI Chat Bot</h1>
208+
<h1 class="h1">My First AI Chat Bot</h1>
95209

96210

97211
<!-- My first paragraph -->
98-
<p class="p1">
99-
<a href="https://supercodingninja.github.io/" target=”_blank”>"HELLO, WORLD!"</a> This is my first AI chat box. I have developed dialogue prompts before- even multiple choice <a href="https://supercodingninja.github.io/WhoIsOutside/" target=”_blank”>game</a>- and I've even used API (Application Programming Interface). I am familiar with integrating tools and technologies into a website (such as ChatGPT). Still, I had never fully coded my very own Chat Bot until Mr. David Bragg, founder of <a href="https://frontendsimplified.com/" target=”_blank”>Frontend Simplified</a> showed me how, and I highly recommend his courses!
212+
<p class="<p class="p1 para" style="color:whitesmoke">
213+
<a href="https://supercodingninja.github.io/" target=”_blank”><b style="color: gold; font-size: xx-large;"><u>"HELLO, WORLD!"</u></b></a> (👈🏿Check out first website & my AI Chatbot repository just by clicking the hyperlinks 👇🏿) This is my first AI chat box. I have developed dialogue prompts before- even multiple choice <a href="https://supercodingninja.github.io/WhoIsOutside/" target=”_blank”>game</a>- and I've even used API (Application Programming Interface). I am familiar with integrating tools and technologies into a website (such as ChatGPT). Still, I had never fully coded my very own Chat Bot until Mr. David Bragg, founder of <a href="https://frontendsimplified.com/" target=”_blank”>Frontend Simplified</a> showed me how, and I highly recommend his courses!
100214
</p>
101215

102216

0 commit comments

Comments
 (0)