diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..a0de46ff --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5504 +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..547219c0 --- /dev/null +++ b/index.html @@ -0,0 +1,77 @@ + + + + + + + Document + + + + +
+
+
Home
+
+
+
+
+
+
+
+
+
Flam
+
+ + +
+ +
+
+
+
Home
+
Explore
+
Notifications
+
Messages
+
Bookmarks
+
Profile
+
More
+
Flam
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
Search Flammer
+
What's happening
+
Who to follow
+
+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..5a541a55 --- /dev/null +++ b/styles.css @@ -0,0 +1,239 @@ + +.container{ + display: grid; + height: 100vh; + grid-template-columns: 1fr 2fr 1fr; + grid-template-areas: + 'left header right' + 'left main right' + 'left main right' + ; + +} +.left .flamingo{ + display: grid; + background-color: white; + text-align: center; + + +} + +.left .flamin{ + display: grid; +border-radius: 40px; + height: 80px; +width: 80px; +margin: -10px; + + +} +.main{ + display: grid; + grid-area: main; + background-color: white; + border-radius: 20px; + grid-template-rows: repeat(3,100px); + +padding: 0px; + +margin-bottom: 550px; +height: 100vh; + +} + +.main div{border: 2px solid pink; +background-color: white; + +} + +.right{grid-area: right; + display: grid; + grid-template-rows: 48px 60px 60px; + + background-color: white; +padding:10px; +gap: 20px; +font-size: 20px; +color: white; +border-left:1px solid pink; +} +.right div{ + background-color: white; + border: 2px solid black; + border-radius: 30px; + border: 1px solid white; + background-color: rgb(192, 55, 78); +} +.right .search{ margin-bottom: -15px; + margin-right: 15px; + height: 45px; + width: 50px; + border-radius: 50px; + +} +.right .bold{display: inline-block; + padding-block: 15px; + margin-left: 10px; + text-align: left; + font-size: 20px; + font-weight: bold; +} +.left{ +grid-area: left; +background-color: white; +grid-template-rows: repeat(7,50px); +grid-template-rows: minmax(20px,40px); +display: grid; +padding: 2px; +gap:40px; +padding-bottom: 300px; +padding-right: 30px; +padding-top: 10px; +border-right: 1px solid pink; + +} + +.left .flam{ + display: inline-block; + background-color: rgb(192, 55, 78); + /* padding-top: 40px ; */ + border-radius: 50px; + text-align: center; + margin-top: 10px; + margin-left: 50px; + margin-right: 50px; + margin-bottom: 290px; + + + color: white; + +} + + +.left div{background-color: white; + display: grid; + border: 2px solid black; +border-radius: 40px; +padding-right: 2px; +font-size: 30px; +grid-template-columns: 1fr 1fr 1fr; +margin-left: 10px; +border: 2px solid white; + +} +.left .menu{ + margin-bottom: -10px; + height: 40px; + width: 65px; + border-radius: 50px; +} + +.header{ + grid-area: header; + display: grid; +font-weight: bold; + grid-template-rows: repeat(3,74px); +/* padding: 10px; */ +align-items: center; + background-color: pink; + height: 90%; + border-bottom: 25px solid pink ; + + +} + + .header .firstline{ + text-align: right; + grid-template-columns: 1fr 1fr; + + + +} +.header .bold{ + text-align: left; +margin-right: 300px; +font-size: 30px; +} + +.header .firstline .star{ + margin-left: 290px; + height: 60px; + width: 70px; + +} +.header .profile{ + background-color: white; + border: 2px solid black; + border-radius: 60px; + grid-template-columns: 100px ; + padding: 33px; + margin-right: 669px; +} + +.header div{ +background-color: white; +border: 2px solid pink + +} +.header .icons{ + grid-area: header; + display: grid; + + grid-template-rows: 60px; + grid-template-columns: repeat(6,70px); + padding: 5px; + gap: 15px; + +} +.header .icons div{ + padding: 15px; + border-radius: 20px; + border: 2px solid white; +} +.header .flam{ + display: grid; + background-color: rgb(192, 55, 78); + border: 2px solid black; + padding: 100px; + grid-template-columns: 100px; + padding-bottom: 10px; + padding-top: 20px; + padding-right: 40px; + padding-left: 40px; + position: absolute; right: 390px; top: 170px; + text-align: center; + color: white; + background-color: rgb(192, 55, 78); +} + +.main .tweets{ + grid-area: header; + display: grid; + background-color: white; + grid-template-rows: 35px; + grid-template-columns: repeat(4,1fr); + /* padding: -1px; */ + gap: 50px; + border-top: 1px solid white; +border-right: 1px solid white; +border-left: 1px solid white; +} +.main .profile{ + + background-color: white; + border: 2px solid black; + border-radius: 60px; + grid-template-columns: 100px; + grid-template-rows: 30px; + padding: 30px; + margin-right: 680px; + gap: 10px; + +} + +.main .tweets div{ +background-color: white; +grid-template-rows: 30px; +border: 2px solid white; +} +