finish lab

README.md

@@ -22,7 +22,7 @@ Edit multiple JavaScript files in this lab as you get the hang of creating and u
 
 1. Ask your instructor if you will deploy this application to Netlify. If so, wait for the lesson on deployment to deploy and add the link to your netlify site below:
 
-[MY LIVE SITE URL]()
+[MY LIVE SITE URL](https://aishas-intro-to-react-lab-10-2.netlify.app/#)
 
 1. If you won't deploy this site, submit the URL to this GitHub repository.
 

src/App.jsx

@@ -1,8 +1,27 @@
 import React from "react";
 import "./index.css";
+import NavBar from "./Components/NavBar";
+import UserProfile from "./Components/UserProfile";
+import Posts from "./Components/Posts";
+import Contacts from "./Components/Contacts";
 
 function App() {
-  return <p>Hello, world!</p>;
+  return (
+    <>
+      <header>
+        <NavBar />
+      </header>
+      <main>
+        <section>
+          <UserProfile />
+          <Posts />
+        </section>
+        <section className="contacts">
+          <Contacts />
+        </section>
+      </main>
+    </>
+  );
 }
 
 export default App;

src/Components/ContactUserCard.jsx

@@ -0,0 +1,16 @@
+const ContactUserCard = () => {
+  return (
+    <div className="contact-user-card">
+      <section>
+        <img src="../profile.png" alt="profile" />
+      </section>
+      <section className="card-description">
+        <h2>Jordan Walke</h2>
+        <h3>React Creator</h3>
+        <p>Lorem ipsum!</p>
+      </section>
+    </div>
+  );
+};
+
+export default ContactUserCard;

src/Components/Contacts.jsx

@@ -0,0 +1,15 @@
+import ContactUserCard from "./ContactUserCard";
+
+const Contacts = () => {
+  return (
+    <div>
+      <h3>Contacts</h3>
+      <ContactUserCard />
+      <ContactUserCard />
+      <ContactUserCard />
+      <ContactUserCard />
+    </div>
+  );
+};
+
+export default Contacts;

src/Components/NavBar.jsx

@@ -0,0 +1,11 @@
+const NavBar = () => {
+  return (
+    <nav>
+      <a href="#">What is Pursuit?</a>
+      <a href="#">Create an account</a>
+      <a href="#">Sign in</a>
+    </nav>
+  );
+};
+
+export default NavBar;

src/Components/Post.jsx

@@ -0,0 +1,10 @@
+const Post = () => {
+  return (
+    <div className="post">
+      <h4>Title</h4>
+      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
+    </div>
+  );
+};
+
+export default Post;

src/Components/Posts.jsx

@@ -0,0 +1,14 @@
+import Post from "./Post";
+
+const Posts = () => {
+  return (
+    <div className="posts">
+      <h3>Posts</h3>
+      <Post />
+      <Post />
+      <Post />
+    </div>
+  );
+};
+
+export default Posts;

src/Components/UserProfile.jsx

@@ -0,0 +1,16 @@
+const UserProfile = () => {
+  return (
+    <div className="user-profile">
+      <section id="profile-img">
+        <img src="../profile.png" alt="profile" />
+      </section>
+      <aside id="profile-description">
+        <h2>Jordan Walke</h2>
+        <h3>React Creator</h3>
+        <p>Lorem ipsum!</p>
+      </aside>
+    </div>
+  );
+};
+
+export default UserProfile;

src/index.css

@@ -1,6 +1,11 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 body {
   font-family: sans-serif;
-  margin: 0;
 }
 
 html,
@@ -9,3 +14,112 @@ body,
   height: 100%;
   width: 100%;
 }
+
+nav {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.6em;
+  padding-right: 25px;
+  background-color: mistyrose;
+  width: 100%;
+  height: 150px;
+}
+
+a {
+  text-decoration: none;
+  color: rgb(105, 5, 5);
+  background-color: gold;
+  border-radius: 10px;
+  padding: 7px;
+  font-weight: bolder;
+}
+
+main {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 10px;
+  padding: 15px;
+}
+
+.user-profile {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-content: space-between;
+  height: 145px;
+  border: 2px solid burlywood;
+  width: 60vw;
+  margin: 5px;
+  gap: 10px;
+}
+
+#profile-img {
+  width: 20%;
+}
+
+#profile-img img {
+  width: 100%;
+}
+
+#profile-description {
+  display: flex;
+  flex-direction: column;
+  color: rgb(65, 2, 2);
+}
+
+.posts {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-content: space-between;
+  border: 2px solid burlywood;
+  width: 60vw;
+  margin: 5px;
+  gap: 10px;
+}
+
+.posts h3 {
+  text-align: center;
+}
+
+.post {
+  border: 2px solid burlywood;
+  margin: 0.7em;
+  padding: 0.7em;
+}
+
+.post h4,
+.post p {
+  text-align: center;
+}
+
+.contacts {
+  border: 2px solid burlywood;
+}
+
+.contacts h3 {
+  text-align: center;
+}
+
+.contact-user-card {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 15px;
+  border: 2px solid burlywood;
+  margin: 2em;
+}
+
+.card-description {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-content: space-evenly;
+  gap: 10px;
+  margin-left: 1em;
+}
+
+.contact-user-card h4 {
+  font-size: 15px;
+}