Third p

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid"
+}

index.css

@@ -1,46 +1,144 @@
-body {
-  position: fixed;
-  inset: 0;
-  margin: auto;
-  user-select: none;
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+* {
+
+  margin: 0;
+  padding: 0;
 }
 
-p {
-  font-size: 5rem;
-  color: white;
-  width: 500px;
-  height: 500px;
-  margin: auto;
-  background-color: cornflowerblue;
-  background-image: linear-gradient(19deg, cornflowerblue 0%, crimson 100%);
-  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
-  box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.2);
-  animation: morphing 10s infinite;
-  overflow: hidden;
-  cursor: url(https://cdn.custom-cursor.com/db/7476/32/minimal-apple-cursor.png),
-    default;
-}
-
-/* https://codepen.io/nickylew/pen/GYMoKM */
-@keyframes morphing {
-  0% {
-    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
-    box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.2);
-  }
-  25% {
-    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
-  }
-  50% {
-    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
-    box-shadow: -10px -5px 50px rgba(0, 0, 0, 0.2);
-  }
-  75% {
-    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
-  }
+:root {
+  --gray-color: #6a7a88;
 }
 
 .center {
+  font-family: 'Roboto';
+  box-sizing: border-box;
+  height: 97vh;
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
+}
+
+.container {
+  width: 500px;
+  height: 200px;
+  background: #16202a;
+  position: relative;
+}
+
+.username-container {
+  display: flex;
+  margin-left: 10px;
+  padding-top: 10px;
+  width: 50%;
+}
+
+.username-container .username {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  margin-left: 10px;
+}
+
+.username-container .username .name {
+
+  color: #fff;
+  margin-top: 5px;
+  font-size: 1.1rem;
+}
+
+.username-container .username .username-set {
+  margin-top: 5px;
+  color: var(--gray-color);
+
+}
+
+.img {
+  width: 50px;
+  height: 50px;
+  background-color: #cdd8de;
+
+}
+
+.img .username-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
 }
+
+.tweet, .time {
+  margin: 10px;
+  color: var(--gray-color);
+}
+
+.tweet .tweet-p {
+  color: #feffff;
+  font-size: 1.8rem;
+
+}
+
+.icons-container {
+  border-top: 1px solid var(--gray-color);
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  height: 9vh;
+  width: 90%;
+  margin: 0 auto 0 12px;
+}
+
+.icons-container img {
+  width: 22px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.comment, .retweet, .like, .share {
+  display: flex;
+  justify-content: space-between;
+  width: 50px;
+  color: var(--gray-color);
+  font-size: .8rem;
+  align-items: center;
+  transition: all .3s ease;
+  margin-left: 50px;
+}
+
+.comment-icon:hover, .retweet-icon:hover, .share-icon:hover {
+  transform: scale(1.2);
+}
+
+.retweet {
+  width: 50px;
+  color: #399975;
+}
+
+.retweet .retweet-icon {
+  width: 30px;
+}
+
+.like {
+  width: 70px;
+  color: #e6235f;
+}
+
+.like-icon:hover {
+  transform: scale(1.2);
+}
+
+.arrow {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: var(--gray-color);
+  cursor: pointer;
+}
+
+.arrow:hover {
+  transform: scale(1.2);
+}
+
+