diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..a573174f Binary files /dev/null and b/.DS_Store differ diff --git a/assests/.DS_Store b/assests/.DS_Store new file mode 100644 index 00000000..3fdbbb16 Binary files /dev/null and b/assests/.DS_Store differ diff --git a/assests/icons/emogi.svg b/assests/icons/emogi.svg new file mode 100644 index 00000000..d9914c18 --- /dev/null +++ b/assests/icons/emogi.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/gif.svg b/assests/icons/gif.svg new file mode 100644 index 00000000..8254f0eb --- /dev/null +++ b/assests/icons/gif.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/home.svg b/assests/icons/home.svg new file mode 100644 index 00000000..f938cee9 --- /dev/null +++ b/assests/icons/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/image.svg b/assests/icons/image.svg new file mode 100644 index 00000000..50752e9e --- /dev/null +++ b/assests/icons/image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/likes.svg b/assests/icons/likes.svg new file mode 100644 index 00000000..06e885e1 --- /dev/null +++ b/assests/icons/likes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/lists.svg b/assests/icons/lists.svg new file mode 100644 index 00000000..779976c6 --- /dev/null +++ b/assests/icons/lists.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/location.svg b/assests/icons/location.svg new file mode 100644 index 00000000..9e8ae066 --- /dev/null +++ b/assests/icons/location.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/messages.svg b/assests/icons/messages.svg new file mode 100644 index 00000000..8c55ea45 --- /dev/null +++ b/assests/icons/messages.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/more.svg b/assests/icons/more.svg new file mode 100644 index 00000000..c8aff172 --- /dev/null +++ b/assests/icons/more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/notification.svg b/assests/icons/notification.svg new file mode 100644 index 00000000..820abe8a --- /dev/null +++ b/assests/icons/notification.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/poll.svg b/assests/icons/poll.svg new file mode 100644 index 00000000..a8713216 --- /dev/null +++ b/assests/icons/poll.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/profile.svg b/assests/icons/profile.svg new file mode 100644 index 00000000..5a61a791 --- /dev/null +++ b/assests/icons/profile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/replies.svg b/assests/icons/replies.svg new file mode 100644 index 00000000..cea5a5c1 --- /dev/null +++ b/assests/icons/replies.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/retweets.svg b/assests/icons/retweets.svg new file mode 100644 index 00000000..e82482a2 --- /dev/null +++ b/assests/icons/retweets.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/schedule.svg b/assests/icons/schedule.svg new file mode 100644 index 00000000..89e21a20 --- /dev/null +++ b/assests/icons/schedule.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/search.svg b/assests/icons/search.svg new file mode 100644 index 00000000..6d4134b2 --- /dev/null +++ b/assests/icons/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/share.svg b/assests/icons/share.svg new file mode 100644 index 00000000..39f61e43 --- /dev/null +++ b/assests/icons/share.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/icons/twitter-logo.svg b/assests/icons/twitter-logo.svg new file mode 100644 index 00000000..4a0b3bbe --- /dev/null +++ b/assests/icons/twitter-logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assests/icons/views.svg b/assests/icons/views.svg new file mode 100644 index 00000000..06e885e1 --- /dev/null +++ b/assests/icons/views.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assests/images/.DS_Store b/assests/images/.DS_Store new file mode 100644 index 00000000..00e99d4f Binary files /dev/null and b/assests/images/.DS_Store differ diff --git a/assests/images/Charlie-pic.png b/assests/images/Charlie-pic.png new file mode 100644 index 00000000..1b032bb1 Binary files /dev/null and b/assests/images/Charlie-pic.png differ diff --git a/assests/images/Dennis-pic.png b/assests/images/Dennis-pic.png new file mode 100644 index 00000000..f587cb9e Binary files /dev/null and b/assests/images/Dennis-pic.png differ diff --git a/assests/images/Ongo-pic.png b/assests/images/Ongo-pic.png new file mode 100644 index 00000000..3c72641f Binary files /dev/null and b/assests/images/Ongo-pic.png differ diff --git a/assests/images/Profile pic.jpg b/assests/images/Profile pic.jpg new file mode 100644 index 00000000..2c389ab5 Binary files /dev/null and b/assests/images/Profile pic.jpg differ diff --git a/backup.html b/backup.html new file mode 100644 index 00000000..6eb4967e --- /dev/null +++ b/backup.html @@ -0,0 +1,271 @@ + + + + + + + Twitter + + +
+
+
+ +
+ +
+
+
+
+
+
+

Home

+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+

Charlie

+
@fightmilk
+
30s
+
+

I eat a sticker, am I gonna die now?

+
+ + + + +
+
+
+
+
+ +
+
+
+

Ongo

+
@theArtCollector
+
1m
+
+

