From 9c0b2c5613d1ad91946aee35edcf9924275b4b28 Mon Sep 17 00:00:00 2001 From: samisalehsaeed Date: Fri, 15 Mar 2024 11:06:48 +0000 Subject: [PATCH 1/2] samisaed --- new_twitter.css | 243 +++++++++++++++++++++++++++++++++++++++++++++++ new_twitter.html | 72 ++++++++++++++ twitter.css | 108 +++++++++++++++++++++ twitter.html | 78 +++++++++++++++ 4 files changed, 501 insertions(+) create mode 100644 new_twitter.css create mode 100644 new_twitter.html create mode 100644 twitter.css create mode 100644 twitter.html diff --git a/new_twitter.css b/new_twitter.css new file mode 100644 index 00000000..b9e379d9 --- /dev/null +++ b/new_twitter.css @@ -0,0 +1,243 @@ +*{ + margin: 0; +} +.container{ + display:grid; + height: 100vh; + grid-template: + 'left-sidebar main right-sidebar'/300px 1fr 300px +} +.logo{ + img{ + height:40px; + width:47px; + padding-left:5px + } +} +.left-sidebar{ + grid-area:left-sidebar; + background-color: rgb(255, 255, 255); + padding-left: 10px; + padding-top: 10px; + padding-right:100px +} +.left-buttons{ + display:grid; + height:80vh; + gap:10px; + grid-template-rows: 40px 40px 40px 40px 40px 40px 40px 40px; + border-radius:20px; +} +.home-btn{ + text-align:left ; + border-radius: 13px; + padding-left: 15px; + border: none; + cursor: pointer; + background-color: white; + font-size: 15px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: 700; + img{ + height: 25px; + } +} +.home-btn:hover{ + background-color: rgb(77, 170, 224); +} +.explore-btn{ + text-align:left ; + border-radius: 13px; + padding-left: 15px; + border: none; + cursor: pointer; + background-color: white; + font-size: 15px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: 700; + img{ + height: 25px; + } +} +.explore-btn:hover{ + background-color: rgb(77, 170, 224); +} +.notif-btn{ + text-align:left ; + border-radius: 13px; + padding-left: 15px; + border: none; + cursor: pointer; + background-color: white; + font-size: 15px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: 700; + img{ + height: 25px; + } +} +.notif-btn:hover{ + background-color: rgb(77, 170, 224); +} +.messages-btn{ + text-align:left ; + border-radius: 13px; + padding-left: 15px; + border: none; + cursor: pointer; + background-color: white; + font-size: 15px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: 700; + img{ + height: 25px; + } +} +.messages-btn:hover{ + background-color: rgb(77, 170, 224); +} +.bookmarks-btn{ + text-align:left ; + border-radius: 13px; + padding-left: 15px; + border: none; + cursor: pointer; + background-color: white; + font-size: 15px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: 700; + img{ + height: 25px; + } +} +.bookmarks-btn:hover{ + background-color: rgb(77, 170, 224); +} +.profile-btn{ + text-align:left ; + border-radius: 13px; + padding-left: 15px; + border: none; + cursor: pointer; + background-color: white; + font-size: 15px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: 700; + img{ + height: 25px; + } +} +.profile-btn:hover{ + background-color: rgb(77, 170, 224); +} +.more-btn{ + text-align:left ; + border-radius: 13px; + padding-left: 15px; + border: none; + cursor: pointer; + background-color: white; + font-size: 15px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: 700; + img{ + height: 25px; + } +} +.more-btn:hover{ + background-color: rgb(77, 170, 224); +} +.tweet-button{ + color: white; + background-color: rgb(77, 170, 224); + border: none; + cursor: pointer; + border-radius: 13px; + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: 400; + font-size:19px; +} +.main{ + grid-area:main; + background-color: rgb(255, 255, 255); + padding: 20px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} +.twitter-profile{ + padding:10px; + img{ + height:60px; + width: 60px; + padding-left: 11px; + } +} +.feed{ + display: grid; + height: 80vh; + grid-template-rows: 100px 100px 100px; + +} +.feed div{ + background-color: rgb(255, 255, 255); + /* border:1px solid lightblue; */ +} +.tweet-message{ + display: grid; + grid-template:'twitter-profile twitter-message'/100px 1fr; + /* padding-bottom: 80px; */ + font-family: sans-serif; + font-size: 17px; + color: rgb(0, 0, 0); + text-align:left; +} +.tweet-message div{ + background-color: rgb(255, 252, 252); +} +.twitter-profile2{ + img{ + height: 65px; + width: 65px; + padding-left: 21px; + } +} +.tweet1{ + display: grid; + grid-template:'twitter-profile2 twitter-text1'/100px 1fr; + /* padding-bottom:80px; */ + font-family:sans-serif; + font-size: 17px; + color: rgb(0, 0, 0); + text-align: left; +} +.right-sidebar{ + grid-area:right-sidebar; + background-color: rgb(255, 255, 255); + padding:20px; + padding-top: 20px; +} +.searchbar{ + display:grid; + height: 5vh; + grid-template-rows: 40px 60px 60px; + gap:10px; + img{ + height: 20px; + width:20px; + padding-top: 10px; + padding-left: 10px; + } +} +.searchbar div{ + background-color: rgba(77, 170, 224, 0.515); + border-radius: 13px; +} +.text1{ + font-size: 20px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + padding: 10px; +} +.text2{ + font-size: 20px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + padding: 10px; +} \ No newline at end of file diff --git a/new_twitter.html b/new_twitter.html new file mode 100644 index 00000000..4e812b6c --- /dev/null +++ b/new_twitter.html @@ -0,0 +1,72 @@ + + + + + + + + +
+
+ +
+ + + + + + + + +
+
+
+

