diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..568b1a50 Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..8a4d2d4d --- /dev/null +++ b/index.html @@ -0,0 +1,136 @@ + + + + + + Twitter Replica + + + + +
+ +
+
+

Home

+
+
+ User Avatar + +
+
+
+ + + + +
+ +
+
+
+ Eric Elliott Retweeted +
+
+ User Avatar +
+ woki GITer of COINs@owocki · 26m +
+
+

+ me as an engineer, 2015: the CEOs vision is so hand-wavey 👋
+
+ me as a CEO, 2021: (waves hand) this is my vision 🌅 +

+
+ + + + +
+
+
+
+ GroupDocs Avatar +
GroupDocs @GroupDocs
+
+

+ GroupDocs Total for .NET is a compilation of every .NET + #API offered by #GroupDocs. We compile it + on a daily basis to ensure that it contains the most up-to-date + versions of each of our .NET document + #automation APIs.
Read more: + bit.ly/347331o +

+
+ + + + +
+
+
+ +
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..931f0149 --- /dev/null +++ b/styles.css @@ -0,0 +1,279 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: Arial, sans-serif; +} + +body { + display: grid; + grid-template-columns: 1fr 3fr 1fr; + grid-template-rows: auto; + gap: 10px; + padding: 10px; +} + +.container { + display: contents; +} + +.sidebar { + grid-column: 1 / 2; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 20px; + border-right: 1px solid #ccc; +} + +.sidebar ul { + list-style: none; + width: 100%; +} + +.sidebar ul li { + margin: 10px 0; + display: flex; + align-items: center; + cursor: pointer; + padding: 5px 0; +} + +.sidebar ul li:hover { + background-color: #e8f5fd; + border-radius: 20px; +} + +.sidebar ul li i { + margin-right: 10px; + font-size: 20px; +} + +.sidebar ul li img { + width: 30px; +} + +.sidebar ul li button { + width: 100%; + padding: 10px; + background-color: #1da1f2; + color: white; + border: none; + border-radius: 20px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.sidebar ul li button i { + margin-right: 5px; +} + +.main-content { + grid-column: 2 / 3; + padding: 20px; + border-right: 1px solid #ccc; +} + +.main-content header h1 { + font-size: 24px; + margin-bottom: 20px; + border-bottom: 1px solid #ccc; + padding-bottom: 10px; +} + +.tweet-box { + display: flex; + align-items: center; + margin-bottom: 10px; + padding-bottom: 10px; +} + +.tweet-box img { + width: 50px; + border-radius: 50%; + margin-right: 10px; +} + +.tweet-box input { + width: calc(100% - 70px); + padding: 10px; + border: 1px solid #ccc; + border-radius: 20px; +} + +.tweet-box-icons { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + padding-bottom: 10px; + border-bottom: 1px solid #ccc; +} + +.tweet-box-icons .icons-left { + display: flex; + gap: 10px; +} + +.tweet-box-icons i { + cursor: pointer; + color: #1da1f2; + font-size: 20px; +} + +.tweet-box-icons i:hover { + color: #1a91da; +} + +.tweet-box-icons .tweet-button { + background-color: #1da1f2; + color: white; + padding: 5px 10px; + border: none; + border-radius: 20px; + cursor: pointer; +} + +.tweet-box-icons .tweet-button:hover { + background-color: #1a91da; +} + +.tweet { + border-bottom: 1px solid #ccc; + padding: 10px 0; +} + +.user-retweeted { + color: #555; + font-size: 14px; + display: flex; + align-items: center; + margin-bottom: 5px; +} + +.user-retweeted i { + margin-right: 5px; +} + +.tweet-header { + display: flex; + align-items: center; + margin-bottom: 10px; +} + +.tweet-header img { + width: 50px; + border-radius: 50%; + margin-right: 10px; +} + +.tweet-header div { + display: flex; + flex-direction: column; +} + +.tweet-header div strong { + font-size: 16px; +} + +.tweet-header div span { + font-size: 14px; + color: #555; +} + +.tweet p { + font-size: 14px; +} + +.tweet p span { + color: #1da1f2; + cursor: pointer; +} + +.tweet p a { + color: #1da1f2; +} + +.tweet-actions { + display: flex; + justify-content: space-around; + margin-top: 10px; +} + +.tweet-actions i { + cursor: pointer; + color: #555; +} + +.tweet-actions i:hover { + color: #1da1f2; +} + +.right-sidebar { + grid-column: 3 / 4; + padding: 20px; +} + +.whats-happening { + background-color: #f5f8fa; + padding: 20px; + border-radius: 10px; +} + +.whats-happening h2 { + font-size: 18px; + margin-bottom: 10px; +} + +.news-item { + margin-bottom: 10px; + border-bottom: 1px solid #ccc; + padding-bottom: 10px; +} + +.news-item h3 { + font-size: 16px; +} + +.news-item p { + font-size: 14px; + color: #555; +} + +.news-item span { + color: #1da1f2; +} + +.right-sidebar button { + background-color: #1da1f2; + color: white; + padding: 10px; + border: none; + border-radius: 20px; + cursor: pointer; + width: 100%; +} + +@media (max-width: 768px) { + body { + grid-template-columns: 1fr; + } + + .sidebar { + grid-column: 1 / 2; + border-right: none; + border-bottom: 1px solid #ccc; + } + + .main-content { + grid-column: 1 / 2; + border-right: none; + border-bottom: 1px solid #ccc; + } + + .right-sidebar { + grid-column: 1 / 2; + } +} diff --git a/test.html b/test.html new file mode 100644 index 00000000..712d193c --- /dev/null +++ b/test.html @@ -0,0 +1,417 @@ + + + + + + Twitter Replica + + + + + +
+ +
+
+

Home

+
+
+ User Avatar + +
+
+
+ + + + +
+ +
+
+
+ Eric Elliott Retweeted +
+
+ User Avatar +
+ woki GITer of COINs@owocki · 26m +
+
+

+ me as an engineer, 2015: the CEOs vision is so hand-wavey 👋
+
+ me as a CEO, 2021: (waves hand) this is my vision 🌅 +

+
+ + + + +
+
+
+
+ GroupDocs Avatar +
GroupDocs @GroupDocs
+
+

+ GroupDocs Total for .NET is a compilation of every .NET + #API offered by #GroupDocs. We compile it + on a daily basis to ensure that it contains the most up-to-date + versions of each of our .NET document + #automation APIs.
Read more: + bit.ly/347331o +

+
+ + + + +
+
+
+ +
+ +