Ümit Tunç
146 lines
5.3 KiB
HTML
146 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Doc - Blogzine Theme</title>
|
|
<!-- Meta Tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="author" content="Webestica.com">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
|
|
<!-- Google Font -->
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Plugins CSS -->
|
|
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css">
|
|
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap-icons/bootstrap-icons.css">
|
|
|
|
<!-- Theme CSS -->
|
|
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
|
|
<link rel="stylesheet" type="text/css" href="assets/css/doc.css">
|
|
<link rel="stylesheet" type="text/css" href="assets/css/prism.css">
|
|
<link rel="stylesheet" type="text/css" href="assets/vendor/glightbox/css/glightbox.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- **************** MAIN CONTENT START **************** -->
|
|
<main>
|
|
<!-- Navbar top START -->
|
|
<div class="navbar-top bg-dark px-3 px-sm-4 px-md-5">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<!-- Logo START -->
|
|
<a class="navbar-brand py-3" href="index.html">
|
|
<img class="navbar-brand-item" src="assets/images/logo.svg" alt="logo">
|
|
</a>
|
|
<!-- Logo END -->
|
|
|
|
<!-- Navbar right -->
|
|
<div>
|
|
<ul class="text-end list-inline m-0">
|
|
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://blogzine.webestica.com">Live Preview</a> </li>
|
|
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://support.webestica.com" target="_blank">Support</a> </li>
|
|
<li class="list-inline-item text-white"> <span class="badge bg-danger text-white">v1.2.0</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Navbar top END -->
|
|
|
|
<div class="container mt-5">
|
|
<div class="row g-5 pt-5">
|
|
<div class="col-md-6">
|
|
<h5 class="mb-4">Card YouTube ratio 16x9</h5>
|
|
<div class="card overflow-hidden">
|
|
<div class="ratio ratio-16x9">
|
|
<iframe src="https://www.youtube.com/embed/9No-FiEInLA" title="YouTube video" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="card-body bg-light">
|
|
<h5 class="card-title">Card Video youtube</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h5 class="mb-4">Card YouTube ratio 4x3</h5>
|
|
<div class="card overflow-hidden">
|
|
<div class="ratio ratio-4x3">
|
|
<iframe src="https://www.youtube.com/embed/9No-FiEInLA" title="YouTube video" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="card-body bg-light">
|
|
<h5 class="card-title">Card Video youtube</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h5 class="mb-4">Card YouTube ratio 1x1</h5>
|
|
<div class="card overflow-hidden">
|
|
<div class="ratio ratio-1x1">
|
|
<iframe src="https://www.youtube.com/embed/9No-FiEInLA" title="YouTube video" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="card-body bg-light">
|
|
<h5 class="card-title">Card Video youtube</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h5 class="mb-4">Card YouTube ratio 21x9</h5>
|
|
<div class="card overflow-hidden">
|
|
<div class="ratio ratio-21x9">
|
|
<iframe src="https://www.youtube.com/embed/9No-FiEInLA" title="YouTube video" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="card-body bg-light">
|
|
<h5 class="card-title">Card Video youtube</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="col-md-6">
|
|
<h5 class="mb-4">Card Video Vimeo</h5>
|
|
<div class="card overflow-hidden">
|
|
<div class="ratio ratio-16x9">
|
|
<iframe src="https://player.vimeo.com/video/192827333?h=621d8aa620" title="Vimeo video" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="card-body bg-light">
|
|
<h5 class="card-title">Card Video Vimeo</h5>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- =======================
|
|
JavaScripts -->
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script src="assets/js/simple-scrollbar.min.js"></script>
|
|
<script src="assets/js/prism.js"></script>
|
|
<script src="assets/js/clipboard.min.js"></script>
|
|
<script src="assets/vendor/glightbox/js/glightbox.js"></script>
|
|
|
|
<!-- Template Functions -->
|
|
<script src="assets/js/functions.js"></script>
|
|
|
|
</body>
|
|
</html> |