diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..2d117114 Binary files /dev/null and b/.DS_Store differ diff --git a/images/O1CN01uX8Aqq1wcH6B0MRRl_!!3164416328-0-cib.jpg b/images/O1CN01uX8Aqq1wcH6B0MRRl_!!3164416328-0-cib.jpg new file mode 100644 index 00000000..c376fe63 Binary files /dev/null and b/images/O1CN01uX8Aqq1wcH6B0MRRl_!!3164416328-0-cib.jpg differ diff --git a/images/pexels-andrea-piacquadio-1023236.jpg b/images/pexels-andrea-piacquadio-1023236.jpg new file mode 100644 index 00000000..1611408e Binary files /dev/null and b/images/pexels-andrea-piacquadio-1023236.jpg differ diff --git a/images/pexels-andrea-piacquadio-3770238.jpg b/images/pexels-andrea-piacquadio-3770238.jpg new file mode 100644 index 00000000..f7f9f6a4 Binary files /dev/null and b/images/pexels-andrea-piacquadio-3770238.jpg differ diff --git a/images/pexels-ketut-subiyanto-4353622.jpg b/images/pexels-ketut-subiyanto-4353622.jpg new file mode 100644 index 00000000..af1d1e5f Binary files /dev/null and b/images/pexels-ketut-subiyanto-4353622.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 00000000..54105c69 --- /dev/null +++ b/style.css @@ -0,0 +1,213 @@ +html { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; +} + +.brand { + height: 28px; + filter: invert(46%) sepia(99%) saturate(1449%) hue-rotate(176deg) brightness(100%) contrast(91%); + padding: 10px; + } + + .layout { + display: grid; + grid-template-columns: 275px auto 350px; + margin: 0 auto; + max-width: 1200px; + } + + .layout__right-sidebar { + position: fixed; + width: 350px; + } + + .sidebar-menu { + position: fixed; + } + + .sidebar-menu__item { + font-size: 19px; + color: #0F141A; + display: flex; + align-items: center; + font-weight: 700; + padding: 10px; + } + + .sidebar-menu__item:hover { + background: rgba(29, 161, 242, 0.1); + color: #1da0f2; + border-radius: 20px; + cursor: pointer; + } + + .sidebar-menu__item--active { + color: #1da0f2; + } + + .sidebar-menu__item-icon { + height: 26px; + margin-right: 20px; + } + + .sidebar-menu__item--active .sidebar-menu__item-icon { + filter: invert(67%) sepia(60%) saturate(4956%) hue-rotate(176deg) brightness(95%) contrast(99%); + } + + .trends-for-you { + border-radius: 15px; + background: #f5f8fa; + margin-bottom: 15px; + } + + .trends-for-you__block { + border-bottom: 1px solid #e6ecf0; + padding: 10px 15px; + } + + .trends-for-you__block:last-child { + border-bottom: none; + } + + .trends-for-you__heading { + font-size: 19px; + font-weight: bold; + color: #14171a; + } + + .trends-for-you__meta-information { + font-size: 13px; + font-weight: 300; + color: #657786; + } + + .trends-for-you__trend-name { + font-size: 15px; + color: #14171a; + font-weight: bold; + margin-bottom: 5px; + margin-top: 2px; + } + + .tweet { + display: flex; + border-bottom: 1px solid #e6ecf0; + margin-bottom: 2px; + padding: 10px 15px; + } + + .tweet:hover { + background: rgba(0, 0, 0, 0.03); + cursor: pointer; + } + + .tweet a { + color: #1b94e0; + text-decoration: none; + } + + .tweet a:hover { + text-decoration: underline; + } + + .tweet__author-logo { + width: 49px; + height: 49px; + border-radius: 50%; + margin-right: 10px; + } + + .tweet__header { + display: flex; + } + + .tweet__author-name { + font-size: 15px; + font-weight: 700; + color: #14171a; + margin-right: 5px; + } + + .tweet__author-slug { + color: #5b7083; + font-size: 15px; + } + + .tweet__publish-time { + margin-left: 5px; + color: #657786; + } + + .tweet__image { + width: 100%; + border-radius: 15px; + margin-top: 10px; + } + + .who-to-follow { + background: #f5f8fa; + border-radius: 15px; + } + + + .who-to-follow__block { + padding: 10px 15px; + display: flex; + align-items: center; + border-bottom: 1px solid #e6ecf0; + } + + .who-to-follow__block:last-child { + border-bottom: none; + } + + .who-to-follow__author-logo { + width: 49px; + height: 49px; + border-radius: 50px; + margin-right: 10px; + } + + .who-to-follow__author-slug { + color: #657786; + font-size: 15px; + } + + .who-to-follow__author-name { + font-size: 15px; + font-weight: 700; + } + + .who-to-follow__content { + display: flex; + justify-content: space-between; + width: 100%; + } + + .who-to-follow__heading { + font-size: 19px; + font-weight: bold; + color: #14171a; + } + + .who-to-follow__button { + border: 1px solid #1da0f2; + color: #1da0f2; + font-size: 15px; + font-weight: 700; + border-radius: 15px; + padding: 5px; + min-width: 67px; + text-align: center; + } + + .who-to-follow__button:hover { + background: rgba(29, 161, 242, 0.1); + cursor: pointer; + } + + .layout__left-sidebar { + font-size: 25px; + position: relative; + + + } \ No newline at end of file diff --git a/svg/explore.svg b/svg/explore.svg new file mode 100644 index 00000000..d32167b8 --- /dev/null +++ b/svg/explore.svg @@ -0,0 +1 @@ + diff --git a/svg/home.svg b/svg/home.svg new file mode 100644 index 00000000..775fe7fb --- /dev/null +++ b/svg/home.svg @@ -0,0 +1 @@ + diff --git a/svg/messages.svg b/svg/messages.svg new file mode 100644 index 00000000..17ec4a99 --- /dev/null +++ b/svg/messages.svg @@ -0,0 +1 @@ + diff --git a/svg/more.svg b/svg/more.svg new file mode 100644 index 00000000..51507773 --- /dev/null +++ b/svg/more.svg @@ -0,0 +1 @@ + diff --git a/svg/notifications.svg b/svg/notifications.svg new file mode 100644 index 00000000..5d5736e2 --- /dev/null +++ b/svg/notifications.svg @@ -0,0 +1 @@ + diff --git a/svg/profile.svg b/svg/profile.svg new file mode 100644 index 00000000..88db1c04 --- /dev/null +++ b/svg/profile.svg @@ -0,0 +1 @@ + diff --git a/svg/twitter.svg b/svg/twitter.svg new file mode 100644 index 00000000..513dd35c --- /dev/null +++ b/svg/twitter.svg @@ -0,0 +1 @@ + diff --git a/twitter.html b/twitter.html new file mode 100644 index 00000000..c36114f5 --- /dev/null +++ b/twitter.html @@ -0,0 +1,292 @@ + + + + Twitter markup + + + + + + + + + +
+
+ + Twitter +
+
+ + Home +
+
+ + Explore +
+ +
+ + Notifications +
+ +
+ + Messages +
+ +
+ + Profile +
+ +
+ + More +
+
+
+
+
+ +
+
+
+ Bfsfsdfdsfds +
+
+ @bfdfsgdfdsfsd +
+
+ 78m +
+
+
+ fdsfdsfsds +
+
+
+
+ +
+
+
+ Eadfjkds dsnfds +
+
+ @fdsfdsf +
+
+ 3d +
+
+
+ njfbdsjfdsjfdnskjfndsjfskjfdsfksdjfndskfnksd + knjfdsksdnkdsfnsdk + https://elixirdigest.net/digests/276 + @_fdsjfnidsnfkjsdnfdjsfnkdsfndskdksf +
+
+
+ +
+ +
+
+
+ fdsfsk fdsfsfsd +
+
+ @fmksdlfsd +
+
+ 11h +
+
+
+ c ansc kasddfksajdnsakjndksdknsksfnkfksnkfjds + dfhjsfjhdsfhdsfdfsjdsbfdjsfhbdsfdjhbjfdsjbfhj + bjfsdbjfdbjfhbsdjbfdshjbfdjshfbjdsbhjfjsdhbfd + jnfsdnkjfdsfjdsknfdknfkjsdnsdkjnf ("holes" -- + https://typeclasses.com/typed-holes) + +
+
+
+ +
+ +
+
+
+ weird +
+
+ @dsfdsfds +
+
+ 31m +
+
+
+ soooo hungry +
+
+
+ +
+ +
+
+
+ fsdfdsfds +
+
+ @bfsdfsdf +
+
+ 42m +
+
+
+ so cool! +
+
+
+ +
+ +
+
+
+ fsdfidsof +
+
+ @bsfddsf +
+
+ 12m +
+
+
+ Thank you +
+
+
+
+
+
+
+
+
+ Trends for you +
+
+
+
+ Trending in Italy +
+
+ #Andriods +
+
+ 56k Tweets +
+
+
+
+ Trending in Italy +
+
+ #HumpDay +
+
+
+
+ Trending +
+
+ #reading +
+
+ 213 Tweets +
+
+
+
+
+
+ fsdfds +
+
+
+ +
+
+
+ fdsfdsfdsi +
+
+ @fsdfdsfds +
+
+
+ Follow +
+
+
+
+ +
+
+
+ Blah hgakb +
+
+ @eggsblah +
+
+
+ Follow +
+
+
+ +
+ +
+
+
+ blah blag +
+
+ @bahbah +
+
+
+ Follow +
+
+
+
+
+
+
+ + \ No newline at end of file