<!DOCTYPE html>
<html lang="en">
<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">
<meta name="keywords" content="Proje, html, Css">
<meta name="description" content="İlk Proje Denemem">
<title>Basit Dinazor Sitesi</title>
<!-- Fonts Google -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Signika:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/main.css">
<!-- Tablet -->
<link rel="stylesheet" media="(max-width:768px)" href="css/tablet.css">
<!-- Mobile -->
<link rel="stylesheet" media="(max-width:600px)" href="css/mobile.css">
</head>
<body>
<header class="bg-dark-blue">
<div class="container">
<nav id="navbar">
<h1>ÖFG</h1>
<ul>
<li><a href="#home">Ana Sayfa</a></li>
<li><a href="#training">Etoburlar</a></li>
<li><a href="#courses">Otoburlar</a></li>
<li><a href="#contact">İletişim</a></li>
</ul>
</nav>
</div>
</header>
<section id="home" class="backgraund">
<img src="/images/d6qhot0-1bf0aa9f-7dbe-4e9d-b878-3e91b23fa0c7.jpg" class="img1" alt="Am0nR2">
<br>
<div class="name text-center">
<h2 class="heading-big">Ö F G</h1>
<p>Dinazorlara dair her şey...</p>
<a href="https://tr.wikipedia.org/wiki/Tyrannosaurus" class="btn2">Favori Dinazorum</a>
</div>
</section>
<section id="Dinazorlar" class="background2">
<h2 class="text-center heading-medium">Etobur Dinazorlar</h2>
<div class="items">
<article id="item1" class="item">
<h3>Spinosaurus</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus necessitatibus in voluptatum nemo incidunt iste sapiente maxime et consequatur consequuntur, ratione cum impedit fuga. Hic quia, obcaecati dolore necessitatibus tempore omnis et dolorem tempora ducimus excepturi at tenetur atque quidem sapiente repellendus! Ab sunt maxime nisi perferendis assumenda iste repellendus.</p>
</article>
<article id="item2" class="item">
<h3>Tyrannosaurus Rex</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus amet tenetur nemo ea excepturi quibusdam voluptatibus aut eveniet libero, perspiciatis possimus earum, enim odio cum placeat. Quasi eos nam, optio dolor placeat iure excepturi consectetur voluptatibus reprehenderit molestias eligendi eum culpa, officia dolorum facilis quo sunt nemo distinctio corrupti.</p>
</article>
<article id="item3" class="item">
<h3>Carcharodontosaurus</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore sapiente soluta consequuntur obcaecati sit reprehenderit, expedita minima corporis atque nobis adipisci, aut ex veritatis doloribus cum quod. Quam, at possimus! Natus molestias impedit repudiandae sint ea rerum sunt voluptates inventore quae. Consectetur necessitatibus doloribus totam perspiciatis aperiam delectus repellat velit.</p>
</article>
</div>
<div class="Videolar">
<h3>Önerilen Dinazor Belgeselleri</h3>
<article class="Video">
<iframe width="300" height="200" allowfullscreen
src="https://www.youtube.com/embed/0uduQk_8c1s">
</iframe>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, corporis. Incidunt consectetur quaerat, ex labore consequatur dolorum voluptate, aliquid suscipit voluptatum nam fugiat possimus ea eveniet saepe omnis explicabo magni laborum sed! Maxime excepturi fuga soluta, consequuntur harum corrupti ex sit, libero est maiores molestias asperiores inventore provident minima? Quia doloremque eligendi fugiat sint quibusdam. Sed laboriosam quod deleniti laborum natus minima nisi ratione temporibus voluptatum, doloremque cumque sit delectus enim autem maxime veritatis? Reprehenderit, quam commodi aperiam minus veritatis a nobis debitis dolorum dolor distinctio? Tenetur modi reiciendis reprehenderit? Voluptatem aspernatur quos inventore sequi laboriosam nesciunt vero, alias minima?</p>
</article>
<article class="Video">
<iframe width="300" height="200" allowfullscreen
src="https://www.youtube.com/embed/YQX7JYQjDOQ"></iframe>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita ut repellat illo unde numquam laboriosam maiores commodi inventore? Harum maxime nobis velit autem tenetur saepe molestiae amet! Perferendis doloremque accusantium quidem maiores cupiditate unde obcaecati nostrum eligendi possimus, accusamus voluptates omnis dolore aliquid eius expedita fugiat consequuntur natus perspiciatis ea voluptate totam harum enim. Eos earum impedit neque architecto inventore voluptatem nostrum cumque accusamus incidunt libero sequi, reiciendis, ipsum, dolor voluptatum eveniet. Voluptate rem ducimus nisi dolorem aliquam eius laboriosam, distinctio ea non officia quibusdam soluta sed voluptates, placeat velit dolorum quisquam tempora omnis quia labore! Dicta aspernatur facere optio.</p></article>
<article class="Video">
<iframe width="300" height="200" allowfullscreen
src="https://www.youtube.com/embed/sp2v1Wjr3NI">
</iframe>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, libero molestias dolorem aut recusandae explicabo facilis ad, et soluta, quod praesentium quidem deleniti repellendus natus nostrum dolor. Eos fugit maxime exercitationem minus voluptas soluta dignissimos, quo et ad autem ipsam repellat corporis voluptate ducimus. Recusandae ea corporis, adipisci incidunt voluptates laboriosam nihil exercitationem error officia cupiditate soluta esse, sunt accusamus ab id? Dolores harum incidunt praesentium maxime vel facilis totam tenetur tempore corrupti. Aliquid sunt provident quas reiciendis nulla eaque laboriosam incidunt blanditiis doloremque officiis, beatae harum quo, obcaecati ea laborum ullam dolorum ipsum! Praesentium non incidunt adipisci pariatur aperiam!</p></article>
</div>
</section>
<footer id="contact" class="bg-dark-blue">
<div class="contact-form">
<form><h4 class="text-center heading medium">Bize Ulaşın</h4>
<div class="form-group">
<label for="name">İsim</label>
<input type="text" class="form-control" name="name" id="name" placeholder="isim">
</div>
<div class="form-group">
<label for="email">E-mail</label>
<input type="email" class="form-control" name="email" id="email" placeholder="E-mail">
</div>
<div class="form-group">
<label for="message">Mesaj</label>
<textarea name="message" id="message" class="form-control" rows="5" placeholder="mesajımız"></textarea>
</div>
<button type="submit" class="btn1">Gönder</button>
</form>
<ul>
<li>
<a href="#"><i class="fab fa-facebook"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
</ul>
</div>
</footer>
</body>
</html>
