parent
83c839195a
commit
b8262e550e
@ -1,22 +1,25 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="stylesheet" href="static/css/bundle.css">
|
||||
<title>cyclocrust</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<img class="hero" src="static/images/hero.jpg" width="auto" height="auto" />
|
||||
<div class="logo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160.29378 184.2236">
|
||||
<path d="M-9.29472 45.1525c-4.66648-4.43316-22.63243-20.2992-52.26458-20.2992-44.79821 0-80.7301 35.46525-80.7301 80.26346 0 43.39826 34.53195 80.03013 81.19675 80.03013 16.79933 0 35.9319-5.36645 51.79793-19.36589v-13.53279c-15.86603 17.26597-36.63187 23.56572-52.26458 23.56572-31.49874 0-69.9972-24.03237-69.9972-70.23052 0-39.43176 29.86547-71.39715 69.76388-71.39715 20.06586 0 39.19843 8.86631 52.4979 24.49902z" transform="rotate(-90 -17.0739 7.7792)"/>
|
||||
<path d="M193.51833-164.8475c-4.66648-4.43316-22.63243-20.29919-52.26458-20.29919-44.7982 0-80.7301 35.46525-80.7301 80.26346 0 43.39826 34.53195 80.03013 81.19675 80.03013 16.79933 0 35.9319-5.36645 51.79793-19.36589v-13.5328c-15.86603 17.26598-36.63187 23.56573-52.26458 23.56573-31.49874 0-69.9972-24.03237-69.9972-70.23052 0-39.43176 29.86547-71.39715 69.76388-71.39715 20.06586 0 39.19843 8.86631 52.4979 24.49902z" transform="rotate(90 -7.7792 -17.0739)"/>
|
||||
<path d="M113.26131 101.40652a7.61095 7.99795 0 0 1-7.61096 7.99795 7.61095 7.99795 0 0 1-7.61095-7.99795 7.61095 7.99795 0 0 1 7.61095-7.99795 7.61095 7.99795 0 0 1 7.61096 7.99795" transform="translate(-24.85311 -9.2947)"/>
|
||||
<path d="M296.90096 121.92112h-12.954l-4.3688 14.3764c1.4732-.9144 3.1496-1.4732 5.2832-1.4732 5.6388 0 9.5504 4.0132 9.5504 9.7536 0 5.6896-4.064 9.7536-9.652 9.7536-3.4036 0-6.35-1.5748-8.2296-4.3688l-1.9812.8128c2.4384 4.2164 6.604 5.588 10.16 5.588 6.604 0 12.0396-4.5212 12.0396-11.8364 0-6.7564-4.572-11.7348-11.7856-11.7348-.8128 0-1.4732.1016-2.286.3048l2.8448-9.144h11.3792zm12.09044 33.8836h2.2352v-33.8836h-6.5024l-1.016 2.032h5.2832z" transform="translate(-216.85311 -117.88819)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>cyclocrust</h1>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="stylesheet" href="static/css/bundle.css">
|
||||
<title>cyclocrust</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="head"> <div class="logo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160.29378 184.2236">
|
||||
<path d="M-9.29472 45.1525c-4.66648-4.43316-22.63243-20.2992-52.26458-20.2992-44.79821 0-80.7301 35.46525-80.7301 80.26346 0 43.39826 34.53195 80.03013 81.19675 80.03013 16.79933 0 35.9319-5.36645 51.79793-19.36589v-13.53279c-15.86603 17.26597-36.63187 23.56572-52.26458 23.56572-31.49874 0-69.9972-24.03237-69.9972-70.23052 0-39.43176 29.86547-71.39715 69.76388-71.39715 20.06586 0 39.19843 8.86631 52.4979 24.49902z" transform="rotate(-90 -17.0739 7.7792)"/>
|
||||
<path d="M193.51833-164.8475c-4.66648-4.43316-22.63243-20.29919-52.26458-20.29919-44.7982 0-80.7301 35.46525-80.7301 80.26346 0 43.39826 34.53195 80.03013 81.19675 80.03013 16.79933 0 35.9319-5.36645 51.79793-19.36589v-13.5328c-15.86603 17.26598-36.63187 23.56573-52.26458 23.56573-31.49874 0-69.9972-24.03237-69.9972-70.23052 0-39.43176 29.86547-71.39715 69.76388-71.39715 20.06586 0 39.19843 8.86631 52.4979 24.49902z" transform="rotate(90 -7.7792 -17.0739)"/>
|
||||
<path d="M113.26131 101.40652a7.61095 7.99795 0 0 1-7.61096 7.99795 7.61095 7.99795 0 0 1-7.61095-7.99795 7.61095 7.99795 0 0 1 7.61095-7.99795 7.61095 7.99795 0 0 1 7.61096 7.99795" transform="translate(-24.85311 -9.2947)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>cyclocrust 51</h1>
|
||||
<ul class="links">
|
||||
<li><a href="links">контакты</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="main">
|
||||
main content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,35 +1,53 @@
|
||||
body {
|
||||
background: black;
|
||||
background: black;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(1em, 20%) repeat(6, 1fr) minmax(1em, 20%);
|
||||
grid-template-rows: max-content auto;
|
||||
color: white;
|
||||
gap: 2em 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
grid-template-rows: repeat(8, 1fr);
|
||||
height: 100vh;
|
||||
.head, .main {
|
||||
display: grid;
|
||||
grid-template-rows: subgrid;
|
||||
grid-column: 2/8;
|
||||
}
|
||||
|
||||
.main h1 {
|
||||
grid-column: 3/7;
|
||||
grid-row: 2/3;
|
||||
color: white;
|
||||
font-size: clamp(100%, 1rem + 8vw, 200px);
|
||||
.head {
|
||||
grid-row: 1/2;
|
||||
grid-template-columns: min-content max-content auto;
|
||||
padding-top: 2em;
|
||||
gap: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.head > .logo > svg {
|
||||
display: block;
|
||||
fill: white;
|
||||
height: auto;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1/-1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
.head > .logo {
|
||||
grid-column: 1/2;
|
||||
}
|
||||
|
||||
.logo {
|
||||
fill: white;
|
||||
grid-column: 3/7;
|
||||
grid-row: 3/-1;
|
||||
.head > h1 {
|
||||
color: white;
|
||||
grid-column: 2/3;
|
||||
}
|
||||
|
||||
.logo > svg {
|
||||
display: block;
|
||||
.head > ul {
|
||||
grid-column: 3/4;
|
||||
list-style: "";
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.head .links a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.main {
|
||||
grid-row: 2/-1;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in new issue