alleroy
@alleroy
Изучаю фреймворк laravel

Как сверстать вот такой вот sidebar?

Столкнулся вот с такой проблемай как мне его решить? Нужно сверстать вот такой sidebar должен показывать с право. Пробывал никак не получаеться точно как тама сверстать может кто сможет точно так его сверстать, благодарю заранее.

a3c0c54591014eb492afd17e50faa55a.jpg
  • Вопрос задан
  • 2629 просмотров
Решения вопроса 1
reskwer
@reskwer
front-end developer
Опять же, ШРИФТОВ НЕТ, верстка без PSD.
Как то так codepen.io/reskwer/pen/XJpNpO
С треугольником на Видео, не стал заморачиватся, сделал обычный в rgba 0.5+
index.html
<!DOCTYPE html>
<html lang="ru-RU">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="reskwer">
	<title>Что-то на CodePen</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="sidebar">
		<div class="facebook">
			<h1>Facebook block</h1>
			<div class="facebook-api">
				<p>В этот блок программист прикрутит facebook API like</p>
			</div>
		</div>
		<div class="photo">
			<h1>Latest picture galleries</h1>
			<div class="wiver one">
				<h2>Navn og tekst til billede</h2>
				<img src="http://placehold.it/120x76" alt="img">
			</div>
			<div class="wiver two">
				<h2>Navn og tekst til billede</h2>
				<img src="http://placehold.it/120x76" alt="img">
			</div>
			<a href="#" class="more">more pictures</a>
		</div>
		<div class="video">
		<h1>Latest picture galleries</h1>
			<div class="wiver one">
				<h2>Navn og tekst til billede</h2>
				<img src="http://placehold.it/120x76" alt="img">
				<div class="circle">
				</div>
			</div>
			<div class="wiver two">
				<h2>Navn og tekst til billede</h2>
				<img src="http://placehold.it/120x76" alt="img">
				<div class="circle">
				</div>
			</div>
			<a href="#" class="more">more pictures</a>
		</div>
	</div>
</body>
</html>

style.css
.sidebar{
	width: 300px;
	background: #f0f0f0;
	font: 100% tahoma,verdana,arial;
	padding: 0 22px;
	box-sizing: border-box;
}
.facebook,.photo,.video{
	width: 100%;
	height: 239px;
	border-bottom: 2px dotted #777;
	padding-top: 16px;
}
h1{
	font-size: 93%;
	font-weight: bold;
	font-style: italic;	
}
h2{
	font-size: 100%;
	font-weight: normal;
	letter-spacing: 1px;
}
.wiver{
	width: 120px;
	display: inline-block;
	cursor: pointer;
}
.more{
	display: block;
	text-decoration: none;
	background: #e8e8e8;
	color: black;
	font-weight: 400;
	font-style: italic;
	font-size: 93%;
	width: 113px;
	height: 20px;
	text-align: left;
	padding: 1px 0 1px 9px;
	margin: 15px 0 14px 49%;
	position: relative;
}
.more:after{
	content: ">";
	display: block;
	width: 10px;
	height: 15px;
	position: absolute;
	top: 3px;
	right: 7px;
	color: #7dc8cd;
}
.more:hover{
	background: #aaa;
}
.video .wiver{
	position: relative;
}
.circle{
	width: 65px;
	height: 65px;
	border-radius: 50%;
	background: rgba(255,255,255,.5);
	position: absolute;
	bottom: 9px;
	left: 26px;
}
.circle{
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background: rgba(255,255,255,.5);
	position: absolute;
	bottom: 14px;
	left: 32px;
}
.circle:after{
	display: block;
	content: "";
	position: absolute;
	bottom: 12px;
	left: 16px;
	border: 15px solid transparent;
	border-left: 30px solid rgba(255,255,255,.7);
}
.circle:hover{
	background: rgba(255,255,255,.7);
	cursor: pointer;
}
.circle:hover:after{
	border-left: 30px solid rgba(255,255,255,.9);
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Jaty4
@Jaty4
Ваш ответ на вопрос

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

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