Home

+

+
+
+ +
+ Sami@samisalehsaeed · 30m

+ I'm currently loving the Boolean UK course!
+
+
+ +
+ Nathan@vherus · 1hr

+ Do not use chatGPT.
+
+
+
+
+
+
+ png-of-search-icon +
+
What's happening?
+
Who to follow
+
+
+ +
+ + \ No newline at end of file diff --git a/twitter.css b/twitter.css new file mode 100644 index 00000000..6c3d6daa --- /dev/null +++ b/twitter.css @@ -0,0 +1,108 @@ +*{ + margin:0; +} +.container{ + display: grid; + height:100vh; + grid-template: + 'icons left-sidebar main right-sidebar'/ 60px 300px 1fr 300px +} +.left-sidebar{ + display: grid; + grid-area: left-sidebar; + background-color: rgb(255, 255, 255); +} +.icons{ + /* grid-area:icons; */ + /* grid-template-columns:'icons'/100px; */ + background-color: rgb(255, 0, 0); + img{ + height:40px; + width:45px; + padding-left:10px; + padding-top: 5px; + } +} +.home{ + background-color: white; + color: black; + border: 1px solid; + padding:12px 16px; + font-size:16px; + cursor: pointer; + border-radius: 16px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-seri; + font-weight: 700; +} +.home:hover{ + background-color: lightblue; +} +/* .home{ + padding-top: 100ppx; +} */ +.navigation{ + display:grid; + height: 80vh; + padding-left: 50px; + grid-template-rows:50px 50px 50px 50px 50px 50px 50px 50px; + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + img{ + height:35px; + padding:10px; + } +} +.navigation div { + background-color:white ; + border-radius: 13px; + padding:10px +} +.tweet-button{ + display:grid; +} +.tweet-button div{ + background-color: blue; + border-radius: 20px; +} +.main{ + grid-area:main; + background-color: rgb(252, 252, 255); + padding:20px; +} +.feed{ + display: grid; + height: 80vh; + gap:10px; + grid-template-rows: 50px; +} +.feed div{ + background-color: rgb(253, 253, 253); + border-radius: 13px; + padding-left:10px; + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + border:1px solid black; + img{ + height: 20px; + } +} +.right-sidebar{ + grid-area:right-sidebar; + background-color: rgb(255, 255, 255); + padding:20px; + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-size:13px +} +.searchbar{ + display: grid; + height: 10vh; + gap:20px; + grid-template-rows: 40px 50px 50px; + img{ + height: 20px; + width:20px + } +} +.searchbar div{ + background-color: rgba(186, 213, 223, 0.502); + border-radius: 13px; + padding:10px +} diff --git a/twitter.html b/twitter.html new file mode 100644 index 00000000..67543d90 --- /dev/null +++ b/twitter.html @@ -0,0 +1,78 @@ + + + + + + + + + +
+
+ + + + +
+
+ +
+

