diff --git a/images/bus-hijacked.png b/images/bus-hijacked.png new file mode 100644 index 00000000..70bec427 Binary files /dev/null and b/images/bus-hijacked.png differ diff --git a/images/eric-photo.jpg b/images/eric-photo.jpg new file mode 100644 index 00000000..c42c45ee Binary files /dev/null and b/images/eric-photo.jpg differ diff --git a/images/example.png b/images/example.png deleted file mode 100644 index ae573d46..00000000 Binary files a/images/example.png and /dev/null differ diff --git a/images/group-docs-photo.jpg b/images/group-docs-photo.jpg new file mode 100644 index 00000000..4553568a Binary files /dev/null and b/images/group-docs-photo.jpg differ diff --git a/images/group-post.jpg b/images/group-post.jpg new file mode 100644 index 00000000..81d7c8bf Binary files /dev/null and b/images/group-post.jpg differ diff --git a/images/icons/interactive-icons/bookmark.svg b/images/icons/interactive-icons/bookmark.svg new file mode 100644 index 00000000..ba88fbae --- /dev/null +++ b/images/icons/interactive-icons/bookmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/interactive-icons/like.svg b/images/icons/interactive-icons/like.svg new file mode 100644 index 00000000..6fcd2015 --- /dev/null +++ b/images/icons/interactive-icons/like.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/interactive-icons/reply.svg b/images/icons/interactive-icons/reply.svg new file mode 100644 index 00000000..87438e7c --- /dev/null +++ b/images/icons/interactive-icons/reply.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/interactive-icons/repost.svg b/images/icons/interactive-icons/repost.svg new file mode 100644 index 00000000..e9d9d95b --- /dev/null +++ b/images/icons/interactive-icons/repost.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/interactive-icons/share.svg b/images/icons/interactive-icons/share.svg new file mode 100644 index 00000000..52405e8b --- /dev/null +++ b/images/icons/interactive-icons/share.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/interactive-icons/view.svg b/images/icons/interactive-icons/view.svg new file mode 100644 index 00000000..f6d1917b --- /dev/null +++ b/images/icons/interactive-icons/view.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/nav-icons/bookmarks.svg b/images/icons/nav-icons/bookmarks.svg new file mode 100644 index 00000000..f231144d --- /dev/null +++ b/images/icons/nav-icons/bookmarks.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/nav-icons/explore.svg b/images/icons/nav-icons/explore.svg new file mode 100644 index 00000000..0fdec9d8 --- /dev/null +++ b/images/icons/nav-icons/explore.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/nav-icons/home.svg b/images/icons/nav-icons/home.svg new file mode 100644 index 00000000..d6c382d0 --- /dev/null +++ b/images/icons/nav-icons/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/nav-icons/lists.svg b/images/icons/nav-icons/lists.svg new file mode 100644 index 00000000..f41f874a --- /dev/null +++ b/images/icons/nav-icons/lists.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/nav-icons/messages.svg b/images/icons/nav-icons/messages.svg new file mode 100644 index 00000000..e0a75898 --- /dev/null +++ b/images/icons/nav-icons/messages.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/nav-icons/more.svg b/images/icons/nav-icons/more.svg new file mode 100644 index 00000000..56a60fcf --- /dev/null +++ b/images/icons/nav-icons/more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/nav-icons/notifications.svg b/images/icons/nav-icons/notifications.svg new file mode 100644 index 00000000..9ef99b15 --- /dev/null +++ b/images/icons/nav-icons/notifications.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/nav-icons/profile.svg b/images/icons/nav-icons/profile.svg new file mode 100644 index 00000000..49d4a867 --- /dev/null +++ b/images/icons/nav-icons/profile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/other-icons/more.svg b/images/icons/other-icons/more.svg new file mode 100644 index 00000000..6d2c1ec6 --- /dev/null +++ b/images/icons/other-icons/more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/other-icons/search.svg b/images/icons/other-icons/search.svg new file mode 100644 index 00000000..d6d9028a --- /dev/null +++ b/images/icons/other-icons/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/other-icons/settings.svg b/images/icons/other-icons/settings.svg new file mode 100644 index 00000000..bf39f0cb --- /dev/null +++ b/images/icons/other-icons/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/other-icons/trusted.svg b/images/icons/other-icons/trusted.svg new file mode 100644 index 00000000..d1a9c285 --- /dev/null +++ b/images/icons/other-icons/trusted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/post-icons/emoji.svg b/images/icons/post-icons/emoji.svg new file mode 100644 index 00000000..b1323576 --- /dev/null +++ b/images/icons/post-icons/emoji.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/post-icons/gif.svg b/images/icons/post-icons/gif.svg new file mode 100644 index 00000000..ff0994e9 --- /dev/null +++ b/images/icons/post-icons/gif.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/post-icons/media.svg b/images/icons/post-icons/media.svg new file mode 100644 index 00000000..a0c15bbb --- /dev/null +++ b/images/icons/post-icons/media.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/post-icons/poll.svg b/images/icons/post-icons/poll.svg new file mode 100644 index 00000000..8ae0472d --- /dev/null +++ b/images/icons/post-icons/poll.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/post-icons/schedule.svg b/images/icons/post-icons/schedule.svg new file mode 100644 index 00000000..537390ed --- /dev/null +++ b/images/icons/post-icons/schedule.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 00000000..ea19debd --- /dev/null +++ b/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/new zealand.png b/images/new zealand.png new file mode 100644 index 00000000..dcfa41a9 Binary files /dev/null and b/images/new zealand.png differ diff --git a/images/nicolas-profile-photo.png b/images/nicolas-profile-photo.png new file mode 100644 index 00000000..aad80645 Binary files /dev/null and b/images/nicolas-profile-photo.png differ diff --git a/images/twitter.png b/images/twitter.png deleted file mode 100644 index cbde8a4d..00000000 Binary files a/images/twitter.png and /dev/null differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..75069d3e --- /dev/null +++ b/index.html @@ -0,0 +1,627 @@ + + + + + + + Home / X + + + +
+ + + +
+
+

Home

+
+ +
+
+
+ +
+
+ user-photo +
+ +
+ + +
+
+
+ +
+ eric-photo +
+
+

Eric Elliott Retweeted

+
+

woki GITer COINs

+

@owocki

+

.

+

26m

+
+ +

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit👋 +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit 🍔 +

+ +
+
+ +
+ +
+ +
+ + + +
+ +
+
+
+
+ +
+
+ +
+
+ eric-photo +
+
+
+

GroupDocs

+

@GroupDocs

+
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. + Veritatis ea dolorum id nemo facilis quibusdam quasi ab + excepturi itaque. Et non laboriosam nulla reprehenderit facilis + ducimus, magni error laudantium deleniti! +

+

+ Lorem ipsum dolor sit amet consectetur +

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

What's happening?

+
+ +
+
+
+

News

+

.

+

LIVE

+
+
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. + Esse, +

+

+ Trending with Belfast, Northern Ireland +

+
+
+
+ bus photo. +
+
+ +
+

#MeetTheRichardsons

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. +

+

↗️Promoted by Dave

+
+ +
+
+
+

Politics

+

.

+

Trending

+
+ +

Alex Jones

+

46.5k Tweets

+
+ +
+ +
+
+ +
+
+
+

Politics

+

.

+

Trending

+
+ +

Hong Kong

+

36k Tweets

+
+ +
+ +
+
+ +
+
+
+
Bloomberg Quick...
+
+ + + + + +
+
+
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. + Esse, +

