egeruzz2424
Decapat
- Katılım
- 17 Haziran 2023
- Mesajlar
- 31
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periyodik Tablo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="periodic-table">
<div class="element nonmetal c1 r1">
<div class="square">
<div class="atomic-number">1</div>
<div class="label">
<div class="symbol">H</div>
<div class="name">Hydrogen</div>
</div>
<div class="atomic-mass">1.008</div>
</div>
</div>
<div class="element noble-gas c18 r1">
<div class="square">
<div class="atomic-number">2</div>
<div class="label">
<div class="symbol">He</div>
<div class="name">Helium</div>
</div>
<div class="atomic-mass">4.0026</div>
</div>
</div>
<div class="element c1 r2 alkali-metal">
<div class="square">
<div class="atomic-number">1</div>
<div class="label">
<div class="symbol">Li</div>
<div class="name">Lithium</div>
</div>
<div class="atomic-mass">1.008</div>
</div>
</div>
<div class="element c1 r3 alkali-metal">
<div class="square">
<div class="atomic-number">1</div>
<div class="label">
<div class="symbol">Na</div>
<div class="name">Sodium</div>
</div>
<div class="atomic-mass">1.008</div>
</div>
</div>
<div class="element c1 r4 alkali-metal">
<div class="square">
<div class="atomic-number">1</div>
<div class="label">
<div class="symbol">H</div>
<div class="name">Potassium</div>
</div>
<div class="atomic-mass">1.008</div>
</div>
</div>
<div class="element c1 r5 alkali-metal">
<div class="square">
<div class="atomic-number">1</div>
<div class="label">
<div class="symbol">H</div>
<div class="name">Rubidium</div>
</div>
<div class="atomic-mass">1.008</div>
</div>
</div>
<div class="element c1 r6 alkali-metal">
<div class="square">
<div class="atomic-number">1</div>
<div class="label">
<div class="symbol">H</div>
<div class="name">Caesium</div>
</div>
<div class="atomic-mass">1.008</div>
</div>
</div>
<div class="element c1 r7 alkali-metal">
<div class="square">
<div class="atomic-number">1</div>
<div class="label">
<div class="symbol">H</div>
<div class="name">Francium</div>
</div>
<div class="atomic-mass">1.008</div>
</div>
</div>
</div>
</div>
</body>
</html>
SCSS:
$bgColor: rgb(31, 31, 31);
$alkaliMetalColor: #ecbe59;
$alkalineEarthMetalColor: #dee955;
$lanthanoidColor: #ec77a3;
$actinoidColor: #c686cc;
$transitionMetalColor: #fd8572;
$postTransitionMetalColor: #4cddf3;
$metalloidColor: #3aefb6;
$nonmetalColor: #52ee61;
$nobleGasColor: #759fff;
$unknownColor: #cccccc;
html {
width: 100%;
height: 100%;
}
body {
background-color: $bgColor;
translate: no;
text-shadow: 0 0 0.4vw currentColor;
}
.wrapper {
padding: 2%;
overflow: hidden;
position: relative;
}
.periodic-table {
color: #fff;
display: grid;
grid-template-columns: repeat(18, 1fr);
// grid-template-rows: repeat(10, 1fr);
grid-gap: 5px;
}
.element {
cursor: pointer;
font-size: 0.5vw;
transition: 500ms;
position: relative;
border: 2px solid;
box-sizing: border-box;
background: $bgColor;
height: 1fr;
width: 1fr;
left: 0;
top: 0;
.square {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: max-content;
border: 2px solid;
box-sizing: border-box;
background: $bgColor;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition-property: transform, z-index, left, right, top, bottom;
transition-duration: 100ms, 0ms, 200ms, 200ms, 200ms, 200ms;
transition-delay: 0ms, 100ms, 0ms, 0ms, 0ms, 0ms;
}
.atomic-number{
position: absolute;
left: 0;
top: 0;
padding: 2px;
}
.label{
text-align: center;
transition: 200ms;
}
.symbol{
font-size: 1.7vw;
}
.name{
font-size: 0.7vw;
}
.atomic-mass{
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 2px;
text-align: center;
}
.atomic-weight{
position: absolute;
right: 0;
top: 0;
list-style: none;
margin: 0;
padding: 2px;
opacity: 0;
transition: 200ms;
text-align: right;
}
}
.placeholder{
position: relative;
z-index: -1;
font-size: 1vw;
padding-bottom: 100%;
color: #fff;
transition: 500ms;
.square{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 2px solid;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0.5;
}
}
@for $i from 1 through 18 {
.c#{$i} {
grid-column: $i;
}
}
@for $i from 1 through 10 {
.r#{$i} {
grid-row: $i;
}
}
.alkali-metal {
color: $alkaliMetalColor;
}
.alkaline-earth-metal {
color: $alkalineEarthMetalColor;
}
.transition-metal {
color: $transitionMetalColor;
}
.post-transition-metal {
color: $postTransitionMetalColor;
}
.metalloid {
color: $metalloidColor;
}
.nonmetal {
color: $nonmetalColor;
}
.noble-gas {
color: $nobleGasColor;
}
.lanthanoid {
color: $lanthanoidColor;
}
.actinoid {
color: $actinoidColor;
}
.unknown {
color: $unknownColor;
}SCSS'i yeni öğrendim ve basit bir proje yapmak istedim ama böyle bir sorunla karşılaştım. Bir sürü şey denedim ama bir türlü düzeltemedim. Yardım eder misiniz?
