muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added blog section

Browse source
This commit is contained in:
JSriwongsa 2023-05-24 12:22:09 -05:00
parent 4a0c4612cd
commit 54c80a09ee
2 changed files with 233 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
ecommerce/flora_website/blog.html Normal file
View file

@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog</title>
<link rel="stylesheet" href="style_blog.css">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="images/title.png">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<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=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="nav container">
<a href="index.html" class="logo">
<img src="images/logo1.png" alt="" class="logo-img">
</a>
<div class="search-box">
<input type="search" name="" id="search-input" placeholder="Search">
<i class='bx bx-search'></i>
</div>
<div class="navbar">
<a href="index.html" class="nav-link">
<i class='bx bxs-home'></i>
<span class="nav-link-title">HOME</span>
</a>
<a href="shop.html" class="nav-link">
<i class='bx bx-basket'></i>
<span class="nav-link-title">Shop</span>
</a>
<a href="" class="nav-link nav-active">
<i class='bx bx-book-bookmark' ></i>
<span class="nav-link-title">Blog</span>
</a>
<a href="about.html" class="nav-link">
<i class='bx bxs-florist'></i>
<span class="nav-link-title">About Us</span>
</a>
<a href="contact.html" class="nav-link">
<i class='bx bx-phone-call'></i>
<span class="nav-link-title">Contact</span>
</a>
</div>
</div>
</header>
<section id="blog">
<div class="blog-heading">
<h1>On the blog</h1>
</div>
<div class="blog-container">
<!--content1-->
<div class="blog-content">
<div class="blog-img">
<img src="images/pe1.jpg">
</div>
<div class="blog-text">
<span>May 21, 2023 / Topic</span>
<a href="" class="blog-title">Title</a>
<p> all messages are in here.</p>
<a href="">Read More</a>
</div>
</div>
<!--content2-->
<div class="blog-content">
<div class="blog-img">
<img src="images/pe2.jpg">
</div>
<div class="blog-text">
<span>May 21, 2023 / Topic</span>
<a href="" class="blog-title">Title</a>
<p> all messages are in here.</p>
<a href="">Read More</a>
</div>
</div>
<!--content3-->
<div class="blog-content">
<div class="blog-img">
<img src="images/pe3.jpg">
</div>
<div class="blog-text">
<span>May 21, 2023 / Topic</span>
<a href="" class="blog-title">Title</a>
<p> all messages are in here.</p>
<a href="">Read More</a>
</div>
</div>
<!--content4-->
<div class="blog-content">
<div class="blog-img">
<img src="images/pe4.jpg">
</div>
<div class="blog-text">
<span>May 21, 2023 / Topic</span>
<a href="" class="blog-title">Title</a>
<p> all messages are in here.</p>
<a href="">Read More</a>
</div>
</div>
<!--content5-->
<div class="blog-content">
<div class="blog-img">
<img src="images/pe5.jpg">
</div>
<div class="blog-text">
<span>May 21, 2023 / Topic</span>
<a href="" class="blog-title">Title</a>
<p> all messages are in here.</p>
<a href="">Read More</a>
</div>
</div>
</div>
</section>
<div class="end-text">
<p>&#169; Flora All Rights Reserved </p>
</div>
</body>
</html>

109
ecommerce/flora_website/style_blog.css Normal file
View file

@ -0,0 +1,109 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Klee One', cursive;
list-style: none;
text-decoration: none;
scroll-behavior: smooth;
}
:root{
--bg-color:snow;
--main-color:lightcoral;
--minor-color:rgb(49, 48, 48);
--other-color:dimgray;
--text-color:black;
}
#blog{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 10%;
}
.blog-heading h1{
font-size: 2.5rem;
font-family: 'Norican', cursive;
}
.blog-container{
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0px;
flex-wrap: wrap;
}
.blog-content{
width: 350px;
background-color: var(--bg-color);
border: 1px solid var(--bg-color);
margin: 20px;
}
.blog-img{
width: 100%;
height: auto;
}
.blog-img img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.blog-text{
padding: 30px;
display: flex;
flex-direction: column;
}
.blog-text span{
color: var(--other-color);
font-size: 0.8rem;
}
.blog-text .blog-title{
font-size: 1.2rem;
color: var(--main-color);
}
.blog-text .blog-title:hover{
color: var(--other-color);
transition: all ease 0.5s;
}
.blog-text p{
color: var(--text-color);
font-size: 0.8rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin: 20px 0px;
}
.blog-text a{
color: var(--main-color);
}
.blog-text a:hover{
color: var(--minor-color);
transition: all ease 0.5s;
}
@media(max-width:1200px){
#blog{
margin-top: 15%;
}
.blog-container{
width: 120%;
}
}
@media(max-width:1100px){
#blog{
margin-top: 15%;
}
.blog-container{
width: 70%;
}
}
@media(max-width:550px){
#blog{
margin-top: 18%;
}
.blog-container{
margin: 20px 10px;
width: 100%;
}
}