رفتن به مطلب

نیاز به یک استایل برای css


soshiant

پست های پیشنهاد شده

سلام

من میخوام چیزی مثل این عکس که به پیوست فرستادم برای صفحه اول سایتم درست کنم

کدهای css اولیه شو میخوام. میتونید کمکم کنید؟ جزییاتش رو میتونم درست کنم الان مشکل اینه که نمیتونم کدهای اولیه رو پیاده کنم 

در اصل میخوام جدیدترین پستهایسایتم این مدلی نمایش داده بشه

5dda9e615f2d9_.thumb.png.a9914d5177f99af37a9e2b47f2383a7e.png

ویرایش شده توسط soshiant
لینک به ارسال
در 1 ساعت قبل، soshiant گفته است :

سلام

من میخوام چیزی مثل این عکس که به پیوست فرستادم برای صفحه اول سایتم درست کنم

کدهای css اولیه شو میخوام. میتونید کمکم کنید؟ جزییاتش رو میتونم درست کنم الان مشکل اینه که نمیتونم کدهای اولیه رو پیاده کنم 

در اصل میخوام جدیدترین پستهایسایتم این مدلی نمایش داده بشه

5dda9e615f2d9_.thumb.png.a9914d5177f99af37a9e2b47f2383a7e.png

سايت وردپرسه ؟ اگه نيست از فريم ورک خاصی استفاده می کنيد ؟ مثل Bootstrap

 

لینک به ارسال
<section>
    <div class="container">
    	<div class="row">
    		<div class="col-md-4 mt-4">
    		    <div class="card profile-card-5">
    		        <div class="card-img-block">
    		            <img class="card-img-top" src="https://images.unsplash.com/photo-1517832207067-4db24a2ae47c" alt="Card image cap">
    		        </div>
                    <div class="card-body pt-0">
                    <h5 class="card-title">Ye chizi 1</h5>
                    <p class="card-text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
                    <a href="#" class="btn btn-primary">DOkme 1</a>
                  </div>
                </div>
                <p class="mt-3 w-100 float-left text-center"><strong>Card with Floting Picture</strong></p>
    		</div>
			
			<div class="col-md-4 mt-4">
    		    <div class="card profile-card-5">
    		        <div class="card-img-block">
    		            <img class="card-img-top" src="https://images.unsplash.com/photo-1517832207067-4db24a2ae47c" alt="Card image cap">
    		        </div>
                    <div class="card-body pt-0">
                    <h5 class="card-title">Ye chizi 2</h5>
                    <p class="card-text">Sodasdfdjhasdvjh dsadgbasd daskdasdgasdvasd asidgasdasd asidas dasdvbasd.</p>
                    <a href="#" class="btn btn-primary">DOkme 1</a>
                  </div>
                </div>
                <p class="mt-3 w-100 float-left text-center"><strong>Card with Floting Picture</strong></p>
    		</div>
			
			<div class="col-md-4 mt-4">
    		    <div class="card profile-card-5">
    		        <div class="card-img-block">
    		            <img class="card-img-top" src="https://images.unsplash.com/photo-1517832207067-4db24a2ae47c" alt="Card image cap">
    		        </div>
                    <div class="card-body pt-0">
                    <h5 class="card-title">Ye chizi 3</h5>
                    <p class="card-text">asdghsad lkjfglsjdghsjdgasjda sdasgd jlasdgljasdgasl dlasdgajsdgjasdg asd dalsgdlasgdlsuaygd aslgdlasygd </p>
                    <a href="#" class="btn btn-primary">Dokme 3</a>
                  </div>
                </div>
                <p class="mt-3 w-100 float-left text-center"><strong>Card with Floting Picture</strong></p>
    		</div>
    		
    	</div>
    </div>
</section>

CSS :