+
+
+
+ bus photo. +
+
+
+
+
+ + diff --git a/style/colors.css b/style/colors.css new file mode 100644 index 00000000..bcbcccb9 --- /dev/null +++ b/style/colors.css @@ -0,0 +1,43 @@ +:root { + --primary-font-color: #0f141a; + --secondary-font-color: #546373; + + --placeholder-font-color: #989797; + + --search-bar-focus-b-color: #3d91f9; + + --anchor-font-color: #3d91f9; + + --border-color: #e7e7e8; + + --setting-icon-hover-color: #e7e7e8; + + --notification-sign-bg-color: #3d91f9; + + --nav-icon-hover-gb-color: #e7e7e8; + + --tweet-btn-color: #fff; + --tweet-btn-bg-color: #3d91f9; + --tweet-btn-hover-bg-color: #3684e0; + + --tweet-icon-color: #3d91f9; + --tweet-icon-hover-bg-color: #ebf4fe; + + /****** interactive ******/ + --like-icon-hover-color: #fd419e; + --like-icon-hover-bg-color: #f8deeb; + + --repost-icon-hover-color: #50d6a0; + --repost-icon-hover-bg-color: #def2ea; + + --share-btn-color: #fff; + --share-btn-bg-color: #9ec8fc; + + --tweet-hover-bg-color: #f7f7f7; + + --right-bar-card-bg-color: #f7f9f9; + --right-bar-card-hover-bg-color: #eff1f1; + + --search-bar-bg-color: #eff3f4; + --search-active-active-border-color: #57a0fa; +} diff --git a/style/left-hand-menu.css b/style/left-hand-menu.css new file mode 100644 index 00000000..a1cecb53 --- /dev/null +++ b/style/left-hand-menu.css @@ -0,0 +1,160 @@ +.left-hand-menu { + grid-column: 1 / 2; + grid-row: 1 / 3; + + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 50px 500px auto; + grid-auto-flow: row; +} + +.left-hand-menu > *:last-child { + margin-top: 50px; +} + +/****** Logo div ******/ +.logo-icon-div { + width: 45px; + height: 45px; + + border-radius: 50%; + + display: flex; + justify-content: center; + align-items: center; +} + +.logo-icon-div:hover { + cursor: pointer; + background-color: var(--nav-icon-hover-gb-color); +} + +/****** nav menu div ******/ +.nav-menu { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + grid-auto-flow: row; + gap: 5px; +} + +.nav-menu > * { + display: flex; + align-items: flex-start; + align-items: center; +} + +.nav-menu div:last-child:hover { + background-color: transparent; +} + +.home-icon { + position: relative; +} + +.notification-sign { + width: 8px; + height: 8px; + + background-color: var(--tweet-btn-bg-color); + border-radius: 50%; + + position: absolute; + top: -3px; + right: 3px; +} + +.home p { + font-weight: bold; +} + +.link { + padding: 10px; + border-radius: 25px; +} + +.link, +.div-btn { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 10px; + + text-decoration: none; +} + +.link:hover { + background-color: var(--nav-icon-hover-gb-color); + cursor: pointer; +} + +.link:visited { + color: #000; +} + +.tweet-btn { + color: var(--tweet-btn-color); + background-color: var(--tweet-btn-bg-color); + + font-weight: bold; + letter-spacing: 0.5px; + + padding: 12px 70px; + border-radius: 25px; +} + +.tweet-btn:hover { + background-color: var(--tweet-btn-hover-bg-color); + cursor: pointer; +} + +/****** user info div ******/ +.user-info { + display: flex; + justify-content: space-between; + align-items: center; + + padding: 10px 10px 10px 0; + + border-radius: 30px; +} + +.user-info:hover { + background-color: var(--nav-icon-hover-gb-color); + cursor: pointer; +} + +.user-info div:first-child { + display: flex; + justify-content: space-between; + align-items: center; + gap: 5px; + + margin-right: 10px; +} + +.user-photo { + width: 50px; + height: 50px; + + border-radius: 50%; + cursor: pointer; +} + +.name, +.user-id { + font-size: 13px; + font-weight: bold; + + margin-bottom: 5px; + + cursor: pointer; +} + +.user-id { + color: var(--secondary-font-color); +} + +.name:hover { + text-decoration: underline; +} diff --git a/style/right-side-bar.css b/style/right-side-bar.css new file mode 100644 index 00000000..bc86a7c8 --- /dev/null +++ b/style/right-side-bar.css @@ -0,0 +1,174 @@ +.right-side-bar { + grid-column: 3 / 4; + grid-row: 1 / 3; + + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 50px 1fr; + + font-size: 15px; +} + +/****** Search bar ******/ +.search-bar { + background-color: var(--search-bar-bg-color); + display: flex; + gap: 10px; + + padding: 10px 15px; + margin: 5px 0; + + border-radius: 25px; +} + +.search-text { + width: 100%; + background-color: var(--search-bar-bg-color); + border: none; +} + +input:focus { + outline: none; + background-color: #fff; +} + +.search-bar:focus-within { + outline: 1px solid var(--search-bar-focus-b-color); + background-color: #fff; + fill: #3d91f9; +} + +.settings-icon-div { + width: 35px; + height: 35px; + + border-radius: 50%; + + display: flex; + justify-content: center; + align-items: center; +} + +.settings-icon-div:hover { + cursor: pointer; + background-color: var(--setting-icon-hover-color); +} + +/****** Cards container ******/ +.cards { + margin-top: 20px; + + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 50px 120px 100px 90px 90px 105px; +} + +.cards > * { + padding: 5px 15px; + border-bottom: 1px solid var(--border-color); + background-color: var(--right-bar-card-bg-color); +} + +.head { + display: flex; + align-items: center; +} + +.cards > *:first-child { + border-radius: 10px 10px 0 0; +} + +.cards > *:first-child:hover { + border-radius: 10px 10px 0 0; + background-color: var(--right-bar-card-bg-color); +} + +.cards > *:last-child { + border-radius: 0 0 10px 10px; +} + +.cards > *:hover { + background-color: var(--right-bar-card-hover-bg-color); +} + +/****** What's happening ******/ +.main-title { + font-weight: bold; +} + +/****** Card 1 ******/ +.live { + padding-top: 10px; + + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.news { + display: flex; + flex-direction: column; + gap: 5px; +} + +.titles { + display: flex; + align-items: center; + gap: 3px; +} + +.titles p { + color: var(--secondary-font-color); + font-size: 12px; + font-weight: bold; +} + +.content p:first-child { + font-weight: bold; + margin-bottom: 5px; +} + +.trending { + color: var(--secondary-font-color); + font-size: 13px; + font-weight: 600; +} + +.content a { + text-decoration: none; + color: var(--anchor-font-color); +} + +.news-photo { + padding-left: 5px; +} + +.news-photo img { + border-radius: 10px; +} + +/****** Card 2 ******/ +.meet p { + margin-bottom: 3px; +} +.meet p:first-child { + margin-bottom: 5px; +} + +/****** Card 3 and Card 4 ******/ +.card { + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.politics { + padding-top: 10px; +} + +/****** Card 5 ******/ +.flex-title { + display: flex; + align-items: center; + gap: 2px; +} diff --git a/style/style.css b/style/style.css new file mode 100644 index 00000000..e891feae --- /dev/null +++ b/style/style.css @@ -0,0 +1,86 @@ +@import url(./icons.css); +@import url(./colors.css); +@import url(./left-hand-menu.css); +@import url(tweet-feed.css); +@import url(right-side-bar.css); + +/****** shared style ******/ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, + Arial, sans-serif; + color: var(--primary-font-color); +} + +button { + border: none; + background-color: transparent; +} + +.transition { + transition: background-color 300ms; +} + +.logo-icon, +.nav-icon { + width: 30px; +} + +.settings-icon, +.search-icon, +.post-icon, +.interactive-icon { + width: 20px; +} + +.trusted { + width: 15px; +} + +/****** Twitter container ******/ +.container { + max-width: 1100px; + margin: 0px auto; + + display: grid; + grid-auto-columns: 1fr 2fr 1.5fr; + + gap: 20px; +} + +/****** Responsive ******/ +@media screen and (max-width: 499px) { + .container { + margin-left: 10px; + } + + .left-hand-menu { + display: none; + } + + .right-side-bar { + display: none; + } + + .tweet-feed { + grid-column: 1 / 4; + } +} + +@media screen and (min-width: 499px) and (max-width: 987px) { + .container { + margin: 0 10px; + } + + .right-side-bar { + display: none; + } +} + +@media screen and (min-width: 987px) and (max-width: 1265px) { + .container { + margin: 0 10px; + } +} diff --git a/style/tweet-feed.css b/style/tweet-feed.css new file mode 100644 index 00000000..72dec386 --- /dev/null +++ b/style/tweet-feed.css @@ -0,0 +1,230 @@ +.tweet-feed { + grid-column: 2 / 3; + grid-row: 1 / 3; + + display: grid; + grid-template-columns: 1fr; + grid-template-rows: + 50px + 150px + auto; + grid-auto-flow: row; + + background-color: var(--right-bar-card-bg-color); +} + +/****** Header home ******/ +.header-home { + display: flex; + align-items: center; + justify-content: space-between; + + padding: 10px; + + border: 1px solid var(--border-color); + border-top: none; + border-bottom: none; + + background-color: #fff; +} + +.header-home p { + font-weight: bold; + font-size: 17px; +} + +.header-home p:hover { + cursor: pointer; +} + +/****** Tweets container ******/ +.tweets > * { + background-color: #fff; + border: 1px solid var(--border-color); + padding: 10px; + + display: grid; + grid-template-columns: 45px 1fr 30px; + gap: 15px; +} + +.tweets > *:hover { + background-color: var(--right-bar-card-bg-color); +} + +.tweets p { + font-size: 15px; + color: var(--primary-font-color); +} + +/****** What is happening div ******/ +.what-is-happening { + display: grid; + grid-template-columns: 40px 1fr; + column-gap: 20px; + + margin-bottom: 10px; +} + +.what-is-happening:hover { + background-color: #fff; +} + +.send-your-tweet { + display: flex; + justify-content: space-between; + align-items: center; + + padding-top: 10px; + + border-top: 1px solid var(--border-color); +} + +.post-icon-divs { + display: flex; +} + +.share { + display: flex; + flex-direction: column; + gap: 10px; +} + +.share input { + width: 100%; + height: 60px; + + border: none; +} + +.share input:focus { + outline: none; +} + +.post-icon-divs > *, +.interactive-icons-div > *, +.more-icon-div { + width: 35px; + height: 35px; + + display: flex; + justify-content: center; + align-items: center; + + border-radius: 50%; +} + +.post-icon-divs > *:hover, +.interactive-icons-div > *:hover, +.more-icon-div:hover { + background-color: var(--tweet-icon-hover-bg-color); + fill: #3d91f9; + cursor: pointer; +} + +.send-your-tweet button { + font-weight: bold; + color: var(--tweet-btn-color); + background-color: var(--share-btn-bg-color); + + padding: 10px 20px; + + border-radius: 25px; + + cursor: pointer; +} + +.share input::placeholder { + color: var(--placeholder-font-color); + font-weight: 600; +} + +/****** Eric post******/ +.retweeted { + font-size: 12px; + font-weight: 600; + color: var(--secondary-font-color); + + margin-bottom: 3px; +} + +.tweet-info { + display: flex; + align-items: center; + gap: 5px; + + font-weight: 600; +} + +.tweet-info > * { + display: flex; +} + +.user-name, +.user-twitter-id { + font-size: 13px; + margin-bottom: 5px; + font-weight: bold; + cursor: pointer; +} + +#user-twitter-id, +#time, +#user-id, +#retweeted { + color: var(--secondary-font-color); +} + +.tweet-text { + margin-bottom: 7px; +} + +.interactive-icons-div { + display: flex; + justify-content: space-between; +} + +.interactive-icons-div > *:hover { + fill: #3d91f9; +} + +.repost-icon:hover { + background-color: var(--repost-icon-hover-bg-color); + fill: var(--repost-icon-hover-color); +} + +.like-icon:hover { + background-color: var(--like-icon-hover-bg-color); + fill: var(--like-icon-hover-color); +} + +.retweeted-div { + position: relative; + margin-bottom: 20px; +} +.retweeted-icon { + width: 15px; + + position: absolute; + top: 0; + right: 0; +} + +/******* GroupDocs *******/ +.group-docs { + border-top: none; +} + +.post-photo { + width: 100%; + height: auto; + + margin: 5px 0; + + border-radius: 7px; +} + +.tweet-text a { + color: var(--tweet-btn-bg-color); + text-decoration: none; +}