Skip to content

Commit f0558b8

Browse files
pinardo88pinardo88
authored
Add files via upload
0 parents  commit f0558b8

13 files changed

+358
-0
lines changed

‎IntroStyle2.css‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
@font-face {
2+
font-family: 'TitleFonts';
3+
src: url('./nexa-rust.otf');
4+
}
5+
6+
@font-face {
7+
font-family: 'BodyFonts';
8+
src: url('./lineReg.otf');
9+
}
10+
11+
.SectionTitles {
12+
/* font-family: 'TitleFonts'; */
13+
/* text-align: center; */
14+
font-family: 'Montserrat', sans-serif;
15+
font-size: 3.5vw;
16+
}
17+
18+
body {
19+
margin: 0;
20+
padding: 0;
21+
}
22+
23+
.logos {
24+
width: 5vh;
25+
height: 5vh;
26+
}
27+
28+
.logosPos {
29+
position: fixed;
30+
right: 35px;
31+
top: 100px;
32+
}
33+
34+
.topNav {
35+
background-color: rgb(0, 0, 0);
36+
/* box-shadow: 0px 6px 8px rgba(0,0,0,0.3); */
37+
/* horizontal, vertical offset, blur + shadow color */
38+
text-align: center;
39+
height: 5em;
40+
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
}
45+
46+
#navText {
47+
font-size: 1.5em;
48+
}
49+
50+
nav p {
51+
margin: 0;
52+
color:white;
53+
/* font-family: 'TitleFonts'; */
54+
font-family: 'Montserrat', sans-serif;
55+
font-size: 3em;
56+
}
57+
58+
#selfPic {
59+
margin-left: -15vw;
60+
margin-right: 5vw;
61+
width: 30vw;
62+
}
63+
64+
#intro {
65+
margin: 10em auto;
66+
width: 90vw;
67+
height: 35vw;
68+
background-color: rgb(10, 10, 10);
69+
align-items: center;
70+
71+
display: flex;
72+
justify-content: center;
73+
align-items: center;
74+
flex-direction: row;
75+
}
76+
77+
#innerIntroBox {
78+
display: flex;
79+
justify-content: center;
80+
align-items: left;
81+
flex-direction: column;
82+
}
83+
84+
#bodySection {
85+
/* font-family: 'BodyFonts'; */
86+
font-family: 'Montserrat', sans-serif;
87+
font-size: 20px;
88+
89+
display: flex;
90+
justify-content: center;
91+
align-items: center;
92+
flex-direction: column;
93+
}
94+
95+
#moreFactsContainer{
96+
width: 35em;
97+
margin-left: -35em;
98+
margin-top: 4em;
99+
}
100+
101+
#moreFacts {
102+
margin-left: 3em;
103+
}
104+
105+
#moreFactsBox {
106+
background-color: rgb(10, 10, 10);
107+
width: 100%;
108+
height: 5em;
109+
margin-top: -4.2em;
110+
}
111+
112+
.foodDescription {
113+
display: flex;
114+
flex-direction: row;
115+
align-items: flex-end;
116+
}
117+
118+
#foodBackground {
119+
width: 55vw;
120+
background-image: url('./flowerBg.jpg');
121+
122+
/* display: block;
123+
margin-left: auto;
124+
margin-right: auto; */
125+
}
126+
127+
#gbj {
128+
margin-bottom: 2em;
129+
margin-left: 7vw;
130+
width: 40vw;
131+
margin-top: 5vh;
132+
}
133+
134+
#petnameBox {
135+
background-color: whitesmoke;
136+
border: 3px solid black;
137+
width: 50em;
138+
z-index: 50;
139+
margin-top: -.8em;
140+
141+
display: flex;
142+
flex-direction: column;
143+
justify-content: center;
144+
align-items: center;
145+
}
146+
147+
.bookCover {
148+
width: 10em;
149+
}
150+
151+
table {
152+
border: none;
153+
border-width: 0;
154+
}
155+
156+
table th {
157+
font-weight: 200;
158+
}
159+
160+
table td {
161+
font-size: 18px !important;
162+
}
163+
164+
table th,
165+
table td {
166+
padding: 0.5em 1.5em;
167+
}
168+
169+
table th,
170+
table tr:nth-child(3),
171+
table tr:nth-child(5) {
172+
background-color: black;
173+
color: white;
174+
}
175+
176+
/* body { background: pink; } */
177+
178+
h1 {
179+
margin: 0.4em 0;
180+
margin-bottom: 30px;
181+
color:whitesmoke;
182+
}
183+
184+
h2 {
185+
margin-bottom: 30px;
186+
}
187+
188+
label {
189+
text-align: right;
190+
width: 150px;
191+
display: inline-block;
192+
}
193+
194+
.formDiv{
195+
color:white;
196+
border-radius: 20px;
197+
background-color: black;
198+
}
199+
200+
form {
201+
/* font-family: 'BodyFonts'; */
202+
font-family: 'Montserrat', sans-serif;
203+
align-items: center;
204+
display: flex;
205+
flex-direction: column;
206+
gap: 25px 10px;
207+
}
208+
209+
210+
input {
211+
padding: 10px;
212+
width: 40%;
213+
/* font-family: 'BodyFonts'; */
214+
font-family: 'Montserrat', sans-serif;
215+
}
216+

