parent
8babf18f5b
commit
d7f98df937
7 changed files with 95 additions and 60 deletions
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 120 KiB |
@ -0,0 +1,54 @@ |
||||
import React from "react"; |
||||
|
||||
import blogFeaturedImage2 from "../../../assets/images/blog-featured-image2.jpg"; |
||||
import blogAuthorImg from "../../../assets/images/blog-author.png"; |
||||
|
||||
import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg"; |
||||
|
||||
const BlogDesign2 = () => { |
||||
return ( |
||||
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> |
||||
{/* title holder */} |
||||
<div className="flex items-center justify-between mb-6"> |
||||
<h2 className="text-productTitle bg-green-100 p-2 rounded text-base"> |
||||
طراحی بلاگ 2 |
||||
</h2> |
||||
</div> |
||||
<div className="mb-6"> |
||||
<p className="leading-10"> |
||||
آدرس: |
||||
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2"> |
||||
blogs/design2 |
||||
</span> |
||||
</p> |
||||
</div> |
||||
{/* blog UI Design2 */} |
||||
<div className="bg-red-400 relative w-full md:w-1/4"> |
||||
<button className="bg-yellow-100 rounded p-1 text-sm absolute left-2 top-4"> |
||||
1400/09/19 |
||||
</button> |
||||
<img src={blogFeaturedImage2} alt="" className="w-full" /> |
||||
<h2 className="absolute right-2 bottom-16 text-white text-lg"> |
||||
آیا مواد غذایی پر فیبر مفید هستند؟ |
||||
</h2> |
||||
<div className="flex item-center justify-around absolute right-2 bottom-1 w-full"> |
||||
{/* {blogAuthor && ( */} |
||||
<div className="flex items-center"> |
||||
<img src={blogAuthorImg} alt="" /> |
||||
<p className="text-xs text-white mr-2">حامد دژبانی نسب</p> |
||||
</div> |
||||
{/* // )} */} |
||||
{/* {blogComments && ( */} |
||||
<div className="flex items-center"> |
||||
<p className="text-xs text-white ml-2">زمان مطالعه 30 دقیقه</p> |
||||
<img src={whiteCommentIcon} alt="" /> |
||||
</div> |
||||
{/* // )} */} |
||||
</div> |
||||
{/* <div className="absolute right-2 bottom-20 h-16 w-11/12 shadow-2xl shdadow-black"></div> */} |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default BlogDesign2; |
||||
@ -1,42 +0,0 @@ |
||||
.product-items-holder { |
||||
@apply w-full flex flex-wrap items-center justify-around my-10 px-4; |
||||
} |
||||
|
||||
.product-item { |
||||
@apply w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm border-2 border-productDesignBorderColor p-2 my-3; |
||||
} |
||||
|
||||
.discountPriceBtn { |
||||
@apply bg-discountPriceBg absolute left-2 top-4 rounded-md px-2 py-1; |
||||
} |
||||
|
||||
.likeBtnBg { |
||||
@apply bg-likeBtnBg absolute left-2 top-10 rounded-md p-1; |
||||
} |
||||
|
||||
.discountBtn { |
||||
@apply absolute left-2 top-20 rounded-md; |
||||
} |
||||
.dicountPriceNum { |
||||
@apply text-discountPriceTitle font-bold text-xs; |
||||
} |
||||
|
||||
.productTitle { |
||||
@apply text-productTitle leading-4 text-base 2xl:text-lg; |
||||
} |
||||
|
||||
.productContent { |
||||
@apply text-justify text-productContent mt-2 text-sm leading-6; |
||||
} |
||||
|
||||
.addToCart { |
||||
@apply rounded-2xl px-2 py-3 border text-xs text-productPrice; |
||||
} |
||||
|
||||
.product-price-num { |
||||
@apply text-sm text-productPrice font-semibold; |
||||
} |
||||
|
||||
.product-tag { |
||||
@apply rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs; |
||||
} |
||||
Loading…
Reference in new issue