Напоминалка основных рецептов CSS

[amphicoelias]

Выпадающее меню

html

<nav>
	<ul class="ul-main">
		<li><a href="">Home</a></li>
		<li>
			<a href="">Events</a>
			<ul>
				<li><a>Event 1</a></li>
				<li><a>Event JKKJKJK</a></li>
				<li><a>Event 3</a></li>
			</ul>
		</li>
		<li>
			<a href="">Winners</a>
			<ul>
				<li><a>Winner 23333333</a></li>
				<li><a>Winner 2</a></li>
			</ul>
		</li>
		<li><a href="">Submit</a></li>
		<li><a href="">Contact</a></li>
		<li><a href="">Login</a></li>
	</ul>
</nav>

css

li {list-style-type: none;}

.ul-main > li {display: inline-block;}

.ul-main ul{
	position: absolute;
	display: none;
}

.ul-main li:hover ul {display: block;}

Слайдер

html

<div class="slider">
	<div class="control left"><img src="img/left.png" alt=""></div>
	<div class="control right"><img src="img/right.png" alt=""></div>
	<div class="slider--title"><p>Where you choose the winner</p></div>
	<p class="slider--subtitle">Help shape the next awi awards ceremony.  click the icon to tell us which of these creatives you love / don't love.</p>
	<div class="slide-ovh">
		<div class="slides">
			<div class="slide">
				<div class="img"><img src="img/slide.png" alt=""></div>
				<div class="slide-descr">
					<a href="#"><img src="img/love.png" alt=""></a>
					<a href="#"><img src="img/hate.png" alt=""></a>
					<div class="about">					  
						<p class="name">The Huntress</p>
						<p class="author">By <a href="#" class="author--a">Jane Doe</a></p>
						<p class="aboutpic">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia facilis alias aliquam repellendus. Voluptate, architecto, accusamus. Tenetur iure impedit quis.</p>
					</div>
				</div>
			</div>
			<div class="slide">
				<div class="img"><img src="img/slide.png" alt=""></div>
				<div class="slide-descr">
					<a href="#"><img src="img/love.png" alt=""></a>
					<a href="#"><img src="img/hate.png" alt=""></a>
					<div class="about">					  
						<p class="name">The Huntress</p>
						<p class="author">By <a href="#" class="author--a">Jane Doe</a></p>
						<p class="aboutpic">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia facilis alias aliquam repellendus. Voluptate, architecto, accusamus. Tenetur iure impedit quis.</p>
					</div>
				</div>
			</div>
			<div class="slide">
				<div class="img"><img src="img/slide.png" alt=""></div>
				<div class="slide-descr">
					<a href="#"><img src="img/love.png" alt=""></a>
					<a href="#"><img src="img/hate.png" alt=""></a>
					<div class="about">					  
						<p class="name">The Huntress</p>
						<p class="author">By <a href="#" class="author--a">Jane Doe</a></p>
						<p class="aboutpic">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia facilis alias aliquam repellendus. Voluptate, architecto, accusamus. Tenetur iure impedit quis.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

css

.slider {position: relative;}

.slide-ovh {
	overflow: hidden;
	width: 940
	height:467
}

.slides {width: 2820}

.slide {
	display: inline-block;
	width: 100%;
	height:100%;
}

.img {
	position: relative;
	z-index: -1;
}

.control {
	position: absolute;
	margin-top: 604
}

.left {left:763}
.left:hover {cursor: pointer;}

.right {right: 42}
.right:hover {cursor: pointer;}

.slide-descr {
	position: absolute;
	width: 215
	top:181
	right: 48
}

.slide-descr img {	margin-right: 14}