Yeni tasarım
This commit is contained in:
Alperen İsa Nalbant
parent
789136e4ef
commit
5cd1472a63
59
index.html
59
index.html
|
|
@ -1,18 +1,43 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="tr">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
<head>
|
||||||
<title>Alperen İsa Nalbant</title>
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" href="style.css">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
</head>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<body>
|
<title>Alperen'nin Web Sitesi</title>
|
||||||
<div id="center">
|
<link rel="stylesheet" href="assets/css/style.css">
|
||||||
<div class="card">
|
<link rel="stylesheet" href="assets/fonts/poppins/poppins.css">
|
||||||
<h1>Site yapım aşamasında.</h1>
|
</head>
|
||||||
<p>Lütfen daha sonra tekrar gelin.</p><br>
|
|
||||||
<a class="button" href="https://github.com/Afacanc38">GitHub</a>
|
<body>
|
||||||
<a class="button" href="https://github.com/Afacanc38/afacanc38.github.io">Web sitenin kaynak kodu</a>
|
<div id="ana-kutucuk">
|
||||||
</div>
|
<h1 id="site-basligi">Alperen İsa Nalbant</h1>
|
||||||
</div>
|
<div class="row mavi">
|
||||||
</body>
|
<div class="baslik kucuk solgun">
|
||||||
|
Hakkımda
|
||||||
|
</div>
|
||||||
|
<p class="title">
|
||||||
|
Ben 13 yaşında bir <span class="alticizili">GNU/Linux</span> kullanısıyım. 10 yaşımda
|
||||||
|
GNU/Linux ile tanıştım ve 11 yaşımda <span class="alticizili">Python</span> öğrenmeye çalıştım.
|
||||||
|
Şimdi ise <span class="alticizili">Libadwaita</span> ve <span class="alticizili">web siteleri</span>
|
||||||
|
üzerinde odaklanıyorum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="navigation-gird">
|
||||||
|
<div class="row clicktable extended">
|
||||||
|
<div class="baslik kucuk">Projeler</div>
|
||||||
|
</div>
|
||||||
|
<div class="navigation-gird other">
|
||||||
|
<div class="row clicktable">
|
||||||
|
<div class="baslik kucuk">Blog (yakında)</div>
|
||||||
|
</div>
|
||||||
|
<div class="row clicktable">
|
||||||
|
<div class="baslik kucuk">Bana ulaşın</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
251
style.css
251
style.css
|
|
@ -1,63 +1,190 @@
|
||||||
#center {
|
/* CSS reset: start */
|
||||||
display: flex;
|
html, body, div, span, object, iframe,
|
||||||
padding: 2vh 2vw;
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
height: 90vh;
|
abbr, address, cite, code,
|
||||||
min-height: 300px;
|
del, dfn, em, img, ins, kbd, q, samp,
|
||||||
max-width: 100%;
|
small, strong, sub, sup, var,
|
||||||
align-items: center;
|
b, i,
|
||||||
justify-content: center;
|
dl, dt, dd, ol, ul, li,
|
||||||
}
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
* {
|
article, aside, canvas, details, figcaption, figure,
|
||||||
padding: 0;
|
footer, header, hgroup, menu, nav, section, summary,
|
||||||
margin: 10px;
|
time, mark, audio, video {
|
||||||
transition: color background 500ms ease-in-out !important;
|
margin: 0;
|
||||||
}
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
.card {
|
outline: 0;
|
||||||
transition: 200ms ease-in-out;
|
font-size: 100%;
|
||||||
transition: 500ms ease-in-out;
|
vertical-align: baseline;
|
||||||
background: #fafafa;
|
background: transparent;
|
||||||
padding: 30px 20px;
|
}
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 12px;
|
body {
|
||||||
box-shadow: 0 10px 20px -10px #7e7e7e;
|
line-height: 1;
|
||||||
font-family: system-ui;
|
}
|
||||||
}
|
|
||||||
|
article,aside,details,figcaption,figure,
|
||||||
.button {
|
footer,header,hgroup,menu,nav,section {
|
||||||
transition: 200ms ease-in-out;
|
display: block;
|
||||||
border: 1px solid #cacdfa;
|
}
|
||||||
background: #e5e7fd;
|
|
||||||
padding: 10px 15px;
|
nav ul {
|
||||||
color: black;
|
list-style :none;
|
||||||
text-decoration: none;
|
}
|
||||||
border-radius: 20px;
|
|
||||||
}
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
.button:hover {
|
}
|
||||||
border: 1px solid #b6bbff;
|
|
||||||
background: #b4baff;
|
blockquote:before, blockquote:after,
|
||||||
color: blue;
|
q:before, q:after {
|
||||||
}
|
content: '';
|
||||||
|
content: none;
|
||||||
@media (prefers-color-scheme: dark) {
|
}
|
||||||
* {
|
|
||||||
color: white !important;
|
a {
|
||||||
}
|
margin: 0;
|
||||||
body {
|
padding: 0;
|
||||||
background-color: rgb(20, 20, 20);
|
font-size: 100%;
|
||||||
}
|
vertical-align: baseline;
|
||||||
.card {
|
background: transparent;
|
||||||
background: rgb(17, 17, 17);
|
}
|
||||||
border-color: #424242;
|
|
||||||
box-shadow: 0 10px 20px -10px #080808;
|
table {
|
||||||
}
|
border-collapse: collapse;
|
||||||
.button {
|
border-spacing: 0;
|
||||||
background: #1c1c1f;
|
}
|
||||||
}
|
|
||||||
.button:hover {
|
input, select {
|
||||||
background: blue;
|
vertical-align :middle;
|
||||||
border-color: blue;
|
}
|
||||||
}
|
/* CSS reset: end */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary: #006b53;
|
||||||
|
--on-primary: #ffffff;
|
||||||
|
--primary-container: #1dffcf;
|
||||||
|
--on-primary-container: #002117;
|
||||||
|
--secondary: #4b635a;
|
||||||
|
--on-secondary: #ffffff;
|
||||||
|
--secondary-container: #cee9dd;
|
||||||
|
--on-secondary-container: #072018;
|
||||||
|
--tertiary: #406376;
|
||||||
|
--on-tertiary: #ffffff;
|
||||||
|
--tertiary-container: #c3e7fe;
|
||||||
|
--on-tertiary-container: #001e2c;
|
||||||
|
--error: #B3261E;
|
||||||
|
--on-error: #FFFFFF;
|
||||||
|
--error-container: #F9DEDC;
|
||||||
|
--on-error-container: #410E0B;
|
||||||
|
--background: #fbfdfa;
|
||||||
|
--on-background: #e1e3e0;
|
||||||
|
--surface: #fbfdfa;
|
||||||
|
--on-surface: #191c1b;
|
||||||
|
--outline: #79747E;
|
||||||
|
--outline-surface-variant: #E7E0EC;
|
||||||
|
--on-outline-surface-variant: #49454F;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
--primary: #006b53;
|
||||||
|
--on-primary: #ffffff;
|
||||||
|
--primary-container: #1dffcf;
|
||||||
|
--on-primary-container: #002117;
|
||||||
|
--secondary: #4b635a;
|
||||||
|
--on-secondary: #ffffff;
|
||||||
|
--secondary-container: #cee9dd;
|
||||||
|
--on-secondary-container: #072018;
|
||||||
|
--tertiary: #406376;
|
||||||
|
--on-tertiary: #ffffff;
|
||||||
|
--tertiary-container: #c3e7fe;
|
||||||
|
--on-tertiary-container: #001e2c;
|
||||||
|
--error: #B3261E;
|
||||||
|
--on-error: #FFFFFF;
|
||||||
|
--error-container: #F9DEDC;
|
||||||
|
--on-error-container: #410E0B;
|
||||||
|
--background: #fbfdfa;
|
||||||
|
--on-background: #e1e3e0;
|
||||||
|
--surface: #fbfdfa;
|
||||||
|
--on-surface: #191c1b;
|
||||||
|
--outline: #79747E;
|
||||||
|
--outline-surface-variant: #E7E0EC;
|
||||||
|
--on-outline-surface-variant: #49454F;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--primary: #00e0b2;
|
||||||
|
--on-primary: #00382a;
|
||||||
|
--primary-container: #00513e;
|
||||||
|
--on-primary-container: #1bffd0;
|
||||||
|
--secondary: #b2ccc1;
|
||||||
|
--on-secondary: #1d352d;
|
||||||
|
--secondary-container: #344b43;
|
||||||
|
--on-secondary-container: #cee9dd;
|
||||||
|
--tertiary: #a8cce2;
|
||||||
|
--on-tertiary: #0d3446;
|
||||||
|
--tertiary-container: #284b5e;
|
||||||
|
--on-tertiary-container: #c3e7fe;
|
||||||
|
--error: #ffb4a9;
|
||||||
|
--on-error: #680003;
|
||||||
|
--error-container: #930006;
|
||||||
|
--on-error-container: #ffdad4;
|
||||||
|
--background: #191c1b;
|
||||||
|
--on-background: #e1e3e0;
|
||||||
|
--surface: #191c1b;
|
||||||
|
--on-surface: #e1e3e0;
|
||||||
|
--outline: #89938e;
|
||||||
|
--outline-surface-variant: #3f4945;
|
||||||
|
--on-outline-surface-variant: #bfc9c3;
|
||||||
|
}
|
||||||
|
aside img {
|
||||||
|
color: var(--on-background);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
font-family: cantarell, system-ui;
|
||||||
|
}
|
||||||
|
h1, h2, h3 {
|
||||||
|
font-family: Prompt, system-ui;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 60px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
background: var(--surface);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
header a {
|
||||||
|
font-family: Prompt;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--on-surface);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside img {
|
||||||
|
width: 25px;
|
||||||
|
|
||||||
|
}
|
||||||
|
aside img::before {
|
||||||
|
height: 30px;
|
||||||
|
width: 50px;
|
||||||
|
background: var(--on-primary);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue