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/122B135B-5DE4-47DD-8C88-09645F915717_1_105_c.jpeg b/images/122B135B-5DE4-47DD-8C88-09645F915717_1_105_c.jpeg new file mode 100644 index 00000000..e36e2ef1 Binary files /dev/null and b/images/122B135B-5DE4-47DD-8C88-09645F915717_1_105_c.jpeg differ diff --git a/images/ceeeena.webp b/images/ceeeena.webp new file mode 100644 index 00000000..45f05578 Binary files /dev/null and b/images/ceeeena.webp differ diff --git a/images/elon.webp b/images/elon.webp new file mode 100644 index 00000000..c6bb05ae Binary files /dev/null and b/images/elon.webp differ diff --git a/images/jon cena.jpeg b/images/jon cena.jpeg new file mode 100644 index 00000000..c2f87887 Binary files /dev/null and b/images/jon cena.jpeg differ diff --git a/src/assets/bar-chart.svg b/src/assets/bar-chart.svg new file mode 100644 index 00000000..da734d3a --- /dev/null +++ b/src/assets/bar-chart.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/bell.svg b/src/assets/bell.svg new file mode 100644 index 00000000..e25c2ec3 --- /dev/null +++ b/src/assets/bell.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/bookmark.svg b/src/assets/bookmark.svg new file mode 100644 index 00000000..ba56c0d5 --- /dev/null +++ b/src/assets/bookmark.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/calender.svg b/src/assets/calender.svg new file mode 100644 index 00000000..642560db --- /dev/null +++ b/src/assets/calender.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/assets/gif.svg b/src/assets/gif.svg new file mode 100644 index 00000000..90549e1b --- /dev/null +++ b/src/assets/gif.svg @@ -0,0 +1,12 @@ + + + + ic_fluent_gif_24_regular + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/assets/hashtag.svg b/src/assets/hashtag.svg new file mode 100644 index 00000000..76c79064 --- /dev/null +++ b/src/assets/hashtag.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/heart.svg b/src/assets/heart.svg new file mode 100644 index 00000000..6ce5bded --- /dev/null +++ b/src/assets/heart.svg @@ -0,0 +1,25 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/home.svg b/src/assets/home.svg new file mode 100644 index 00000000..8c35df9a --- /dev/null +++ b/src/assets/home.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/messages.svg b/src/assets/messages.svg new file mode 100644 index 00000000..9cb4c1a1 --- /dev/null +++ b/src/assets/messages.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/more.svg b/src/assets/more.svg new file mode 100644 index 00000000..e2dbc1bd --- /dev/null +++ b/src/assets/more.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/photo.svg b/src/assets/photo.svg new file mode 100644 index 00000000..79051717 --- /dev/null +++ b/src/assets/photo.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/profile.svg b/src/assets/profile.svg new file mode 100644 index 00000000..5d33fac6 --- /dev/null +++ b/src/assets/profile.svg @@ -0,0 +1,19 @@ + + + + + profile_round [#1342] + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/retweet.svg b/src/assets/retweet.svg new file mode 100644 index 00000000..870aa94d --- /dev/null +++ b/src/assets/retweet.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/search.svg b/src/assets/search.svg new file mode 100644 index 00000000..63693d48 --- /dev/null +++ b/src/assets/search.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/share.svg b/src/assets/share.svg new file mode 100644 index 00000000..b84708d3 --- /dev/null +++ b/src/assets/share.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/smiley.svg b/src/assets/smiley.svg new file mode 100644 index 00000000..f243fbd2 --- /dev/null +++ b/src/assets/smiley.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/sparkle.svg b/src/assets/sparkle.svg new file mode 100644 index 00000000..39f8676a --- /dev/null +++ b/src/assets/sparkle.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/speech.svg b/src/assets/speech.svg new file mode 100644 index 00000000..f0956cff --- /dev/null +++ b/src/assets/speech.svg @@ -0,0 +1,28 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/twitter.svg b/src/assets/twitter.svg new file mode 100644 index 00000000..50f12077 --- /dev/null +++ b/src/assets/twitter.svg @@ -0,0 +1,17 @@ + + + + + Twitter-color + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100644 index 00000000..b2c2b29b --- /dev/null +++ b/src/index.html @@ -0,0 +1,120 @@ + + + + + + + Twitter Replica + + +
+
+ +
+ + + + + + + + + +
+
+ + @iscreamvann +
+
+
+

Home

+
+

What's happening?

+

Share your thoughts...

+ + + + + + + +
+
+ +

+ "Immersing myself in my boolean course has been an exhilarating journey! 🚀 Delving into the intricacies of logic gates and truth tables has opened up a whole new dimension of understanding in the digital realm. I'm amazed by how Boolean algebra simplifies complex problem-solving processes, empowering me to construct precise search queries, design efficient algorithms, and optimize data structures. Each concept mastered feels like a victory, fueling my passion for technology and igniting a desire to explore even deeper into the world of programming. It's not just about learning; it's about unlocking the potential to innovate and create in this ever-evolving digital landscape. #BooleanGenius #TechPassion" +

+
+ + + +
+
+ +
+ +

Just bought a new lizard.

+ +
+ + + +
+
+
+ +

+ "I'll buy this one day. Mark my words." +

+
+ + + +
+
+
+ +

+ Do you think they see me now? +

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

Whats Happening?

+
+

Crypto News

+

Earlier this year, Binance quietly split from its venture capital division, Binance Labs, and established as an independent entity now valued at $10 billion. This change in operation became effective under Binance's newly appointed Chief Executive Officer, Richard Teng, who assumed the role four months ago

+ + +
+
+
+
+ + diff --git a/src/style.css b/src/style.css new file mode 100644 index 00000000..585a56ea --- /dev/null +++ b/src/style.css @@ -0,0 +1,337 @@ +* { + margin: 0; +} + +body { + font-family: 'Arial', sans-serif; + background-color: #f1f1f1; +} + +.grid-container { + display: grid; + grid-template-columns: + minmax(250px, 1fr) minmax(500px, 3fr) minmax(250px, 1fr); + height: 100vh; +} + +@media screen and (min-width: 1600px) { +.grid-container { + margin: auto; + width: 80vw; + max-width: 2000px; +} +} + +.twitter-logo { + height: 50px; + padding-left: 40px; + margin: 20px; + margin-right: auto; +} + +.column { + padding: 20px; +} + +.left-sidebar { + height: 100%; + display: flex; + flex-direction: column; + background-color: #FFFFFF; + border-right: 1px solid #ccc; + border-left: 1px solid #ccc; +} + +.nav-button-container { + flex: 1; + overflow-y: scroll; +} + +.nav-button { + display: block; + width: calc(100% - 40px); + height: 50px; + background-color: #FFFFFF; + background-size: 30px; + background-repeat: no-repeat; + background-position-x: 10px; + background-position-y: center; + margin: 40px 20px 0px 20px; + border-radius: 25px; + border: none; + font-weight: bolder; + font-size: 18px; + cursor: pointer; + box-sizing: border-box; + text-align: left; + padding-left: 50px; + transition: 0.3s ease; +} +.nav-button:hover{ + background-color: #76c4e2; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.nav-button[aria-selected="true"] { + color: #00ABEC; +} + +.home-b { + background-image: url("/src/assets/home.svg"); +} + +.ex-b { + background-image: url("/src/assets/hashtag.svg"); +} + +.not-b { + background-image: url("/src/assets/bell.svg"); +} + +.mes-b { + background-image: url("/src/assets/messages.svg"); +} + +.book-b { + background-image: url("/src/assets/bookmark.svg"); +} + +.list-b { + background-image: url("/src/assets/bar-chart.svg"); +} + +.prof-b { + background-image: url("/src/assets/profile.svg"); +} + +.more-b { + background-image: url("/src/assets/more.svg"); +} + +.tweet-b{ + font-size: 20px; + background-color: #00ABEC; + color: white; + text-align: center; + padding-left: 0; + transition: 0.3s ease; +} +.tweet-b:hover { + background-color: #76c4e2; +} + +.profile-box { + background-color: #FFFFFF; + height: 100px; + padding: 10px 20px 10px 40px; + border-top: solid 1px #d9d9d9; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 100%; + box-sizing: border-box; +} +.profile-pic { +height: 80px; +border-radius: 100%; +border: solid 1px #E6E6E6; +} + +.main-page { + background-color: #FFFFFF; + overflow-y: scroll; +} + +.main-header { + padding-bottom: 20px; +} + +.tweet { + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; + padding: 10px; +} + +.user-info img { + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 10px; + object-fit: cover; +} + +.username { + font-weight: bold; +} + +.tweet-content { + margin-top: 5px; + font-size: 15px; + line-height: 1.4; + color: #14171a; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; +} + + +.tweet-actions { + margin-top: 10px; +} + +.tweet-actions { + display: flex; + justify-content: space-around; + margin-top: 10px; +} + +.action-btn { + padding: 8px 16px; + border: none; + border-radius: 20px; + cursor: pointer; + transition: 0.3s ease; +} + +.action-btn:hover { + background-color: #f0f0f0; +} + +.like-btn { + background-color: #FFFFFF; + color: #00ABEC; +} + +.retweet-btn { + background-color: #FFFFFF; + color: #00ABEC; +} + +.comment-btn { + background-color: #FFFFFF; + color: #00ABEC; +} + +.whats-happening { + background-color: #FFFFFF; + padding: 20px; + border: 1px solid #ccc; + border-radius: 8px; + margin-bottom: 20px; +} + +.whats-happening h2 { + font-size: 18px; + margin-bottom: 10px; +} + +.whats-happening p { + font-size: 14px; + color: #888; +} + +.whats-happening a { + text-decoration: none; +} + +.tweet-vid { + margin: 50px auto; + display: block; + border: 3px solid black; + } + + .tweet-img-c { + text-align: center ; + margin-top: 20px; + } + + .whats-happening a { + padding-left: 30px; + } + + .wh-svg-bar { + height: 20px; + width: auto; + padding-top: 20px; + padding-right: 20px; + } + +.right-sidebar { + height: 100%; + display: flex; + flex-direction: column; + background-color: #FFFFFF; + border-right: 1px solid #ccc; + border-left: 1px solid #ccc; +} + +#search-bar { + padding: 10px; +} + +#search-bar input { + width: calc(100% - 20px); + padding: 8px; + margin-right: 10px; + border-radius: 10px; + border: 1px solid #ccc; +} + +#search-bar button { + width: 70px; + margin-top: 10px; + padding: 8px; + border: none; + border-radius: 10px; + background-color: #00ABEC; + color: white; + cursor: pointer; +} + + +@media screen and (max-width: 1200px) { + .grid-container { + grid-template-columns: 1fr; + } + .left-sidebar { + display: none; + } + .right-sidebar { + display: none; + } + } + + .news-bar { + flex: 1; + background-color: #E6E6E6; + width: calc(100% - 20px); + margin-left: 10px; + margin-right: 10px; + border-radius: 10px; + border: 1px solid #ccc; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + letter-spacing: 3px; +} + +.news-bar p { + padding: 0 5px; +} + + .news-bar h2, .news-bar h3 { + text-align: center; + margin-top: 10px; + margin-bottom: 30px; + font-size: 20px; + } + + .right-btn { + margin: 20px auto; + display: block; + font-size: 20px; + width: 200px; + height: 80px; + background-color: #00ABEC; + border-radius: 10px; + border: none; + color: white; + transition: 0.3s ease; + cursor: pointer; + } + + diff --git a/videos/pexels-amar-preciado-20378581 (Original).mp4 b/videos/pexels-amar-preciado-20378581 (Original).mp4 new file mode 100644 index 00000000..12552905 Binary files /dev/null and b/videos/pexels-amar-preciado-20378581 (Original).mp4 differ