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>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Alperen İsa Nalbant</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="center">
|
||||
<div class="card">
|
||||
<h1>Site yapım aşamasında.</h1>
|
||||
<p>Lütfen daha sonra tekrar gelin.</p><br>
|
||||
<a class="button" href="https://github.com/Afacanc38">GitHub</a>
|
||||
<a class="button" href="https://github.com/Afacanc38/afacanc38.github.io">Web sitenin kaynak kodu</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alperen'nin Web Sitesi</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/fonts/poppins/poppins.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="ana-kutucuk">
|
||||
<h1 id="site-basligi">Alperen İsa Nalbant</h1>
|
||||
<div class="row mavi">
|
||||
<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>
|
||||
251
style.css
251
style.css
|
|
@ -1,63 +1,190 @@
|
|||
#center {
|
||||
display: flex;
|
||||
padding: 2vh 2vw;
|
||||
height: 90vh;
|
||||
min-height: 300px;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 10px;
|
||||
transition: color background 500ms ease-in-out !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
transition: 200ms ease-in-out;
|
||||
transition: 500ms ease-in-out;
|
||||
background: #fafafa;
|
||||
padding: 30px 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 20px -10px #7e7e7e;
|
||||
font-family: system-ui;
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: 200ms ease-in-out;
|
||||
border: 1px solid #cacdfa;
|
||||
background: #e5e7fd;
|
||||
padding: 10px 15px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
border: 1px solid #b6bbff;
|
||||
background: #b4baff;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
* {
|
||||
color: white !important;
|
||||
}
|
||||
body {
|
||||
background-color: rgb(20, 20, 20);
|
||||
}
|
||||
.card {
|
||||
background: rgb(17, 17, 17);
|
||||
border-color: #424242;
|
||||
box-shadow: 0 10px 20px -10px #080808;
|
||||
}
|
||||
.button {
|
||||
background: #1c1c1f;
|
||||
}
|
||||
.button:hover {
|
||||
background: blue;
|
||||
border-color: blue;
|
||||
}
|
||||
/* CSS reset: start */
|
||||
html, body, div, span, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
abbr, address, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, samp,
|
||||
small, strong, sub, sup, var,
|
||||
b, i,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
article,aside,details,figcaption,figure,
|
||||
footer,header,hgroup,menu,nav,section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style :none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
input, select {
|
||||
vertical-align :middle;
|
||||
}
|
||||
/* 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