FullstackAcademy · BriSweet · Jul 25, 2025
diff --git a/about.html b/about.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script defer src="index.js"></script>
+    <link rel="stylesheet" href="index.css" />
+    <link rel="stylesheet" href="index.css" />
+    <title>About Page</title>
+  </head>
+  <body>
+    <section class="info">
+      <a class="info" href="index.html">Home</a>
+      <a class="active info" href="about.html">About</a>
+      <a class="info" href="portfolio.html">Portfolio</a>
+      <a class="info" href="contact.html">Contact</a>
+    </section>
+  </body>
+  <main>
+    <h1 class="header">About Me</h1>
+    <section class="section">
+      <h2>Ren. Fair</h2>
+      <img class="image2"src="images/proimg2.jpg" alt="Picture of me at the Colorado Renaissance Festival" width="400px" height="500px" />
+      <p>I'm a huge fan of going to the Colorado Renaissance Festival! I go a few times every year and I always make sure to dress up. 
+    </p>
+    <section class="section">
+      <h2>Animals</h2>
+      <img class="image3" src="images/proimg7.jpg" alt="Picture of my 3 cats" width="300px" height="500px" />
+      <p>I love animals, especially cats! I have three cats named Yin, Nami and Sanji. They are my babies and I love them so much!
+    </p>
+    <h3>Outdoors</h3>
+    <img class="image2" src="images/proimg4.jpg" alt="Picture of me in the river" width="500px" height="400px" />
+    <p> I love doing things outside! Like camping, swimming and riding my bike.</p>
+    </section>
+
+
+
+
+    </section>
+  </main>
+</html>
diff --git a/contact.html b/contact.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <script defer src="index.js"></script>
+     <link rel="stylesheet" href="index.css" />
+    <title>Document</title>
+</head>
+<body>
+    <section class="info">
+    <a class="info" href="index.html">Home</a>
+    <a class="info" href="about.html">About</a>
+    <a class="info" href="portfolio.html">Portfolio</a>
+    <a class="active info" href="contact.html">Contact</a>
+    </section>
+</body>
+<main>
+<h1 class="header">Contact Me</h1>
+<section class="section">
+    <h2>Reach out to me!</h2>
+    <form>
+  <label for="fname">First name:</label>
+  <br>
+  <input type="text" id="fname" name="fname" value="John">
+  <br>
+  <label for="lname">Last name:</label>
+  <br>
+  <input type="text" id="lname" name="lname" value="Doe">
+  <br>
+  <label for="ename">Email</label>
+  <br>
+  <input type="text" id="email" name="email" placeholder="Email">
+  <br>
+  <input type="submit" value="Submit">
+</form>
+<br>
+<img class="image2"src="images/proimg5.jpg" alt="Pixel Image of a blonde girl with a cat" width="500px" height="500px">
+</main>
+</html>
diff --git a/images/Screenshot 2025-07-25 092433.png b/images/Screenshot 2025-07-25 092433.png
diff --git a/images/proimg1.jpg b/images/proimg1.jpg
diff --git a/images/proimg2.jpg b/images/proimg2.jpg
diff --git a/images/proimg3.jpg b/images/proimg3.jpg
diff --git a/images/proimg4.jpg b/images/proimg4.jpg
diff --git a/images/proimg5.jpg b/images/proimg5.jpg
diff --git a/images/proimg6.jpg b/images/proimg6.jpg
diff --git a/images/proimg7.jpg b/images/proimg7.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,93 @@
+
+html {
+  background-color: pink;
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+  gap: 8ch;
+  font-style: italic;
+  font-size: 1.5em;
+  justify-content: space-around;
+  color: black;
+  padding: .8%;
+  text-decoration: none;
+}
+
+.name {
+  font-family: system-ui;
+  color: black;
+  font-size: 2rem;
+  padding: 2%;
+}
+
+.image1 {
+  height: 500px;
+  width: 300px;
+  float: left;
+  padding: 1%;
+  margin: 200px 125px 80px;
+  box-shadow:  0 0 18px -2px black;
+}
+
+.quote {
+   font-family: 'Courier New', Courier, monospace;
+  color: black;
+  font-size: 40px;
+  font-weight: 100;
+  text-shadow: 1px 1px 2px black;
+  text-align: center;
+  margin-top: 4em;
+}
+
+.info2  {
+  font-family: cursive;
+  color: black;
+  font-size: 2.5rem;
+  padding: 3%;
+
+}
+
+.ect {
+
+  border: 3px solid black;
+  margin-top: 50px;
+  margin-bottom: 100px;
+  background-color: whitesmoke;
+
+}
+
+.active {
+border-bottom: 1px solid black;
+}
+
+.header {
+  font-family: 'Courier New', Courier, monospace;
+  color: black;
+  font-size: 5rem;
+  text-align: center;
+  margin-top: 20px;
+  border-bottom: 5px solid black;
+  box-shadow:  0 0 18px -2px black;
+   background-color: whitesmoke;
+}
+
+.section {
+  font-family: 'Courier New', Courier, monospace;
+  color: black;
+  font-size: 2rem;
+  text-align: center;
+  margin-top: 20px;
+  padding: 2%;
+}
+
+.image2 {
+    box-shadow:  0 0 20px -2px black; 
+}
+
+.image3 {
+ box-shadow:  0 0 20px -2px black;
+ transform: rotate(-0.25turn);
+}
+
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script defer src="index.js"></script>
+    <link rel="stylesheet" href="index.css" />
+    <title>Personal Website</title>
+  </head>
+<body>
+    <div class="name">
+      <h1>Briana Sweet</h1>
+    </div>
+    <section class="info">
+    <a class="active info" href="index.html">Home</a>
+    <a class="info" href="about.html">About</a>
+    <a class="info" href="portfolio.html">Portfolio</a>
+    <a class="info" href="contact.html">Contact</a>
+    </section>
+</header>
+<main>
+   <img class="image1" src="images/proimg6.jpg" width=500px height=500px alt="Selfie of Briana Sweet" /> 
+   <h2 class="info2 ect">Gamer, Coder, Cat Owner, Anime Lover</h2>
+   <p class="info2">I want to grow my knowledge on web development and coding, because it's fun for me!
+    </p>
+    <h3 class="quote">
+        "I don't stop when I'm tired. I only stop when I'm done."
+        <br />
+        -Marilyn Monroe
+    </h3>
+</main>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1 @@
+console.log("Hello, My Name Is Briana Sweet!");
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <script defer src="index.js"></script>
+     <link rel="stylesheet" href="index.css" />
+    <title>Document</title>
+</head>
+<body>
+    <section class="info">
+    <a class="info" href="index.html">Home</a>
+    <a class="info" href="about.html">About</a>
+    <a class="active info" href="portfolio.html">Portfolio</a>
+    <a class="info" href="contact.html">Contact</a>
+    </section>
+</body>
+<main>
+<h1 class="header">Portfolio</h1>
+<section class="section">
+<h2>Epiosde</h2>
+    <img src="https://play-lh.googleusercontent.com/ZNG0dIWUp8KPmtTFhvs8QUTyP_po_GKiNmB8QeVPUvH2Whb6mIz7ohsdJq9OxAKc3ykz" alt="Epiosde game logo" width="200px" height="200px">
+    <p>This was my very first introduction to coding. This uses,I believe, SQL and JavaScript. It's a choice based story game for mobile devices.
+    </p>
+    <br>
+    <h3>School Work</h3>
+    <img src="https://s3.us-east-1.amazonaws.com/fsa2-assets/assets/Logos/fullstack-academy-logo-full-color-rgb.jpg" alt="FullStack Academy Logo" width="800px" height="200px">
+    <p>I have already made many mini projects since class has started! I plan to make websites for my families and friends with businesses to grow my portfolio.</p>
+</section>
+
+</main>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		console.log("Hello, My Name Is Briana Sweet!");