diff --git a/images/avatar.jpg b/images/avatar.jpg new file mode 100644 index 00000000..306ff6e6 Binary files /dev/null and b/images/avatar.jpg differ diff --git a/images/bookmarks.png b/images/bookmarks.png new file mode 100644 index 00000000..233a7a64 Binary files /dev/null and b/images/bookmarks.png differ diff --git a/images/boolean-screenshot.png b/images/boolean-screenshot.png new file mode 100644 index 00000000..03888b4f Binary files /dev/null and b/images/boolean-screenshot.png differ diff --git a/images/boolean.png b/images/boolean.png new file mode 100644 index 00000000..44ed8dba Binary files /dev/null and b/images/boolean.png differ diff --git a/images/hashtag.png b/images/hashtag.png new file mode 100644 index 00000000..5d7020ea Binary files /dev/null and b/images/hashtag.png differ diff --git a/images/home.png b/images/home.png new file mode 100644 index 00000000..9b1009d5 Binary files /dev/null and b/images/home.png differ diff --git a/images/imedia.svg b/images/imedia.svg new file mode 100644 index 00000000..7608c2c6 --- /dev/null +++ b/images/imedia.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/lists.png b/images/lists.png new file mode 100644 index 00000000..a5f63bc3 Binary files /dev/null and b/images/lists.png differ diff --git a/images/messages.png b/images/messages.png new file mode 100644 index 00000000..fdbb6759 Binary files /dev/null and b/images/messages.png differ diff --git a/images/more.png b/images/more.png new file mode 100644 index 00000000..594e8596 Binary files /dev/null and b/images/more.png differ diff --git a/images/news.jpg b/images/news.jpg new file mode 100644 index 00000000..ee5c9966 Binary files /dev/null and b/images/news.jpg differ diff --git a/images/notifications.png b/images/notifications.png new file mode 100644 index 00000000..862a4077 Binary files /dev/null and b/images/notifications.png differ diff --git a/images/person.png b/images/person.png new file mode 100644 index 00000000..e301994a Binary files /dev/null and b/images/person.png differ diff --git a/images/profile.png b/images/profile.png new file mode 100644 index 00000000..418f7925 Binary files /dev/null and b/images/profile.png differ diff --git a/images/setting.gif b/images/setting.gif new file mode 100644 index 00000000..7697bf41 Binary files /dev/null and b/images/setting.gif differ diff --git a/images/twitter-logo.png b/images/twitter-logo.png new file mode 100644 index 00000000..fb64e19c Binary files /dev/null and b/images/twitter-logo.png differ diff --git a/style.css b/style.css new file mode 100644 index 00000000..2436751f --- /dev/null +++ b/style.css @@ -0,0 +1,167 @@ +* { + margin: 0; + /* box-sizing: content-box; */ +} +.container { + display: grid; + grid-template-columns: 2fr 4fr 3fr; + gap: 10px; + align-items: center; + padding-left: 20px; + padding-right: 20px; + /* border: 2px solid red; */ +} +.box { + height: 100vh; + /* border: 2px solid black; */ +} +.min-div { + border: 1px solid rgb(245, 242, 242); + margin-bottom: 10px; + min-height: 20px; +} + +.last { + height: 56px; +} +.a-nav { + align-items: center; + display: flex; + padding-left: 50px; + text-decoration: none; +} +span { + padding: 10px; + font-weight: 600; + color: black; +} +.btn { + background: blue; + padding: 10px 40px; + width: 170px; + border: none; + color: white; + font-weight: 600; + border-radius: 15px; +} +.btn:hover { + background-color: rgb(69, 69, 219); +} +.mid { + display: flex; + /* height: 100px; */ + margin: 0; +} +.nav-bar { + display: flex; + align-items: center; + justify-content: space-between; +} +.nav-bar a { + padding: 10px; +} +svg { + width: 20px; + height: 20px; +} +svg path { + fill: rgb(69, 69, 219); +} +input { + border: none; + /* display: block; */ +} +.tweet-icon { + display: block; +} +.tweet-div { + display: grid; + grid-template-columns: 2fr 8fr; + /* gap: 10px; */ +} +.min-tweet-div { + height: 100%; + /* border: 2px solid green; */ +} +.head { + width: 10%; + padding: 10px; +} +.tweet { + width: 90%; +} +.min-tweet { + /* border: 2px solid rgb(255, 0, 191); */ + height: 100%; + padding: 10px; +} +.tweet-msg { + height: 60%; +} +.min-icon { + height: 40%; + display: grid; + grid-template-columns: 8fr 2fr; +} +.tweet-div-2 { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 4fr; +} +.sm-icon-div { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + padding: 5px; + width: 50px; +} +.svg-div { + width: 35px; +} +.tweet-btn { + padding: 10px 15px; + background: rgb(69, 69, 219); + border-radius: 13px; + color: white; + border: none; +} +.tweet-btn:hover{ + background: rgb(57, 57, 197); +} +#mid-page-div { + border: 1px solid rgb(245, 242, 242); +} +p { + padding: 5px 10px; + /* text-align: center; */ +} +#search-i-div { + padding-left: 20px; + align-content: center; +} +.right-side { + display: grid; + grid-template-columns: 2fr 9fr; + background: rgb(217, 217, 231); + border-radius: 15px; + padding-left: 10px; + align-content: center; +} +#search-btn { + width: 100%; + background: rgb(217, 217, 231); + border-radius: 15px; + border: none; + height: 30px; +} +.right-aside { + margin-bottom: 1px; + border-radius: 7px; + background: rgb(217, 217, 231); + padding: 10px 5px; +} +textarea { + padding-left: 20px; + border: none; +} +img { + padding: 10px; +} \ No newline at end of file diff --git a/twitter.html b/twitter.html new file mode 100644 index 00000000..04793f12 --- /dev/null +++ b/twitter.html @@ -0,0 +1,255 @@ + + + + + + + Twitter + + + + +
+
+
+ + twitter logo + + +
+
+ + Home + +
+
+ + Explore + +
+
+ + Notifications + +
+
+ + Messages + +
+
+ + Bookmarks + +
+
+ + Lists + +
+
+ + Profile + +
+
+ + More + +
+
+ + + +
+ + +
+
+
+
+ Home + +
+
+
+
+
+
+
+ +
+
+
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, + cupiditate impedit! Rem quaerat perferendis quod ex natus, sequi tenetur + , numquam quae corporis minima, voluptas asperiores neque excepturi iste dolorum at!

