diff --git a/Project-I-Social-Card/social-card/src/App.js b/Project-I-Social-Card/social-card/src/App.js
index 169d9c5964..5886eb1826 100644
--- a/Project-I-Social-Card/social-card/src/App.js
+++ b/Project-I-Social-Card/social-card/src/App.js
@@ -1,22 +1,13 @@
import React from 'react';
import './App.css';
+import HeaderContainer from './components/HeaderComponents/HeaderContainer';
+import CardContainer from './components/CardComponents/CardContainer'
const App = () => {
return (
-
Welcome to React Social Card!
-
- Begin by exploring the `components` directory. You'll notice we have a
- few files that we've already included in there to get you started right
- away building components. You'll need to make sure you include your
- components that you build in this file to watch your app come to life
-
-
-
- Don't forget to `default export` your components and import them here
- inside of this file in order to make them work.
-
-
+
+
);
};
diff --git a/Project-I-Social-Card/social-card/src/components/CardComponents/Card.css b/Project-I-Social-Card/social-card/src/components/CardComponents/Card.css
index ac1445c1ac..c0ccac53f9 100644
--- a/Project-I-Social-Card/social-card/src/components/CardComponents/Card.css
+++ b/Project-I-Social-Card/social-card/src/components/CardComponents/Card.css
@@ -1 +1,27 @@
/* All styles for your Card Components live here */
+
+.banner {
+ width: 575px;
+ border-radius: 5px;
+}
+
+.bold {
+ font-weight: bold;
+}
+
+.source {
+ color : lightgray;
+}
+
+.card {
+ width: 550px;
+ padding-left: 10px;
+
+}
+
+.card-container {
+ border: 1px solid lightgray;
+ border-radius: 5px;
+ width: 575px;
+ margin-left: 60px;
+}
\ No newline at end of file
diff --git a/Project-I-Social-Card/social-card/src/components/CardComponents/CardBanner.js b/Project-I-Social-Card/social-card/src/components/CardComponents/CardBanner.js
index be22b48bec..bb8f16b343 100644
--- a/Project-I-Social-Card/social-card/src/components/CardComponents/CardBanner.js
+++ b/Project-I-Social-Card/social-card/src/components/CardComponents/CardBanner.js
@@ -1,2 +1,13 @@
import React from 'react';
import './Card.css';
+import banner from './banner.png'
+
+const CardBanner = () => {
+ return (
+
+
+
+ )
+}
+
+export default CardBanner
\ No newline at end of file
diff --git a/Project-I-Social-Card/social-card/src/components/CardComponents/CardContainer.js b/Project-I-Social-Card/social-card/src/components/CardComponents/CardContainer.js
index be22b48bec..e1c6b33ee6 100644
--- a/Project-I-Social-Card/social-card/src/components/CardComponents/CardContainer.js
+++ b/Project-I-Social-Card/social-card/src/components/CardComponents/CardContainer.js
@@ -1,2 +1,15 @@
import React from 'react';
import './Card.css';
+import CardBanner from './CardBanner';
+import CardContent from './CardContent';
+
+const CardContainer = () => {
+ return (
+
+
+
+
+ )
+}
+
+export default CardContainer
\ No newline at end of file
diff --git a/Project-I-Social-Card/social-card/src/components/CardComponents/CardContent.js b/Project-I-Social-Card/social-card/src/components/CardComponents/CardContent.js
index be22b48bec..6bd2702ab9 100644
--- a/Project-I-Social-Card/social-card/src/components/CardComponents/CardContent.js
+++ b/Project-I-Social-Card/social-card/src/components/CardComponents/CardContent.js
@@ -1,2 +1,15 @@
import React from 'react';
import './Card.css';
+
+const CardContent = () => {
+ return (
+
+
Get Started with React
+
React makes it painless to create interactive UIs. Design simple views for
+
each state in your application.
+
reactjs.org
+
+ )
+}
+
+export default CardContent
\ No newline at end of file
diff --git a/Project-I-Social-Card/social-card/src/components/CardComponents/banner.png b/Project-I-Social-Card/social-card/src/components/CardComponents/banner.png
new file mode 100644
index 0000000000..b8965c5788
Binary files /dev/null and b/Project-I-Social-Card/social-card/src/components/CardComponents/banner.png differ
diff --git a/Project-I-Social-Card/social-card/src/components/HeaderComponents/Header.css b/Project-I-Social-Card/social-card/src/components/HeaderComponents/Header.css
index 3c3dff33f5..42a0cf3309 100644
--- a/Project-I-Social-Card/social-card/src/components/HeaderComponents/Header.css
+++ b/Project-I-Social-Card/social-card/src/components/HeaderComponents/Header.css
@@ -1 +1,21 @@
/* All styles for your header Components live here */
+.account {
+ display: flex;
+}
+
+.handle-date {
+ margin-left: 10px;
+ color: lightgray;
+}
+
+.logo {
+ width: 50px;
+ height: 50px;
+ margin-right: 10px;
+}
+
+.header {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: flex-end;
+}
\ No newline at end of file
diff --git a/Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderContainer.js b/Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderContainer.js
index 3ebb4a77ea..9aa481e75b 100644
--- a/Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderContainer.js
+++ b/Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderContainer.js
@@ -1,2 +1,13 @@
import React from 'react';
import './Header.css';
+import HeaderContent from './HeaderContent';
+
+const HeaderContainer = () => {
+ return (
+
+
+
+ )
+}
+
+export default HeaderContainer;
\ No newline at end of file
diff --git a/Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderContent.js b/Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderContent.js
index 3ebb4a77ea..7b382ff989 100644
--- a/Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderContent.js
+++ b/Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderContent.js
@@ -1,2 +1,15 @@
import React from 'react';
import './Header.css';
+import HeaderTitle from './HeaderTitle';
+import ImageThumbnail from './ImageThumbnail'
+
+const HeaderContent = () => {
+ return (
+
+
+
+
+ )
+}
+
+export default HeaderContent
\ No newline at end of file
diff --git a/Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderTitle.js b/Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderTitle.js
index 3ebb4a77ea..2da6a31b3e 100644
--- a/Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderTitle.js
+++ b/Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderTitle.js
@@ -1,2 +1,20 @@
import React from 'react';
import './Header.css';
+
+const HeaderTitle = () => {
+ return (
+
+
+
Lambda School
+
@lambdaSchool - 26 Jan
+
+
+
Let's learn React by building simple interfaces with components. Don't try to
+
overthink it, just keep it simple and have fun. Once you feel comfortable using
+
components you are well on your way to mastering React!
+
+
+ )
+}
+
+export default HeaderTitle
\ No newline at end of file
diff --git a/Project-I-Social-Card/social-card/src/components/HeaderComponents/ImageThumbnail.js b/Project-I-Social-Card/social-card/src/components/HeaderComponents/ImageThumbnail.js
index 3ebb4a77ea..c9f7a3ef23 100644
--- a/Project-I-Social-Card/social-card/src/components/HeaderComponents/ImageThumbnail.js
+++ b/Project-I-Social-Card/social-card/src/components/HeaderComponents/ImageThumbnail.js
@@ -1,2 +1,13 @@
import React from 'react';
import './Header.css';
+import LambdaLogo from './LambdaLogo.png'
+
+const ImageThumbnail = () => {
+ return (
+
- We have given you a starter project. You'll want to build out your
- components in their respective files, remove this code and replace it
- with the proper components.
-
-
-
- Don't forget to `default export` your components and import them here
- inside of this file in order to make them work.
-
-