diff --git a/blocks/brand.css b/blocks/brand.css new file mode 100644 index 00000000..51239dcb --- /dev/null +++ b/blocks/brand.css @@ -0,0 +1,4 @@ +.brand { + height: 28px; + filter: invert(46%) sepia(99%) saturate(1449%) hue-rotate(176deg) brightness(100%) contrast(91%); +} \ No newline at end of file diff --git a/blocks/global.css b/blocks/global.css new file mode 100644 index 00000000..efba220e --- /dev/null +++ b/blocks/global.css @@ -0,0 +1,4 @@ +html { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; +} + diff --git a/blocks/layout.css b/blocks/layout.css new file mode 100644 index 00000000..cfa45d86 --- /dev/null +++ b/blocks/layout.css @@ -0,0 +1,10 @@ +.layout { + display: grid; + grid-template-columns: 275px auto 350px; + margin: 0 auto; + max-width: 1200px; +} +.layout__right-sidebar { + position: fixed; + width: 350px; +} \ No newline at end of file diff --git a/blocks/sidebar-menu.css b/blocks/sidebar-menu.css new file mode 100644 index 00000000..ca74abd0 --- /dev/null +++ b/blocks/sidebar-menu.css @@ -0,0 +1,35 @@ +.sidebar-menu { + position: fixed; + +} + +.sidebar-menu__item { + font-size: 19px; + color: #0F141A; + display: flex; + align-items: center; + 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%); +} \ No newline at end of file diff --git a/blocks/trends.css b/blocks/trends.css new file mode 100644 index 00000000..a1b3ef00 --- /dev/null +++ b/blocks/trends.css @@ -0,0 +1,34 @@ +.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; +} \ No newline at end of file diff --git a/blocks/tweet.css b/blocks/tweet.css new file mode 100644 index 00000000..d096a853 --- /dev/null +++ b/blocks/tweet.css @@ -0,0 +1,91 @@ +.tweet-bar { + display: grid; + grid-template: + "profile profile" 45px + "icons tweet" 2fr / + auto 1fr; + border-bottom: 2px solid rgb(239, 243, 244); + padding: 10px 15px; + +} + + +.icons { + display: grid; + grid-area: icons; + grid-auto-flow: column; + margin-left: 100px; + margin-top: 40px; + gap: 10px; + padding-right: 200px; +} + +.tweet_tab { + display: grid; + grid-area: tweet; + background-color: rgb(29 161 242); + color: white; + width: 75px; + padding-top: 7px; + border-radius: 30px; + height: 30px; + text-align: center; + margin-left: 180px; + margin-top: 35px; + margin-bottom: 5px; +} + +.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; +} \ No newline at end of file diff --git a/images/afro pic1.jpg b/images/afro pic1.jpg new file mode 100644 index 00000000..41815309 Binary files /dev/null and b/images/afro pic1.jpg differ diff --git a/images/as above so below.jpg b/images/as above so below.jpg new file mode 100644 index 00000000..dc7f93ba Binary files /dev/null and b/images/as above so below.jpg differ diff --git a/images/author logo.jpg b/images/author logo.jpg new file mode 100644 index 00000000..2cfd458c Binary files /dev/null and b/images/author logo.jpg differ diff --git a/images/author logo2.jpg b/images/author logo2.jpg new file mode 100644 index 00000000..f00b5d84 Binary files /dev/null and b/images/author logo2.jpg differ diff --git a/images/explore.svg b/images/explore.svg new file mode 100644 index 00000000..d32167b8 --- /dev/null +++ b/images/explore.svg @@ -0,0 +1 @@ + diff --git a/images/gif_blue.svg b/images/gif_blue.svg new file mode 100644 index 00000000..55cc1e1e --- /dev/null +++ b/images/gif_blue.svg @@ -0,0 +1,10 @@ + + + + + + + + \ No newline at end of file diff --git a/images/home.svg b/images/home.svg new file mode 100644 index 00000000..775fe7fb --- /dev/null +++ b/images/home.svg @@ -0,0 +1 @@ + diff --git a/images/media_icon_blue.svg b/images/media_icon_blue.svg new file mode 100644 index 00000000..f1c59b75 --- /dev/null +++ b/images/media_icon_blue.svg @@ -0,0 +1,8 @@ + + + + + + + \ No newline at end of file diff --git a/images/messages.svg b/images/messages.svg new file mode 100644 index 00000000..17ec4a99 --- /dev/null +++ b/images/messages.svg @@ -0,0 +1 @@ + diff --git a/images/more.svg b/images/more.svg new file mode 100644 index 00000000..51507773 --- /dev/null +++ b/images/more.svg @@ -0,0 +1 @@ + diff --git a/images/notifications.svg b/images/notifications.svg new file mode 100644 index 00000000..5d5736e2 --- /dev/null +++ b/images/notifications.svg @@ -0,0 +1 @@ + diff --git a/images/polls_icon_blue.svg b/images/polls_icon_blue.svg new file mode 100644 index 00000000..0d1ca175 --- /dev/null +++ b/images/polls_icon_blue.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/images/profile.svg b/images/profile.svg new file mode 100644 index 00000000..88db1c04 --- /dev/null +++ b/images/profile.svg @@ -0,0 +1 @@ + diff --git a/images/schedule_icon_blue.svg b/images/schedule_icon_blue.svg new file mode 100644 index 00000000..03de3a6b --- /dev/null +++ b/images/schedule_icon_blue.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/images/smile_emoji.svg b/images/smile_emoji.svg new file mode 100644 index 00000000..1eb2ea2a --- /dev/null +++ b/images/smile_emoji.svg @@ -0,0 +1,12 @@ + + + + + + + + + + \ No newline at end of file diff --git a/images/twitter.svg b/images/twitter.svg new file mode 100644 index 00000000..513dd35c --- /dev/null +++ b/images/twitter.svg @@ -0,0 +1 @@ + diff --git a/index.html b/index.html new file mode 100644 index 00000000..3f6c2be5 --- /dev/null +++ b/index.html @@ -0,0 +1,187 @@ + + + + Twitter Clone + + + + + + + + + +
+ +
+ +
+
+ + Home +
+
+ + Explore +
+ +
+ + Notifications +
+ +
+ + Messages +
+ +
+ + Profile +
+ +
+ + More +
+
+
+
+
+ + +

What's happening?

+ +
+ + + + + +
+
Tweet
+
+
+ +
+
+
+ Zandile Dube +
+
+ @zandiledube +
+
+ 55m +
+
+
+ Siyabonga +
+
+
+
+ +
+
+
+ Aweno Retreats +
+
+ @awenoretreats +
+
+ 8d +
+
+
+ We are delighted to extend a heartfelt invitation to join us on our 10-Day transformational wellness retreat in the breathtaking landscapes of Tanzania. Join us for an unforgettable journey of self-discovery, rejuvenation in the motherland amidst the natural beauty of this East African paradise. + aweno retreats + @nolly #aweno #africa #healingwork +
+
+
+ +
+ +
+
+
+ Astral Realms +
+
+ @astralrealms +
+
+ 15h +
+
+
+ "As within, so without" It means we have a divine creation inside of us and outside of us, it is our connection with nature and the universe. It is like the saying 'as you sow, so shall you reap'. This is also known as the Law of Cause and Effect or Karma. Whatever we put out in the Universe is what comes back to us. If what we want is happiness, peace, friendship, love…Then we should BE happy, peaceful, loving, a friend. Negative energy sent out to others will come back to you. -- + https://www.facebook.com/WiccaTeachings/posts/as-above-so-below-as-within-so-without-is-a-saying-in-wicca-this-phrase-comes-fr/874655679350046/ + +
+
+
+ + + + + + +
+
+ +
+
+
+
+ Trends for you +
+
+
+
+ Latest in Tanzania +
+
+ #bagamoyo +
+
+ 200k Tweets +
+
+
+
+ Trending in Tanzania +
+
+ #zanzibabeach +
+
+
+
+ Trending - Trending +
+
+ #autos +
+
+ 5,000 Tweets +
+
+
+ + + +
+
+
+ + + \ No newline at end of file