acayip-home/index.html

384 lines
8.4 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="stylesheet" href="/style/style.css" />
<style>
a {
text-decoration: none;
color: white;
}
a:hover {
color: white;
text-decoration: underline;
}
p {
margin: 0;
}
.app-name {
font-family: "Source Sans Pro", sans-serif;
font-size: 36px;
}
body {
margin-top: 48px;
display: flex;
flex-direction: column;
align-items: center;
}
#logo:hover {
transition-property: transform;
transition-duration: 150ms;
}
#logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
border: 1px solid white;
padding: 24px 48px;
gap: 24px;
transition-property: transform;
transition-duration: 800ms;
}
#logo-container {
display: flex;
flex-direction: column;
align-items: center;
grid-area: main;
}
#pan-container {
padding: 20px;
}
.brand-name {
font-family: "Source Code Pro", monospace;
font-size: 64px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.reverse {
transform: scaleX(-1);
}
.container {
width: 1280px;
display: grid;
grid-template-columns: 256px 1fr 256px;
grid-template-rows: 290px 290px 290px;
gap: 24px 0px;
grid-auto-flow: row;
grid-template-areas:
"app1 main app2"
". main app3"
". main .";
}
.app {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid white;
gap: 24px;
height: 290px;
transition-property: opacity;
transition-duration: 500ms;
opacity: 0.3;
}
.app-disabled {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid white;
gap: 24px;
height: 290px;
transition-property: opacity;
transition-duration: 500ms;
opacity: 0.3;
}
.app:hover {
body {
margin-top: 48px;
display: flex;
flex-direction: column;
align-items: center;
}
transition-property: opacity;
transition-duration: 500ms;
opacity: 0.8;
}
.app1 {
grid-area: app1;
padding: 20px 0;
}
.app2 {
grid-area: app2;
padding: 20px 0;
}
.app3 {
grid-area: app3;
padding: 20px 0;
}
@media (max-width: 1300px) {
.app-name {
font-family: "Source Sans Pro", sans-serif;
font-size: 20px;
}
body {
margin-top: 24px;
margin-bottom: 48px;
}
#logo {
padding: 12px 24px;
gap: 12px;
}
#pan-container {
padding: 0px;
}
.brand-name {
font-family: "Source Code Pro", monospace;
font-size: 24px;
}
#logo-image {
height: 240px;
width: 240px;
}
.container {
width: 290px;
display: grid;
grid-template-columns: 141px 141px;
grid-template-rows: 352px 160px 160px;
gap: 8px 8px;
grid-auto-flow: row;
grid-template-areas:
"main main"
"app1 app2"
"app3 .";
justify-content: space-between;
}
.app-image {
width: 64px;
height: 64px;
}
.app {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid white;
gap: 12px;
height: 160px;
transition-property: opacity;
transition-duration: 500ms;
opacity: 0.8;
}
.app-disabled {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid white;
gap: 24px;
height: 160px;
transition-property: opacity;
transition-duration: 500ms;
opacity: 0.3;
}
.app:hover {
transition-property: opacity;
transition-duration: 500ms;
opacity: 0.8;
}
.app1 {
grid-area: app1;
padding: 0 0;
}
.app2 {
grid-area: app2;
padding: 0 0;
}
.app3 {
grid-area: app3;
padding: 0 0;
}
}
@media (prefers-color-scheme: light) {
#logo {
border: 1px solid black;
}
.app {
border: 1px solid black;
}
.app-disabled {
border: 1px solid black;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: black;
text-decoration: underline;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
</head>
<body>
<div class="container">
<div class="app1">
<a href="https://blog.log101.dev">
<div class="app">
<img
src="/ikon.png"
height="128px"
width="128px"
class="app-image"
/>
<p class="app-name">Blog</p>
</div>
</a>
</div>
<div class="app2">
<a href="https://konulukonum.com">
<div class="app">
<img
src="/konulu-konum-logo.jpg"
height="128px"
width="128px"
class="app-image"
/>
<p class="app-name">Konulu<br />Konum</p>
</div>
</a>
</div>
<div class="app3">
<div class="app-disabled">
<p class="app-name">Yakında...</p>
</div>
</div>
<div id="logo-container">
<div id="pan-container">
<div id="logo">
<div id="brand-reversed" class="brand-name reverse">
<p>A</p>
<p>C</p>
<p>A</p>
<p>Y</p>
<p>İ</p>
<p>P</p>
</div>
<img
width="624"
height="624"
src="/acayip-logo.png"
id="logo-image"
/>
<div id="brand" class="brand-name">
<p>A</p>
<p>C</p>
<p>A</p>
<p>Y</p>
<p>İ</p>
<p>P</p>
</div>
</div>
</div>
</div>
</div>
<script>
let constrain = 800;
let panContainer = document.getElementById("pan-container");
let ex1Layer = document.getElementById("logo");
function transforms(x, y, el) {
let box = el.getBoundingClientRect();
let calcX = -(y - box.y - box.height / 2) / constrain;
let calcY = (x - box.x - box.width / 2) / constrain;
return (
"perspective(200px) " +
" rotateX(" +
calcX +
"deg) " +
" rotateY(" +
calcY +
"deg) "
);
}
function resetTransform(x, y, el) {
return (
"perspective(100px) " + " rotateX(0deg) " + " rotateY(0deg) "
);
}
function transformElement(el, xyEl) {
el.style.transform = transforms.apply(null, xyEl);
}
function resetElement(el, xyEl) {
el.style.transform = resetTransform.apply(null, xyEl);
}
panContainer.onmousemove = function (e) {
let xy = [e.clientX, e.clientY];
let position = xy.concat([ex1Layer]);
window.requestAnimationFrame(function () {
transformElement(ex1Layer, position);
});
};
panContainer.onmouseleave = function (e) {
let xy = [0, 0];
let position = xy.concat([ex1Layer]);
window.requestAnimationFrame(function () {
resetElement(ex1Layer, position);
});
};
</script>
</body>
</html>