+
+
+
+
+ +
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, + cupiditate impedit! Rem quaerat perferendis quod ex natus, sequi tenetur + , numquam quae corporis minima, voluptas asperiores neque excepturi iste dolorum at!
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo nam, rerum provident ab + accusamus, + facere id laborum dolorum odit non vero accusantium! Repudiandae optio, aliquam consequatur + praesenti + um ipsa animi ad! +

+ + +
+ +
+
+
+ +
+
+ + + +
+ +
+
+
+
+
+ + + + + +
+
+ +
+
+
+
+ lastest News +
+
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. + Harum accusamus perferendis recusandae, dolores labore, + consequatur quo expedita, tempora voluptatum sapiente ab! + Dolores laborum repellat ducimus voluptas + magni rem officia autem! +

+
+
+
+
+ What's happening +
+
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. + Harum accusamus perferendis recusandae, dolores labore, + consequatur quo expedita, tempora voluptatum sapiente ab! + Dolores laborum repellat ducimus voluptas + magni rem officia autem! +

+
+
+
+
+ #BooleanCodingCamp +
+
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. + Harum accusamus perferendis recusandae, dolores labore, + consequatur quo expedita, tempora voluptatum sapiente ab! + Dolores laborum repellat ducimus voluptas + magni rem officia autem! +

+
+
+
+
+ #LondonBridges +
+
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. + Harum accusamus perferendis recusandae, dolores labore, + consequatur quo expedita, tempora voluptatum sapiente ab! + Dolores laborum repellat ducimus voluptas + magni rem officia autem! +

+
+
+ +
+
+ + + + \ No newline at end of file