medvegergo/2022.11.07_dolgozat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

asd

Browse Source
This commit is contained in:
Medve Gergo 2022-11-07 10:22:50 +01:00
commit c2eac4e41b
2 changed files with 128 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
index.html Normal file
View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="hu">
<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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Szemantikus elemek</title>
</head>
<body>
<div class="griding">
<header class="elvalasztas canter">
<h1>XDD Jó téma</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus culpa fugiat id iure repudiandae maiores.
Quas doloremque officiis necessitatibus minima. Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Alias, illo. Totam rem asperiores porro ullam tempore eaque deserunt animi consequatur temporibus
fugiat, in maiores molestiae ipsum fuga obcaecati magnam cum.</p>
<nav class="navbar navbar-expand-sm tusjak" aria-label="Third navbar example">
<div class="container-fluid">
<a class="navbar-brand coloring" coloring href="#">Friss hírek</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link active coloring" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active coloring" aria-current="page" href="#">BRUH</a>
</li>
<li class="nav-item">
<a class="nav-link active coloring" aria-current="page" href="#">OOOHMAGAAD</a>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
</header>
<section class="elvalasztas">
<article class="canter">bruh</article>
<article class="canter">bruh</article>
<article class="canter">bruh</article>
</section>
<aside class="elvalasztas canter">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum debitis earum labore distinctio ex
commodi obcaecati rem mollitia vero hic, repudiandae aperiam quibusdam, molestias dolore fuga ipsa porro
odio! Temporibus!</aside>
<footer class="elvalasztas canter">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto omnis provident obcaecati enim nobis
error earum, dolorum fuga maxime. Magni?</footer>
</div>
</body>
</html>

68
style.css Normal file
View File

@ -0,0 +1,68 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding: 1rem;
background: rgb(8,0,142);
background: linear-gradient(90deg, rgba(8,0,142,1) 0%, rgba(9,9,121,1) 12%, rgba(0,212,255,1) 100%);
}
header{
border: solid black 1px;
background-color: whitesmoke;
grid-column: 1/4;
}
section{
grid-row: 2/5;
grid-column: 1/3;
background-color: whitesmoke;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
article{
background-color: whitesmoke;
border: solid black 1px;
width: 100%;
height: 100%;
}
footer{
background-color: whitesmoke;
grid-row: 5/6;
grid-column: 1/4;
border: solid black 1px;
}
aside{
border: solid black 1px;
background-color: whitesmoke;
grid-row: 2/5;
}
.griding{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
.canter{
padding: 1rem;
}
.elvalasztas{
margin: 0.5rem;
}
.tusjak{
background-color: #ff00ff;
}
.coloring{
color: white;
}