As an esteemed connoisseur of the arts, I must say the latest exhibit in downtown Philadelphia is an insult to the very essence of creativity. It's like a toddler's finger painting gone wrong

+
+ + + + +
+
+
+
+
+ +
+
+
+

MantisToboggan

+
@MToboggan
+
30m
+
+

What an honour to be seeing Ongo in the flesh @theArtCollector

+
+ + + + +
+
+
+
+
+ +
+
+
+

Ongo

+
@theArtCollector
+
60m
+
+

Can't wait for the opening of the new gallery! @paddysPub

+
+ + + + +
+
+
+
+
+ +
+
+
+

Charlie

+
@fightmilk
+
2h
+
+

Do wasps make honey?

+
+ + + + +
+
+
+
+
+ +
+
+
+

Dennis

+
@GoldenGod
+
2h
+
+

Eddie Bower edition, tortoise-shell interior, super-charged twin cam, European luxury sports utility vehicle for sale. A finisher car. DM for details

+
+ + + + +
+
+
+
+ +
+
+
+
+ +
+
+

What's happening

+
+
+
+

Who to follow

+
+
+
+
+
+ +
+ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..1e5953a2 --- /dev/null +++ b/index.html @@ -0,0 +1,292 @@ + + + + + + + Twitter + + +
+
+

Home

+
+
+
+
+ +
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+

Charlie

+
@fightmilk
+
30s
+
+

I eat a sticker, am I gonna die now?

+
+ + + + +
+
+
+
+
+ +
+
+
+

Ongo

+
@theArtCollector
+
1m
+
+

As an esteemed connoisseur of the arts, I must say the latest exhibit in downtown Philadelphia is an insult to the very essence of creativity. It's like a toddler's finger painting gone wrong

+
+ + + + +
+
+
+
+
+ +
+
+
+

MantisToboggan

+
@MToboggan
+
30m
+
+

What an honour to be seeing Ongo in the flesh @theArtCollector

+
+ + + + +
+
+
+
+
+ +
+
+
+

Ongo

+
@theArtCollector
+
60m
+
+

Can't wait for the opening of the new gallery! @paddysPub

+
+ + + + +
+
+
+
+
+ +
+
+
+

Charlie

+
@fightmilk
+
2h
+
+

Do wasps make honey?

+
+ + + + +
+
+
+
+
+ +
+
+
+

Dennis

+
@GoldenGod
+
2h
+
+

Eddie Bower edition, tortoise-shell interior, super-charged twin cam, European luxury sports utility vehicle for sale. A finisher car. DM for details

+
+ + + + +
+
+
+
+ +
+
+
+
+ +
+
+

What's happening

+
+
+
+

Who to follow

