parent
31147a232d
commit
b29f6ff25a
2 changed files with 63 additions and 3 deletions
@ -1,7 +1,65 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
|
|
||||||
|
import blogImage from "../../../assets/images/blog-featured-image.jpg"; |
||||||
|
import blogAuthorImg from "../../../assets/images/blog-author.png"; |
||||||
|
|
||||||
|
import commentIcon from "../../../assets/icons/black-comment-icon.svg"; |
||||||
|
|
||||||
const BlogDesign4 = () => { |
const BlogDesign4 = () => { |
||||||
return <div></div>; |
return ( |
||||||
|
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-20 mb-8"> |
||||||
|
{/* title holder */} |
||||||
|
<div className="flex items-center justify-between mb-6"> |
||||||
|
<h2 className="text-black bg-pink-200 p-2 rounded text-base"> |
||||||
|
طراحی بلاگ 4 |
||||||
|
</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/design4 |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
{/* blog UI Design4 */} |
||||||
|
<div className="w-full md:w-2/6 flex items-center justify-between relative py-2 px-4 rounded-xl border border-gray-300"> |
||||||
|
<div className="w-4/12 absolute top-3 -right-12 "> |
||||||
|
<img src={blogImage} alt="" className="w-44 " /> |
||||||
|
</div> |
||||||
|
<div className="w-8/12 mr-36"> |
||||||
|
<h2 className="text-base md:text-xl text-justify text-grayTextColor"> |
||||||
|
آیا مواد غذای پر فیبر و مفید هستند؟ |
||||||
|
</h2> |
||||||
|
{/* {blogExcerpt && ( */} |
||||||
|
<p className="text-justify text-sm md:text-base leading-6 my-3 text-grayTextColor"> |
||||||
|
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد |
||||||
|
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا |
||||||
|
دیگران متوجه شوند. |
||||||
|
</p> |
||||||
|
{/* // )} */} |
||||||
|
<div className=" flex item-center justify-between mt-5"> |
||||||
|
{/* {blogAuthor && ( */} |
||||||
|
<div className=" flex items-center"> |
||||||
|
<img src={blogAuthorImg} alt="" /> |
||||||
|
<p className="text-xs text-lightGrayTextColor mr-2"> |
||||||
|
حامد دژبانی نسب |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
{/* // )} */} |
||||||
|
{/* {blogComments && ( */} |
||||||
|
<div className=" flex items-center"> |
||||||
|
<p className="text-xs text-lightGrayTextColor ml-2"> |
||||||
|
زمان مطالعه 30 دقیقه |
||||||
|
</p> |
||||||
|
<img src={commentIcon} alt="" /> |
||||||
|
</div> |
||||||
|
{/* // )} */} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
}; |
}; |
||||||
|
|
||||||
export default BlogDesign4; |
export default BlogDesign4; |
||||||
|
Loading…
Reference in new issue