Created
February 19, 2024 03:03
-
-
Save minpeter/5266ebac89783d4a100d559c85b417dc to your computer and use it in GitHub Desktop.
vercel style dark blur box test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>lipsum</title> | |
<link rel="preconnect" href="https://fonts.googleapis.com"> | |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
<link | |
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" | |
rel="stylesheet"> | |
</head> | |
<body style=" | |
background-color: #111111; | |
display: flex; | |
gap: 20px; | |
flex-direction: column; | |
align-items: center; | |
margin: 20px; | |
"> | |
<div style=" | |
-webkit-backdrop-filter: blur(36px); | |
backdrop-filter: blur(36px); | |
background-color: hsla(0,0%,100%,.06); | |
border: 1px solid #353535; | |
border-radius: 10px; | |
padding: 16px 16px 16px 20px; | |
text-decoration: none; | |
color: #ddd; | |
font-family: 'Roboto', sans-serif; | |
font-weight: 400; | |
font-style: normal; | |
width: 35%; | |
"> | |
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore | |
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | |
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." | |
</div> | |
<div style=" | |
-webkit-backdrop-filter: blur(36px); | |
backdrop-filter: blur(36px); | |
background-color: hsla(0,0%,100%,.06); | |
border: 1px solid #353535; | |
border-radius: 10px; | |
padding: 16px 16px 16px 20px; | |
text-decoration: none; | |
color: #ddd; | |
font-family: 'Roboto', sans-serif; | |
font-weight: 400; | |
font-style: normal; | |
width: 35%; | |
"> | |
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by | |
the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are | |
bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same | |
as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free | |
hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, | |
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of | |
duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances | |
accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures | |
to secure other greater pleasures, or else he endures pains to avoid worse pains." | |
</div> | |
<div style=" | |
-webkit-backdrop-filter: blur(36px); | |
backdrop-filter: blur(36px); | |
background-color: hsla(0,0%,100%,.06); | |
border: 1px solid #353535; | |
border-radius: 10px; | |
padding: 16px 16px 16px 20px; | |
text-decoration: none; | |
color: #ddd; | |
font-family: 'Roboto', sans-serif; | |
font-weight: 400; | |
font-style: normal; | |
width: 35%; | |
"> | |
"반면에 우리는 순간의 쾌락의 매력에 너무 속고 사기가 저하된 사람들, 욕망에 너무 눈이 멀어서 뒤따르는 고통과 고난을 예측할 수 없는 사람들을 의분을 가지고 비난하고 싫어합니다. 비난은 의지가 약하여 의무를 | |
이행하지 못하는 자의 것이니 이는 수고와 고통에 움츠러들어 말하는 것과 같으니 이 경우는 아주 단순하고 구별하기 쉬우니라. 우리가 가장 좋아하는 일을 할 수 있는 것을 방해하는 것이 없다면 모든 즐거움을 | |
환영하고 모든 고통을 피해야 합니다. 그러나 특정 상황에서는 의무나 사업상의 의무로 인해 즐거움을 거부해야 하는 경우가 자주 발생합니다. 그러므로 현명한 사람은 이 문제에 있어서 항상 선택의 원칙을 | |
고수합니다. 그는 다른 더 큰 즐거움을 얻기 위해 쾌락을 거부하거나, 그렇지 않으면 더 나쁜 고통을 피하기 위해 고통을 참습니다." | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment