КодВеб — HTML, CSS, JavaScript | Вёрстка | Фронтенд

<article class="slide">
  <img src="image.jpg">
  <div class="slide-content">
    <div class="slide-item">              
 <h3>Полевые цветы</h3>
        <p>Полевые цветы на зелёном лугу...</p>
    </div>
  </div>
</article>

*, *:after, *:before {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}
.slide {
  display: block;
  width: 400px; 
  margin: 50px auto 0;
  position: relative;
}
.slide img {
  display: block;
  position: relative;
  max-width: 100%;
  height: auto;
}
.slide-content {
  margin: -10px 20px 0;
  position: relative;
  z-index: 3;
  text-align: center;
  transform: translateY(0);
  transition: transform .4s ease-in-out;
}
.slide-content:before, .slide-content:after {
  content: "";
  position: absolute;
  bottom: 0;
  margin: 0 0 2px;
  height: 1px;
  box-shadow: 0 0 7px 0 rgba(0,0,0,0.6);
  transition: .4s ease-in-out;
}
.slide-content:before {
  left: 0;
  right: 50%;
  transform: rotate(1deg);
}
.slide-content:after {
  right: 0;
  left: 50%;
  transform: rotate(-1deg);
}
.slide-item {
  background: #FBFAF1;
  padding: 20px 20px 18px;
  position: relative;
  z-index: 5;
  border-radius: 0;
  transition: .4s ease-in-out;
}
.slide-item h3 {
  font-family: 'Playfair Display', serif;
  color: #B4111A;
  font-size: 28px;
  margin-bottom: 15px;
}
.slide-item p {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  color: #1E2630;
}
.slide:hover .slide-content{
  transform:translateY(-10%);
}
.slide:hover .slide-item{
  border-radius: 0 0 200px 200px/0 0 10px 10px;
}
.slide:hover .slide-content:before {
  left: 10px;
}
.slide:hover .slide-content:after {
  right: 10px;
}
.slide:hover .slide-content:before, .slide:hover .slide-content:after {
  box-shadow: 0 0 16px 3px rgba(0,0,0,0.6);
  margin: 0 0 6px;
}
.slide:hover .slide-content:before {
  right: 50.4%;
}
.slide:hover .slide-content:after {
  left: 50.4%;
}

<form>
  <input type="text" placeholder="Искать здесь...">
  <button type="submit"></button>
</form>

