diff --git a/data.js b/data.js
index 458d53d..44f8d37 100644
--- a/data.js
+++ b/data.js
@@ -2,11 +2,12 @@ let data = [
{
name: "Kaleb Burd",
handle: "@kburd",
- message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim mollis sem, vel dignissim sem tempor eleifend. Vivamus et elit dapibus, porttitor nulla sed, blandit ex. -Kaleb",
+ message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. -Kaleb",
time: "1:40 PM",
date: "16 Mar 20",
retweets: 6054,
- likes: 27700
+ likes: 27700,
+ image: "https://images.unsplash.com/photo-1596550190729-1d9225e788dd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80 "
},
{
name: "Vlad Putin",
@@ -15,7 +16,8 @@ let data = [
time: "4:51 PM",
date: "22 Jun 20",
retweets: 4,
- likes: 27
+ likes: 27,
+ image: "https://images.unsplash.com/photo-1611934786226-7caa0c3654a9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=582&q=80 "
},
{
name: "Jack Dorsey",
@@ -24,7 +26,8 @@ let data = [
time: "4:51 PM",
date: "22 Jun 20",
retweets: 4,
- likes: 27
+ likes: 27,
+ image: "https://images.unsplash.com/photo-1611162618479-ee3d24aaef0b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2167&q=80 "
},
{
name: "Leon Jenkins",
@@ -33,7 +36,8 @@ let data = [
time: "1:00 AM",
date: "1 May 89",
retweets: 123,
- likes: 27334
+ likes: 27334,
+ image: "https://images.unsplash.com/photo-1596550190729-1d9225e788dd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80 "
},
{
name: "Mark Zuck",
@@ -42,6 +46,41 @@ let data = [
time: "3:59 PM",
date: "24 Dec 19",
retweets: 0,
- likes: 0
+ likes: 0,
+ image: "https://images.unsplash.com/photo-1595287137144-cf60a87f39d9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80 "
}
-]
\ No newline at end of file
+]
+
+for (let i = 0; i < data.length; i++) {
+ let name = data[i].name;
+ let image = data[i].image;
+ let handle = data[i].handle;
+ let message = data[i].message;
+ let time = data[i].time;
+ let date = data[i].date;
+ let retweets = data[i].retweets;
+ let likes = data[i].likes;
+ let tweet = document.createElement('div');
+ tweet.classList.add('tweet');name
+ tweet.innerHTML =
+`
+
+
+
+
+`
+document.getElementById('post').appendChild(tweet);
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b5db310
--- /dev/null
+++ b/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+ Twitter
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..f6ccf4c
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,78 @@
+* {
+ box-sizing: border-box;
+ margin:0;
+ padding:0;
+}
+h1 {
+ text-align: center;
+ color: blue;
+}
+.tweet {
+ padding: 1rem;
+ width: 598px;
+ height: 262px;
+ display: flex;
+ flex-direction: column;
+ margin: auto;
+ border: 2px solid black;
+ margin-bottom: 1.25rem;
+}
+.tweet__bio {
+ margin-bottom: 1rem;
+ display: flex;
+}
+.tweet__bio__picture {
+ height: 75px;
+ width:75px;
+ border-radius: 50%;
+ background-color: grey;
+}
+.tweet__content {
+ justify-content: center;
+ font-size: 1.25rem;
+ margin-top: 50px;
+}
+.tweet__time-stamp {
+ display: flex;
+ align-items: flex-end;
+ border-bottom: 1px solid rgba(0,0,0,.3);
+ padding-bottom: .5rem;
+ margin-top:1rem;
+}
+.tweet__time-stamp p {
+ margin-right: 1rem;
+}
+.tweet__social {
+ display: flex;
+ margin-top: 1rem;
+ align-items: center;
+ padding-bottom: 1rem;
+}
+.tweet__social p {
+ margin-right: 1rem;
+}
+.tweet__bio__name {
+ justify-content: center;
+ display: flex;
+ flex-direction: column;
+ margin-left:3rem;
+ margin-top: -70px;
+ margin-left: 90px;
+}
+.blue-link{
+ color: blue;
+}
+.at-name{
+ color: #8d8686c4;
+}
+
+
+
+
+
+
+
+
+
+
+