index.html
1.5 KB
Device mockups realistic used https://devicescss.xyz/
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
<h2 class="mb-4 text-3xl tracking-tight font-extrabold text-gray-900 dark:text-white">Our Pricing</h2>
<p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">Choose the plan that fits your needs. We offer simple, transparent pricing for everyone.</p>
</div>
<div class="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0">
<!-- Pricing Plan 1 -->
<div class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
<h3 class="mb-4 text-2xl font-semibold">Starter</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Best option for personal use & for your next project.</p>
<div class="flex justify-center items-baseline my-8">
<span class="mr-2 text-5xl font-extrabold">$29</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<!-- List -->
<ul class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span>Team size: <span class="font-semibold">1 developer</span></span>
</li>
<li class="flex items-center space-x-3">
<svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span>Premium support: <span class="font-semibold">6 months</span></span>
</li>
</ul>
<button class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-900">Get started</button>
</div>
<!-- Add more pricing plans similarly -->
</div>
</div>
</section>
👎1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rainbow Text</title>
<style>
@keyframes rainbow {
0% { color: red; }
16.7% { color: orange; }
33.3% { color: yellow; }
50% { color: green; }
66.7% { color: blue; }
83.3% { color: indigo; }
100% { color: violet; }
}
.rainbow-text {
font-size: 2em;
font-weight: bold;
animation: rainbow 4s infinite; /* Change the duration if needed */
}
</style>
</head>
<body>
<h1 class="rainbow-text">Rainbow Text Effect</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Mockup with Highlight and Copy</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.2.1/dist/full.css" rel="stylesheet">
<!-- Prism.js for Syntax Highlighting -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<style>
/* Optional styling for code block */
pre {
padding: 1rem;
border-radius: 0.5rem;
font-family: monospace;
overflow-x: auto;
}
</style>
</head>
<body class="bg-base-200 p-10">
<div class="card shadow-lg max-w-md mx-auto">
<div class="card-body">
<h2 class="card-title">Highlighted Code Block</h2>
<!-- Code Block with Syntax Highlighting -->
<pre id="codeBlock" class="language-javascript">
<code class="language-javascript">
function greet() {
console.log("Hello, World!");
}
</code>
</pre>
<!-- Copy Button -->
<div class="mt-4">
<button class="btn btn-primary" id="copyButton">Copy Code</button>
</div>
</div>
</div>
<script>
// JavaScript for copy functionality
document.getElementById('copyButton').addEventListener('click', function() {
const codeBlock = document.getElementById('codeBlock').innerText;
navigator.clipboard.writeText(codeBlock).then(() => {
alert("Code copied to clipboard!");
}).catch(err => {
console.error("Failed to copy text: ", err);
});
});
</script>
</body>
</html>
Code mockup with animation https://webhook.site/3a3c4443-89d6-438c-a64f-1e8e4f1d1a38
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grammar Checker and Translator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
}
textarea {
width: 100%;
height: 150px;
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
margin-right: 10px;
}
.result, .translation {
margin-top: 20px;
}
.error {
color: red;
}
select {
padding: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Open-Source Grammar Checker and Translator</h1>
<p>Enter text in the box below and click "Check Grammar" or "Translate":</p>
<textarea id="text-input" placeholder="Type or paste your text here..."></textarea>
<br>
<button onclick="checkGrammar()">Check Grammar</button>
<select id="language-select">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="uk">Ukrainian</option>
</select>
<button onclick="translateText()">Translate</button>
<div class="result" id="result"></div>
<div class="translation" id="translation"></div>
<script>
async function checkGrammar() {
const text = document.getElementById("text-input").value;
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = "Checking grammar...";
try {
const response = await fetch("https://api.languagetool.org/v2/check", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: new URLSearchParams({
text: text,
language: "en-US"
})
});
const result = await response.json();
displayResults(result.matches);
} catch (error) {
resultDiv.innerHTML = "Error checking grammar. Please try again.";
}
}
function displayResults(matches) {
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = "";
if (matches.length === 0) {
resultDiv.innerHTML = "<p>No grammar errors found!</p>";
return;
}
matches.forEach(match => {
const error = document.createElement("p");
error.classList.add("error");
error.innerHTML = `Error: <strong>${match.message}</strong> at position ${match.offset}. Suggested correction: <strong>${match.replacements[0]?.value || "No suggestion"}</strong>`;
resultDiv.appendChild(error);
});
}
// Translation functionality using Open Source Library (LibreTranslate)
async function translateText() {
const text = document.getElementById("text-input").value;
const targetLanguage = document.getElementById("language-select").value;
const translationDiv = document.getElementById("translation");
translationDiv.innerHTML = "Translating...";
try {
const response = await fetch("https://libretranslate.de/translate", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
q: text,
source: "en", // You can detect the source language dynamically if needed
target: targetLanguage,
format: "text"
})
});
const result = await response.json();
translationDiv.innerHTML =
} catch (error) {
translationDiv.innerHTML = "Error translating text. Please try again.";
}
}
</script>
</body>
</html>
"Content-Type": "application/json"
},
body: JSON.stringify({
q: text,
source: "en", // You can detect the source language dynamically if needed
target: targetLanguage,
format: "text"
})
});
const result = await response.json();
translationDiv.innerHTML =
<p>Translation: <strong>${result.translatedText}</strong></p>;} catch (error) {
translationDiv.innerHTML = "Error translating text. Please try again.";
}
}
</script>
</body>
</html>
`<div class="avatar-group -space-x-6 rtl:space-x-reverse">
<div class="avatar">
<div class="w-12">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
</div>
</div>
<div class="avatar">
<div class="w-12">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
</div>
</div>
<div class="avatar">
<div class="w-12">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
</div>
</div>
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content w-12">
<span>+99</span>
</div>
</div>
</div>
Html codes
HTML, XML, WML is ...... ?
The meaning can change if you translate it into another language!
For example:
HTML, XML, not JML ...... ?
For example:
HTML, XML, not JML ...... ?
Which HTML element is used to define the structure of a webpage?
Anonymous Quiz
33%
<body>
0%
<header>
0%
<section>
67%
All of the above
🏆1