* {box-sizing: border-box;}
form {
  position: relative;
  width: 300px;
  margin: 0 auto;
  height: 42px;
}
input {
  height: 42px;
  width: 0;
  padding: 0 42px 0 15px;
  border: none;
  border-bottom: 2px solid transparent;
  outline: none;
  background: transparent;
  transition: .4s cubic-bezier(0, 0.8, 0, 1);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
input:focus {
  width: 300px;
  z-index: 1;
  border-bottom: 2px solid #F9F0DA;
}
button {
  background: #683B4D;
  border: none;
  height: 42px;
  width: 42px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}

<table class="nesting">
  <tr>
    <th>ячейка заголовка таблицы</th>
    <th>ячейка заголовка таблицы</th>
  </tr>
  <tr>
    <td>ячейка таблицы</td>
    <td>
      <table>
        <tr>
          <th>ячейка заголовка вложенной таблицы</th>
        </tr>
        <tr>
          <td>ячейка вложенной таблицы</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<nav>
  <ul class="topmenu">
    <li><a href="" class="active">Главная<span class="fa fa-angle-down"></span></a>
      <ul class="submenu">
        <li><a href="">меню второго уровня</a></li>
        <li><a href="">меню второго уровня<span class="fa fa-angle-down"></span></a>
          <ul class="submenu">
            <li><a href="">меню третьего уровня</a></li>
            <li><a href="">меню третьего уровня</a></li>
            <li><a href="">меню третьего уровня</a></li>
          </ul>
        </li>
        <li><a href="">меню второго уровня</a></li>
      </ul>
    </li>
    <li><a href="">Компания</a></li>
    <li><a href="">Блог</a></li>
    <li><a href="">Контакты</a></li>
  </ul>
</nav>

@import url(image.jpgfamily=Open+Sans:400,600&subset=latin,cyrillic);
*{box-sizing: border-box;}
body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}
nav {background: #413F3C;}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul:after {
  content: "";
  display: table;
  clear: both;
}
nav a {
  text-decoration: none;
  display: block;
  transition: .3s linear;
}
.topmenu > li {
  float: left;
  position: relative;
  border-left: 1px solid black;
}
.topmenu > li:first-child {border-left: 0;}
.topmenu > li > a {  
  padding: 20px 30px;
  font-size: 12px;
  text-transform: uppercase;
  color: #FEFDFD;
  letter-spacing: 2px;
}
.topmenu > li > a.active, 
.submenu a:hover {color: #ddbe86;}
.topmenu .fa, 
.submenu .fa {
  margin-left: 5px;
  color: inherit;
}
.submenu {
  position: absolute;
  z-index: 5;
  min-width: 200px;
  background: white;
  border-top: 1px solid #CBCBCC;
  border-left: 1px solid #CBCBCC;
  border-right: 1px solid #CBCBCC;
  visibility: hidden;
  opacity: 0; 
  transform-origin: 0% 0%;
  transform: rotateX(-90deg);
  transition: .3s linear;  
}
.submenu li {position: relative;}
.submenu li a {
  color: #282828;
  padding: 10px 20px;
  font-size: 13px;
  border-bottom: 1px solid #CBCBCC;
}
.submenu .submenu {
  position: absolute;
  left: 100%;
  top: -1px;
  transition: .3s linear;
}
nav li:hover > .submenu {
  transform: rotateX(0deg);
  visibility: visible;
  opacity: 1;
}

<blockquote>
  <p><span>Success is often...</span></p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

blockquote {
margin: 0;
background: white;
border: 15px solid #FDE640;
border-radius: 8px;
text-align: center;
color: #58554B;
padding: 30px 50px;
font-family: 'Lato', sans-serif;
}
blockquote p {
margin-top: 0;
font-size: 22px;
line-height: 1.25;
}
blockquote span {
background: #FDE640;
box-shadow: -20px 0 #FDE640, 20px 0 #FDE640;
position: relative;
}
blockquote span:before {
content: "\201C";
font-family: serif;
position: absolute;
font-size: 60px;
left: -50px;
top: 10px;
line-height: 0;
}
blockquote span:after {
content: "\201D";
font-family: serif;
position: absolute;
font-size: 60px;
right: -50px;
bottom: -10px;
line-height: 0;
}
blockquote cite {
font-style: normal;
text-transform: uppercase;
font-size: 14px;
}

<div class="item">
  <div class="product">
    <div class="thumb-img">
      <img src="image.jpg">
      <div class="actions">
        <a href="" class="share-button"><i class="fa fa-search"></i></a>
        <span class="share-wrap">
          <a href="" class="share-button"><i class="fa fa-cloud"></i></a>
          <span class="share-item">
            <a class="share-button" href=""><i class="fa fa-facebook"></i></a>
            <a class="share-button" href=""><i class="fa fa-twitter"></i></a>
            <a class="share-button" href=""><i class="fa fa-google-plus"></i></a>
            <a class="share-button" href=""><i class="fa fa-pinterest-p"></i></a>
          </span>
        </span>
        <a href="" class="share-button"><i class="fa fa-heart-o"></i></a>
        <a href="" class="add-to-cart">В корзину</a>
      </div>
    </div>
    <div class="product-about">
      <h3 class="product-title">
        <a href="">Маленькое черное платье</a>
      </h3>
      <span class="price"><i class="fa fa-rub"></i>1999</span>
    </div>
  </div>
</div>

* {
   box-sizing: border-box;
}
.item {
   width: 300px;
   border: 1px solid rgba(0, 0, 0, .08);
   padding: 15px 0;
   margin: 0 auto;
   background: white;
}
.item a {
   text-decoration: none;
   outline: 0;
}
.product {
   padding: 0 15px;
   position: relative;
}
.thumb-img {
   position: relative;
   overflow: hidden;
}
.thumb-img img {
   width: 100%;
   display: block;
}
.thumb-img:after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, .5);
   opacity: 0;
   transition: .3s ease-in-out;
}
.product:hover .thumb-img:after {
   opacity: 1;
}
.actions {
   position: absolute;
   z-index: 2;
   top: 100%;
   left: 0;
   right: 0;
   padding: 0 15px;
   text-align: center;
   opacity: 0;
   transition: .3s ease-in-out;
}
.product:hover .actions {
   top: 50%;
   opacity: 1;
}
.actions a {
   margin: 7px 6px;
   color: white;
   height: 30px;
   line-height: 26px;
   display: inline-block;
   border-radius: 30px;
   font-size: 12px;
   text-transform: uppercase;
   text-align: center;
   border: 2px solid white;
   background: transparent;
   transition: .3s ease-in-out;
}
.share-button {
   width: 30px;
}
.add-to-cart:hover {
   background: #A2927F;
}
.actions a:hover {
   border-color: #A2927F;
   background: #A2927F;
}
.share-wrap {
   display: inline-block;
   height: 30px;
   position: relative;
   margin: 7px 6px;
}
.share-item {
   width: 200px;
   margin-left: -100px;
   position: absolute;
   z-index: 3;
   bottom: 38px;
   left: 50%;
   opacity: 0;
   visibility: hidden;
   text-align: center;
   transition: .3s ease-in-out;
}
.share-wrap:hover .share-item {
   opacity: 1;
   visibility: visible;
}
.add-to-cart {
   padding: 0 20px;
}
.product-about {
   padding: 20px 0 0;
   text-align: center;
}
.product-title {
   font-family: 'Open Sans', sans-serif;
   line-height: 1.1;
   font-size: 16px;
   margin: 5px 0 15px;
   font-weight: normal;
}
.product-title a {
   color: #373737;
}
.price {
   font-family: 'Open Sans', sans-serif;
   font-size: 1.25em;
   font-weight: bold;
   color: #F2453E;
}

<form>
  <input type="text" placeholder="Искать здесь...">
  <button type="submit"></button>
</form>

* {box-sizing: border-box;}
form {
  width: auto;
  float: right;
  margin-right: 30px;
}
input {
  width: 250px;
  height: 42px;
  padding-left: 15px;
  border-radius: 42px;
  border: 2px solid #324b4e;
  background: #F9F0DA;
  outline: none;
  position: relative;
  transition: .3s linear;
}
input:focus {
  width: 300px;
}
button {
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  position: absolute;
  top: -2px;
  right: 0;
}
button:before{
  content: "\f002";
  font-family: FontAwesome;
  color: #324b4e;
}

<table>
<tr>
  <th>Comedy</th>
  <th>Adventure</th>
  <th>Action</th>
</tr>
<tr>
  <td><a href="https://ru.wikipedia.org/wiki/Очень_страшное_кино">Scary Movie</a></td>
  <td>Indiana Jones</td>
  <td>The Punisher</td>
</tr>
<tr>
  <td>Epic Movie</td>
  <td>Star Wars</td>
  <td>Bad Boys</td>
</tr>
</table>

<td id="значение_идентификатора_ячейки">содержимое ячейки</td>

<a href="#значение_идентификатора_ячейки">текст ссылки</a>

<a href="image.jpg">текст ссылки</a>

td:target {background: salmon;}
td:target {color: salmon;}
td:target {text-decoration: underline;}

<table class="list">
<tr>
  <th>Comedy</th>
  <th>Adventure</th>
  <th>Action</th>
</tr>
<tr>
  <td>Scary Movie</td>
  <td>Indiana Jones</td>
  <td>The Punisher</td>
</tr>
<tr>
  <td>Epic Movie</td>
  <td>Star Wars</td>
  <td>Bad Boys</td>
</tr>
</table>

<table id="company">
<tr>
  <th>Company</th>
  <th>Q1</th>
  <th>Q2</th>
  <th>Q3</th>
</tr>
<tr>
  <td>Microsoft</td>
  <td>20.3</td>
  <td>30.5</td>
  <td>23.5</td>
</tr>
<tr>
  <td>Google</td>
  <td>50.2</td>
  <td>40.63</td>
  <td>45.23</td>
</tr>
</table>

<div class="gradient-all">Градиентные границы и текст</div>

.gradient-all {
  font-size: 2em;
  background: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0.3em 0.6em ;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  border-image-slice: 1;
}

<div class="shadow-border">
  <img src="image.jpg">
</div>

