From 1a520eb7b06a8396604d75ef15fe6968e627dd4b Mon Sep 17 00:00:00 2001 From: Hanzhang ma Date: Wed, 22 May 2024 23:32:38 +0200 Subject: [PATCH] make a simple page --- index.html | 86 +++++++++++++++++++++++++++++++++++++++++++----------- style.css | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 151 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index d4950de..15d7604 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,74 @@ - - Home - - + + Home + + - - -
-
- - 🔔 - - - Home - Explore - + + + +
+
+ + + + + + + Home + Explore + +
+
+
+

cs.fyi

+
+
+

Frontend, Backend, DevOps and everything in between

+
+
+
+ +
+
Deploy to ECS with Fargate using Terraform
+
Nov 3, 2023
+
+
+
Deploy to ECS with Fargate using Terraform
+
Nov 3, 2023
+
+
+
Deploy to ECS with Fargate using Terraform
+
Nov 3, 2023
+
+
+
Deploy to ECS with Fargate using Terraform
+
Nov 3, 2023
+
+
+
Deploy to ECS with Fargate using Terraform
+
Nov 3, 2023
+
+
+ Deploy to ECS with Fargate using Terraform +
Nov 3, 2023
+
+
+
Deploy to ECS with Fargate using Terraform
+
Nov 3, 2023
+
+
+
Deploy to ECS with Fargate using Terraform
+
Nov 3, 2023
+
+ +
+
+

copyright All rights reserved -- cs.fyi

+
-
- \ No newline at end of file + + + \ No newline at end of file diff --git a/style.css b/style.css index 2e509fb..b12a792 100644 --- a/style.css +++ b/style.css @@ -2,13 +2,31 @@ body{ background-color: #171717; } .badge{ + display: flex; color: #a3a3a3; font: 18px 'Roboto', sans-serif; } +/* body{ + display: flex; + /* justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} */ +body{ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} .container{ display: flex; - max-width: 750px; - padding: 0 1rem; + max-width: 800px; + padding: 20px; + flex-direction: column; + justify-content: space-between; + /* align-items: center; */ } .left-span{ flex: 1; @@ -16,8 +34,70 @@ body{ .right-span{ flex: 1; text-align: right; + gap: 50px; } .link{ color: #a3a3a3; text-decoration: none; +} + +h1{ + color: #fff; + font: ui-sans-serif; + font-size: 8rem; + margin: 0px 0px 16px; +} + +.leader{ + color:#a3a3a3; +} +.custom-svg{ + width: auto; + height: 1rem; +} +.custom-svg path{ + fill: #a3a3a3; +} +.custom-svg:hover path{ + fill: #fff; +} +.blog-list{ + /* max-width: 800px; */ + margin: 0 auto; + padding: 20px; +} + +.blog-item{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 0; + border-bottom: 1px solid #aaa; +} +.blog-item:hover .blog-date{ + color: #fff; + transition: color 0.3s ease; +} +.blog-item:last-child{ + border-bottom: none; +} +.blog-title{ + flex: 1 1 70%; + font-size: 1.2rem; + color: #fff; +} +.blog-date{ + flex: 0 0 30%; + text-align: right; + color: #aaa; + font-size: 1rem; +} +.blog-date:hover{ + color: #fff; +} +.feet{ + color: #a3a3a3; + text-align: center; + padding: 20px; + } \ No newline at end of file