Hiromi/Webovky
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update 29. srpna

Browse Source
This commit is contained in:
Hiromi
2023-08-29 09:02:00 +02:00
parent 29818282f4
commit b14a71fabb
3 changed files with 195 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
katebartova/image/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

118
katebartova/index.html
View File

@@ -3,11 +3,10 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kate's Linux Odyssey: A Journey Through Technology</title>
<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="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>
@@ -16,7 +15,7 @@
<header>
<nav class="navbar">
<div class="container">
<a href="index.html" class="navbar-brand">Kate's Linux Odyssey</a>
<a href="index.html" class="navbar-brand">Kate's Oddysey</a>
<div class="navbar-nav">
<a href="#">home</a>
<a href="#">content</a>
@@ -28,9 +27,9 @@
<div class = "banner">
<div class = "container">
<h1 class="banner-title">
<span>My.</span> Blog
<span>Kate's.</span> Odyssey
</h1>
<p> Big journey of a little girl through life and technology</p>
<p>my journey through life, Linux and technology</p>
<form>
<input type= "text" class="search-input" placeholder="Search . . .">
<button type ="submit" class = "search-btn">
@@ -38,6 +37,111 @@
</button>
</form>
</div>
</header>
</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>

84
katebartova/style.css
View File

@@ -98,4 +98,88 @@
outline: 0;
padding: 0.6rem 0;
border: none;
}
.search-input::placeholder{
text-transform: capitalize;
}
.search-btn{
width: 40px;
font-size: 1.1rem;
color: var(--dark);
border: none;
background: transparent;
outline: 0;
cursor: pointer;
}
.design{
padding: 4.5rem 0;
}
.title{
text-align: center;
padding: 1rem 0;
}
.title h2{
font-family: var(--Playfair);
font-size: 2.4rem;
}
.title p{
text-transform: uppercase;
padding: 0.6rem 0;
}
.design-content{
margin: 2rem 0;
}
.design-item{
cursor: pointer;
margin: 1.5rem 0;
}
.design-img{
position: relative;
overflow: hidden;
}
.design-img::after{
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.design-img img{
transition: all 0.5s ease;
}
.design-item:hover img{
transform: scale(1.2);
}
.design-img span:first-of-type{
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
background: var(--exDark);
color: #fff;
padding: 0.25rem 1rem;
}
.design-img span:last-of-type{
position: absolute;
z-index: 1;
bottom: 10px;
right: 10px;
color: #fff;
font-weight: 700;
font-size: 1.1rem;
}
.design-title{
padding: 1rem;
font-size: 1.2rem;
text-align: center;
width: 70%;
margin: 0 auto;
}
.design-title a{
color: var(--dark);
text-decoration: none;
text-transform: capitalize;
font-family: var(--Playfair);
}