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