make a simple page
This commit is contained in:
Hanzhang ma
parent
f7b8a1523d
commit
1a520eb7b0
86
index.html
86
index.html
@ -1,22 +1,74 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Home</title>
|
<title>Home</title>
|
||||||
<link rel="stylesheet" href="./style.css">
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||||
</head>
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
<body>
|
</head>
|
||||||
<!-- Header -->
|
|
||||||
<div class="container">
|
<body >
|
||||||
<div class="badge">
|
<div class="container">
|
||||||
<span class="left-span">
|
<div class="badge">
|
||||||
<i class="icon">🔔</i>
|
<span class="left-span">
|
||||||
</span>
|
<a class="hover:text-white text-neutral-400" href="index.html">
|
||||||
<span class="right-span">
|
<svg class="custom-svg" fill="none" height="78" viewBox="0 0 229 78" width="229" xmlns="http://www.w3.org/2000/svg"><path d="M55.7568 8.69113C54.2925 7.56473 52.4851 6.96568 50.6368 7.00152H47.6672C41.1238 11.9116 33.961 15.9411 26.368 18.9823C18.8365 22.0851 11.7043 26.0684 5.12 30.8607C1.92512 33.7177 0.06656 37.7829 0 42.0735C0.37888 43.6965 1.52576 45.0329 3.072 45.6575C4.4544 46.1183 5.888 46.6815 7.2704 47.2447C21.2634 53.1839 34.4064 59.5686 46.6944 66.3935C48.3226 67.5762 49.8637 68.8767 51.3024 70.2847C52.2394 70.6943 53.248 70.9043 54.272 70.8991C56.7962 70.9196 59.2435 70.0492 61.184 68.4415C63.1552 67.0335 64.1997 64.6527 63.8976 62.2463C63.9795 60.4799 62.9299 58.8569 61.2864 58.2015L40.0896 48.8831C33.0547 45.8982 26.2195 42.478 19.6096 38.6431C24.2432 32.8729 30.4794 28.5977 37.5296 26.3551C44.5389 24.0972 51.0054 20.421 56.5248 15.5519C57.3184 14.789 57.7638 13.7343 57.7536 12.6335C57.7178 11.0873 56.9856 9.63321 55.7568 8.69113Z" fill="currentColor"></path><path d="M173.192 8.69113C174.657 7.56473 176.464 6.96568 178.312 7.00152H181.282C187.825 11.9116 194.988 15.9411 202.581 18.9823C210.112 22.0851 217.245 26.0684 223.829 30.8607C227.024 33.7177 228.882 37.7829 228.949 42.0735C228.57 43.6965 227.423 45.0329 225.877 45.6575C224.495 46.1183 223.061 46.6815 221.679 47.2447C207.686 53.1839 194.543 59.5686 182.255 66.3935C180.626 67.5762 179.085 68.8767 177.647 70.2847C176.71 70.6943 175.701 70.9043 174.677 70.8991C172.153 70.9196 169.705 70.0492 167.765 68.4415C165.794 67.0335 164.749 64.6527 165.051 62.2463C164.969 60.4799 166.019 58.8569 167.663 58.2015L188.859 48.8831C195.894 45.8982 202.729 42.478 209.339 38.6431C204.706 32.8729 198.47 28.5977 191.419 26.3551C184.41 24.0972 177.944 20.421 172.424 15.5519C171.631 14.789 171.185 13.7343 171.195 12.6335C171.231 11.0873 171.963 9.63321 173.192 8.69113Z" fill="currentColor"></path><path d="M93.3949 21.24C93.5946 21.24 93.7943 21.2451 93.9939 21.2502C94.1731 21.2451 94.3523 21.24 94.5264 21.24C97.752 21.24 100.916 22.1821 103.62 23.9638C107.367 27.5273 109.226 32.6474 108.637 37.7879C108.637 45.6215 106.384 50.8438 101.776 53.6086C99.4775 54.9091 96.8919 55.6106 94.25 55.6566C94.2397 55.6566 94.2346 55.6566 94.2243 55.6566C90.2051 55.6566 86.4164 53.7571 84.01 50.5366C81.1684 47.0704 79.3917 42.8566 78.89 38.4022C77.8557 33.6713 79.3251 28.7408 82.7811 25.3462C85.6893 22.6992 89.4781 21.24 93.3949 21.24ZM93.7892 42.4982C96.6154 42.4982 98.9092 40.2045 98.9092 37.3782C98.9092 34.552 96.6154 32.2582 93.7892 32.2582C90.9629 32.2582 88.6692 34.552 88.6692 37.3782C88.6692 40.2045 90.9629 42.4982 93.7892 42.4982ZM93.3949 11C86.9028 11 80.6871 13.4064 75.8896 17.7737C75.7923 17.8608 75.7002 17.9478 75.608 18.04C69.7303 23.8102 67.201 32.0022 68.7728 40.0509C69.5613 46.2205 72.0343 52.0163 75.9511 56.8598C80.2775 62.5226 87.0871 65.8966 94.2243 65.8966C98.7555 65.8198 103.041 64.6525 106.809 62.5277C106.886 62.4816 106.968 62.4355 107.045 62.3894C112.375 59.1894 118.713 52.4259 118.872 38.3357C119.604 30.2512 116.568 22.1462 110.675 16.545C110.235 16.1251 109.753 15.7462 109.246 15.4134C104.864 12.5309 99.7744 11.0051 94.5264 11.0051C94.3575 11.0051 94.1885 11.0051 94.0195 11.0102C93.8096 11 93.6048 11 93.3949 11Z" fill="currentColor" clip-rule="evenodd" fill-rule="evenodd"></path><path d="M103.62 23.9638C100.768 22.0899 97.4039 21.1376 93.9939 21.2502C89.8621 21.0915 85.8378 22.5661 82.7811 25.3462C79.3251 28.7408 77.8557 33.6713 78.89 38.4022C79.3917 42.8566 81.1684 47.0704 84.01 50.5366C86.4215 53.7674 90.2205 55.6669 94.25 55.6566C96.8919 55.6106 99.4775 54.9091 101.776 53.6086C106.384 50.8438 108.637 45.6215 108.637 37.7879C109.226 32.6474 107.367 27.5325 103.62 23.9638ZM93.7892 42.4982C90.9629 42.4982 88.6692 40.2045 88.6692 37.3782C88.6692 34.552 90.9629 32.2582 93.7892 32.2582C96.6154 32.2582 98.9092 34.552 98.9092 37.3782C98.9092 40.2045 96.6154 42.4982 93.7892 42.4982Z" fill="currentColor" clip-rule="evenodd" fill-rule="evenodd"></path><path d="M114.316 37.2695C114.316 48.0391 105.585 56.7695 94.8156 56.7695C84.046 56.7695 75.3156 48.0391 75.3156 37.2695C75.3156 26.5 84.046 17.7695 94.8156 17.7695C105.585 17.7695 114.316 26.5 114.316 37.2695Z" fill="currentColor"></path><path d="M149.112 31.671C148.297 38.2955 147.461 57.4944 147.273 67.341C147.232 69.5043 145.832 71.4364 143.676 71.6269C139.382 72.0066 133.814 71.3815 130.964 69.7944C129.748 68.6547 129.164 66.9933 129.396 65.3419C129.688 63.9143 129.917 62.3912 130.121 60.9124C131.974 45.8246 133.016 31.25 133.249 17.1958C133.039 15.1945 132.684 13.2095 132.184 11.2596C132.297 10.2434 132.62 9.26487 133.136 8.38062C134.381 6.1844 136.358 4.50014 138.721 3.62348C140.926 2.62037 143.51 2.90621 145.443 4.37102C147.013 5.18328 150.254 8.74899 150 10.5L149.112 31.671Z" fill="currentColor"></path></svg>
|
||||||
<a href="index.html" class="link">Home</a>
|
</a>
|
||||||
<a href="explore.html" class="link">Explore</a>
|
</span>
|
||||||
</span>
|
<span class="right-span">
|
||||||
|
<a href="index.html" class="link">Home</a>
|
||||||
|
<a href="explore.html" class="link">Explore</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div>
|
||||||
|
<h1>cs.fyi</h1>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="leader">Frontend, Backend, DevOps and everything in between</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<!-- <div class="blog-list"> -->
|
||||||
|
<div class="blog-item">
|
||||||
|
<div class="blog-title">Deploy to ECS with Fargate using Terraform</div>
|
||||||
|
<div class="blog-date">Nov 3, 2023</div>
|
||||||
|
</div>
|
||||||
|
<div class="blog-item">
|
||||||
|
<div class="blog-title">Deploy to ECS with Fargate using Terraform</div>
|
||||||
|
<div class="blog-date">Nov 3, 2023</div>
|
||||||
|
</div>
|
||||||
|
<div class="blog-item">
|
||||||
|
<div class="blog-title">Deploy to ECS with Fargate using Terraform</div>
|
||||||
|
<div class="blog-date">Nov 3, 2023</div>
|
||||||
|
</div>
|
||||||
|
<div class="blog-item">
|
||||||
|
<div class="blog-title">Deploy to ECS with Fargate using Terraform</div>
|
||||||
|
<div class="blog-date">Nov 3, 2023</div>
|
||||||
|
</div>
|
||||||
|
<div class="blog-item">
|
||||||
|
<div class="blog-title">Deploy to ECS with Fargate using Terraform</div>
|
||||||
|
<div class="blog-date">Nov 3, 2023</div>
|
||||||
|
</div>
|
||||||
|
<div class="blog-item">
|
||||||
|
<a class="blog-title" href="index.html">Deploy to ECS with Fargate using Terraform</a>
|
||||||
|
<div class="blog-date">Nov 3, 2023</div>
|
||||||
|
</div>
|
||||||
|
<div class="blog-item">
|
||||||
|
<div class="blog-title">Deploy to ECS with Fargate using Terraform</div>
|
||||||
|
<div class="blog-date">Nov 3, 2023</div>
|
||||||
|
</div>
|
||||||
|
<div class="blog-item">
|
||||||
|
<div class="blog-title">Deploy to ECS with Fargate using Terraform</div>
|
||||||
|
<div class="blog-date">Nov 3, 2023</div>
|
||||||
|
</div>
|
||||||
|
<!-- </div> -->
|
||||||
|
</div>
|
||||||
|
<div class="feet">
|
||||||
|
<p>copyright All rights reserved -- cs.fyi</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</body>
|
||||||
</body>
|
|
||||||
|
</html>
|
||||||
84
style.css
84
style.css
@ -2,13 +2,31 @@ body{
|
|||||||
background-color: #171717;
|
background-color: #171717;
|
||||||
}
|
}
|
||||||
.badge{
|
.badge{
|
||||||
|
display: flex;
|
||||||
color: #a3a3a3;
|
color: #a3a3a3;
|
||||||
font: 18px 'Roboto', sans-serif;
|
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{
|
.container{
|
||||||
display: flex;
|
display: flex;
|
||||||
max-width: 750px;
|
max-width: 800px;
|
||||||
padding: 0 1rem;
|
padding: 20px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
/* align-items: center; */
|
||||||
}
|
}
|
||||||
.left-span{
|
.left-span{
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -16,8 +34,70 @@ body{
|
|||||||
.right-span{
|
.right-span{
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
gap: 50px;
|
||||||
}
|
}
|
||||||
.link{
|
.link{
|
||||||
color: #a3a3a3;
|
color: #a3a3a3;
|
||||||
text-decoration: none;
|
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;
|
||||||
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user