147 lines
5.4 KiB
HTML
147 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>Welcome to Kate's Linux Odyssey.</title>
|
|
<meta name="viewport" content="width=device-width,
|
|
initial-scale=1!">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
</body>
|
|
|
|
|
|
<header>
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<a href="index.html" class="navbar-brand">Kate's Oddysey</a>
|
|
<div class="navbar-nav">
|
|
<a href="#">home</a>
|
|
<a href="#">content</a>
|
|
<a href="#">blog</a>
|
|
<a href="#">about me</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class = "banner">
|
|
<div class = "container">
|
|
<h1 class="banner-title">
|
|
<span>Kate's.</span> Odyssey
|
|
</h1>
|
|
<p>my journey through life, Linux and technology</p>
|
|
<form>
|
|
<input type= "text" class="search-input" placeholder="Search . . .">
|
|
<button type ="submit" class = "search-btn">
|
|
<i class = "fas fa-search"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
|
|
<section class = "design" id="design">
|
|
|
|
<div class="container">
|
|
<div class="title">
|
|
<h2> Recent posts</h2>
|
|
<p> Recent posts on the blog</p>
|
|
</div>
|
|
|
|
<div class="design-content">
|
|
<div class="design-item">
|
|
<div class="design-img">
|
|
<img src="image/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg" alt="">
|
|
<span><i class="far fa-heart"></i> 22</span>
|
|
<span> Kate's Odyssey</span>
|
|
</div>
|
|
<div class="design-title">
|
|
<a href="#"> Join me and get to know me.</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="design-content">
|
|
<div class="design-item">
|
|
<div class="design-img">
|
|
<img src="image/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg" alt="">
|
|
<span><i class="far fa-heart"></i> 22</span>
|
|
<span> Kate's Odyssey</span>
|
|
</div>
|
|
<div class="design-title">
|
|
<a href="#"> Join me and get to know me.</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="design-content">
|
|
<div class="design-item">
|
|
<div class="design-img">
|
|
<img src="image/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg" alt="">
|
|
<span><i class="far fa-heart"></i> 22</span>
|
|
<span> Kate's Odyssey</span>
|
|
</div>
|
|
<div class="design-title">
|
|
<a href="#"> Join me and get to know me.</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="design-content">
|
|
<div class="design-item">
|
|
<div class="design-img">
|
|
<img src="image/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg" alt="">
|
|
<span><i class="far fa-heart"></i> 22</span>
|
|
<span> Kate's Odyssey</span>
|
|
</div>
|
|
<div class="design-title">
|
|
<a href="#"> Join me and get to know me.</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="design-content">
|
|
<div class="design-item">
|
|
<div class="design-img">
|
|
<img src="image/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg" alt="">
|
|
<span><i class="far fa-heart"></i> 22</span>
|
|
<span> Kate's Odyssey</span>
|
|
</div>
|
|
<div class="design-title">
|
|
<a href="#"> Join me and get to know me.</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="design-content">
|
|
<div class="design-item">
|
|
<div class="design-img">
|
|
<img src="image/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg" alt="">
|
|
<span><i class="far fa-heart"></i> 22</span>
|
|
<span> Kate's Odyssey</span>
|
|
</div>
|
|
<div class="design-title">
|
|
<a href="#"> Join me and get to know me.</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="blog" id = "blog" >
|
|
<div class="container">
|
|
<div class="title">
|
|
<h2> Latest Blog</h2>
|
|
<p> recent blogs about linux & technology</p>
|
|
</div>
|
|
<div class="blog-content">
|
|
<div class="blog-item">
|
|
<div class="blog-img">
|
|
<img src="image/business-2717063_1920.jpg" alt= "">
|
|
<span><i class= "far fa-heart"></i></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |