Belajar Informatika

<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>

<a href="#" class="nav-cta-btn">Get Started</a>

</nav>

<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>

<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>

Unleash Your<span class="text-highlight"> Inner Warrior</span>

</h2>

Join the battle and conquer the arena with unmatched skill and

strategy.

</p>

</div>

<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>

Embark on Your

<span class="text-highlight">Legendary Journey</span>

</h2>

Immerse Yourself in a World Where Legends Clash and Heroes Rise

to Glory.

</p>

</div>

<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>

Master the

<span class="text-highlight">Art of Magic</span>

</h2>

Harness powerful spells and enchantments to dominate your foes

and change the course of battle.

</p>

</div>

<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>

Rise as the <span class="text-highlight">Champion</span>

</h2>

Lead your team to victory with unparalleled strength and

unwavering determination.

</p>

</div>

<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>

<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>

<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>

<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>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Latihan Koding Informatika MAN Kapuas</title>

body {

margin: 0;

overflow:hidden;

background: #131313;

}

</style>

</head>

<body>

<h1>This is a animation</h1>

<p>MAN Kapuas.</p>

'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>

<!DOCTYPE html>

<html>

<head>

<title>Latihan Koding Informatika MAN Kapuas</title>

body {

margin: 0;

background: #020202;

overflow:hidden;

}

</style>

</head>

<body>

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>

Belajar Informatika

Game Dino

Intro web

Balon Terbang

Game Mobil 1

Tumbuh

Animasi Koneksi Bintang

Game Batawakan

Pages - Menu

Online

Translate

Labels

Archive

LINK

Powered by IT Komputer MAN Kapuas