Baytalov
@Baytalov

Как реализовать такое на Bootstrap 3?

Добрый день помогите, помогите такое реализовать на Twitter Bootstrap 3

нужно решение html примером

это один из блоков которые находится в списке компаний, продающих свадебные платья

7ffea438c7de4ba69cc5bd1560f3196e.jpg

уже долгое время мучаюсь ничего не получается (((

Так у меня получилось без bootstrap, а как сделать на bootstrap ?

<div class="company premium">
    <div class="company-description">
        <h2>
            <a href="#">LA SPOSA</a>
        </h2>
        <div class="company-info">
            <span class="company-category">Свадебный салон</span>
            <span class="company-counts">
				<span class="company-revlike"><i class="fa fa-comment-o"></i> 13</span>
				<span class="company-revlike"><i class="fa fa-heart-o"></i> 2</span>
			</span>
        </div>
    </div>
    <div class="company-container">
        <div class="company-cover">
	        <a href="#">
            	<img src="lasposa.jpg" class="company_cover">
	        </a>
        </div>

        <div class="company-contacts">
            <div class="company-contacts_inner">
                <div class="company-contacts_item" itemprop="address">
                    <i class="fa fa-map-marker"></i>
                    <div class="company-location">
			Минский р-н аг. Ждановичи					
                    </div>
                </div>
                <div class="company-contacts_item" itemprop="contactPoint">
                    <i class="fa fa-phone"></i>
					<span class="company-phone">
						<a style="display: inline-block" href="#">Показать номер</a>
					</span>
                </div>
                <div class="company-contacts_item" itemprop="openingHours">
                    <i class="fa fa-clock-o"></i>
                    <span class="company-working">пн — вс: 11:00—23:00</span>
                </div>
                <div class="company-contacts_item">
                    <i class="fa fa-globe"></i>
                        <a class="company-site" target="_blank" rel="nofollow" href="#">www.lasposa.com</a>

                </div>
            </div>
        </div>
    </div>
</div>


.company {
	position: relative;
    margin: 0 0 20px;
    padding: 20px 20px 24px 20px;
    background-color: #fffae5;
    border: 1px solid #ffa71e;	
}

	.premium {
	    padding: 0;
	    border: none;
	    background-color: #fff;
	}

	.company-description {
		margin: 0 0 10px;
	    clear: both;
	}
		.company-description h2 {
			display: inline-block;
		    margin: 0;
		    padding: 0 15px 2px 0;
		    word-wrap: break-word;
		}
		
			.company-description h2 a {
				font-size: 21px;
				font-weight: 600;
				color: #000;
				line-height: 24px;
				-webkit-font-smoothing: antialiased;
			}
	.company-info {
		display: inline-block;
		vertical-align: baseline;
	}
		
		.company-category {
			font: 14px Circe;
		    line-height: 20px;
		    color: #888;
		    padding: 0 9pt 0 0;
			display: inline-block;
			-webkit-font-smoothing: antialiased;
		}
		
		.company-counts {
			padding: 0 0 0 9pt;
		    display: inline-block;
		    font: 9pt ProximaNovaRegular;
		}
		
			.company-revlike {
				position: relative;
				display: inline-block;
			    vertical-align: middle;
			    padding: 0 10px 0 0;
			}
	
	.company-container {
		min-height: 245px;
		position: relative;
	}
		
		.company-cover {
			max-width: 100%;
			float: left;
		}
		
		.company-contacts {
			background: rgba(255,255,255,.9);
		    padding: 10px;
		    -moz-box-sizing: border-box;
		    box-sizing: border-box;
		    position: absolute;
		    top: 10px;
		    right: 10px;
		    z-index: 2;
		    width: 340px;
		    overflow: hidden;
		    box-shadow: 1px 1px 2px rgba(0,0,0,.2);
		}
			
			.company-contacts_inner {
				max-height: 215px;
				overflow: hidden;
			}
			
				.company-contacts_item {
					position: relative;
				    margin-bottom: 8px;
				    padding: 0 0 0 8px;
				    display: block;
				}
					
				.company-location, .company-phone, .company-working, .company-site {
					display: inline-block;
					padding: 0 0 0 8px;
				}
  • Вопрос задан
  • 557 просмотров
Пригласить эксперта
Ответы на вопрос 4
kalbac
@kalbac
Wordpress Developer Full-Stack
Автор сформулируйте вопрос нормально. Что конкретно вас интересует? Вам щас целиком html разметку написать начиная с заголовка заканчивая края картинки или что?
Ответ написан
@ayapergenov
Чтобы такое сверстать нужен psd файл для начала.

Могу еще рекомендовать использовать стартовый шаблон
Вот тут например можете подобрать подходящий и модифицировать его
startbootstrap.com/template-categories/all
Ответ написан
Baytalov
@Baytalov Автор вопроса
Да было бы здорово написать html разметку, буду благодарен
Ответ написан
@EvgenZZ
php, javascript developer
bootsnipp.com погляди там много готовых примеров
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы