there is a button called code after u click on the 3 dots on the rightI try to insert my css code and it doesnt work, I prefer using the actual coding because its much easier than manually styling everything
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<!-- Modern clean font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body {
background-color: #000;
color: #e8e8e8;
font-family: "Poppins", sans-serif;
line-height: 1.9;
margin: 0;
padding: 20px;
}
.container {
max-width: 900px;
margin: 40px auto;
background: #111;
padding: 40px;
border-radius: 14px;
border: 1px solid #2b2b2b;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.45);
text-align: center;
}
h1 {
text-align: center;
font-size: 42px;
color: #4ad7d1; /* teal accent */
margin-bottom: 50px;
font-weight: 600;
}
h2 {
font-size: 26px;
margin-top: 40px;
cursor: pointer;
color: #4ad7d1;
font-weight: 500;
}
details {
background-color: #1a1a1a;
padding: 18px 22px;
border-radius: 10px;
border: 1px solid #2b2b2b;
margin-top: 15px;
transition: 0.25s ease;
}
details[open] {
background-color: #141414;
border-color: #4ad7d1;
}
summary {
font-size: 18px;
cursor: pointer;
color: #4ad7d1;
font-weight: 500;
outline: none;
}
p {
margin-bottom: 20px;
font-size: 17px;
font-weight: 300;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<h2>Message</h2>
<details>
<summary>Click to expand</summary>
<p>Hello world</p>
</details>
</div>
</body>
</html>
Yes and im pasting it as html, it doesnt workthere is a button called code after u click on the 3 dots on the right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<!-- Modern clean font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body {
background-color: #000;
color: #e8e8e8;
font-family: "Poppins", sans-serif;
line-height: 1.9;
margin: 0;
padding: 20px;
}
.container {
max-width: 900px;
margin: 40px auto;
background: #111;
padding: 40px;
border-radius: 14px;
border: 1px solid #2b2b2b;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.45);
text-align: center;
}
h1 {
text-align: center;
font-size: 42px;
color: #4ad7d1; /* teal accent */
margin-bottom: 50px;
font-weight: 600;
}
h2 {
font-size: 26px;
margin-top: 40px;
cursor: pointer;
color: #4ad7d1;
font-weight: 500;
}
details {
background-color: #1a1a1a;
padding: 18px 22px;
border-radius: 10px;
border: 1px solid #2b2b2b;
margin-top: 15px;
transition: 0.25s ease;
}
details[open] {
background-color: #141414;
border-color: #4ad7d1;
}
summary {
font-size: 18px;
cursor: pointer;
color: #4ad7d1;
font-weight: 500;
outline: none;
}
p {
margin-bottom: 20px;
font-size: 17px;
font-weight: 300;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<h2>Message</h2>
<details>
<summary>Click to expand</summary>
<p>Hello world</p>
</details>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<!-- Modern clean font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body {
background-color: #000;
color: #e8e8e8;
font-family: "Poppins", sans-serif;
line-height: 1.9;
margin: 0;
padding: 20px;
}
.container {
max-width: 900px;
margin: 40px auto;
background: #111;
padding: 40px;
border-radius: 14px;
border: 1px solid #2b2b2b;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.45);
text-align: center;
}
h1 {
text-align: center;
font-size: 42px;
color: #4ad7d1; /* teal accent */
margin-bottom: 50px;
font-weight: 600;
}
h2 {
font-size: 26px;
margin-top: 40px;
cursor: pointer;
color: #4ad7d1;
font-weight: 500;
}
details {
background-color: #1a1a1a;
padding: 18px 22px;
border-radius: 10px;
border: 1px solid #2b2b2b;
margin-top: 15px;
transition: 0.25s ease;
}
details[open] {
background-color: #141414;
border-color: #4ad7d1;
}
summary {
font-size: 18px;
cursor: pointer;
color: #4ad7d1;
font-weight: 500;
outline: none;
}
p {
margin-bottom: 20px;
font-size: 17px;
font-weight: 300;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<h2>Message</h2>
<details>
<summary>Click to expand</summary>
<p>Hello world</p>
</details>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<!-- Modern clean font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body {
background-color: #000;
color: #e8e8e8;
font-family: "Poppins", sans-serif;
line-height: 1.9;
margin: 0;
padding: 20px;
}
.container {
max-width: 900px;
margin: 40px auto;
background: #111;
padding: 40px;
border-radius: 14px;
border: 1px solid #2b2b2b;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.45);
text-align: center;
}
h1 {
text-align: center;
font-size: 42px;
color: #4ad7d1; /* teal accent */
margin-bottom: 50px;
font-weight: 600;
}
h2 {
font-size: 26px;
margin-top: 40px;
cursor: pointer;
color: #4ad7d1;
font-weight: 500;
}
details {
background-color: #1a1a1a;
padding: 18px 22px;
border-radius: 10px;
border: 1px solid #2b2b2b;
margin-top: 15px;
transition: 0.25s ease;
}
details[open] {
background-color: #141414;
border-color: #4ad7d1;
}
summary {
font-size: 18px;
cursor: pointer;
color: #4ad7d1;
font-weight: 500;
outline: none;
}
p {
margin-bottom: 20px;
font-size: 17px;
font-weight: 300;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<h2>Message</h2>
<details>
<summary>Click to expand</summary>
<p>Hello world</p>
</details>
</div>
</body>
</html>
/* Body & global styles */
body {
background-color: #000; /* black background */
color: #e8e8e8; /* soft white text */
font-family: "Poppins", sans-serif; /* modern font */
line-height: 1.9; /* double spacing */
margin: 0;
padding: 20px;
}
/* Main content container */
.container {
max-width: 900px;
margin: 40px auto;
background: #111; /* dark card background */
padding: 40px;
border-radius: 14px;
border: 1px solid #2b2b2b;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.45);
text-align: center;
}
/* Main header */
h1 {
text-align: center;
font-size: 42px;
color: #4ad7d1; /* teal accent */
margin-bottom: 50px;
font-weight: 600;
}
/* Section headers */
h2 {
font-size: 26px;
margin-top: 40px;
cursor: pointer;
color: #4ad7d1; /* teal accent */
font-weight: 500;
}
/* Spoiler details styling */
details {
background-color: #1a1a1a;
padding: 18px 22px;
border-radius: 10px;
border: 1px solid #2b2b2b;
margin-top: 15px;
transition: 0.25s ease;
}
details[open] {
background-color: #141414;
border-color: #4ad7d1; /* highlight when open */
}
/* Spoiler summary header */
summary {
font-size: 18px;
cursor: pointer;
color: #4ad7d1; /* teal accent */
font-weight: 500;
outline: none;
}
/* Paragraph styling */
p {
margin-bottom: 20px;
font-size: 17px;
font-weight: 300;
}
/* Body & global styles */
body {
background-color: #000; /* black background */
color: #e8e8e8; /* soft white text */
font-family: "Poppins", sans-serif; /* modern font */
line-height: 1.9; /* double spacing */
margin: 0;
padding: 20px;
}
/* Main content container */
.container {
max-width: 900px;
margin: 40px auto;
background: #111; /* dark card background */
padding: 40px;
border-radius: 14px;
border: 1px solid #2b2b2b;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.45);
text-align: center;
}
/* Main header */
h1 {
text-align: center;
font-size: 42px;
color: #4ad7d1; /* teal accent */
margin-bottom: 50px;
font-weight: 600;
}
/* Section headers */
h2 {
font-size: 26px;
margin-top: 40px;
cursor: pointer;
color: #4ad7d1; /* teal accent */
font-weight: 500;
}
/* Spoiler details styling */
details {
background-color: #1a1a1a;
padding: 18px 22px;
border-radius: 10px;
border: 1px solid #2b2b2b;
margin-top: 15px;
transition: 0.25s ease;
}
details[open] {
background-color: #141414;
border-color: #4ad7d1; /* highlight when open */
}
/* Spoiler summary header */
summary {
font-size: 18px;
cursor: pointer;
color: #4ad7d1; /* teal accent */
font-weight: 500;
outline: none;
}
/* Paragraph styling */
p {
margin-bottom: 20px;
font-size: 17px;
font-weight: 300;
}