*, *:after {box-sizing: border-box;}
.shadow-border {
  width: 400px;
  margin: 50px auto 0;
  position: relative;
}
 .shadow-border:after {
  content:"";
  width: 100%;
  height: calc(100% - 20px);
  position: absolute;
  top: 10px;
  left: 25px;
  z-index: 1;
  border: 5px solid #FF9B6C;
}
.shadow-border img {
  max-width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  box-shadow: 4px 4px 20px 0 rgba(0,0,0,.25)
}

<table class="table_price">
<caption>Plans&Pricing</caption>
<tr>
  <th>Plan</th>
  <th colspan="2">Price</th>
</tr>
<tr>
  <td>Basic</td>
  <td>10$</td>
  <td><a>Select</a></td>
</tr>
<tr>
  <td>Professional</td>
  <td>20$</td>
  <td><a>Select</a></td>
</tr>
<tr>
  <td>Premium</td>
  <td>30$</td>
  <td><a>Select</a></td>
</tr>
<tr>
  <td>Platinum</td>
  <td>60$</td>
  <td><a>Select</a></td>
</tr>
</table>

.table_price {
  border-collapse: collapse;
  border-left: 3px solid #F79361;
  border-right: 3px solid #F79361;
  border-bottom: 3px solid #F79361;
  font-family: "Lucida Grande", sans-serif;
 }
.table_price caption {
  background: #F79361; 
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px  4px 0 rgba(0,0,0,.3);
  color: white;
  font-family: "Roboto Slab",serif;
  font-style: normal;
  font-size: 26px;
  text-align: center;
  margin: 0;
}
.table_price td, .table_price th {
  padding: 10px;
}
.table_price th {
  text-align: left;
  font-size: 18px;
}
.table_price tr:nth-child(2n) {
  background: #E5E5E5;
}
.table_price td:last-of-type {
  text-align: center;
}
.table_price a {
  display: inline-block;
  padding: 5px 10px;
  background: #F79361;
  box-shadow: 2px 2px 0 0 #a22800;
  position: relative;
}
.table_price a:hover {
  box-shadow: none;
  top: 2px;
  left: 2px;
}

div {
  width: 300px;
  margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/
}

<div class="wrapper">
<div class="box"></div>
</div>

.wrapper {text-align: center;}

<div class="wrapper">
<div class="box"></div>
</div>

.wrapper {position: relative; /*задаем для родительского блока относительное позиционирование, чтобы потом абсолютно позиционировать блок внутри него*/}
.box {
width: 400px;
position: absolute; 
left: 50%;
margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/
}

<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

.wrapper {text-align: center; /*располагаем содержимое блока по центру*/}
.box {
display: inline-block; /*располагаем блоки в ряд по горизонтали*/
margin-right: -0.25em; /*убираем правый отступ между блоками*/
}

<table class="zebra">
<tr>
  <th></th>
  <th>Q1</th>
  <th>Q2</th>
  <th>Q3</th>
  <th>Q4</th>
  </tr>
 <tr>
  <td class="round-top">Microsoft</td>
  <td>20.3</td>
  <td>30.5</td>
  <td>23.5</td>
  <td>40.3</td>
 </tr>
<tr>
  <td>Google</td>
  <td>50.2</td>
  <td>40.63</td>
  <td>45.23</td>
  <td>39.3</td>
</tr>
<tr>
  <td>Apple</td>
  <td>25.4</td>
  <td>30.2</td>
  <td>33.3</td>
  <td>36.7</td>
</tr>
<tr>
  <td class="round-bottom">IBM</td>
  <td>20.4</td>
  <td>15.6</td>
  <td>22.3</td>
  <td>29.3</td>
</tr>
</table>

table {
border-spacing: 0;
empty-cells: hide;
}
td {
padding: 10px 20px;
text-align: center;
border-bottom: 1px solid #F4EEE8;
transition: all 0.5s linear;
}
td:first-child {
text-align: left;
color: #3D3511;
font-weight: bold;
}
th {
padding: 10px 20px;
color: #3D3511;
border-bottom: 1px solid #F4EEE8;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
td:nth-child(even) {
background: #F6D27E;
}
td:nth-child(odd) {
background: #D1C7BF;
}
th:nth-child(even)  {
background: #F6D27E;
}
th:nth-child(odd)  {
background: #D1C7BF;
}
.round-top {
border-top-left-radius: 5px;
}
.round-bottom {
border-bottom-left-radius: 5px;
}
tr:hover td{
background: #D1C7BF;
font-weight: bold;
}