.profile-card-5{
    margin-top:20px;
}
.profile-card-5 .btn{
    border-radius:2px;
    text-transform:uppercase;
    font-size:12px;
    padding:7px 20px;
}
.profile-card-5 .card-img-block {
    width: 91%;
    margin: 0 auto;
    position: relative;
    top: -20px;
    
}
.profile-card-5 .card-img-block img{
    border-radius:5px;
    box-shadow:0 0 10px rgba(0,0,0,0.63);
}
.profile-card-5 h5{
    color:#4E5E30;
    font-weight:600;
}
.profile-card-5 p{
    font-size:14px;
    font-weight:300;
}
.profile-card-5 .btn-primary{
    background-color:#4E5E30;
    border-color:#4E5E30;
}

بنا به نيازتون ميتونيد ويرايش کنيدش...

لینک به ارسال
در در 5/13/2020 at 02:55، damoon_zero گفته است :

<section>
    <div class="container">
    	<div class="row">
    		<div class="col-md-4 mt-4">
    		    <div class="card profile-card-5">
    		        <div class="card-img-block">
    		            <img class="card-img-top" src="https://images.unsplash.com/photo-1517832207067-4db24a2ae47c" alt="Card image cap">
    		        </div>
                    <div class="card-body pt-0">
                    <h5 class="card-title">Ye chizi 1</h5>
                    <p class="card-text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
                    <a href="#" class="btn btn-primary">DOkme 1</a>
                  </div>
                </div>
                <p class="mt-3 w-100 float-left text-center"><strong>Card with Floting Picture</strong></p>
    		</div>
			
			<div class="col-md-4 mt-4">
    		    <div class="card profile-card-5">
    		        <div class="card-img-block">
    		            <img class="card-img-top" src="https://images.unsplash.com/photo-1517832207067-4db24a2ae47c" alt="Card image cap">
    		        </div>
                    <div class="card-body pt-0">
                    <h5 class="card-title">Ye chizi 2</h5>
                    <p class="card-text">Sodasdfdjhasdvjh dsadgbasd daskdasdgasdvasd asidgasdasd asidas dasdvbasd.</p>
                    <a href="#" class="btn btn-primary">DOkme 1</a>
                  </div>
                </div>
                <p class="mt-3 w-100 float-left text-center"><strong>Card with Floting Picture</strong></p>
    		</div>
			
			<div class="col-md-4 mt-4">
    		    <div class="card profile-card-5">
    		        <div class="card-img-block">
    		            <img class="card-img-top" src="https://images.unsplash.com/photo-1517832207067-4db24a2ae47c" alt="Card image cap">
    		        </div>
                    <div class="card-body pt-0">
                    <h5 class="card-title">Ye chizi 3</h5>
                    <p class="card-text">asdghsad lkjfglsjdghsjdgasjda sdasgd jlasdgljasdgasl dlasdgajsdgjasdg asd dalsgdlasgdlsuaygd aslgdlasygd </p>
                    <a href="#" class="btn btn-primary">Dokme 3</a>
                  </div>
                </div>
                <p class="mt-3 w-100 float-left text-center"><strong>Card with Floting Picture</strong></p>
    		</div>
    		
    	</div>
    </div>
</section>

CSS :



.profile-card-5{
    margin-top:20px;
}
.profile-card-5 .btn{
    border-radius:2px;
    text-transform:uppercase;
    font-size:12px;
    padding:7px 20px;
}
.profile-card-5 .card-img-block {
    width: 91%;
    margin: 0 auto;
    position: relative;
    top: -20px;
    
}
.profile-card-5 .card-img-block img{
    border-radius:5px;
    box-shadow:0 0 10px rgba(0,0,0,0.63);
}
.profile-card-5 h5{
    color:#4E5E30;
    font-weight:600;
}
.profile-card-5 p{
    font-size:14px;
    font-weight:300;
}
.profile-card-5 .btn-primary{
    background-color:#4E5E30;
    border-color:#4E5E30;
}

بنا به نيازتون ميتونيد ويرايش کنيدش...

مچکرم . چطور میشه اتومات پست های اخر یکی دو تا دسته رو توش نشون بده؟

لینک به ارسال
  • 5 هفته بعد...

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...