diff --git a/README.md b/img/README.md similarity index 100% rename from README.md rename to img/README.md diff --git a/anand.jfif b/img/anand.jfif similarity index 100% rename from anand.jfif rename to img/anand.jfif diff --git a/arvind.jfif b/img/arvind.jfif similarity index 100% rename from arvind.jfif rename to img/arvind.jfif diff --git a/bihar.jfif b/img/bihar.jfif similarity index 100% rename from bihar.jfif rename to img/bihar.jfif diff --git a/class.jfif b/img/class.jfif similarity index 100% rename from class.jfif rename to img/class.jfif diff --git a/corona.jfif b/img/corona.jfif similarity index 100% rename from corona.jfif rename to img/corona.jfif diff --git a/dgp.png b/img/dgp.png similarity index 100% rename from dgp.png rename to img/dgp.png diff --git a/elon.jfif b/img/elon.jfif similarity index 100% rename from elon.jfif rename to img/elon.jfif diff --git a/glug.jfif b/img/glug.jfif similarity index 100% rename from glug.jfif rename to img/glug.jfif diff --git a/maratha.jfif b/img/maratha.jfif similarity index 100% rename from maratha.jfif rename to img/maratha.jfif diff --git a/military.jfif b/img/military.jfif similarity index 100% rename from military.jfif rename to img/military.jfif diff --git a/moh.jfif b/img/moh.jfif similarity index 100% rename from moh.jfif rename to img/moh.jfif diff --git a/pib.jfif b/img/pib.jfif similarity index 100% rename from pib.jfif rename to img/pib.jfif diff --git a/prime.png b/img/prime.png similarity index 100% rename from prime.png rename to img/prime.png diff --git a/rl.jfif b/img/rl.jfif similarity index 100% rename from rl.jfif rename to img/rl.jfif diff --git a/rl9.jfif b/img/rl9.jfif similarity index 100% rename from rl9.jfif rename to img/rl9.jfif diff --git a/rounak.jpeg b/img/rounak.jpeg similarity index 100% rename from rounak.jpeg rename to img/rounak.jpeg diff --git a/space.jfif b/img/space.jfif similarity index 100% rename from space.jfif rename to img/space.jfif diff --git a/tesh.png b/img/tesh.png similarity index 100% rename from tesh.png rename to img/tesh.png diff --git a/virat.jpg b/img/virat.jpg similarity index 100% rename from virat.jpg rename to img/virat.jpg diff --git a/index.css b/index.css index 261c4e7..a3d0594 100644 --- a/index.css +++ b/index.css @@ -1,178 +1,671 @@ - -.navbar { +body{ + font-family: 'Golos Text', sans-serif; + margin: 0; +} +.border-top{ + border-top: 1px solid #859fae38; +} +.border-bottom{ + border-bottom: 1px solid #859fae38; +} +.leftbar +{ width: 22%; - border-right: 2px solid rgba(138, 135, 135, 0.466); position: fixed; - height: max-content; + border-right: 1.5px solid #859fae38; + height: 100%; + top:0; } +.leftlist{ + + + margin: 20px 0rem 0 2rem; + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 30%; + + +} -.navbar div { - margin-bottom: 7%; - transition: all 0.2s; -} +.leftlist .litem +{ + + font-size: 20px; + padding: .5rem 1rem .5rem 1rem; -.navbar div span { - border-radius: 2em; } - -.navbar div span { - font-family: 'Bitter', serif; - font-size: 1.3em; - padding: 10px; - margin-top: -20%; +.useric{ + font-size: 45px; } - -.navbar div a i { - font-size: 2.2em; - margin-left: 40%; - color: rgb(0, 0, 0); +.lacc{ + display: flex; + align-items: center; + } - -.navbar div a i:hover { - color: blue; +.lacc i{ + margin:2rem; } +.leftlist .litem ,.lbtn ,.lacc{ + display: flex; + margin:.5rem 0 .5rem 0; + align-items: center; +} +.litem:hover +{ + width: max-content; + border-radius: 20px; + background-color: rgb(248, 248, 248); +} +.leftbar .brand +{ + margin: 2rem 0 1.5rem 2rem; + padding-left: 1rem; + display: flex; + align-items: center; -#twt_pen a i { - display: none; + +} +.lbtitle +{ + text-decoration: none; + color: black; +} +.brand .brandtitle{ + font-size: 30px; } -.userProfile_Link { - margin-left: -25%; +.brand .brandicon +{ + color: #1DA1F2; + margin-right: 10px; + font-size: 40px; +} +.litem .lbicon +{ + margin: auto 10px auto 0; + +} + +.tweetbtn +{ + border: none; + border-radius: 30px; + font-weight: 600; + padding: .7rem 1rem .7rem 1rem ; + background-color: #1DA1F2; + color: white; + font-size: 20px; + margin-left:1rem ; + margin-right: 1rem; +} +.tweetbtn:hover{ + background-color: #39acf4; } -.feed_container { +/* feed Container */ +.feed-container{ width: 45%; - margin-left: 23%; - margin-top: -4px; + margin-left:22%; + top:0px; + position: sticky; + border-right: 1px solid #859fae38; + margin-top: 0; + + } - -.post_feed { - border-bottom: 2px solid rgba(77, 75, 75, 0.473); - margin: 2.5em 10px; - height: max-content; +.twitter-head{ + padding-top: 1rem; + margin-left: 1rem; + padding-bottom: 1rem; + /* border-bottom: 1px solid rgba(129, 161, 182, 0.492); */ } - -.post_icons .material-icons-outlined { - margin-left: 15px; - margin-top: 40px; - color: rgb(87, 87, 255); - cursor: pointer; +.twhead{ + display: flex; + justify-content: flex-start; + + } +.th2{ + display: flex; + flex-direction: column; + width: 100%; -.post_feed #star { - position: absolute; - margin-left: 85%; - font-size: 2em; - margin-top: -0.5em; } - -.profileImg { - height: 3.5em; - width: 3.5em; +.twitter-head .twhead,.twhsec{ + margin-left: 0rem; +} +.usertw{ + font-size: 50px; +} +.light-text{ + font-size: 25px; + margin-left:1rem; + color: #c7c7c7; +} +.twicons{ + width:40%; + display: flex; + justify-content: space-between; + margin-left: 1rem; + align-items: center; + font-size: 40px; + align-content: center; + +} +.twicons span{ + padding: 6px; + border-radius: 50%; + font-size:24px; + color: rgb(29, 155, 240); +} +.twicons span:hover{ + background-color: #1da0f21c; + color: #1DA1F2; + - margin-left: 10px; - cursor: pointer; } +.twhsec{ + display: flex; + align-items: center; + align-content: center; + justify-content: space-between; +} +.getstarted{ + margin: 1rem; + +} +.gstrtbtn{ + border: none; + border-radius: 30px; + width: 180px; + padding: .7rem 1rem .7rem 1rem ; + background-color: #000000; + color: white; + font-size: 20px; -.profile_info { - position: absolute; - font-family: 'Bitter', serif; - font-size: 1.2em; - font-weight: 900; - cursor: pointer; +} +.tweetmain{ + + display: flex; + padding: .8rem .8rem .5rem .8rem ; +} +.tweetmain:hover{ + background-color: #e5e5e536; + +} +.accpic{ + width: 60px; + height: 60px; + border-radius: 50%; + margin-top: 2px; +} +.dflex{ + display: flex; + align-items: center; +} +.accname{ + font-size: 16px; + margin-left: .5rem; + font-weight: 600; + +} +.accver +{ + margin-left: 0.3rem; + color :#1DA1F2; + font-size: 24px; +} +.accusername{ + margin-left: .5rem; + font-weight: 200; + color: #9a9a9a; +} +.posttime +{ + color: #9a9a9a; + font-weight: 100; +} +.postcontent{ + width: 100%; +} +.post-content-data{ + margin-left: 0.5rem; + width: 95% ; +} +.hastag{ + font-weight: 300; + color: #1DA1F2; + margin: 0; + +} +.img{ + border-radius: 30px; + margin-top:.5rem; + width:90%; + margin-right: 1rem; +} +.post-footer{ + margin-top: 1rem; + margin-left: 1rem; + width: 85%; + justify-content: space-between; +} +.cnt{ + margin-left: .3rem; + font-size: 16px; + font-weight: 100; +} +.ficon{ + font-size:20px ; + padding: 10px; +} +.cmt{ + display: flex; + align-items: center; +} +.bx-message:hover{ + + border-radius: 50%; + background-color: #1da0f21c; + +} +.cmt .bx-message:hover{ + color: #1DA1F2; +} +.bx-message:hover + .cnt { + color: #1DA1F2; } -.feedInfo { - width: 90%; - padding-left: 2cm; - margin-top: -1em; +.bx-repost:hover{ + border-radius: 50%; + background-color: #1df25611; +} +.repost .bx-repost:hover{ + color: #1bc248; +} +.bx-repost:hover + .cnt { + color: #1bc248 ; +} +.bx-heart:hover{ + border-radius: 50%; + background-color: #ee0c9c11; +} +.heart .bx-heart:hover{ + color: #e71283; +} +.bx-heart:hover + .cnt { + color: #e71283 ; } -.SearchBar input[type=text] { - font-family: Arial, FontAwesome; - z-index: 2; +.bx-align-left:hover{ + + border-radius: 50%; + background-color: #1da0f21c; + +} +.stats .bx-align-left:hover{ + color: #1DA1F2; +} +.bx-align-left:hover + .cnt { + color: #1DA1F2; +} +.bx-upload:hover{ + + border-radius: 50%; + background-color: #1da0f21c; + +} +.upld .bx-upload:hover{ + color: #1DA1F2; +} +.video{ + position:relative; + padding-bottom:56.25%; +} +.media{ + width: 90%; - height: 30px; - border-radius: 20px; - background-color: rgba(151, 151, 151, 0.377); + height: 90%; + position:absolute; + border:none; + border-radius: 30px; } - -.WH_Feed { - height: max-content; +.feedfooter{ + display: flex; + flex-direction: column; + position: relative; + bottom: 0; +} +.feedfooter-icon{ + margin-top: 2rem; + font-size: 50px; + text-align: center; +} +.feedfooter-data{ + padding:2rem; + text-align: center; +} +/* right bar */ +.rightbar{ + margin:0; + width: 33%; + margin-left:67%; + position: sticky; + bottom:100%; + padding-top: 1rem; + + + +} +.search input[type=text]{ + + outline: none; + border: 1px; + border-radius: 30px; + height: 30px; width: 90%; - margin-top: 2em; + padding: 0.3rem 1rem 0.3rem 1rem; + font-family: Golos Text, FontAwesome; + background-color: #87adbd13; + + } - -.WH_Feed .category { - font-size: 0.7em; - margin-left: 15px; - color: gray; - margin-bottom: -1em; +.search +{ + margin:0 2rem 0.5rem 2rem; } +.explore +{ + display: flex; + flex-direction: column; + margin: 1rem 2rem 1rem 2rem ; + background-color: #87adbd13; + border-radius: 30px; + -.WH_Feed .topic { - font-size: 0.9em; - width: 70%; - margin-left: 10px; - font-weight: bolder; - display: inline-block; } - -.WH_Feed img { - height: 50px; - display: inline-block; - border-radius: 10px; - width: 70px; - margin-left: 5px; +.trending +{ + display: flex; + justify-content: space-between; + padding: 1rem 1rem 1rem 1rem ; + + } - -.WH_Feed .ExtraInfo { - font-size: 12px; - margin-left: 15px; - margin-top: -8px; +.trending:hover{ + background-color:#4d748713 ; +} +.category{ + font-weight: 500; + font-family: 'Roboto', sans-serif; + display: flex; + align-items: center; + color: #adadad; + justify-content: space-between; + width: 100%; + + + } +.trendimg{ + height: 60px; + border-radius: 8px; + margin-left: .3rem; + margin-bottom: .3rem; -.WhatsHappening span:hover { - cursor: pointer; } +.trendacc{ + color: #9a9a9a; + font-family: 'Roboto', sans-serif; + font-weight: 400; -.profiles img { - height: 50px; - display: inline-block; - border-radius: 10px; +} +.trendtag{ + color: #1DA1F2; +} +.trending .bx-dots-horizontal-rounded{ + padding: 5px; + color: #74838d94; +} +.trending .bx-dots-horizontal-rounded:hover{ + border-radius: 50%; + background-color: #1da0f21c; + color: #1DA1F2; + +} +.accimg{ width: 50px; - margin-left: 10px; + border-radius: 50%; + margin-right:1rem; } - -.profiles { - margin-top: 1.8em; - cursor: pointer; +.suggestions +{ + display: flex; + flex-direction: column; + margin: 1rem 2rem 1rem 2rem; + background-color: #87adbd13; + border-radius: 30px; + + padding-top: .2rem; } - -.profiles .name { - position: absolute; - font-size: 0.9em; - margin-left: 10px; - font-weight: bolder; +.acc{ + display: flex; + align-items: center; + padding: .3rem 1rem .3rem 1rem; + justify-content: space-between; +} +.acc:hover +{ + background-color:#4d748713 ; +} +.accnm{ + font-size: 14px; + font-weight:600 ; +} +.accusn{ + font-size: 15px; + color: #8b999d; + font-weight: 100; +} +.flwbtn +{ + background-color: #000000; + border: none; + outline: none; + width: 80px; + height: 32px; + border-radius: 32px; + color: white; + font-weight: 600; + +} +.flwbtn:hover{ + background-color: #333333; +} +.rightfooter +{ + display: flex; + flex-direction: column; + margin: 1rem 2.5rem 1rem 2.5rem; + font-size: 14px; + color: #8b999d; +} +.footer_item +{ + margin-right: 0.7rem; } +.dispfooter{ + display: none; +} +/* Media Query */ +@media only screen and (max-width: 1300px) +{ + .feed-container .img{ + width: 90%; + height: auto; + } + .post-footer{ + width: 85%; + } +} +@media only screen and (max-width: 1200px) +{ + .leftbar + { + width: 10%; + } + .leftbar .lbtitle + { + display: none; + } + .leftbar .tweetbtn + { + display: none; + } + .lacc span{ + display: none; + } + .leftbar .litem { + font-size: 24px; + } + .lacc i{ + margin-left: 2.2rem; + } + .feed-container + { + width: 90%; + margin-left: 10%; + border-right: none; + } + .rightbar + { + display: none; + } + .feed-container .img{ + width: 90%; + height: auto; + + } + + + -.profiles .username { - margin-left: 10px; - font-size: 0.8em; - position: absolute; - margin-top: 25px; } +@media only screen and (max-width: 1000px) +{ + + .leftbar .brand{ + padding: 0; + margin: 2rem auto 0 auto; + justify-content: center; + } + .litem .lbicon{ + padding: 0; + margin: 0; + } + .leftlist{ + margin-left :0; + } + .leftbar .litem + { + margin-left:auto; + margin-right:auto; + justify-content: center; + } + .lacc{ + justify-content: center; + margin:0; + } + .brand .brandicon { + margin:0; + } + .twicons + { + width: 60%; + } + .feed-container .img{ + width: 90%; + height: auto; + + } + -.profiles span a { - margin-left: 16em; - padding: 15px 2em; - font-size: 0.9em; - background-color: rgb(243, 33, 33); - color: white; } +@media only screen and (max-width: 500px) +{ + .accname{ + font-size: 12px ; + } + .accver{ + font-size:18px + } + .accusername { + font-size: 12px; + } + .leftbar{ + display: none; + } + + .feed-container{ + margin-left: 0; + width: 100%; + } + .feed-container .img{ + width: 90; + height: auto; + + } + + .dispfooter{ + width: 100%; + display: flex; + position: fixed; + bottom: 0; + justify-content: space-evenly; + background-color: #e1f4ffd1; + height:50px; + align-items: center; + color: #1DA1F2; + font-size: 30px; + } + .ficon{ + padding: 6px; + } -.profiles span a:hover { - background-color: blue; +} +@media only screen and (max-width: 420px) +{ + .feed-container .img{ + width: 90%; + height: auto; + + } + + .accpic{ + width:40px; + height: 40px; + margin-top: 9px; + } +} +@media only screen and (max-width: 378px) +{ + + .feed-container .img{ + width: 90%; + height: auto; + + } + + .post-footer .ficon{ + font-size: 18px; + padding: 4px; + + } + .post-footer span{ + font-size: 14px; + } + } diff --git a/index.html b/index.html index 18f3df4..a506e76 100644 --- a/index.html +++ b/index.html @@ -1,291 +1,520 @@ - - - -
- - - - - - - -- - - - - - - -
- --
Select some topics that you are interested in to personalize your twitter experience, starting with finding people to follow
- -
- #Unite2FightCorona
- #IndaFightsCorona
- #OmicronVarient
-
पिछले 7 सालों में हमने दिल्ली में 20,000 क्लासरूम बनाए। बाक़ी सारी राज्य सरकारों और केंद्र सरकार मिलाकर भी बाक़ी देश में सात साल में 20,000 क्लासरूम नहीं बने।
-Not just the greatest Maratha, but a great Indian… #shivajimaharajjayanti
-@mnreindia and @ficci_india organise Chaitan Baithak on "Roadmap to achieve net-zero carbon emission till 2070
The Chaitan Baithak was apart of MNRE's ongoing celebration
- of #AzadiKaAmritMahautsav
Tesmanian.com@Tesmanian.com .
- 4h
- Polaris Program Crew Will Conduct First-Ever Commercial Spacewalk Wearing New SpaceX Spacesuits
@SpaceX @ElonMusk
-
Trust me they are heavier than you think.. 😜😎
- #RL9#IFFHS
- #International#TopDivision
- #WorldBestPlayer
Oop's Sorry We Ran Into a Problem.Please check your Internet Connection.
-What's Happening
-Sports . LIVE
-INDvsWI: Both teams face off in the second T20I
-
- Trending with Venky , #IndvsWI
-Travel . Trending
-#Bihar
-2564 tweets , Trending with #Bihar_Is_Love
-Sports . Trending
-#RuturajGaikwad
- -Cricket . Trending
-#ViratKohli
-Trending with #Virat_Kohli
-World_News . LIVE
-Ukraine: Putin to personally oversee hugenuclear drills on Saturday amid Tension
-Who To Follow
-
- NIT DURGAPUR
- @nitdgp
-
-
- ROUNAK KUMAR JHA
- @Rounak.K.Jha2002
-
- What's Happening!
Select some topics that you are interested in to personalize your twitter experience, starting with finding people to follow
+ +पिछले 7 सालों में हमने दिल्ली में 20,000 क्लासरूम बनाए। बाक़ी सारी राज्य सरकारों और केंद्र सरकार मिलाकर भी बाक़ी देश में सात साल में 20,000 क्लासरूम नहीं बने।
+
1 story, 8 chapters and too many secrets to be unleashed 🤐#BestsellerOnPrime, watch now!
+Not just the greatest Maratha, but a great Indian… #shivajimaharajjayanti
+@mnreindia and @ficci_india organise Chaitan Baithak on "Roadmap to achieve net-zero carbon emission till 2070 + + The Chaitan Baithak was apart of MNRE's ongoing celebration of #AzadiKaAmritMahautsav
+ +
Polaris Program Crew Will Conduct First-Ever Commercial Spacewalk Wearing New SpaceX Spacesuits
+
@SpaceX and @ElonMusk
+
Trust me they are heavier than you think.
+ #RL9#IFFHS
+ #International#TopDivision
+ #WorldBestPlayer
+