diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6f3a2913
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/images/twitterr.jpg b/images/twitterr.jpg
new file mode 100644
index 00000000..daaa680b
Binary files /dev/null and b/images/twitterr.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..3755d824
--- /dev/null
+++ b/index.html
@@ -0,0 +1,176 @@
+
+
+
+
+
+
+ Twitter clone
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

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

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..bbd5d7c2
--- /dev/null
+++ b/style.css
@@ -0,0 +1,234 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ --twitter-color: ;
+ --twitter-background: #e6ecf0;
+ display: grid;
+ grid-template-columns: minmax(250px, 1fr) minmax(300px, 2fr) minmax(300px, 1fr);
+ grid-template-rows: auto;
+ grid-template-areas:
+ "sidebar feed widgets";
+}
+
+.sidebarOption {
+ display: grid;
+ align-items: center;
+ cursor: pointer;
+ grid-template-columns: auto 1fr;
+}
+
+.sidebarOption .material-icons
+{
+ padding: 20px;
+}
+
+.fa-twitter {
+ padding: 10px;
+ color: #1DA1F2;
+}
+
+.sidebarOption h2 {
+ font-weight: 800;
+ font-size: 20px;
+ margin-right: 20px;
+}
+
+.sidebarOption:hover {
+ background-color: var(--twitter-background);
+ border-radius: 30px;
+ color: var(--twitter-color);
+ transition: color 100ms ease-out;
+}
+
+.sidebarOption.active {
+ color: var(--twitter-color);
+}
+
+.sidebar_tweet {
+ width: 100%;
+ background-color: #1DA1F2;
+ border: none;
+ color: white;
+ font-weight: 900;
+ border-radius: 30px;
+ height: 50px;
+ margin-top: 20px;
+}
+
+.sidebar {
+ grid-area: sidebar;
+ border-right: 1px solid var(--twitter-background);
+ padding: 20px;
+ grid-template-rows: repeat(auto-fill, minmax(auto, 1fr));
+ row-gap: 20px;
+}
+
+.fa-twitter {
+ color: #1DA1F2;
+ font-size: 30px;
+}
+
+.feed {
+ grid-area: feed;
+ border-right: 1px solid var(--twitter-background);
+ overflow-y: scroll;
+ padding: 20px;
+}
+
+.feed_header {
+ position: sticky;
+ top: 0;
+ background-color: white;
+ z-index: 100;
+ border: 1px solid var(--twitter-background);
+ padding: 15px 20px;
+}
+
+.feed_header h2 {
+ font-size: 20px;
+ font-weight: 800;
+}
+
+.feed::-webkit-scrollbar {
+ display: none;
+}
+
+.feed {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+}
+
+.tweetbox_input img {
+ border-radius: 50%;
+ height: 40px;
+}
+
+.tweetBox {
+ padding-bottom: 10px;
+ border-bottom: 8px solid var(--twitter-background);
+ padding-right: 10px;
+}
+
+.tweetBox form {
+ display: grid;
+ grid-template-columns: 1fr auto;
+}
+
+.tweetbox_input {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ padding: 20px;
+}
+
+.tweetbox_input input {
+ margin-left: 20px;
+ font-size: 20px;
+ border: none;
+ outline: none;
+}
+
+.tweetBox_tweetButton {
+ background-color: #1DA1F2;
+ border: none;
+ color: white;
+ font-weight: 900;
+ border-radius: 30px;
+ width: 80px;
+ height: 40px;
+ margin-top: 20px;
+}
+
+.post_avatar img {
+ border-radius: 50%;
+ height: 40px;
+}
+
+.post {
+ display: grid;
+ align-items: flex-start;
+ border-bottom: 1px solid var(--twitter-background);
+ padding: 10px;
+ grid-template-columns: auto 1fr;
+}
+
+.post_body img {
+ width: 450px;
+ object-fit: contain;
+ border-radius: 20px;
+}
+
+.post_footer {
+ justify-content: space-between;
+ margin-top: 10px;
+}
+
+.post_badge {
+ font-size: 14px !important;
+ color: #1DA1F2;
+ margin-right: 5px;
+}
+
+.post_headerspecial {
+ font-weight: 600;
+ font-size: 12px;
+ color: gray;
+}
+
+.post_headertext h3 {
+ font-size: 15px;
+ margin-bottom: 5px;
+}
+
+.post_headerdescription {
+ margin-bottom: 10px;
+ font-size: 15px;
+}
+
+.post_body {
+ padding: 10px;
+}
+
+.post_avatar {
+ padding: 20px;
+}
+
+.widgets {
+ grid-area: widgets;
+ padding: 20px;
+ display: grid;
+ grid-template-rows: auto 1fr;
+ row-gap: 20px;
+}
+
+.widgets_input {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ align-items: center;
+ padding: 10px;
+ border-radius: 20px;
+}
+
+.widgets_input input {
+ border: none;
+ background-color: #1DA1F2;
+ outline: none;
+}
+
+.widgets_searchIcon {
+ color: gray;
+}
+
+.widgets_container {
+ padding: 20px;
+ background-color: whitesmoke;
+ border-radius: 20px;
+}
+
+.widgets_container h2 {
+ font-size: 18px;
+ font-weight: 800;
+}