+
+
+
+
+
+ +
+
+
+ home icon +
+
+ search icon +
+
+ notification icon +
+
+ message icon +
+
+ profile icon +
+
+ +
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..d78776b6 --- /dev/null +++ b/style.css @@ -0,0 +1,372 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + display: grid; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.container { + display: grid; + height: 100vh; + grid-template: + 'left header right'70px + 'left main right' 1fr + 'footer main right'70px/ + 1fr minmax(600px, 2fr) 1fr; +} + +.left { + grid-area: left; + background-color: white; +} + +main { + grid-area: main; + background-color: white; +} + +.right { + grid-area: right; + background-color: white; +} + +footer { + grid-area: footer; + background-color: white; +} + +.footer-container { + grid-template-columns: 1fr 3fr; + border-top: 1px solid rgb(207, 207, 207); +} + + +.left-container{ + grid-template-rows: 3fr 1fr; +} + +#twitter-logo { + width: 40px; +} + +.headings { + grid-template-rows: 50px; + width: 1%; +} + +.tweet-button { + border: 2px solid rgb(30, 143, 255); + border-radius: 40px; + background-color: rgb(30, 143, 255); + color: white; + font-size: larger; + font-weight: bold; + margin: 20px 30px 110px 30px; + place-content: center; +} + +.tweet-button:hover { + background-color: rgb(24, 121, 218); + cursor: pointer; +} + + +.menu { + grid-template-rows: 1fr; + border: 2px dotted white; + gap: 5%; + margin-left: 100px; +} + +.profile-name { + grid-template-rows: 1fr 1fr; + place-content: center; + margin: 10px 130px 0 0; +} + +.logo-box { + margin: 10px 10px 0 0; +} + +.menu-box { + grid-template-columns: 4rem 4rem; + margin-right: 60px; + padding: 2%; +} + +.menu-icon { + width: 30px; +} + +.menu-box:hover { + background-color: rgb(147, 201, 255) ; + border-radius: 70px; + cursor: pointer; +} + +.menu-box:active { + color: white; +} + + +.send-tweet-button:hover { + background-color: rgb(24, 121, 218); + cursor: pointer; +} + + + +.header { + grid-area: header; + grid-template-columns: 3fr 1fr; + border-bottom: 1px solid rgb(207, 207, 207); + border-left: 1px solid rgb(207, 207, 207); + border-right: 1px solid rgb(207, 207, 207); + padding: 5px; +} + +.header .box { + padding: 15px; +} + +.feed { + border-left: 1px solid rgb(207, 207, 207); + border-right: 1px solid rgb(207, 207, 207); +} + + +.write-tweet { + border-bottom: 5px solid rgb(207, 207, 207); + grid-template-rows: 1fr 1fr; +} + +.write-tweet .new-tweet { + grid-template-columns: 1fr 6fr; +} + +.profile-pic { + place-content: center; +} + +.user-pic { + width: 50px; + border-radius: 40px; +} +.user-pic-ongo { + height: 50px; + width: 50px; + border-radius: 50%; +} + +#enter-text { + font-size: medium; + border: none; + outline: none; + height: 75%; + margin: 10px 10px 0 0; +} + +.write-tweet .attachments { + grid-template-columns: 5fr 1fr; +} + +.write-tweet .attachments .attachment-icons { + place-content: center; + grid-template-columns: repeat(5, 3rem); + margin-right: 150px; +} + +.add-icon { + width: 28px; +} + +.add-icon:hover { + background-color: rgb(147, 201, 255); + border-radius: 100px; + cursor: pointer; +} + +.send-tweet-button { + border: 2px solid rgb(30, 143, 255); + border-radius: 40px; + background-color: rgb(30, 143, 255); + margin: 20px 10px; + place-content: center; + color: white; + font-size: small; + font-weight: bold; +} + +.tweets { + border-bottom: 1px solid rgb(207, 207, 207); + grid-template-columns: 1fr 6fr; +} + +.response { + grid-template-columns: repeat(4, 1fr); +} + +.response img { + width: 20px; +} + +.replies:hover{ + background-color: rgb(147, 201, 255); + border-radius: 100px; + padding: 2px; + cursor: pointer; +} + +.likes:hover { + background-color: rgba(255, 62, 120, 0.723); + border-radius: 100px; + padding: 2px; + cursor: pointer; +} + +.retweets:hover { + background-color: rgba(57, 255, 2, 0.599); + border-radius: 100px; + padding: 2px; + cursor: pointer; +} + +.share:hover { + background-color: rgb(147, 201, 255); + border-radius: 100px; + padding: 2px; + cursor: pointer; +} + +.details { + grid-template-columns: 1fr 1fr 3fr; + width: 50%; + margin-top: 10px; +} + +.time-posted { + margin-left: 40px; +} + + +.right-container { + grid-template: + 'header' 70px + 'explore'1fr/ + 1fr; +} + +.search { + grid-area: header; +} + +.search-bar { + grid-template-columns: 40px 1fr; + border: 1px solid rgb(220, 220, 220); + border-radius: 40px; + padding: 5px; + margin: 5px; + background-color: rgb(220, 220, 220); +} + +#search { + background-color:rgb(220, 220, 220); + border-radius: 0 40px 40px 0; + border: none; + outline: none; + font-size: medium; +} + +.search-bar-icon { + width: 20px; +} + +.search-icon { + place-content: center; +} + +.explore { + grid-area: explore; +} + +.news, .recommendation { + grid-template: + 'header' 50px + 'content' 1fr/ + 1fr; + border: 2px solid rgb(239, 239, 239); + background-color: rgb(239, 239, 239); + border-radius: 10px; + margin: 5px; + padding: 5px; +} +.heading { + grid-area: header; + border-bottom: 2px solid rgb(201, 201, 201); +} + +.content { + grid-area: content; +} + +.mobile-menu-icon { + grid-template-columns: repeat(5, 1fr); + padding: 10px; + margin: 5px; + place-items: center; + cursor: pointer; +} + +.mobile-menu-icon .menu-icon:hover { + background-color: rgb(147, 201, 255) ; + border-radius: 70px; +} + + + +@media screen and (max-width: 600px){ + .container { + grid-template: + 'main' 1fr + 'footer' 55px/ + 1fr; + } + + main { + grid-area: main; + } + + .mobile-menu { + grid-area: footer; + } + + .left, .right, footer, .header { + display: none; + } +} + +@media screen and (min-width: 600px) and (max-width: 900px){ + .container { + grid-template-columns: 150px 1fr; + } + .right, footer, .menu-tweet-button, .mobile-menu { + display: none; + } +} + +@media screen and (min-width: 900px) and (max-width: 1470px){ + .container { + grid-template-columns: 1fr 2fr 1fr; + } + .mobile-menu { + display: none; + } +} + + + + +script, title { + display: none; +} \ No newline at end of file