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

soshiant · اردیبهشت 99

سلام

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

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

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

ویرایش شده اردیبهشت 99 توسط soshiant

estedadrap · اردیبهشت 99

سلام

بنده میتونم انجامش بدم براتون

لطفا خصوصی پیام بدید

damoon_zero · اردیبهشت 99

در 1 ساعت قبل، soshiant گفته است :

سلام

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

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

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

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

damoon_zero · اردیبهشت 99

<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;
}

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

soshiant · اردیبهشت 99

در در 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;
}

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

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

**Morteza** · خرداد 99

باید از کوئری وردپرس استفاده کنین

ورود

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

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

soshiant 8

لینک به ارسال

estedadrap 4

لینک به ارسال

damoon_zero 172

لینک به ارسال

damoon_zero 172

لینک به ارسال

soshiant 8

لینک به ارسال

Morteza 34190

لینک به ارسال

لطفا برای ارسال دیدگاه وارد شوید

فهرست بخش ها

فعالیت ها