Skip to content

Commit 25abd45

Browse files
author
Frederick Thomas
authored
Update AI.html
1 parent 9ab9d0a commit 25abd45

File tree

1 file changed

+18
-128
lines changed

1 file changed

+18
-128
lines changed

‎AI.html

Lines changed: 18 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -6,151 +6,48 @@
66

77
<style>
88
body, html {
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;
9+
height: 50%;
10+
margin: 0;
11+
font-size: 20px;
12+
margin-top: 2px;
13+
margin-bottom: 16px;
1714
}
1815

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

9921
/* Full height */
100-
/* height: 100%; */
22+
height: 100%;
23+
top: 50;
24+
right: 0;
10125

10226
/* Centers and scales my image smooth and professional */
103-
/*background-position: center;
27+
background-position: center;
10428
background-repeat: no-repeat;
10529
background-size: cover;
106-
}*/
30+
}
10731

108-
/* All Font (particuraly the answers to query). */
109-
font {
110-
color: whitesmoke;
111-
font-size: x-large;
112-
}
11332

11433
/* Style for my header */
11534
.h1 {
116-
font-size: xx-large;
11735
font-family: "san-serif", Playfair Display, Bodoni;
11836
text-align: center;
119-
padding: 7px;
120-
background: linear-gradient(to right, gold, #71713a, #544478, silver, whitesmoke, gold, #71713a, #544478, silver, whitesmoke);
121-
-webkit-background-clip: text;
122-
-webkit-text-fill-color: transparent;
12337
}
12438

12539

12640
/* First paragraph style */
12741
.p1 {
128-
min-height: 100vh;
12942
font-family: "Gill Sans", sans-serif;
13043
text-align: center;
131-
color: whitesmoke;
132-
font-size: 24px;
133-
display: flex;
134-
flex-direction: column;
135-
align-items: center;
136-
max-width: 625px;
137-
margin: 0 auto;
138-
}
139-
140-
.para {
141-
font-size: 24px;
142-
margin-top: 2px;
143-
margin-bottom: 16px;
144-
color: whitesmoke;
14544
}
14645

14746

14847
/* My query prompt style */
14948
.queryPrompt {
150-
font-size: 24px;
15149
font-family: "Fantasy", Copperplate, Papyris;
15250
text-align: center;
153-
color: whitesmoke;
15451
}
15552

15653

@@ -161,8 +58,6 @@
16158
justify-content: center;
16259
align-items: center;
16360
gap: 5px;
164-
overflow: hidden;
165-
color: whitesmoke;
16661
}
16762

16863

@@ -173,13 +68,12 @@
17368
text-align: center;
17469
width: fit-content;
17570
min-width: 150px;
176-
max-width: 625px;
17771
}
17872

17973

18074
/* My AI button style */
18175
button {
182-
background-color: gold;
76+
background-color: black;
18377
color: white;
18478
border: none;
18579
border-radius: 50%;
@@ -194,21 +88,17 @@
19488

19589
<body>
19690

197-
<video autoplay loop muted plays-inline class="bg2">
198-
<source src="./aiBot.mov">
199-
</video>
200-
20191
<!-- For association with my background style -->
202-
<!-- <div class="bg"></div> -->
92+
<div class="bg"></div>
20393

20494

20595
<!-- My header -->
206-
<h1 class="h1">My First AI Chat Bot</h1>
96+
<h1 class="h1" >My First AI Chat Bot</h1>
20797

20898

20999
<!-- My first paragraph -->
210-
<p class="<p class="p1 para" style="color:whitesmoke">
211-
<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!
100+
<p class="p1">
101+
<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!
212102
</p>
213103

214104

0 commit comments

Comments
 (0)