Menampilkan nama dan nilai
#include <iostream>
#include <string>
using namespace std;
int main() {
// Deklarasi variabel
string nama;
float nilai;
// Meminta input dari pengguna
cout << "Masukkan nama: ";
getline(cin, nama); // Menggunakan getline untuk memasukkan nama dengan spasi
cout << "Masukkan nilai: ";
cin >> nilai;
// Menampilkan nama dan nilai
cout << "\nNama: " << nama << endl;
cout << "Nilai: " << nilai << endl;
return 0;
}
Label:
C Plus
Intro web
<html>
<head>
<title>
latihan koding informatika MAN Kapuas
</title>
</head>
<styl>
@layer library, reset, base, demo;
@import 'https://unpkg.com/open-props@2.0.0-beta.5' layer(library);
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap');
@layer reset {
*,
::before,
::after {
box-sizing: border-box;
}
:where(:not(dialog)) {
margin: 0;
}
}
@layer base {
html {
--nav-block-size: 74px;
--brand-gradient: linear-gradient(227deg,
#1400c7 0%,
#00bbff 100%);
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
}
body {
font-family: 'Inter', sans-serif;
min-block-size: 100dvb;
}
}
@layer demo {
.navbar {
min-block-size: var(--nav-block-size);
display: grid;
position: fixed;
inset-block-start: 0;
inset-inline: 0;
background-color: white;
z-index: var(--layer-3);
place-items: center end;
padding-block: var(--size-3);
padding-inline: var(--size-5);
@media (width >=600px) {
padding-inline: 6dvi;
}
}
.nav-cta-btn {
font-size: var(--font-size-1);
font-weight: var(--font-weight-7);
inline-size: max-content;
white-space: nowrap;
text-decoration: none;
padding-block: var(--size-3);
padding-inline: var(--size-7);
border: var(--border-size-2) solid transparent;
color: black;
position: relative;
isolation: isolate;
background: linear-gradient(white, white) padding-box,
var(--brand-gradient) border-box;
border-radius: var(--radius-6);
overflow: hidden;
&::before {
content: '';
display: block;
position: absolute;
inset: 0;
background: var(--brand-gradient);
mix-blend-mode: screen;
}
&:hover {
color: white;
&::before {
background: var(--brand-gradient) padding-box,
var(--brand-gradient) border-box;
background-repeat: no-repeat;
background-size: contain;
mix-blend-mode: normal;
z-index: -1;
}
}
}
.section {
--section-block-size: max(400px, 100dvb);
display: grid;
background-color: white;
min-block-size: var(--section-block-size);
position: relative;
block-size: 100%;
display: grid;
>* {
grid-area: 1/1;
}
}
.section-wrapper {
position: relative;
display: grid;
@media (width >=960px) {
grid-template-columns: 1fr 1fr;
}
@media (width < 960px) {
padding-block-start: calc(var(--nav-block-size) + var(--size-7));
padding-block-end: var(--size-7);
}
}
.video {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
position: relative;
z-index: -1;
}
.content-wrapper {
display: grid;
@media (width < 960px) {
gap: var(--size-7);
}
}
.meta {
display: grid;
gap: var(--size-3);
}
.content {
display: grid;
inline-size: 100%;
place-items: center;
padding-block: var(--size-7);
padding-inline: var(--size-5);
@media (width >=960px) {
padding: var(--size-10);
min-block-size: 100cqb;
place-items: center end;
}
@media (width < 960px) {
gap: var(--size-5);
}
}
.mobile-visual {
inline-size: 100%;
aspect-ratio: var(--ratio-square);
@media (width >=960px) {
display: none;
}
}
.headline {
font-size: var(--font-size-7);
font-weight: var(--font-weight-4);
max-inline-size: var(--size-content-1);
text-wrap: pretty;
@media (width < 960px) {
font-size: var(--font-size-6);
}
}
.desc {
font-size: var(--font-size-4);
line-height: 1.5;
max-inline-size: 40ch;
text-wrap: pretty;
@media (width < 960px) {
font-size: var(--font-size-3);
}
}
.visual {
display: grid;
position: sticky;
block-size: var(--section-block-size);
inset-block-start: 0;
container-type: size;
@media (width < 960px) {
display: none;
}
}
.video-visual {
inline-size: 100%;
block-size: var(--section-block-size);
display: block;
position: sticky;
inset-block-start: 0;
isolation: isolate;
filter: hue-rotate(210deg);
}
.card-wrapper {
container-type: size;
display: grid;
place-items: center;
overflow: clip;
>* {
grid-area: 1/1;
}
}
.card {
aspect-ratio: var(--ratio-square);
inline-size: 70cqi;
border-radius: var(--radius-3);
scale: 0.4;
}
.card-img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.card-1 {
scale: 1;
}
.card-2 {
translate: -35cqi 30cqb;
opacity: 0.3;
}
.card-3 {
translate: 0cqi 50cqb;
opacity: 0.5;
}
.card-4 {
translate: 45cqi 40cqb;
opacity: 0.5;
}
.content-1 {
--_text-gradient: linear-gradient(227deg,
#1400c7 0%,
#00bbff 100%);
}
.content-2 {
--_text-gradient: linear-gradient(227deg,
#28dc28 0%,
#00bbff 100%);
}
.content-3 {
--_text-gradient: linear-gradient(227deg,
#1400c7 0%,
#b800b1 100%);
}
.content-4 {
--_text-gradient: linear-gradient(227deg,
#b800b1 0%,
#f50000 100%);
}
.text-highlight {
background: var(--_text-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
}
@supports (animation-timeline: scroll()) {
body {
timeline-scope: --content-1, --content-2, --content-3, --content-4;
}
.section {
view-timeline-name: --section;
}
.content-1 {
view-timeline-name: --content-1;
}
.content-2 {
view-timeline-name: --content-2;
}
.content-3 {
view-timeline-name: --content-3;
}
.content-4 {
view-timeline-name: --content-4;
}
.card {
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.card-1 {
animation-timeline: --content-1;
animation-name: slide-up-first-card;
}
.card-2 {
animation-timeline: --content-2;
animation-name: slide-up-card;
}
.card-3 {
animation-timeline: --content-3;
animation-name: slide-up-card;
}
.card-4 {
animation-timeline: --content-4;
animation-name: slide-up-card;
}
.video-visual {
animation-timeline: --section;
animation-range-end: exit 110%;
animation-name: update-hue;
animation-timing-function: step-end;
animation-fill-mode: forwards;
}
@keyframes update-hue {
0% {
filter: hue-rotate(210deg);
}
25% {
filter: hue-rotate(150deg);
}
45% {
filter: hue-rotate(300deg);
}
60% {
filter: hue-rotate(4deg);
}
}
@keyframes slide-up-first-card {
50% {
translate: 0;
opacity: 1;
}
90% {
translate: 0 -50cqi;
scale: 0.6;
}
100% {
translate: 0 -100cqi;
opacity: 0;
}
}
@keyframes slide-up-card {
50% {
opacity: 1;
translate: 0;
scale: 1;
}
90% {
opacity: 0.5;
scale: 0.6;
translate: 0 -50cqb;
}
100% {
translate: 0 -100cqi;
opacity: 0;
}
}
}
</style>
<nav class="navbar">
<a href="#" class="nav-cta-btn">Get Started</a>
</nav>
<div class="section">
<div class="video-visual">
<video
class="video"
autoplay
loop
muted
poster=""
role="none"
aria-label="background gradient animation"
>
<source
src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/bg-gradient-animation.mp4"
type="video/mp4"
/>
</video>
</div>
<div class="section-wrapper">
<div class="content-wrapper">
<div class="content content-1">
<div class="mobile-visual">
<img
class="card-img"
src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-1.avif"
alt="Fantasy warrior - Video game character"
/>
</div>
<div class="meta">
<h2 class="headline">
Unleash Your<span class="text-highlight"> Inner Warrior</span>
</h2>
<p class="desc">
Join the battle and conquer the arena with unmatched skill and
strategy.
</p>
</div>
</div>
<div class="content content-2">
<div class="mobile-visual">
<img
class="card-img"
src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-2.avif"
alt="Green haired ninja in armor - Video game character"
/>
</div>
<div class="meta">
<h2 class="headline">
Embark on Your
<span class="text-highlight">Legendary Journey</span>
</h2>
<p class="desc">
Immerse Yourself in a World Where Legends Clash and Heroes Rise
to Glory.
</p>
</div>
</div>
<div class="content content-3">
<div class="mobile-visual">
<img
class="card-img"
src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-3.avif"
alt="Female warrior in armor - Video game character"
/>
</div>
<div class="meta">
<h2 class="headline">
Master the
<span class="text-highlight">Art of Magic</span>
</h2>
<p class="desc">
Harness powerful spells and enchantments to dominate your foes
and change the course of battle.
</p>
</div>
</div>
<div class="content content-4">
<div class="mobile-visual">
<img
class="card-img"
src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-4.avif"
alt="Agile warrior - Video game character"
/>
</div>
<div class="meta">
<h2 class="headline">
Rise as the <span class="text-highlight">Champion</span>
</h2>
<p class="desc">
Lead your team to victory with unparalleled strength and
unwavering determination.
</p>
</div>
</div>
</div>
<div class="visual">
<div class="card-wrapper">
<div class="card card-1">
<img
class="card-img"
src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-1.avif"
alt="Fantasy warrior - Video game character"
/>
</div>
<div class="card card-2">
<img
class="card-img"
src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-2.avif"
alt="Green haired ninja in armor - Video game character"
/>
</div>
<div class="card card-3">
<img
class="card-img"
src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-3.avif"
alt="Female warrior in armor - Video game character"
/>
</div>
<div class="card card-4">
<img
class="card-img"
src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-4.avif"
alt="Agile warrior - Video game character"
/>
</div>
</div>
</div>
</div>
</div>
</html>
Label:
Landing Page
Tumbuh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Koding Informatika MAN Kapuas</title>
<style>>
body {
margin: 0;
overflow:hidden;
background: #131313;
}
</style>
</head>
<body>
<canvas id="tree"></canvas>
<h1>This is a animation</h1>
<p>MAN Kapuas.</p>
<script>
'use strict';
class Tree {
constructor() {
this.rule = 'FF+[+FF-F]-[-F+FFF]'
this.sentence = 'F'
this.length = 3
this.angle = Math.PI / 10
this.speed = 30
this.resize()
}
resize() {
this.width = canvas.width = window.innerWidth
this.height = canvas.height = window.innerHeight
this.color = 10
this.pos = -1
ctx.translate(this.width / 4, this.height)
ctx.strokeStyle = 'hsla(0,100%,50%,0.5)'
}
build() {
let nextSentence = ''
for (var j = 0; j < this.sentence.length; j++) {
let currentChar = this.sentence.charAt(j)
if (currentChar === 'F') nextSentence += this.rule
else nextSentence += currentChar
}
this.sentence = nextSentence
}
draw() {
if (this.pos < this.sentence.length) ++this.pos
else this.build()
switch (this.sentence.charAt(this.pos)) {
case 'F':
ctx.moveTo(0, 0)
ctx.lineTo(0, -this.length)
ctx.translate(0, -this.length)
break
case '+':
ctx.rotate(this.angle)
break
case '-':
ctx.rotate(-this.angle)
break
case '[':
ctx.stroke()
ctx.save()
ctx.beginPath()
ctx.strokeStyle = 'hsla(' + (((this.color += 1) < 140) ? this.color : this.color = 40) + ',100%,50%,0.3)'
break
case ']':
ctx.stroke()
ctx.restore()
break
}
}
}
let canvas = document.getElementById('tree')
let ctx = canvas.getContext('2d')
let tree = new Tree()
window.onresize = () => tree.resize()
;(function update() {
requestAnimationFrame(update)
for (let i = 0; i < tree.speed; i++) tree.draw()
}());
</scrip>
</body>
</html>
Animasi Koneksi Bintang
<!DOCTYPE html>
<html>
<head>
<title>Latihan Koding Informatika MAN Kapuas</title>
<style>>
body {
margin: 0;
background: #020202;
overflow:hidden;
}
</style>
</head>
<body>
<canvas id="connect"></canvas>
<script>'use strict';
const PI2 = 2 * Math.PI
function map(s, a1, a2, b1, b2) {
return (b1 + (s - a1) * (b2 - b1) / (a2 - a1));
}
class Connect {
constructor() {
ctx.lineWidth = 0.1
this.connectArea = {
maxConnectionLength: 80,
connectAreaRadius: 130,
x: 0,
y: 0,
destX: 0,
destY: 0
};
this.bounds = {
top: 2,
left: 2,
right: 0,
bottom: 0
};
this.dots = []
this.resize()
this.connectArea.x = this.centerX
this.connectArea.y = this.centerY
}
resize() {
this.width = window.innerWidth
this.height = window.innerHeight
this.centerX = this.width / 2 | 0
this.centerY = this.height / 2 | 0
canvas.width = this.width
canvas.height = this.height
this.connectArea.destX = this.centerX
this.connectArea.destY = this.centerY
this.bounds.right = this.width - 2
this.bounds.bottom = this.height - 2
this.colorCounter = 0
this.dotCount = this.width * this.height / 3000 | 0
if (this.dotCount > this.dots.length) {
for (let i = this.dotCount - this.dots.length; i > 0; i--) {
this.dots.push(
new Dot(
this.width,
this.height,
(((this.colorCounter += 2) < 360) ? this.colorCounter : this.colorCounter = 0)
)
)
}
} else if (this.dotCount < this.dots.length) {
this.dots.splice(0, this.dotCount - this.dots.length)
for (let i = 0; i < this.dotCount; i++) {
if (this.dots[i].y < this.bounds.top ||
this.dots[i].y > this.bounds.bottom ||
this.dots[i].x < this.bounds.left ||
this.dots[i].x > this.bounds.right) {
this.dots[i].x = Math.random() * this.width | 0
this.dots[i].y = Math.random() * this.height | 0
}
}
}
}
onMove(evt) {
this.connectArea.destX = evt.clientX || evt.touches && evt.touches[0].pageX
this.connectArea.destY = evt.clientY || evt.touches && evt.touches[0].pageY
}
onLeave(evt) {
this.connectArea.destX = this.centerX
this.connectArea.destY = this.centerY
}
connectDots() {
for (let i = 0; i < this.dotCount; i++) {
for (let j = i+1; j < this.dotCount; j++) {
let dot1 = this.dots[i]
let dot2 = this.dots[j]
let xDiff = Math.abs(dot1.x - dot2.x)
let yDiff = Math.abs(dot1.y - dot2.y)
let xDiffArea = Math.abs(dot1.x - this.connectArea.x)
let yDiffArea = Math.abs(dot1.y - this.connectArea.y)
if (xDiff < this.connectArea.maxConnectionLength && yDiff < this.connectArea.maxConnectionLength &&
xDiffArea < this.connectArea.connectAreaRadius && yDiffArea < this.connectArea.connectAreaRadius) {
let gradient = ctx.createLinearGradient(dot1.x, dot1.y, dot2.x, dot1.y)
gradient.addColorStop(0, dot1.color)
gradient.addColorStop(1, dot2.color)
ctx.beginPath()
ctx.moveTo(dot1.x, dot1.y)
ctx.lineTo(dot2.x, dot2.y)
ctx.strokeStyle = gradient
ctx.stroke()
}
}
}
}
update() {
ctx.globalCompositeOperation = 'hard-light'
ctx.fillStyle = 'rgba(20,20,20,0.2)'
ctx.fillRect(0, 0, this.width, this.height)
ctx.globalCompositeOperation = 'source-over'
// ctx.clearRect(0, 0, this.width, this.height)
let distX = this.connectArea.destX - this.connectArea.x
if (distX > 5 || distX < 5) this.connectArea.x += distX / 10 | 0
let distY = this.connectArea.destY - this.connectArea.y
if (distX > 5 || distX < 5) this.connectArea.y += distY / 10 | 0
for (let i = 0; i < this.dotCount; i++) this.dots[i].update(this.bounds)
this.connectDots()
for (let i = 0; i < this.dotCount; i++) this.dots[i].draw()
}
}
class Dot {
constructor(width, height, color) {
this.x = Math.random() * width | 0
this.y = Math.random() * height | 0
this.vx = (Math.random() - 0.7) / 2
this.vy = (Math.random() - 0.7) / 2
this.radius = Math.random() * 2 + 0.3
this.color = 'hsla(' + color + ',80%,50%,' + this.radius * .5 + ')'
}
draw() {
ctx.beginPath()
ctx.fillStyle = this.color
ctx.arc(this.x, this.y, this.radius, 0, PI2)
ctx.fill()
}
update(bounds) {
if (this.y < bounds.top || this.y > bounds.bottom) this.vy = -this.vy
else if (this.x < bounds.left || this.x > bounds.right) this.vx = -this.vx
this.x += this.vx
this.y += this.vy
}
}
let canvas = document.getElementById('connect')
let ctx = canvas.getContext('2d')
let connect = new Connect()
canvas.onmousemove = (evt) => connect.onMove(evt)
canvas.onmouseleave = (evt) => connect.onLeave(evt)
canvas.ontouchstart = (evt) => connect.onMove(evt)
canvas.ontouchmove = (evt) => connect.onLeave(evt)
window.onresize = () => connect.resize()
;(function update() {
requestAnimationFrame(update)
connect.update()
}());</scrip>
</body>
</html>
Animasi garis
<!DOCTYPE html>
<html>
<head>
<title>Latihan koding Informatika MAN Kapuas</title>
<style>canvas {
position: absolute;
top: 0;
left: 0;
background-color: black;
}</style>
</head>
<body>
<h1>Animation</h1>
<canvas id=c></canvas>
<script>var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext( '2d' ),
minDist = 10,
maxDist = 30,
initialWidth = 10,
maxLines = 100,
initialLines = 4,
speed = 5,
lines = [],
frame = 0,
timeSinceLast = 0,
dirs = [
// straight x, y velocity
[ 0, 1 ],
[ 1, 0 ],
[ 0, -1 ],
[ -1, 0 ],
// diagonals, 0.7 = sin(PI/4) = cos(PI/4)
[ .7, .7 ],
[ .7, -.7 ],
[ -.7, .7 ],
[ -.7, -.7]
],
starter = { // starting parent line, just a pseudo line
x: w / 2,
y: h / 2,
vx: 0,
vy: 0,
width: initialWidth
};
function init() {
lines.length = 0;
for( var i = 0; i < initialLines; ++i )
lines.push( new Line( starter ) );
ctx.fillStyle = '#222';
ctx.fillRect( 0, 0, w, h );
// if you want a cookie ;)
// ctx.lineCap = 'round';
}
function getColor( x ) {
return 'hsl( hue, 80%, 50% )'.replace(
'hue', x / w * 360 + frame
);
}
function anim() {
window.requestAnimationFrame( anim );
++frame;
ctx.shadowBlur = 0;
ctx.fillStyle = 'rgba(0,0,0,.02)';
ctx.fillRect( 0, 0, w, h );
ctx.shadowBlur = .5;
for( var i = 0; i < lines.length; ++i )
if( lines[ i ].step() ) { // if true it's dead
lines.splice( i, 1 );
--i;
}
// spawn new
++timeSinceLast
if( lines.length < maxLines && timeSinceLast > 10 && Math.random() < .5 ) {
timeSinceLast = 0;
lines.push( new Line( starter ) );
// cover the middle;
ctx.fillStyle = ctx.shadowColor = getColor( starter.x );
ctx.beginPath();
ctx.arc( starter.x, starter.y, initialWidth, 0, Math.PI * 2 );
ctx.fill();
}
}
function Line( parent ) {
this.x = parent.x | 0;
this.y = parent.y | 0;
this.width = parent.width / 1.25;
do {
var dir = dirs[ ( Math.random() * dirs.length ) |0 ];
this.vx = dir[ 0 ];
this.vy = dir[ 1 ];
} while (
( this.vx === -parent.vx && this.vy === -parent.vy ) || ( this.vx === parent.vx && this.vy === parent.vy) );
this.vx *= speed;
this.vy *= speed;
this.dist = ( Math.random() * ( maxDist - minDist ) + minDist );
}
Line.prototype.step = function() {
var dead = false;
var prevX = this.x,
prevY = this.y;
this.x += this.vx;
this.y += this.vy;
--this.dist;
// kill if out of screen
if( this.x < 0 || this.x > w || this.y < 0 || this.y > h )
dead = true;
// make children :D
if( this.dist <= 0 && this.width > 1 ) {
// keep yo self, sometimes
this.dist = Math.random() * ( maxDist - minDist ) + minDist;
// add 2 children
if( lines.length < maxLines ) lines.push( new Line( this ) );
if( lines.length < maxLines && Math.random() < .5 ) lines.push( new Line( this ) );
// kill the poor thing
if( Math.random() < .2 ) dead = true;
}
ctx.strokeStyle = ctx.shadowColor = getColor( this.x );
ctx.beginPath();
ctx.lineWidth = this.width;
ctx.moveTo( this.x, this.y );
ctx.lineTo( prevX, prevY );
ctx.stroke();
if( dead ) return true
}
init();
anim();
window.addEventListener( 'resize', function() {
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
starter.x = w / 2;
starter.y = h / 2;
init();
} )</scrip>
</body>
</html>
Fullscreen with JavaScript
<!DOCTYPE html>
<html>
<head>
<title>latihan koding infrmatika MAN Kapuas</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Safari syntax */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
/* Style the button */
button {
padding: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Fullscreen with JavaScript</h2>
<p>Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.</p>
<button onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>
<script>
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</scrip>
<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>
</body>
</html>
Label:
JavaScript
Jam Digital Basic
<!DOCTYPE html>
<html>
<head>
<title>latihan koding informatika MAN Kapuas</title>
<styl>
body {
background: black;
}
#clock {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100vw - 4px);
height: auto;
max-width: 700px;
}
</style>
</head>
<body>
<h1>Informatika MAN Kapuas</h1>
<p>jam digital</p>
<div id="clock"></div>
<script>function initClock(elt, opt_properties) {
const defaultProperties = {color: '#0ff', date: new Date(), glow: true, militaryTime: false, showMs: true};
const c = Object.assign(defaultProperties, opt_properties);
!c.dotColor ? c.dotColor = defaultProperties.color : false;
const getSecondsPassed = (now = c.date, militaryTime = c.militaryTime) => {
const s10 = Math.floor(now.getSeconds());
const m10 = Math.floor(now.getMinutes() * 60 + s10);
const h = Math.floor(now.getHours() * 3600 + m10);
return { hour: h, minute10: m10, minute1: Math.floor((now.getMinutes() % 10) * 60 + s10), second10: s10, second1: Math.floor(now.getSeconds() % 10) };
};
let td = getSecondsPassed();
let vxEnd = c.showMs ? 175 : 130;
let showGlow = c.glow ? `<use href="#fullClock" filter="url(#glow)"/>` : '';
let showGlowBlur = c.glow ? `<filter id="glow" x="-200%" y="-200%" width="1000%" height="1000%"><feGaussianBlur in="SourceGraphic" stdDeviation="1.4" /></filter>` : '';
let hrDur = c.militaryTime ? '86400' : '43200';
let hr1Offsets = c.militaryTime ? `0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270; 0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270; 0 0; 0 -30; 0 -60; 0 -90` : `0 -60; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270; 0 0; 0 -30`;
let hr10Offsets = c.militaryTime ? `0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -60; 0 -60; 0 -60; 0 -60` : `0 -30; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 -30; 0 -30`;
let msDots = c.showMs ? `M 132.5 10 v0 m0 10 v0` : '';
let milliseconds = c.showMs ? `<g class="ms10"><use href="#nums" transform="translate(135)" /><animateTransform id="ms10" attributeName="transform" type="translate" values="0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270" dur="1s" begin="0s" repeatCount="indefinite" calcMode="discrete" /></g><g class="ms"><use href="#nums" transform="translate(155)" /><animateTransform id="ms" attributeName="transform" type="translate" values="0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270" dur=".1s" begin="0s" repeatCount="indefinite" calcMode="discrete" /></g>` : '';
let svg = `<svg id="clockItToMe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${vxEnd} 30"><defs>${showGlowBlur}<marker id="v" viewBox="0 0 10 10" refX="5" refY="2" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 2 l 2 -2 h 6 l 2 2 l -2 2 l -6 0 z" fill="${c.color}" /></marker><marker id="h" viewBox="0 0 10 10" refX="5" refY="8" markerWidth="8" markerHeight="8" orient="rotate(90deg)"><path d="M 0 2 l 2 -2 h 6 l 2 2 l -2 2 l -6 0 z" fill="${c.color}" /></marker><g id="nums" stroke="none" fill="none"><path d="M5 0v 10 10 60 50 30 30 10 50 10 20 30" marker-mid="url(#v)" /><path d="M10 0v10 20 40 10 10 10 10 10 20 20 10 10 10 10 10 10 30 10 10 10 10 10 10" marker-mid="url(#h)" /><path d="M15 0v10 10 20 10 20 30 10 20 10 30 30 20 10 20 10 20 10 20" marker-mid="url(#v)" /></g></defs><g id="fullClock"><g class="hr10"><use href="#nums" /><animateTransform id="hr10" attributeName="transform" type="translate" values="${hr10Offsets}" dur="${hrDur}s" begin="-${td.hour}s" repeatCount="indefinite" calcMode="discrete" /></g><g class="hr"><use href="#nums" transform="translate(20)" /><animateTransform id="hr" attributeName="transform" type="translate" values="${hr1Offsets}" dur="${hrDur}s" begin="-${td.hour}s" repeatCount="indefinite" calcMode="discrete" /></g><g class="min10"><use href="#nums" transform="translate(45)" /><animateTransform id="min10" attributeName="transform" type="translate" values="0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150" dur="3600s" begin="-${td.minute10}s" repeatCount="indefinite" calcMode="discrete" /></g><g class="min"><use href="#nums" transform="translate(65)" /><animateTransform id="min" attributeName="transform" type="translate" values="0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270" dur="600s" begin="-${td.minute1}s" repeatCount="indefinite" calcMode="discrete" /></g><g class="sec10"><use href="#nums" transform="translate(90)" /><animateTransform id="sec10" attributeName="transform" type="translate" values="0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150" dur="60s" begin="-${td.second10}s" repeatCount="indefinite" calcMode="discrete" /></g><g class="sec"><use href="#nums" transform="translate(110)" /><animateTransform id="sec" attributeName="transform" type="translate" values="0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270" dur="10s" begin="-${td.second1}s" repeatCount="indefinite" calcMode="discrete" /></g>${milliseconds}<path d="M42.5 10 v0 m0 10 v0 M 87.5 10 v0 m0 10 v0${msDots}" stroke="${c.dotColor}" stroke-width="3" stroke-linecap="square" /></g>${showGlow}</svg>`;
const wrapper = document.createElement("div");
wrapper.insertAdjacentHTML('afterbegin', svg);
const doc = wrapper.firstChild;
elt.appendChild(doc);
}
initClock(document.querySelector("#clock"), {color: 'red', dotColor: 'red', showMs: true});
// refresh it if we leave the page
document.addEventListener("visibilitychange", () => {
if (!document.hidden) {
clock.innerHTML = '';
initClock(document.querySelector("#clock"), {color: '#D5FF77', dotColor: '#80AACC', showMs: true});
}
});</scrip>
</body>
</html>
Responsive Images
<html>
<head>
<style>
.responsive {
width: 100%;
max-width: 200px;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Images</h2>
<p>If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.</p>
<p>Resize the browser window to see the effect.</p>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUQwAjqKWDH3prC_XJYeQPvKcZancp-uXllVvrffyRG113VWN5Mj9K9EN__EuhN0nJsmkYcLOPojSaV378fHsLhUtR3ufcSPtlQA-llrUwi9cAqB0Ex_t3cCA_iFVyIPSc7TvIdXT200Zdz_TjI4I1-yqRF7OqY9ISzs46k8h4KRQLq2OA77sp9hsc2Ia/s320/9266640.png" alt="Nature" class="responsive" width="600" height="400">
</body>
</html>
Label:
CSS
Jam Digital 2
Jam Digital Informatika Versi 2
Game Pantul
<!DOCTYPE html>
<html>
<head>
<title>Latihan koding Informatika MAN Kapuas</title>
<style>
canvas{
position:absolute;
top:0px; left:0px;
}
#stats{
color:white;
background-color:rgba(255, 255, 255, 0.3);
font-size:20px;
padding:40px;
position:absolute;
top:0px; left:0px;
}
#rules{
opacity:0;
color:white;
background-color:rgba(255, 255, 255, 0.1);
font-size:20px;
position:absolute;
text-align:center;
top:40vh;
width:96vw;
left:0px;
padding:2vw;
-webkit-animation:disappear 4s linear;
}
@-webkit-keyframes disappear{
from{
opacity:1;
}
70%{
opacity:1;
}
100%{
opacity:0;
}
}</style>
</head>
<body>
<canvas id=c></canvas>
<div id=stats><span id=score>0</span>/<span id=outOf>0</span></div>
<div id=rules>klik diarea untuk membuat ledakan</div>
var w=window.innerWidth,
h=window.innerHeight,
amount=((w*h)/10000)|0;
outOf.textContent=amount+1;
c.width=w;
c.height=h;
var ctx=c.getContext('2d');
var inGame=false,
cells=[];
function getRandomColor(min){
return 'rgb(cr, cg, cb)'.replace(
'cr', (Math.random()*(255-min))|0+min).replace(
'cg', (Math.random()*(255-min))|0+min).replace(
'cb', (Math.random()*(255-min))|0+min)
};
clicked=false;
function init(){
clicked=false;
ctx.fillStyle='black';
ctx.fillRect(0, 0, w, h);
score.textContent='0';
cells=[];
for(var n=0; n<amount; ++n){
cells.push(new Cell);
}
inGame=true;
anim();
}
var maxSize=10, minSize=6,
maxV=4;
function Cell(size, x, y){
this.color=getRandomColor(100);
this.size=size||Math.random()*(maxSize-minSize)+minSize;
this.initSize=this.size;
this.x=x||Math.random()*w;
this.y=y||Math.random()*h;
this.vx=Math.random()*maxV*2-maxV;
this.vy=Math.random()*maxV*2-maxV;
this.exploded=false;
this.explosionSize=10;
}
Cell.prototype.update=function(){
this.x+=this.vx;
this.y+=this.vy;
if(this.x<0||this.x>w) this.vx*=-1;
if(this.y<0||this.y>h) this.vy*=-1;
ctx.fillStyle=this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, Math.abs(this.size/2), 0, Math.PI*2);
ctx.fill();
ctx.closePath();
//ctx.fillRect(this.x-this.size/2, this.y-this.size/2, this.size, this.size);
if(this.exploded){
if(this.size>0){
this.explosionSize+=1/this.explosionSize*10;
this.size-=0.05;
}else{
cells.splice(cells.indexOf(this), 1);
}
ctx.beginPath();
ctx.arc(this.x, this.y, this.explosionSize, 0, Math.PI*2);
for(var i=0; i<cells.length; ++i){
var cell=cells[i];
if(!cell.exploded){
var a=this, b=cell;
var distX=a.x-b.x,
distY=a.y-b.y,
dist=Math.sqrt((distX*distX)+(distY*distY));
if(dist<=this.explosionSize) cells[i].explode();
}
}
ctx.strokeStyle=this.color;
ctx.stroke();
ctx.closePath();
}
}
Cell.prototype.explode=function(){
this.exploded=true;
this.vx=this.vy=0;
score.textContent=parseInt(score.textContent)+1;
}
nextInit=false;
function anim(){
if(nextInit){
nextInit=false;
init();
return;
}
if(inGame) window.requestAnimationFrame(anim);
ctx.fillStyle='rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, w, h);
var c;
for(c=0; c<cells.length; ++c) cells[c].update();
if(cells.length===0) gameOver();
}
function gameOver(){
inGame=false;
}
init();
document.addEventListener('click', function(e){
if(!inGame) init();
else if(clicked) nextInit=true;
else{
var cell=new Cell(15, e.clientX, e.clientY)
cells.push(cell);
cell.explode();
clicked=true;
}
})</scrip>
</body>
</html>
Animasi gelombang teks
<!DOCTYPE html>
<html>
<head>
<title>Latihan koding informatika MAN Kapuas</title>
style@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
background: #000;
min-height: 100vh;
align-items: center;
justify-content: center;
}
.content {
position: relative;
}
.content h2 {
color: #fff;
font-size: 8em;
position: absolute;
transform: translate(-50%, -50%);
}
.content h2:nth-child(1) {
color: transparent;
-webkit-text-stroke: 2px RED;
}
.content h2:nth-child(2) {
color: WHITE;
animation: animate 4s ease-in-out infinite;
}
@keyframes animate {
0%,
100% {
clip-path: polygon(
0% 45%,
16% 44%,
33% 50%,
54% 60%,
70% 61%,
84% 59%,
100% 52%,
100% 100%,
0% 100%
);
}
50% {
clip-path: polygon(
0% 60%,
15% 65%,
34% 66%,
51% 62%,
67% 50%,
84% 45%,
100% 46%,
100% 100%,
0% 100%
);
}
}
</style>
</head>
<body>
<section>
<div class="content">
<h2>BIHANN</h2>
<h2>BIHANN</h2>
</div>
</section>
</body>
</html>
Animasi teks slide in
<!DOCTYPE html>
<html>
<head>
<title>Belajar Koding Informatika</title>
<styl>@import url('https://fonts.googleapis.com/css?family=Roboto:300');
body {
text-align:center;
background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
color:#555;
font-family:'Roboto';
font-weight:300;
font-size:32px;
padding-top:40vh;
height:100vh;
overflow:hidden;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
}
div {
display:inline-block;
overflow:hidden;
white-space:nowrap;
}
div:first-of-type { /* For increasing performance
ID/Class should've been used.
For a small demo
it's okaish for now */
animation: showup 7s infinite;
}
div:last-of-type {
width:0px;
animation: reveal 7s infinite;
}
div:last-of-type span {
margin-left:-355px;
animation: slidein 7s infinite;
}
@keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}
@keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-800px; }
35% { margin-left:0px; }
100% { margin-left:0px; }
}
@keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width:355px;}
80% {opacity:1;}
100% {opacity:0;width:355px;}
}
p {
font-size:12px;
color:#999;
margin-top:200px;
}</styl>
</head>
<body>
<div>MAN Kapuas</div>
<div>
<span>Mari Belajar Informatika </span>
</div>
<p>mankapuas.sch.id</p>
</body>
</html>
Animasi drop teks
<!DOCTYPE html>
<html>
<head>
<title>Belajar koding informatika MAN Kapuas</title>
<styl>
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
body {
margin:0px;
text-align:center;
padding-top:43vh;
color:#fff;
font-family:'Roboto';
font-size:36px;
font-weight:100;
overflow:hidden;
animation:bg 5s linear infinite;
}
.dropping-texts {
display: inline-block;
width: 180px;
text-align: left;
height: 36px;
vertical-align: -2px;
}
.dropping-texts > div {
font-size:0px;
opacity:0;
margin-left:-30px;
position:absolute;
font-weight:300;
box-shadow: 0px 60px 25px -20px rgba(0,0,0,0.5);
}
.dropping-texts > div:nth-child(1) {
animation: roll 5s linear infinite 0s;
}
.dropping-texts > div:nth-child(2) {
animation: roll 5s linear infinite 1s;
}
.dropping-texts > div:nth-child(3) {
animation: roll 5s linear infinite 2s;
}
.dropping-texts > div:nth-child(4) {
animation: roll2 5s linear infinite 3s;
}
@keyframes roll {
0% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
transform: rotate(-25deg);
}
3% {
opacity:1;
transform: rotate(0deg);
}
5% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
}
20% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
transform: rotate(0deg);
}
27% {
font-size:0px;
opacity:0.5;
margin-left:20px;
margin-top:100px;
}
100% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
transform: rotate(15deg);
}
}
@keyframes roll2 {
0% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
transform: rotate(-25deg);
}
3% {
opacity:1;
transform: rotate(0deg);
}
5% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
}
30% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
transform: rotate(0deg);
}
37% {
font-size:1500px;
opacity:0;
margin-left:-1000px;
margin-top:-800px;
}
100% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
transform: rotate(15deg);
}
}
@keyframes bg {
0% {background: #ff0075;}
3% {background: #0094ff;}
20% {background: #0094ff;}
23% {background: #b200ff;}
40% {background: #b200ff;}
43% {background: #8BC34A;}
60% {background: #8BC34A;}
63% {background: #F44336;}
80% {background: #F44336;}
83% {background: #F44336;}
100% {background: #F44336;}
}
</style>
</head>
<body>
INFORMATIKA MAN KAPUAS
<div class="dropping-texts">
<div>Developers</div>
<div>Designers</div>
<div>Coders</div>
<div>EVERYONE!</div>
</div>
</body>
</html>
Animasi teks flip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latihan Koding Informatika MAN Kapuas</title>
<styl>
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
body {
margin: 0;
font-family: 'Roboto', sans-serif;
text-align: center;
}
#container {
color: #999;
text-transform: uppercase;
font-size: 36px;
font-weight: bold;
padding-top: 200px;
position: fixed;
width: 100%;
bottom: 45%;
display: block;
}
#flip {
height: 50px;
overflow: hidden;
}
#flip > div > div {
color: #fff;
padding: 4px 12px;
height: 45px;
margin-bottom: 45px;
display: inline-block;
}
#flip div:first-child {
animation: show 10s linear infinite;
}
#flip div div {
background: red;
}
#flip div:nth-child(2) div {
background: orange;
}
#flip div:first-child div {
background: green;
}
#flip div:last-child div {
background: blue;
}
@keyframes show {
0% { margin-top: -270px; }
5% { margin-top: -180px; }
33% { margin-top: -180px; }
38% { margin-top: -90px; }
66% { margin-top: -90px; }
71% { margin-top: 0px; }
99.99% { margin-top: 0px; }
100% { margin-top: -270px; }
}
p {
position: fixed;
width: 100%;
bottom: 30px;
font-size: 12px;
color: #999;
margin-top: 200px;
}
</style>
</head>
<body>
<div id="container">
MAN KAPUAS plus Keterampilan
<div id="flip">
<div><div>SEKOLAH ADIWIYATA</div></div>
<div><div>SEKOLAH SIAGA KEPENDUDUKAN</div></div>
<div><div>SEKOLAH SEHAT</div></div>
</div>
#MANKAPUASBERIMAN
</div>
<p>mankapuas.sch.id</p>
</body>
</html>
Pesan sistem
<!DOCTYPE html>
<html>
<head>
<title>Belajar Koding Informatika MAN Kapuas</title>
<styl>body {
margin: 0;
background-color: #000;
color: #0f0;
font-family: monospace;
font-size: 1.5rem;
padding: 5rem 2rem;
box-sizing: border-box;
}
#text {
transition: all ease 0.12s;
white-space: pre-wrap;
letter-spacing: 2px;
text-shadow: 0px 0px 10px #42fd424f, 0px 0px 20px #4bf34b8c,
0px 0px 30px #94ef9482;
}
</style>
</head>
<body>
<div id="text" contenteditable="false"></div>
<script>const textString = `Hi, Pak Bihann...
Saya berada dalam sistem komputermu...
Saya sangat senang berada disini...
Mari Pak, belajar koding bersama...`;
const textDiv = document.getElementById("text");
let idx = 0;
let it;
setText = _ => {
if (idx === textString.length) {
clearInterval(it);
setTimeout(_ => {
idx = 0;
textDiv.textContent = "";
it = setInterval(setText, 90);
}, 1000);
} else {
textDiv.textContent += textString[idx];
idx++;
}
};
it = setInterval(setText, 90);
</scrip>
</body>
</html>
Buat Frequently Asked Questions
<!DOCTYPE html>
<html>
<head>
<title>Latihan Koding Informatika MAN Kapuas</title>
<styl>
body {
margin: 0;
padding: 0;
font-family: 'arial', sans-serif;
}
.faq-list {
list-style: none;
padding: 0;
}
.faq-list li {
margin: 30px 0;
border: 1px solid rgb(205, 205, 205);
padding: 27px 30px;
margin: 0px auto 30px;
text-align: left;
width: 550px;
position: relative;
}
.faq-list .faq-heading::before {
content: '+';
font-size: 40px;
display: block;
position: absolute;
right: 0;
top: -8px;
color: #c2c2c2;
}
.faq-list .the-active .faq-heading::before {
content: '-';
}
.faq-heading {
position: relative;
cursor: pointer;
font-size: 18px;
font-weight: 400;
margin: 0;
}
.faq-heading:hover {
color: var(--theme-color);
}
.faq-text {
display: none;
}
.container {
width: 1200px;
margin: auto;
}
.art-box svg {
width: 100%;
}
.row {
display: flex;
}
.row .col {
flex-basis: 50%;
}
.read {
color: rgb(100, 100, 100);
font-size: 16px;
line-height: 1.5;
margin-top: 25px;
}
</style>
</head>
<body>
<section>
<div class="container">
<ul class="faq-list">
<li>
<h4 class="faq-heading">Apa itu situs fotografer?</h4>
<p class="read faq-text">
Situs fotografer adalah platform online yang memungkinkan fotografer untuk memamerkan dan menjual karya mereka, serta berinteraksi dengan calon klien dan penggemar fotografi.
</p>
</li>
<li>
<h4 class="faq-heading">Apa manfaat memiliki situs fotografer?</h4>
<p class="read faq-text">
Portofolio Digital: Menampilkan karya fotografer secara profesional.<br>
Akses Lebih Luas: Menjangkau calon klien dari berbagai lokasi.<br>
Pemasaran: Meningkatkan visibilitas dan brand fotografer.<br>
Penghasilan Tambahan: Menjual foto secara online.
</p>
</li>
<li>
<h4 class="faq-heading">Bagaimana cara membuat situs fotografer?</h4>
<p class="read faq-text">
Pilih Platform: Gunakan platform seperti WordPress, Squarespace, atau website builder lainnya.<br>
Desain: Buat desain yang menarik dan sesuai dengan gaya fotografi.<br>
Konten: Unggah foto, tulisan, dan informasi kontak.<br>
Optimalkan SEO: Pastikan situs mudah ditemukan oleh mesin pencari.
</p>
</li>
<li>
<h4 class="faq-heading">Apa yang perlu dipertimbangkan saat membuat situs fotografer?</h4>
<p class="read faq-text">
Kualitas Gambar: Pastikan foto berkualitas tinggi.<br>
Navigasi: Desain yang mudah digunakan dan navigasi yang jelas.<br>
Konten: Tulisan, blog, dan informasi tentang layanan yang ditawarkan.<br>
Kontak: Informasi kontak yang mudah diakses.
</p>
</li>
<li>
<h4 class="faq-heading">Bagaimana cara mempromosikan situs fotografer?</h4>
<p class="read faq-text">
Media Sosial: Gunakan platform seperti Instagram, Facebook, dan Twitter untuk mempromosikan karya.<br>
SEO: Optimalkan konten untuk mesin pencari.<br>
Kolaborasi: Bekerja sama dengan brand atau influencer.<br>
Konten berkualitas: Buat konten yang menarik dan relevan dengan audiens.
</p>
</li>
</ul>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('.faq-heading').click(function () {
$(this).parent('li').toggleClass('the-active').find('.faq-text').slideToggle();
});
</script>
</body>
</html>
Langganan:
Postingan (Atom)
0 komentar: