documentation technical

technology software

education learning

English

The domain name 'cute-indigo-yqhd7es3dh-9k3tsz5bw2.edgeone.app' uses the application-focused generic top-level domain (.app) with subdomain 'cute-indigo-yqhd7es3dh-9k3tsz5bw2'. The second-level label 'edgeone' is 7 characters long containing 4 vowels alongside three consonants. It segments into two words: edge, one. Median word length is 3.5 characters. No strong language cues emerged from the frequency lists.

html/d4/a7/d4a7fc5e-4cc1-4359-9e29-c297c6479e42.html.gz

2bef1b1d3f42b9bca1ba7b8108975299b079d2c0e002ff73e76bc18ae0df28b6

width=device-width, initial-scale=1.0, user-scalable=yes

viewport

Prudence Malinki

MarkMonitor Inc.

edgeone.app

IRT-SG-ACE

ACE administrator

ACE-SG

// --------------------------------------------------------------
 // 30 POWERFUL SLIDES: Learn HTML & CSS (big fonts, tutorial style)
 // --------------------------------------------------------------
 const slidesData = [
 { title: "✨ Welcome to HTML & CSS", content: `🚀 INTROHTML (HyperText Markup Language) defines structure. CSS (Cascading Style Sheets) defines presentation.Together they build every website you see! This deck = 30 slides, 9:16, big & bold like a pro presentation.✅ Use ◀ ▶ or keyboard arrows.Let's become web artisans!` },
 { title: "🛠️ Your Toolbox", content: `📝 Code Editor : VS Code, Sublime, or even Notepad++.🌐 Browser : Chrome, Firefox, Edge (DevTools = F12).💡 Save files as <code>.html</code> and double-click to see magic.🔧 Create a project folder → <code>index.html</code> + <code>style.css</code>.` },
 { title: "📄 HTML Document Blueprint", content: `<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;My Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>✔️ DOCTYPE declares HTML5. head = meta info. body = visible content.` },
 { title: "🏷️ Basic Tags", content: `Headings : <code>&lt;h1&gt; - &lt;h6&gt;</code> (biggest to smallest).Paragraphs : <code>&lt;p&gt;</code> text block.Line break : <code>&lt;br&gt;</code> (self-closing).Horizontal rule : <code>&lt;hr&gt;</code> thematic break.<pre>&lt;h1&gt;Main title&lt;/h1&gt;
&lt;p&gt;Learning is fun!&lt;br&gt;New line&lt;/p&gt;</pre>` },
 { title: "✍️ Text Formatting", content: `Make text bold with <code>&lt;strong&gt;</code> or <code>&lt;b&gt;</code>. Italic with <code>&lt;em&gt;</code>.Highlight with <code>&lt;mark&gt;</code>. Small text using <code>&lt;small&gt;</code>.<del>Deleted</del> and <ins>inserted</ins> text available.Semantic tags improve accessibility!` },
 { title: "🔗 Links & Navigation", content: `<code>&lt;a href="url"&gt;link text&lt;/a&gt;</code> creates hyperlinks.target="_blank" opens new tab.<pre>&lt;a href="https://developer.mozilla.org" target="_blank"&gt;MDN Docs&lt;/a&gt;</pre>Internal links: <code>href="#section-id"</code> jumps to element ID.` },
 { title: "🖼️ Images", content: `<code>&lt;img src="image.jpg" alt="description"&gt;</code>alt = accessibility & fallback. width/height attributes.<pre>&lt;img src="logo.png" alt="Site logo" width="200"&gt;</pre>Supports JPG, PNG, GIF, SVG, WebP.` },
 { title: "📋 Lists", content: `Unordered (bullets) : <code>&lt;ul&gt;&lt;li&gt;item&lt;/li&gt;&lt;/ul&gt;</code>Ordered (numbers) : <code>&lt;ol&gt;&lt;li&gt;First&lt;/li&gt;&lt;/ol&gt;</code>Nested lists possible:<pre>&lt;ul&gt;
 &lt;li&gt;Frontend
 &lt;ul&gt;&lt;li&gt;HTML&lt;/li&gt;&lt;/ul&gt;
 &lt;/li&gt;
&lt;/ul&gt;</pre>` },
 { title: "📊 Tables", content: `Organize data with <code>&lt;table&gt;</code>, rows <code>&lt;tr&gt;</code>, headers <code>&lt;th&gt;</code>, cells <code>&lt;td&gt;</code>.<pre>&lt;table border="1"&gt;
 &lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Role&lt;/th&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;Alex&lt;/td&gt;&lt;td&gt;Dev&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</pre>Use <code>colspan</code> / <code>rowspan</code> for merging cells.` },
 { title: "📝 HTML Forms", content: `Collect user input with <code>&lt;form&gt;</code> and various inputs:<pre>&lt;input type="text" placeholder="Name"&gt;
&lt;input type="email"&gt;
&lt;input type="password"&gt;
&lt;input type="checkbox"&gt; Agree
&lt;input type="radio" name="choice"&gt; Option</pre>` },
 { title: "🎛️ Form Buttons & Attributes", content: `<code>action</code> = where data goes, <code>method</code> = GET / POST.<pre>&lt;form action="/submit" method="POST"&gt;
 &lt;input type="text" name="username"&gt;
 &lt;button type="submit"&gt;Send&lt;/button&gt;
&lt;/form&gt;</pre>&lt;button&gt; vs input button: more flexible!` },
 { title: "🧱 Block vs Inline Elements", content: `Block elements take full width: <code>&lt;div&gt;, &lt;p&gt;, &lt;h1&gt;</code>.Inline elements only take necessary width: <code>&lt;span&gt;, &lt;a&gt;, &lt;strong&gt;</code>.<pre>&lt;div&gt;I'm block&lt;/div&gt;
&lt;span&gt;inline buddy&lt;/span&gt;</pre>CSS can change behaviour with <code>display</code>.` },
 { title: "🎨 Intro to CSS", content: `CSS = styling language. 3 ways: inline, internal (<code>&lt;style&gt;</code>), external (.css file).<pre>&lt;style&gt;
 h1 { color: coral; font-size: 2rem; }
&lt;/style&gt;</pre>Best practice: external stylesheet <code>&lt;link rel="stylesheet" href="style.css"&gt;</code>.` },
 { title: "🎯 CSS Selectors", content: `Element : <code>p { }</code>Class : <code>.highlight { }</code> (reusable)ID : <code>#header { }</code> (unique)Universal : <code>* { }</code>Grouping : <code>h1, h2, .title { }</code>Combinators: descendant (space), child (>), adjacent sibling (+).` },
 { title: "🌈 Colors & Backgrounds", content: `Named colors: <code>red, steelblue, tomato</code>. Hex: <code>#ff5733</code>. RGB: <code>rgb(255,87,51)</code>. HSL: <code>hsl(10, 80%, 60%)</code>.Background: <code>background-color</code>, <code>background-image</code>, gradients.<pre>body {
 background: linear-gradient(to right, #ffecd2, #fcb69f);
}</pre>` },
 { title: "✒️ CSS Typography", content: `<code>font-family</code>: 'Poppins', sans-serif;<code>font-size</code>: 1.2rem (relative) or px.<code>font-weight</code>: bold, 400, 700.<code>text-align</code>: center, justify.<code>text-decoration</code>: underline, none.Big & readable = better UX!` },
 { title: "📦 Box Model Mastery", content: `Every element is a box: content → padding → border → margin.<pre>div {
 width: 300px;
 padding: 20px;
 border: 3px solid #333;
 margin: 15px;
}</pre><code>box-sizing: border-box</code> includes padding/border in width.` },
 { title: "🔄 Display Property", content: `<code>display: block</code> → full width, line break.<code>display: inline</code> → no line break, respects only horizontal margins.<code>display: inline-block</code> → like inline but width/height works.<code>display: none</code> → element hidden, layout removed.<code>visibility: hidden</code> hides but occupies space.` },
 { title: "📍 CSS Positioning", content: `static (default flow). relative → offset relative to normal position. absolute → relative to nearest positioned ancestor. fixed → relative to viewport. sticky → toggles between relative/fixed.<pre>.box { position: absolute; top: 20px; left: 40px; }</pre>` },
 { title: "🧩 Flexbox Basics", content: `One-dimensional layout model. Parent = <code>display: flex</code>.<pre>.container {
 display: flex;
 justify-content: center; /* main axis */
 align-items: center; /* cross axis */
 gap: 20px;
}</pre>Perfect for navbars, cards, centering!` },
 { title: "🧱 CSS Grid Layout", content: `Two-dimensional grid system. Define columns & rows.<pre>.grid {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 gap: 1rem;
}</pre>Grid areas, auto-fit, minmax — ultimate layout power.` },
 { title: "📱 Responsive Web Design", content: `Websites adapt to any screen (mobile, tablet, desktop).Use media queries :<pre>@media (max-width: 768px) {
 .container { flex-direction: column; }
}</pre>Viewport meta tag: <code>&lt;meta name="viewport" content="width=device-width"&gt;</code>` },
 { title: "✨ Pseudo-classes", content: `Define special states of elements.<code>:hover</code> → mouse over effect. <code>:focus</code> → input focused. <code>:first-child</code>, <code>:nth-child(odd)</code>.<pre>button:hover {
 background: orange;
 transform: scale(1.05);
}</pre>Interactive, dynamic styling!` },
 { title: "🎭 Pseudo-elements", content: `Style specific parts of an element.<code>::before</code> and <code>::after</code> insert content via CSS.<pre>h1::before {
 content: "⭐ ";
}
blockquote::first-letter {
 font-size: 2rem;
 font-weight: bold;
}</pre>No extra HTML needed!` },
 { title: "⚡ CSS Transitions", content: `Smooth changes over time.<pre>.btn {
 transition: background 0.3s ease, transform 0.2s;
}
.btn:hover {
 background: #ff914d;
 transform: translateY(-3px);
}</pre>Properties: <code>transition-property, duration, timing, delay</code>.` },
 { title: "🎬 CSS Animations", content: `Keyframe-based animations for complex motion.<pre>@keyframes bounce {
 0% { transform: translateY(0); }
 50% { transform: translateY(-20px); }
 100% { transform: translateY(0); }
}
.animate {
 animation: bounce 0.6s infinite;
}</pre>` },
 { title: "📏 CSS Units", content: `Absolute: px, pt, cm (fixed). Relative: <code>rem</code> (relative to root font), <code>em</code> (relative to parent), <code>vw/vh</code> (viewport units), <code>%</code>.Tip: Use <code>rem</code> for global spacing, <code>vw</code> for fluid typography.` },
 { title: "⚖️ Specificity & Cascade", content: `Rules applied by importance, specificity, source order.Selector weight: Inline style > ID > Class > Element.<code>!important</code> overrides everything (use sparingly).<pre>/* class wins over element */
.text { color: blue; }
p { color: red; } /* but .text wins */</pre>` },
 { title: "🎛️ CSS Variables", content: `Custom properties for reusable values.<pre>:root {
 --primary: #ff7e33;
 --spacing: 1.2rem;
}
button {
 background: var(--primary);
 padding: var(--spacing);
}</pre>Change globally via JavaScript, maintain themes easily!` },
 { title: "🏁 Next Steps & Resources", content: `Congratulations! You've mastered HTML/CSS fundamentals.🌐 Practice: Build mini-projects (portfolio, landing page). 📚 Resources: MDN Web Docs, CSS-Tricks, freeCodeCamp. 🎯 Next: JavaScript, frameworks (React/Vue), responsive frameworks.Keep coding & stay curious! 🔥` }
 ];

 // validate exactly 30 slides
 if (slidesData.length !== 30) console.warn("Slide count mismatch, but we have", slidesData.length);
 let currentIndex = 0;
 let totalSlides = slidesData.length;

 // DOM elements
 const slideContainer = document.getElementById("slidesContainer");
 const prevBtn = document.getElementById("prevBtn");
 const nextBtn = document.getElementById("nextBtn");
 const slideCounterSpan = document.getElementById("slideCounter");
 const dotsContainer = document.getElementById("dotsContainer");

 // render current slide (based on index)
 function renderSlide() {
 const slide = slidesData[currentIndex];
 if (!slide) return;
 // build inner structure: title + content
 const html = `
 <div class="slide-inner">
 <h1>${escapeHtml(slide.title)}</h1>
 <div class="slide-content">
 ${slide.content}
 </div>
 <div style="margin-top: 1rem; font-size: 0.75rem; opacity: 0.6; text-align: right;">📘 slide ${currentIndex+1}/${totalSlides}</div>
 </div>
 `;
 slideContainer.innerHTML = html;
 updateCounterAndDots();
 // optional: scroll to top of slide when switching
 if (slideContainer.scrollTop) slideContainer.scrollTop = 0;
 }

 function updateCounterAndDots() {
 slideCounterSpan.innerText = `${currentIndex+1} / ${totalSlides}`;
 // update dots
 const dots = document.querySelectorAll('.dot');
 dots.forEach((dot, idx) => {
 if (idx === currentIndex) dot.classList.add('active');
 else dot.classList.remove('active');
 });
 // manage prev/next button visual (no need to disable, but can add style)
 }

 function buildDots() {
 dotsContainer.innerHTML = '';
 for (let i = 0; i < totalSlides; i++) {
 const dot = document.createElement('div');
 dot.classList.add('dot');
 if (i === currentIndex) dot.classList.add('active');
 dot.addEventListener('click', () => {
 goToSlide(i);
 });
 dotsContainer.appendChild(dot);
 }
 }

 function goToSlide(index) {
 if (index < 0) index = 0;
 if (index >= totalSlides) index = totalSlides - 1;
 if (index === currentIndex) return;
 currentIndex = index;
 renderSlide();
 }

 function nextSlide() {
 if (currentIndex + 1 < totalSlides) {
 currentIndex++;
 renderSlide();
 } else {
 // subtle hint: loop or nothing, we just don't move.
 slideContainer.style.transform = "scale(0.99)";
 setTimeout(() => { slideContainer.style.transform = ""; }, 150);
 }
 }

 function prevSlide() {
 if (currentIndex - 1 >= 0) {
 currentIndex--;
 renderSlide();
 } else {
 slideContainer.style.transform = "scale(0.99)";
 setTimeout(() => { slideContainer.style.transform = ""; }, 150);
 }
 }

 // helper escape (avoid XSS but content is safe anyway)
 function escapeHtml(str) {
 return str.replace(/[&<>]/g, function(m) {
 if (m === '&') return '&amp;';
 if (m === '<') return '&lt;';
 if (m === '>') return '&gt;';
 return m;
 }).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) {
 return c;
 });
 }

 // keyboard navigation
 function handleKeydown(e) {
 if (e.key === 'ArrowLeft') {
 e.preventDefault();
 prevSlide();
 } else if (e.key === 'ArrowRight') {
 e.preventDefault();
 nextSlide();
 }
 }

 // initialize app
 function init() {
 buildDots();
 renderSlide();
 prevBtn.addEventListener('click', prevSlide);
 nextBtn.addEventListener('click', nextSlide);
 window.addEventListener('keydown', handleKeydown);
 }

 init();

HTML &amp; CSS Power Slides | 30 Interactive Tutorial Slides

✅ Low Risk - https://cute-indigo-yqhd7es3dh-9k3tsz5bw2.edgeone.app/

Requests	IP Address	Location	AS Autonomous System
2	43.152.26.58	Singapore	AS139341ACE
2	1	-	-

Security Scan Report: cute-indigo-yqhd7es3dh-9k3tsz5bw2.edgeone.app

Summary

AI Security Verdict

Low Risk

Risk Factors

Safety Factors

Details

Screenshot

Page Load Overview

Language Analysis

Primary Language

Detection Details

Website Classification

Primary Category

All Detected Categories

Detected Features

Domain & IP Information

Content Similarity HashesFor malware variant detection

TLSH (Trend Micro Locality Sensitive Hash)

ssdeep (Context Triggered Piecewise Hashing)

sdhash (Similarity Digest Hashing)

Image Hashes

Perceptual Hashes

Other Hashes

Scan History