diff --git a/01_lc1_6663_resized.jpg b/01_lc1_6663_resized.jpg new file mode 100644 index 00000000..06d99fa5 Binary files /dev/null and b/01_lc1_6663_resized.jpg differ diff --git a/images/01_lc1_6663_resized.jpg b/images/01_lc1_6663_resized.jpg new file mode 100644 index 00000000..9a0aff2b Binary files /dev/null and b/images/01_lc1_6663_resized.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..8e3044b2 --- /dev/null +++ b/index.html @@ -0,0 +1,77 @@ + + + + + + Flammer + + + + +
+ +
+
+

Home

+ +
+
+
+ User + +
+ +
+
+
+
+ Nicolas +
+

Nicolas @MinimumViablePerson · 25m

+

@yemi @tayo Here's a Twitter clone, what do you think?

+
+
+
+ Tayo +
+

Faruq @Yemi · 55m

+

@MinimumViablePerson Looks awesome!

+
+
+
+ Sergio +
+

Sergio @Sergei · 2h

+

@MinimumViablePerson Cool cool!

+
+
+
+
+
+ +
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..f3058dae --- /dev/null +++ b/styles.css @@ -0,0 +1,159 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + display: grid; + grid-template-areas: "sidebar-left main-content sidebar-right"; + grid-template-columns: 1fr 3fr 1fr; + height: 100vh; + width: fit-content; +} + +.container { + display: grid; + grid-template-areas: "sidebar-left main-content sidebar-right"; + grid-template-columns: 1fr 3fr 1fr; + width: 100%; +} + +.sidebar-left { + grid-area: sidebar-left; + background-color: #F5F5F5; + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; +} + +.logo { + font-size: 24px; + font-weight: bold; + margin-bottom: 20px; +} + +.sidebar-left ul { + list-style: none; + padding: 0; + width: 100%; +} + +.sidebar-left ul li { + margin: 10px 0; +} + +.sidebar-left ul li a { + text-decoration: none; + color: #333; + display: block; + padding: 10px; + border-radius: 5px; + transition: background-color 0.3s; +} + +.sidebar-left ul li a:hover { + background-color: #E0E0E0; +} + +.flam-button { + background-color: #69e1ff; + color: white; + border: none; + padding: 10px 20px; + border-radius: 50px; + font-size: 16px; + cursor: pointer; + margin-top: 20px; +} + +.main-content { + grid-area: main-content; + padding: 20px; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.header input { + padding: 10px; + border: 1px solid #DDD; + border-radius: 50px; +} + +.new-post { + display: flex; + align-items: center; + margin-bottom: 20px; +} + +.profile-pic { + border-radius: 50%; + width: 50px; + height: 50px; + margin-right: 10px; +} + +.new-post input { + flex: 1; + padding: 10px; + border: 1px solid #DDD; + border-radius: 50px; +} + +.post-options { + margin-left: 10px; +} + +.post-options button { + background-color: #69e1ff; + color: white; + border: none; + padding: 10px 20px; + border-radius: 50px; + font-size: 16px; + cursor: pointer; +} + +.posts .post { + display: flex; + align-items: flex-start; + margin-bottom: 20px; +} + +.post-content { + margin-left: 10px; +} + +.sidebar-right { + grid-area: sidebar-right; + background-color: #F5F5F5; + padding: 20px; +} + +.widgets .widget { + background-color: white; + border-radius: 10px; + padding: 20px; + margin-bottom: 20px; +} + +@media (max-width: 1024px) { + body { + grid-template-areas: + "sidebar-left main-content"; + grid-template-columns: 1fr 2fr; + } + + .container { + grid-template-areas: + "sidebar-left main-content"; + grid-template-columns: 1fr 2fr; + } + + .sidebar-right { + display: none; + } +} \ No newline at end of file