soshiant

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

5 پست در این موضوع قرار دارد

سلام

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

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

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

5dda9e615f2d9_.thumb.png.a9914d5177f99af37a9e2b47f2383a7e.png

ویرایش شده در توسط soshiant
1

به اشتراک گذاری این پست


لینک به پست

سلام

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

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

0

به اشتراک گذاری این پست


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

سلام

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

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

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

5dda9e615f2d9_.thumb.png.a9914d5177f99af37a9e2b47f2383a7e.png

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

 

0

به اشتراک گذاری این پست


لینک به پست
<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;
}

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

1

به اشتراک گذاری این پست


لینک به پست
در در 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;
}

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

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

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری