JSFiddle - React, Tailwind, and code Playground

by alekseyfedorov88

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<!----------------------------------------------------------- стили фон привязка к css -->

<link rel="stylesheet" type="text/css" href="style.css">

<!----------------------------------------------------------- название и описание сайта для поисковика -->
<title>Заборы в Калининграде</title>
<META NAME="Description" CONTENT="Изготовление и монтаж всех типов ЗАБОРОВ под ключ. Гарантие 2 года. ">
</head>

<body>

<!------------------------------------------------------------------------------ логотип -->
<p align="justify"> <img src="лого.jpg"  hspace="120" vspace="0" align="left"> 

<!------------------------------------------------------------------------------- менюшка -->
<div class="nav ph-line-nav">
    <a href="#""index.html"> На главную </a>
    <a href="#">каталог</a>
    <a href="#">галерея</a>
    <a href="#">калькулятор</a>
	<a href="#">контакты</a>
    <div class="effect"></div>
</div>

<!------------------------------------------------------------------------------- блок -->
<p1> заборы </p1>


<!------------------------------------------------------------------------------- заголовок ТИПЫ ЗАБОРОВ -->
<h1> Выберите интересующий вас тип забора </h1>

<!------------------------------------------------------------------------------- блоки типы заборов -->
<div class="box1"> <h3 align="center">забор из профнастила</h3> <a style="height:100%; display:block;"href="page.html"></a></div>
<div class="box2">забор из евроштакета <a style="height:100%; display:block;"href="page2.html"></a></div>
<div class="box3">заборы 3D секционные <a style="height:100%; display:block;"href="page3.html"></a></div>
<div class="box4">заборы из поликарбоната <a style="height:100%; display:block;"href="page4.html"></a></div>
<div class="box5">заборы из сетки-рабица <a style="height:100%; display:block;"href="page5.html"></a></div>
<div class="box6">сварные и...

CSS

/* ------------------------------------------------------------------- МЕНЮ ------*/
html, body, div, a {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }
html {
  line-height: 0; }


/* --- basic styles ----*/
 body {
  font-size: 1.5em;
  background: #f2f2f2;
  text-shadow: 0 1px 0 white; }

/* --- for all three examples ----*/
.nav {
  text-align: center;
  overflow: hidden;
  margin: 1em auto;
  width: 720px;
  position: relative; }
  .nav a {
    display: block;
    position: relative;
		float: left;
		padding: 1em 0 2em;
    width: 20%;
		text-decoration: none;
	  color: #393939;
	  -webkit-transition: .7s;
	  -moz-transition: .7s;
	  -o-transition: .7s;
	  -ms-transition: .7s;
	  transition: .7s; }
	  .nav a:hover {
	    color: #c6342e; }

.effect {
	position: absolute;
  left: -12.5%;
  -webkit-transition: 0.7s ease-in-out;
  -moz-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  -ms-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out; }

	.nav a:nth-child(1):hover ~ .effect {
	  left: 10%; }
	.nav a:nth-child(2):hover ~ .effect {
	  left: 30%; }
	.nav a:nth-child(3):hover ~ .effect {
	  left: 50%; }
	.nav a:nth-child(4):hover ~ .effect {
	  left: 70%; }
	.nav a:nth-child(5):hover ~ .effect {
	  left: 90%; } 


/* ----- line example -----*/
.ph-line-nav .effect {
  width: 90px;
  height: 2px;
  bottom: 36px;
  background: #c6342e;
  box-shadow: 0 1px 0 white; 
  margin-left:-45px;
}

/* -------------------------------------------------------------------- ФОН -----*/
  body  {
background-image : url(фон.jpg) ;
Background-repeat: no-repeat ;
background-size: 100%;
 }
 
  
/* -------------------------------------------------------------------- блок -----*/
p1 {
	opacity: 0.7;
background-color : #E6E6FA;
position:absolute;
bottom:240px;
right:70px;
padding:140px;

}

/* -------------------------------------------------------------------- заголовок типы...