‎LightningTheif.jpeg‎

80.2 KB
Loading

‎PicOfMe.jpg‎

2.05 MB
Loading

‎PicOfMe_smaller.jpg‎

359 KB
Loading

‎battleRoyale.jpg‎

35.6 KB
Loading

‎fbLogo.png‎

42.6 KB
Loading

‎flowerBg.jpg‎

31 KB
Loading

‎galbijjim.jpg‎

455 KB
Loading

‎galbijjim1.jpg‎

539 KB
Loading

‎index.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="description" content="This site is an about me page.">
6+
<!-- <meta http-equiv=""keywords" content="website, aboutme"> -->
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
<title>Introducing Patrice</title>
10+
<link rel="stylesheet" href="IntroStyle2.css">
11+
12+
<style>
13+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
14+
</style>
15+
16+
</head>
17+
<body>
18+
19+
<!--
20+
-Set the font to a sans serif google font.
21+
-The site should be responsive down to 600px -->
22+
23+
24+
<nav class="topNav">
25+
<p id="navText">2. Meet the Artist</p>
26+
</nav>
27+
28+
<div class = "logosPos">
29+
<img class = "logos" src="./fbLogo.png">
30+
<img class = "logos" style="margin-left: .5vw;" src="./xLogo.png">
31+
</div>
32+
33+
<div id="intro">
34+
<img id = "selfPic" src="./PicOfMe_smaller.jpg">
35+
<div id="innerIntroBox">
36+
<h1 class="SectionTitles" style="margin-left: .2vw;">Hi there,</h1>
37+
<h1 class="SectionTitles">My name is Patrice.</h1>
38+
</div>
39+
</div>
40+
41+
<div id="bodySection">
42+
<p style="margin-top: -3em;">-> As you can probably tell, most recently, </p>
43+
<p style="margin-top: -.3em;">I travelled to Tokyo, Japan, where I went to visit their teamLab exhibit.</p>
44+
<p style="margin-top: -.3em; margin-bottom: 1em;">Perhaps I was just lucky.. but despite popular belief, it did <em style="text-decoration: underline; text-underline-offset: 10px;">not</em> smell like feet.</p>
45+
<div id = "moreFactsContainer">
46+
<p style="color: whitesmoke;" id = "moreFacts">Here are some more random facts about myself:</p>
47+
<div id = "moreFactsBox"></div>
48+
</div>
49+
<div id = "petnameBox">
50+
<h2 style="margin-left: -3.5em">3 names I find cute for pets:</h2>
51+
<ul style="margin-left: -3.5em">
52+
<!-- <ul> -->
53+
<li>1. California,<em> for a Cat,</em></li>
54+
<li>2. Huggies,<em> for a Dog, and</em></li>
55+
<li>3. Mr. Handsome,<em> for a Horse.</em></li>
56+
</ul>
57+
</div>
58+
59+
<p style="margin-top: 4em; margin-bottom: 4em"><a href="https://sunnongdanusa.com/" target="_blank">Click here</a> for my favorite restaurant in LA</p>
60+
<div class="foodDescription">
61+
<div id="foodBackground">
62+
<img id="gbj" src="galbijjim1.jpg" alt="Galbijjim">
63+
</div>
64+
<div style="margin-left: 1.5em;">
65+
<p>I love hot soupy things!</p>
66+
<p>So I love my Galbijjim <em><strong style="font-size: 24px; text-decoration: underline; text-underline-offset: 10px;">piping hot</strong></em></p>
67+
<p> with cheese torched on top.</p>
68+
</div>
69+
</div>
70+
<p style="margin-bottom: 3em;">Lastly, here are my top favorite (the last) 4 books I read maybe some time in high school:</p>
71+
72+
<table>
73+
<tr>
74+
<th>Title</th>
75+
<th>Cover</th>
76+
<th>Author</th>
77+
<th>Summary (Google AI Overview)</th>
78+
</tr>
79+
<tr>
80+
<td>Raven's Gate</td>
81+
<td><img class="bookCover" src="ravens-gate.jpeg"></td>
82+
<td>Anthony Horowitz</td>
83+
<td>Troubled Matt is sent to a foster home where he uncovers an evil plot by witches to use his psychic abilities to unleash ancient evil spirits through the mysterious Raven's Gate. He must escape their control, stop their dark ritual at the abandoned power plant, and prevent the opening of the gate with the help of a reporter.</td>
84+
</tr>
85+
<tr>
86+
<td>Princess Bride</td>
87+
<td><img class="bookCover" src="princessBride.jpg"></td>
88+
<td>William Goldman</td>
89+
<td>In The Princess Bride, the beautiful Buttercup's farmhand love, Westley, is presumed dead after being attacked by pirates, leading her to reluctantly agree to marry the cruel Prince Humperdinck. Her wedding day is disrupted by her kidnapping by a trio of criminals, who are pursued by a mysterious man in black who turns out to be Westley, leading to a quest to reunite the lovers and thwart the prince's plans. </td>
90+
</tr>
91+
<tr>
92+
<td>Percy Jackson (series)</td>
93+
<td><img class="bookCover" src="LightningTheif.jpeg"></td>
94+
<td>Rick Riodan</td>
95+
<td>The "Percy Jackson" series follows 12-year-old Percy Jackson, who discovers he is a demigod, the son of Poseidon, and is sent to a summer camp for demigods called Camp Half-Blood. In the first book, The Lightning Thief, Percy must journey across the United States to find Zeus's stolen lightning bolt and prevent a war among the gods.</td>
96+
</tr>
97+
<tr>
98+
<td>Battle Royale</td>
99+
<td><img class="bookCover" src="battleRoyale.jpg"></td>
100+
<td>Koushun Takami</td>
101+
<td>a dystopian thriller about a class of junior high students forced to fight to the death on a deserted island by a totalitarian government in an alternate Japan. They are given weapons and explosive collars that detonate if they don't kill each other within a certain time, resulting in a brutal battle for survival. </td>
102+
</tr>
103+
</table>
104+
</div>
105+
106+
<div class="formDiv">
107+
<form>
108+
<h2> Leave a message before you leave! </h2>
109+
<div>
110+
<label for="firstName">First name:</label>
111+
<input type="text" id="firstName" name="firstName">
112+
</div>
113+
<div>
114+
<label for="lastName">Last name:</label>
115+
<input type="text" id="lastName" name="lastName">
116+
</div>
117+
<div>
118+
<label for="email">E-mail:</label>
119+
<input type="text" id="email" name="email">
120+
</div>
121+
<div>
122+
<label for="city">City:</label>
123+
<input type="text" id="city" name="city">
124+
</div>
125+
<div>
126+
<label for="state">State:</label>
127+
<select id="state" name="state" style="width: 11vw; font-family: 'BodyFonts';">
128+
<option value="CA">California</option>
129+
<option value="MA">Massachusetts</option>
130+
<option value="IL">Illinois</option>
131+
<option value="TX">Texas</option>
132+
<option value="NY">New York</option>
133+
</select>
134+
</div>
135+
<br>
136+
<button style="font-size: 15px;">Submit</button>
137+
</form>
138+
<br>
139+
</div>
140+
141+
</body>
142+
</html>

0 commit comments

Comments
 (0)