Tweet

 +
+
+
+
+
+

Home

+
+
+
+
+
+
+
+
+
+ png-of-search-icon +
+

What's happening

+

Who to follow

+
+
+
+ + From 584ac70138b031bf0d6c976dff7343a00e38c794 Mon Sep 17 00:00:00 2001 From: samisalehsaeed Date: Fri, 15 Mar 2024 11:09:41 +0000 Subject: [PATCH 2/2] samisaeed --- twitter.css | 108 --------------------------------------------------- twitter.html | 78 ------------------------------------- 2 files changed, 186 deletions(-) delete mode 100644 twitter.css delete mode 100644 twitter.html diff --git a/twitter.css b/twitter.css deleted file mode 100644 index 6c3d6daa..00000000 --- a/twitter.css +++ /dev/null @@ -1,108 +0,0 @@ -*{ - margin:0; -} -.container{ - display: grid; - height:100vh; - grid-template: - 'icons left-sidebar main right-sidebar'/ 60px 300px 1fr 300px -} -.left-sidebar{ - display: grid; - grid-area: left-sidebar; - background-color: rgb(255, 255, 255); -} -.icons{ - /* grid-area:icons; */ - /* grid-template-columns:'icons'/100px; */ - background-color: rgb(255, 0, 0); - img{ - height:40px; - width:45px; - padding-left:10px; - padding-top: 5px; - } -} -.home{ - background-color: white; - color: black; - border: 1px solid; - padding:12px 16px; - font-size:16px; - cursor: pointer; - border-radius: 16px; - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-seri; - font-weight: 700; -} -.home:hover{ - background-color: lightblue; -} -/* .home{ - padding-top: 100ppx; -} */ -.navigation{ - display:grid; - height: 80vh; - padding-left: 50px; - grid-template-rows:50px 50px 50px 50px 50px 50px 50px 50px; - font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - img{ - height:35px; - padding:10px; - } -} -.navigation div { - background-color:white ; - border-radius: 13px; - padding:10px -} -.tweet-button{ - display:grid; -} -.tweet-button div{ - background-color: blue; - border-radius: 20px; -} -.main{ - grid-area:main; - background-color: rgb(252, 252, 255); - padding:20px; -} -.feed{ - display: grid; - height: 80vh; - gap:10px; - grid-template-rows: 50px; -} -.feed div{ - background-color: rgb(253, 253, 253); - border-radius: 13px; - padding-left:10px; - font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - border:1px solid black; - img{ - height: 20px; - } -} -.right-sidebar{ - grid-area:right-sidebar; - background-color: rgb(255, 255, 255); - padding:20px; - font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - font-size:13px -} -.searchbar{ - display: grid; - height: 10vh; - gap:20px; - grid-template-rows: 40px 50px 50px; - img{ - height: 20px; - width:20px - } -} -.searchbar div{ - background-color: rgba(186, 213, 223, 0.502); - border-radius: 13px; - padding:10px -} diff --git a/twitter.html b/twitter.html deleted file mode 100644 index 67543d90..00000000 --- a/twitter.html +++ /dev/null @@ -1,78 +0,0 @@ - - - - - - - - - -
-
- - - - -
-
- -
-

Tweet

 -
-
-
-
-
-

Home

-
-
-
-
-
-
-
-
-
- png-of-search-icon -
-

What's happening

-

Who to follow

-
-
-
- -