4 changed files with 113 additions and 108 deletions
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
@ -1,27 +1,27 @@ |
|||||||
<!doctype html> |
<!doctype html> |
||||||
|
|
||||||
<html lang="ru"> |
<html lang="ru"> |
||||||
<head> |
<head> |
||||||
<meta charset="utf-8"> |
<meta charset="utf-8"> |
||||||
<title>Книга отзывов</title> |
<title>Книга отзывов</title> |
||||||
<link rel="icon" type="image/png" sizes="256x256" href="/html/favicon.png"> |
<link rel="icon" type="image/png" sizes="256x256" href="static/favicon.png"> |
||||||
<link rel="stylesheet" type="text/css" href="html/styles.css"> |
<link rel="stylesheet" type="text/css" href="static/styles.css"> |
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<div class="main"> |
<div class="main"> |
||||||
<h1>Книга отзывов</h1> |
<h1>Книга отзывов</h1> |
||||||
|
|
||||||
|
|
||||||
<form action="/new" method="POST"> |
<form action="/new" method="POST"> |
||||||
<p>Всего записей - {{ .Count }}</p> |
<p>Всего записей - {{ .Count }}</p> |
||||||
<input type="text" name="comment" placeholder="Ваш отзыв..."> |
<input type="text" name="comment" placeholder="Ваш отзыв..."> |
||||||
<input type="submit" value="Отправить"> |
<input type="submit" value="Отправить"> |
||||||
</form> |
</form> |
||||||
|
|
||||||
<ul> |
<ul> |
||||||
{{ range .Comments }}<li>{{ . }}</li>{{ end}} |
{{ range .Comments }}<li>{{ . }}</li>{{ end}} |
||||||
</ul> |
</ul> |
||||||
</div> |
</div> |
||||||
</body> |
</body> |
||||||
</html> |
</html> |
||||||
@ -1,79 +1,79 @@ |
|||||||
* { |
* { |
||||||
margin: 0; |
margin: 0; |
||||||
padding: 0; |
padding: 0; |
||||||
|
|
||||||
font-family: 'Raleway', serif; |
font-family: 'Raleway', serif; |
||||||
} |
} |
||||||
|
|
||||||
body { |
body { |
||||||
padding: 1%; |
padding: 1%; |
||||||
|
|
||||||
color: #2E3E50; |
color: #2E3E50; |
||||||
background: #D8DDDD; |
background: #D8DDDD; |
||||||
|
|
||||||
text-align: center; |
text-align: center; |
||||||
letter-spacing: 1px; |
letter-spacing: 1px; |
||||||
} |
} |
||||||
|
|
||||||
.main { |
.main { |
||||||
margin: auto; |
margin: auto; |
||||||
padding: 1% 2%; |
padding: 1% 2%; |
||||||
max-width: 800px; |
max-width: 800px; |
||||||
border-radius: 5px; |
border-radius: 5px; |
||||||
background: #ECF0F1; |
background: #ECF0F1; |
||||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .3); |
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .3); |
||||||
} |
} |
||||||
|
|
||||||
form { |
form { |
||||||
width: 100%; |
width: 100%; |
||||||
display: flex; |
display: flex; |
||||||
margin: 2% 0; |
margin: 2% 0; |
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
form p { |
form p { |
||||||
text-align: left; |
text-align: left; |
||||||
padding: 1%; |
padding: 1%; |
||||||
font-size: 18px; |
font-size: 18px; |
||||||
} |
} |
||||||
|
|
||||||
input { |
input { |
||||||
padding: 1%; |
padding: 1%; |
||||||
border-radius: 4px; |
border-radius: 4px; |
||||||
border: 1px solid #CCC; |
border: 1px solid #CCC; |
||||||
font-size: 18px; |
font-size: 18px; |
||||||
} |
} |
||||||
|
|
||||||
input[type=text] { |
input[type=text] { |
||||||
flex-grow: 1; |
flex-grow: 1; |
||||||
|
|
||||||
margin: 0 .5%; |
margin: 0 .5%; |
||||||
} |
} |
||||||
|
|
||||||
input[type=submit] { |
input[type=submit] { |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
input[type=submit]:hover { |
input[type=submit]:hover { |
||||||
background-color: #D8DDDD; |
background-color: #D8DDDD; |
||||||
} |
} |
||||||
|
|
||||||
h1 { |
h1 { |
||||||
font-family: 'Baloo Tamma', cursive; |
font-family: 'Baloo Tamma', cursive; |
||||||
} |
} |
||||||
|
|
||||||
li{ |
li{ |
||||||
list-style-type: none; |
list-style-type: none; |
||||||
|
|
||||||
font-size: 18px; |
font-size: 18px; |
||||||
min-width: 24%; |
min-width: 24%; |
||||||
margin: 2% 0; |
margin: 2% 0; |
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, .2); |
box-shadow: 0 2px 4px rgba(0, 0, 0, .2); |
||||||
padding: 1% 2%; |
padding: 1% 2%; |
||||||
background: #FFF; |
background: #FFF; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
} |
} |
||||||
|
|
||||||
li:hover { |
li:hover { |
||||||
box-shadow:0 5px 10px rgba(0, 0, 0, .15); |
box-shadow:0 5px 10px rgba(0, 0, 0, .15); |
||||||
} |
} |
||||||
Loading…
Reference in new issue