Старт

This commit is contained in:
2023-11-07 19:51:49 +06:00
commit 86542a157f
5002 changed files with 199551 additions and 0 deletions

View File

@ -0,0 +1,6 @@
[InternetShortcut]
URL=http://psd-html-css.ru/templates/htmlcss-shablon-cherry
IDList=
HotKey=0
IconFile=C:\Users\igor\AppData\Local\Mozilla\Firefox\Profiles\xdvdepx0.default\shortcutCache\fmdfXa4d5K3mbqA6r6Y1mg==.ico
IconIndex=0

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 264 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,245 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Шаблоны сайтов</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="style.css" media="all">
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="headerContent">
<div class="left"><h1><a href="#">Cherry</a></h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></div>
<div class="right">
<form class="search">
<input type="text" placeholder="Search...">
<input type="image" src="images/search.png" title="Search">
</form>
</div>
</div>
</div>
<div class="slider">
<div class="itemSlider">
<div class="bgSlide"><img src="images/bg-slide.jpg"></div>
<div class="descSlide">
<h1>Eaten berry</h1>
<p>and go for a walk</p>
<span>Duis aute irure dolor...</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="nav">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Sliders</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Styles</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Cherry</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="breadcrumbs"><a href="#">Home</a> / <a href="#">Another Page</a> / This page</div>
<div class="main">
<div class="leftCol">
<form>
<h2>Contact us</h2>
<input type="text" placeholder="Lorem ipsum">
<input type="text" placeholder="Dolor sit">
<input type="text" disabled="disabled" placeholder="Disabled">
<input type="text" placeholder="Consectetur">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div class="row">
<h4>Radio</h4>
<input type="radio">
<label>Lorem ipsum dolor sit amet</label>
<div class="clear"></div>
<input type="radio">
<label>Duis aute irure dolor</label>
<div class="clear"></div>
<input type="radio">
<label>Excepteur sint occaecat</label>
<div class="clear"></div>
</div>
<div class="row">
<h4>Checkbox</h4>
<input type="checkbox" />
<label>Duis aute irure dolor</label>
<div class="clear"></div>
<input type="checkbox" />
<label>Excepteur sint occaecat</label>
<div class="clear"></div>
</div>
<button type="submit" class="minWidth">Lorem ipsum</button>
<button type="reset" class="minWidth">Reset</button>
</form>
<div class="row">
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p><a href="#">More about</a></p>
</div>
</div>
<div class="rightCol">
<h1>What We Do…</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate velit esse cillum dolore</a> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul class="img">
<li><a href="#"><img src="images/img1.png"></a></li>
<li><a href="#"><img src="images/img2.png"></a></li>
<li><a href="#"><img src="images/img3.png"></a></li>
</ul>
<h1>Lists</h1>
<div class="row">
<div class="span">
<h4>List style type circle <code>&lt;ul&gt;</code></h4>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Sed ut perspiciatis unde</li>
<li>At vero eos et accusamus
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Sed ut perspiciatis unde</li>
<li>At vero eos et accusamus</li>
</ul>
</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Sed ut perspiciatis unde</li>
<li>At vero eos et accusamus</li>
</ul>
</div>
<div class="span">
<h4>Unstyled <code>&lt;ul class="unstyled"&gt;</code></h4>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Sed ut perspiciatis unde</li>
<li>At vero eos et accusamus
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Sed ut perspiciatis unde</li>
<li>At vero eos et accusamus</li>
</ul>
</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Sed ut perspiciatis unde</li>
<li>At vero eos et accusamus</li>
</ul>
</div>
<div class="span">
<h4>Ordered <code>&lt;ol&gt;</code></h4>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Sed ut perspiciatis unde</li>
<li>At vero eos et accusamus</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Sed ut perspiciatis unde</li>
<li>At vero eos et accusamus</li>
</ol>
</div>
</div>
<h1>Tables</h1>
<table>
<thead>
<tr>
<th>#</th>
<th>Lorem</th>
<th>Ipsum</th>
<th>Dolor</th>
<th>Sit</th>
<th>Amet</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lorem ipsum</td>
<td>At vero eos</td>
<td>Sed ut</td>
<td>Dolor sit amet</td>
<td><a href="#">Epd.</a></td>
</tr>
<tr>
<td>2</td>
<td>Sed ut</td>
<td>Dolor sit amet</td>
<td>Lorem ipsum</td>
<td>At vero eos</td>
<td><a href="#">Epd.</a></td>
</tr>
<tr>
<td>3</td>
<td>At vero eos</td>
<td>Lorem ipsum</td>
<td>Sed ut</td>
<td>Dolor sit amet</td>
<td><a href="#">Epd.</a></td>
</tr>
<tr>
<td>4</td>
<td>Dolor sit amet</td>
<td>At vero eos</td>
<td>Lorem ipsum</td>
<td>Sed ut</td>
<td><a href="#">Epd.</a></td>
</tr>
<tr>
<td>5</td>
<td>At vero eos</td>
<td>Lorem ipsum</td>
<td>Sed ut</td>
<td>Dolor sit amet</td>
<td><a href="#">Epd.</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="footer">
<div class="footerContent">
<div class="span1">
<h1>Sed ut</h1>
<div class="borderBottom"></div>
<p>Lorem ipsum dolor sit</p>
<ul class="clock">
<li>Nights! Absolutely No Extra Charge</li>
<li>Weekends! Absolutely No Extra Charge</li>
<li>Holidays! Absolutely No Extra Charge</li>
</ul>
<div class="social">
<div>Мы в социальных сетях: </div><ul><li><a target="newtab" href="http://www.facebook.com/?sk=app_2309869772"><img src="images/facebook.png"></a></li><li><a target="newtab" href="https://twitter.com/psdhtmlcss"><img src="images/twitter.png" /></a></li><li><img src="images/vk.png" /></li></ul>
</div>
</div>
<div class="span1">
<h1>At vero eos</h1>
<div class="borderBottom"></div>
<p>Lorem ipsum dolor sit</p>
<ul>
<li>West Hollywood (323) 221-1107</li>
<li>Beverly Hills (310) 202-5428</li>
<li>Pasadena (626) 296-2664</li>
<li>West Hollywood (323) 221-1107</li>
<li>Beverly Hills (310) 202-5428</li>
</ul>
<p><strong>Lorem ipsum dolor sit amet</strong></p>
</div>
<div class="span1">
<h1>Lorem ipsum dolor</h1>
<div class="borderBottom"></div>
<p>Lorem ipsum dolor sit</p>
<ul class="unstyled">
<li>Hi-Tech Cherry Company</li>
<li><a href="mailto:psdhtmlcss@mail.ru">infocherry@gmail.com</a></li>
<li>5104 W. Washington Blvd</li>
<li>Los Angeles , CA , 90016 United States</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,714 @@
html,body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: Arial,Microsoft Sans Serif;
font-size: 14px;
background: #e7e4e4 url("images/bg.png") repeat;
color: #5c646e;
}
::selection {
background-color: #9f385b;
color: white;
}
::-moz-selection {
background-color: #9f385b;
color: white;
}
*{
margin: 0;
padding: 0;
}
p {
margin: 15px 0;
line-height: 20px;
}
a {
color: #95161f;
text-decoration: underline;
}
a:hover {
}
a img {
border: none;
outline: none;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
line-height: normal;
}
h1 {
font-size: 24px;
color: #a5adb8;
text-transform: capitalize;
}
h1::first-letter {
color: #ae4b5d;
}
h2 {
font-size: 16px;
color: #282d33;
}
h3 {
font-size: 16px;
color: #9f24f6;
margin: 7px 0;
}
h4 {
font-size: 14px;
margin: 7px 0;
}
h5 {
}
h6 {
}
/*Lists*/
ul {
list-style-type: disc;
padding-left: 20px;
margin: 0;
}
ul li, ol li {
line-height: 22px;
}
ul li ul {
padding-left: 20px;
margin: 0;
}
ul.unstyled {
list-style-type: none;
padding-left: 0;
}
ul.unstyled ul li {
list-style-type: disc;
}
ol {
list-style-type: decimal;
padding-left: 25px;
}
code {
padding: 1px 3px;
background-color: #dedede;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-weight: normal;
font-size: 11px;
}
/*Tables*/
table {
width: 100%;
margin: 15px 0;
padding: 0;
font-size: 12px;
border-spacing: 0;
border-collapse: separate;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #282d33;
color: #9da4af;
}
table th, table td {
padding: 7px 12px 6px;
line-height: 18px;
text-align: left;
}
table th {
color: white;
font-weight: bold;
vertical-align: middle;
background-color: #9c4757;
}
table td {
vertical-align: top;
border-top: 1px solid #d8dbde;
}
table td a {
color: #d08b98;
}
table tbody th {
vertical-align: top;
border-top: 1px solid #d8dbde;
}
table th+th,table td+td,table th+td {
border-left: 1px solid #d8dbde;
}
table thead tr:first-child th:first-child, table tbody tr:first-child td:first-child {
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
}
table thead tr:first-child th:last-child, table tbody tr:first-child td:last-child {
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
}
table tbody tr:last-child td:first-child {
-webkit-border-radius: 0 0 0 5px;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
table tbody tr:last-child td:last-child {
-webkit-border-radius: 0 0 5px 0;
-moz-border-radius: 0 0 5px 0;
border-radius: 0 0 5px 0;
}
table tr:hover {
background-color: #622833;
color: #d8dbde;
}
/*Forms*/
form {
display: inline-block;
}
label {
line-height: 24px;
margin-left: 3px;
float: none;
}
input,select,textarea {
display: inline-block;
width: auto;
height: 20px;
padding: 7px 5px;
line-height: 18px;
border: 1px solid white;
background-color: #e3e4e5;
-webkit-transition: background linear 0.2s;
-moz-transition: background linear 0.2s;
-ms-transition: background linear 0.2s;
-o-transition: background linear 0.2s;
transition: background linear 0.2s;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
margin: 5px 0;
font-size: 14px;
}
input:-moz-placeholder {
color: #757575;
}
input::-webkit-input-placeholder {
color: #757575;
}
input:focus,textarea:focus {
background-color: #d6d6d6;
outline: none;
}
select {
width: auto;
height: auto;
border: 1px solid #a2a2a2;
}
textarea {
height: auto;
}
button {
cursor: pointer;
display: inline-block;
background-color: #95161f;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0252e), color-stop(25%, #b0252e), to(#95161f));
background-image: -webkit-linear-gradient(#b0252e, #b0252e 25%, #95161f);
background-image: -moz-linear-gradient(top, #b0252e, #b0252e 25%, #95161f);
background-image: -ms-linear-gradient(#b0252e, #b0252e 25%, #95161f);
background-image: -o-linear-gradient(#b0252e, #b0252e 25%, #95161f);
background-image: linear-gradient(#b0252e, #b0252e 25%, #95161f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b0252e', endColorstr='#95161f', GradientType=0);
padding: 10px 18px 11px;
color: white;
font-size: 15px;
line-height: normal;
font-weight: bold;
border: 5px solid white;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
-webkit-transition: 0.1s linear all;
-moz-transition: 0.1s linear all;
-ms-transition: 0.1s linear all;
-o-transition: 0.1s linear all;
transition: 0.1s linear all;
margin-bottom: 10px;
}
button[type=reset] {
background-color: #e6e6e6;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), color-stop(25%, #f5f5f5), to(#e6e6e6));
background-image: -webkit-linear-gradient(#f5f5f5, #f5f5f5 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #f5f5f5, #f5f5f5 25%, #e6e6e6);
background-image: -ms-linear-gradient(#f5f5f5, #f5f5f5 25%, #e6e6e6);
background-image: -o-linear-gradient(#f5f5f5, #f5f5f5 25%, #e6e6e6);
background-image: linear-gradient(#f5f5f5, #f5f5f5 25%, #e6e6e6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e6e6e6', GradientType=0);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
color: #666;
}
button:hover,button[type=reset]:hover {
background-position: 0 -15px;
}
button.minWidth {
width: 187px;
}
input[type=checkbox],input[type=radio] {
width: auto;
height: auto;
margin-left: 0;
padding: 0;
line-height: normal;
float: left;
border: none;
}
input[type=file] {
height: 27px;
border: none;
}
input[type=file]:focus, input[type=checkbox]:focus, select:focus {
outline: 1px dotted #666;
}
input[disabled] {
cursor: not-allowed;
background-color: #d1d1d1;
border: 1px solid white;
color: #bdbdbd;
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
.row {
display: block;
clear: both;
overflow: hidden;
margin: 15px 0;
}
.span,.span1 {
float: left;
display: inline;
}
.span {
width: 220px;
margin-right: 10px;
}
.span1 {
width: 270px;
margin: 0 25px;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
.wrapper {
width: 100%;
min-height: 100%;
position: relative;
}
/*Header*/
.header {
width: 100%;
height: 72px;
background: #2f3441 url("images/bg-header.png") repeat-x;
}
.header .headerContent {
width: 960px;
padding: 20px 10px 0;
height: 52px;
margin: 0 auto;
}
.headerContent h1 {
font-size: 30px;
margin: 0;
text-transform: uppercase;
line-height: 24px;
}
.headerContent h1 a {
text-decoration: none;
color: #a5adb8;
}
.headerContent p {
margin: 0;
line-height: 18px;
}
form.search {
display: inline-block;
float: right;
}
form.search > input[type=text] {
width: 205px;
height: 22px;
padding: 5px;
color: #a5adb8;
background-color: #24272d;
border: 1px solid #875f66;
font-size: 14px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float: left;
margin: 0 5px 0 0;
box-shadow: inset 0 5px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: inset 0 5px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: inset 0 5px 5px rgba(0,0,0, 0.3);
}
form.search > input[type=image] {
width: 36px;
height: 34px;
padding: 0;
margin: 0;
outline: none;
border: none;
background: transparent;
}
form.search > input:-moz-placeholder {
color: #5b636e;
}
form.search > input::-webkit-input-placeholder {
color: #5b636e;
}
form.search > input[type=text]:focus {
border: 1px solid #a5adb8;
}
/*Slider*/
.slider {
width: 980px;
height: 240px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.itemSlider {
width: 980px;
height: 240px;
}
.itemSlider .bgSlide {
width: 980px;
height: 240px;
position: absolute;
top: 0;
left: 0;
}
.itemSlider .descSlide {
position: absolute;
top: 40px;
left: 30px;
width: 500px;
overflow: hidden;
}
.descSlide>h1 {
font-size: 30px;
}
.descSlide h1+p {
color: #282D33;
font-size: 18px;
font-weight: bold;
margin: 0;
}
.descSlide>span {
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #a5adb8;
margin: 20px 0 6px;
}
.descSlide>p {
color: #d9dcdf;
margin-top: 0;
}
/*Navigation*/
.nav {
width: 980px;
height: 29px;
background-color: #95161f;
margin: 0 auto;
padding-top: 7px;
}
ul.menu {
display: inline-block;
float: right;
margin: 0;
padding: 0;
list-style: none;
}
ul.menu li {
float: left;
}
ul.menu li a {
color: white;
font-weight: bold;
text-decoration: none;
padding: 0 20px;
-webkit-transition: text-shadow linear 0.2s;
-moz-transition: text-shadow linear 0.2s;
-ms-transition: text-shadow linear 0.2s;
-o-transition: text-shadow linear 0.2s;
transition: text-shadow linear 0.2s;
}
ul.menu li a:hover {
text-shadow: 0 0 15px rgba(255,255,255, 0.8);
}
.breadcrumbs {
width: 940px;
padding: 4px 20px 6px;
font-size: 11px;
margin: 0 auto;
background-color: #f3f3f3;
}
/*Main*/
.main {
width: 940px;
padding: 20px 20px 270px;
overflow: hidden;
background-color: white;
margin: 0 auto;
}
/*Left Column*/
.leftCol {
width: 223px;
float: left;
margin-right: 20px;
color: #757575;
}
.leftCol form {
width: 193px;
background-color: #f3f3f3;
border: 1px solid #d8dbde;
padding: 10px;
color: #757575;
}
.leftCol input,.leftCol textarea {
width: 183px;
}
.leftCol select {
width: 193px;
}
.leftCol select:focus {
outline: none;
}
.leftCol input[type=radio],.leftCol input[type=checkbox] {
width: auto;
}
.leftCol p {
font-size: 12px;
margin: 8px 0;
}
/*Social button*/
.tw,.vk,.google {
margin-bottom: 5px;
height: 20px;
}
/*Right Column*/
.rightCol {
overflow: hidden;
}
ul.img {
display: inline-block;
list-style: none;
margin: 0;
padding: 0 7px 15px;
}
ul.img li {
float: left;
box-shadow: 0 5px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: 0 5px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: 0 5px 5px rgba(0,0,0, 0.3);
-webkit-transition: border linear 0.2s;
-moz-transition: border linear 0.2s;
-ms-transition: border linear 0.2s;
-o-transition: border linear 0.2s;
transition: border linear 0.2s;
margin-right: 15px;
border: 1px solid white;
}
ul.img li a {
width: 194px;
height: 140px;
display: block;
overflow: hidden;
}
ul.img li:hover {
border: 1px solid #95161f;
}
/*Footer*/
.footer {
position: absolute;
bottom: 0;
width: 100%;
background: #e7e4e4 url("images/bg-footer.png") repeat;
border-top: 10px solid #9c4757;
height: 230px;
overflow: hidden;
}
.footerContent {
padding: 10px;
color: white;
width: 960px;
margin: 0 auto;
font-size: 12px;
color: #85898f;
overflow: hidden;
}
.footerContent p {
margin: 7px 0;
}
.footerContent p strong {
font-size: 14px;
color: #a5adb8;
}
.footerContent a {
color: #d08b98;
}
.footerContent .borderBottom {
width: 270px;
height: 1px;
background-color: #191c20;
border-bottom: 1px solid #40474f;
margin-top: 5px;
}
.footerContent ul.clock {
list-style: none;
margin: 0;
padding: 0;
}
ul.clock li {
background: url("images/clock.png") left center no-repeat;
padding-left: 20px;
margin-top: 7px;
}
/*Social*/
.social {
font-size: 12px;
margin-right: 20px;
}
.social>div {
display: block;
float: left;
margin: 18px 5px 0 0;
}
.social ul {
display: inline-block;
margin: 15px 0 0 0;
padding: 0;
list-style: none;
float: left;
}
.social ul li {
float: left;
margin-right: 5px;
}