Logo ve banner için ID kullanın. Nav içine alabilirsiniz.
Sıktı. Şu tarz bir şeyler yaparsınız artık. Her şeyi kafama göre verdim. Anlayan birisi çok daha düzgün ve güzel şekilde yapacaktır.
İç elementler için class falan eklersiniz.
evet, her şeye Flex kullanınca güzel oluyor bence.
Sürprizbozan
Kod:Panoya kopyala
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Okullar</title>
<link rel="stylesheet" type="text/css" href="okullar.css">
</head>
<body>
<nav>
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path></path>
</svg>
<img id="banner" src="technopat.webp" alt="Elma">
</nav>
<aside>
<a href="">
<span>Okullar</span>
</a>
<a href="">
<span>Dersler</span>
</a>
</aside>
<main>
<div>A okulu</div>
<div>B okulu</div>
<div>C okulu</div>
<div>D okulu</div>
<div>D okulu</div>
<div>D okulu</div>
<div>D okulu</div>
<div>D okulu</div>
<div>D okulu</div>
<div>D okulu</div>
</main>
</body>
</html>
Kod:Panoya kopyala
* {
border: 1px black solid;
}
body {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
nav {
display: flex;
align-items: center;
gap: 20px;
padding: 8px;
width: 100%;
height: min-content;
}
aside {
width: 25%;
padding: 8px;
display: flex;
flex-direction: column;
gap: 12px;
}
main {
display: flex;
flex-wrap: wrap;
gap: 20px;
flex: 1;
padding: 20px;
}
div {
height: 100px;
width: 100px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
}
#logo {
height: 32px;
& > path {
d: path("M174 417c-6 0-12-2-17-7l-110-110c-9-9-9-25 0-34 9-9 25-9 34 0l93 93 257-257c9-9 25-9 34 0 9 9 9 25 0 34l-274 274c-5 5-11 7-17 7z");
}
}
span {
font-size: 32pt;
}