gman
9 months ago
commit
2e1bf3588d
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,324 @@
|
||||
/*!
|
||||
* fullPage 4.0.35
|
||||
* https://github.com/alvarotrigo/fullPage.js
|
||||
*
|
||||
* @license GPLv3 for open source use only
|
||||
* or Fullpage Commercial License for commercial use
|
||||
* http://alvarotrigo.com/fullPage/pricing/
|
||||
*
|
||||
* Copyright (C) 2021 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
|
||||
*/
|
||||
html.fp-enabled,
|
||||
.fp-enabled body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow:hidden;
|
||||
|
||||
/*Avoid flicker on slides transitions for mobile phones #336 */
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
.fp-section {
|
||||
position: relative;
|
||||
-webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
|
||||
-moz-box-sizing: border-box; /* <=28 */
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.fp-slide {
|
||||
float: left;
|
||||
}
|
||||
.fp-slide, .fp-slidesContainer {
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.fp-slides {
|
||||
z-index:1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
.fp-table{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.fp-slidesContainer {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.fp-controlArrow {
|
||||
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
|
||||
-moz-user-select: none; /* mozilla browsers */
|
||||
-khtml-user-select: none; /* webkit (konqueror) browsers */
|
||||
-ms-user-select: none; /* IE10+ */
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 50%;
|
||||
cursor: pointer;
|
||||
margin-top: -38px;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-ms-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
.fp-prev{
|
||||
left: 15px;
|
||||
}
|
||||
.fp-next{
|
||||
right: 15px;
|
||||
}
|
||||
.fp-arrow{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
.fp-arrow.fp-prev {
|
||||
border-width: 38.5px 34px 38.5px 0;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
}
|
||||
.fp-arrow.fp-next {
|
||||
border-width: 38.5px 0 38.5px 34px;
|
||||
border-color: transparent transparent transparent #fff;
|
||||
}
|
||||
.fp-notransition {
|
||||
-webkit-transition: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
#fp-nav {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 50%;
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-webkit-transform: translate3d(0,-50%,0);
|
||||
pointer-events: none;
|
||||
}
|
||||
#fp-nav.fp-right {
|
||||
right: 17px;
|
||||
}
|
||||
#fp-nav.fp-left {
|
||||
left: 17px;
|
||||
}
|
||||
.fp-slidesNav{
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-ms-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
left: 0 !important;
|
||||
right: 0;
|
||||
margin: 0 auto !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
.fp-slidesNav.fp-bottom {
|
||||
bottom: 17px;
|
||||
}
|
||||
.fp-slidesNav.fp-top {
|
||||
top: 17px;
|
||||
}
|
||||
#fp-nav ul,
|
||||
.fp-slidesNav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#fp-nav ul li,
|
||||
.fp-slidesNav ul li {
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
margin: 7px;
|
||||
position:relative;
|
||||
}
|
||||
.fp-slidesNav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
#fp-nav ul li a,
|
||||
.fp-slidesNav ul li a {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
pointer-events: all;
|
||||
}
|
||||
#fp-nav ul li a.active span,
|
||||
.fp-slidesNav ul li a.active span,
|
||||
#fp-nav ul li:hover a.active span,
|
||||
.fp-slidesNav ul li:hover a.active span{
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin: -6px 0 0 -6px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
#fp-nav ul li a span,
|
||||
.fp-slidesNav ul li a span {
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border: 0;
|
||||
background: #333;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: -2px 0 0 -2px;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
-moz-transition: all 0.1s ease-in-out;
|
||||
-o-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
#fp-nav ul li:hover a span,
|
||||
.fp-slidesNav ul li:hover a span{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: -5px 0px 0px -5px;
|
||||
}
|
||||
#fp-nav ul li .fp-tooltip {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
white-space: nowrap;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
#fp-nav ul li:hover .fp-tooltip,
|
||||
#fp-nav.fp-show-active a.active + .fp-tooltip {
|
||||
-webkit-transition: opacity 0.2s ease-in;
|
||||
transition: opacity 0.2s ease-in;
|
||||
width: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
#fp-nav ul li .fp-tooltip.fp-right {
|
||||
right: 20px;
|
||||
}
|
||||
#fp-nav ul li .fp-tooltip.fp-left {
|
||||
left: 20px;
|
||||
}
|
||||
.fp-auto-height.fp-section,
|
||||
.fp-auto-height .fp-slide{
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.fp-responsive .fp-is-overflow.fp-section{
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Tries to prevent overwrites #4657 */
|
||||
.fp-enabled .fp-scrollable{
|
||||
overflow: visible;
|
||||
height: initial;
|
||||
}
|
||||
|
||||
/* Used with autoScrolling: false */
|
||||
.fp-scrollable.fp-responsive .fp-is-overflow.fp-section,
|
||||
.fp-scrollable .fp-section,
|
||||
.fp-scrollable .fp-slide{
|
||||
/* Fallback for browsers that do not support Custom Properties */
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
|
||||
.fp-scrollable.fp-responsive .fp-is-overflow.fp-section:not(.fp-auto-height):not([data-percentage]),
|
||||
.fp-scrollable .fp-section:not(.fp-auto-height):not([data-percentage]),
|
||||
.fp-scrollable .fp-slide:not(.fp-auto-height):not([data-percentage]){
|
||||
/* Fallback for browsers that do not support Custom Properties */
|
||||
min-height: 100vh;
|
||||
min-height: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
|
||||
/* Disabling vertical centering on scrollable elements */
|
||||
.fp-overflow{
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
body:not(.fp-responsive) .fp-overflow{
|
||||
max-height: 100vh;
|
||||
max-height: 100dvh; /* fix for new browsers */
|
||||
}
|
||||
|
||||
/* No scrollable when using auto-height */
|
||||
.fp-scrollable .fp-auto-height .fp-overflow{
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.fp-is-overflow .fp-overflow.fp-auto-height-responsive,
|
||||
.fp-is-overflow .fp-overflow.fp-auto-height,
|
||||
.fp-is-overflow > .fp-overflow{
|
||||
overflow-y: auto;
|
||||
}
|
||||
.fp-overflow{
|
||||
outline:none;
|
||||
}
|
||||
|
||||
.fp-overflow.fp-table{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fp-responsive .fp-auto-height-responsive.fp-section,
|
||||
.fp-responsive .fp-auto-height-responsive .fp-slide,
|
||||
.fp-responsive .fp-auto-height-responsive .fp-overflow{
|
||||
height: auto !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
/*Only display content to screen readers*/
|
||||
.fp-sr-only{
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Customize website's scrollbar like Mac OS
|
||||
Not supports in Firefox and IE */
|
||||
.fp-scroll-mac .fp-overflow::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
width: 9px;
|
||||
}
|
||||
.fp-scroll-mac .fp-overflow::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
.fp-scroll-mac .fp-overflow::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0,0,0,.4);
|
||||
border-radius: 16px;
|
||||
border: 4px solid transparent;
|
||||
}
|
||||
.fp-warning,
|
||||
.fp-watermark{
|
||||
z-index: 9999999;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.fp-warning,
|
||||
.fp-watermark a{
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
background: rgba(255,255,255,0.6);
|
||||
padding: 5px 8px;
|
||||
font-size: 14px;
|
||||
font-family: arial;
|
||||
color: black;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
margin: 12px;
|
||||
}
|
||||
.fp-noscroll .fp-overflow{
|
||||
overflow: hidden;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 320 KiB |
|
After Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 172 KiB |
|
After Width: | Height: | Size: 259 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1020 B |
|
After Width: | Height: | Size: 804 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 879 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 207 KiB |
|
After Width: | Height: | Size: 266 KiB |
|
After Width: | Height: | Size: 330 KiB |
|
After Width: | Height: | Size: 270 KiB |
|
After Width: | Height: | Size: 254 KiB |
|
After Width: | Height: | Size: 839 B |
|
After Width: | Height: | Size: 1002 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 640 B |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Пространственные Системы</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="fullpage/fullpage.min.css">
|
||||
<script src="fullpage/fullpage.min.js"></script>
|
||||
<style>
|
||||
.section {
|
||||
text-align: center;
|
||||
font-size: 3em;
|
||||
font-family: arial;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="wrap">
|
||||
<div id="row">
|
||||
<div id="logo">
|
||||
<a id="logo-container" href="/">
|
||||
Пространственные системы
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="navigation">
|
||||
<a id="navigation-link-active" href="projects.html">Проекты</a>
|
||||
<a id="navigation-link" href="contacts.html">Контакты</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="fullpage">
|
||||
<div class="section">
|
||||
<h1>Section 1</h1>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="slide" data-anchor="slide1">
|
||||
<h1>Slide 2.1</h1>
|
||||
</div>
|
||||
<div class="slide" data-anchor="slide2">
|
||||
<h1>Slide 2.2</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus
|
||||
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
|
||||
eveniet aliquid molestias, tempora possimus.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Section 3</h2>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus
|
||||
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
|
||||
eveniet aliquid molestias, tempora possimus.</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
new fullpage('#fullpage', {
|
||||
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
|
||||
navigation: true,
|
||||
|
||||
// you can also use the HTML attribute data-tooltip on each section instead
|
||||
navigationTooltips: ['First Section', 'Second Section', 'Third Section'],
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,630 @@
|
||||
/* Variables */
|
||||
:root {
|
||||
--primary-font: "GOST", monospace;
|
||||
--primary-color: rgb(20, 20, 28);
|
||||
--primary-text-color: #cccccc;
|
||||
--accent-text-color: rgb(227, 178, 179);
|
||||
--font-size: 30px;
|
||||
--padding: 30px;
|
||||
}
|
||||
|
||||
/* Font Face */
|
||||
@font-face {
|
||||
font-family: "GOST";
|
||||
font-display: auto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url("./fonts/GOST.woff") format("woff"),
|
||||
url("./fonts/GOST.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* Global Styles */
|
||||
html {
|
||||
font-family: var(--primary-font);
|
||||
background: var(--primary-color);
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
background: var(--primary-color);
|
||||
z-index: 1;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
#wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
|
||||
@media (max-width: 850px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: 20px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#row {
|
||||
@media (max-width: 850px) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
#logo-container {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 30px;
|
||||
transition: opacity 0.3s;
|
||||
font-size: 30px;
|
||||
letter-spacing: 3px;
|
||||
line-height: 33px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: #e4e4e4;
|
||||
|
||||
@media (min-width: 850px) {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navigation {
|
||||
margin-left: auto;
|
||||
|
||||
@media (max-width: 850px) {
|
||||
width: 100%;
|
||||
border-top: 1px solid #cccccc;
|
||||
margin-left: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
#navigation-link {
|
||||
font-size: 30px;
|
||||
line-height: 71px;
|
||||
padding-top: 5px;
|
||||
text-transform: uppercase;
|
||||
margin-left: 30px;
|
||||
text-decoration: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
|
||||
color: rgba(204, 204, 204, 1);
|
||||
|
||||
transition: color 0.3s;
|
||||
|
||||
@media (min-width: 850px) {
|
||||
&:hover {
|
||||
color: rgba(204, 204, 204, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#navigation-link-active {
|
||||
font-size: 30px;
|
||||
line-height: 71px;
|
||||
padding-top: 5px;
|
||||
text-transform: uppercase;
|
||||
margin-left: 30px;
|
||||
text-decoration: none;
|
||||
border-bottom: 3px solid #ccc;
|
||||
|
||||
color: rgba(204, 204, 204, 1);
|
||||
|
||||
transition: color 0.3s;
|
||||
|
||||
@media (min-width: 850px) {
|
||||
&:hover {
|
||||
color: rgba(204, 204, 204, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Hero */
|
||||
#first-container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
padding: 80px 30px 0;
|
||||
width: 100%;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
@media (max-width: 850px) {
|
||||
padding-top: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
#first-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(100vw - 60px);
|
||||
min-height: calc(80vh - 80px);
|
||||
box-sizing: border-box;
|
||||
padding: 60px 0 50px 0;
|
||||
|
||||
@media (max-width: 850px) {
|
||||
min-height: calc(100vh - 170px);
|
||||
}
|
||||
}
|
||||
|
||||
#first-title {
|
||||
line-height: calc(100vw / 23);
|
||||
font-size: calc(100vw / 30);
|
||||
text-transform: uppercase;
|
||||
|
||||
background-size: 100%;
|
||||
background-repeat: repeat;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-image: linear-gradient(55deg, rgb(255, 255, 255) 20%, rgba(245, 192, 192, 0.8) 100%);
|
||||
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media (max-width: 850px) {
|
||||
max-width: 100%;
|
||||
line-height: 33px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Наши особенности */
|
||||
#what-container {
|
||||
border-top: 1px solid #CCCCCC;
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: var(--primary-color);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#what-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
width: calc(100vw - 60px);
|
||||
min-height: inherit;
|
||||
box-sizing: border-box;
|
||||
padding: 50px 0;
|
||||
|
||||
@media (max-width: 850px) {
|
||||
min-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
#what-title {
|
||||
line-height: 40px;
|
||||
font-size: xx-large;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: var(--primary-text-color);
|
||||
|
||||
mix-blend-mode: normal;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#what-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.block-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
background: var(--primary-color);
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 60px;
|
||||
|
||||
@media (max-width: 850px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.block-title {
|
||||
max-width: 200px;
|
||||
min-height: 80px;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
text-transform: uppercase;
|
||||
color: var(--primary-text-color);
|
||||
margin-bottom: 15px;
|
||||
margin-right: 200px;
|
||||
}
|
||||
|
||||
.block-text {
|
||||
max-width: 450px;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
padding-right: 50px;
|
||||
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Нам доверяют */
|
||||
#trusted-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#trusted-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
width: calc(100vw - 60px);
|
||||
min-height: calc(100vh - 80px);
|
||||
border-top: 1px solid #CCCCCC;
|
||||
box-sizing: border-box;
|
||||
padding: 50px 0;
|
||||
|
||||
@media (max-width: 850px) {
|
||||
min-height: calc(100vh - 170px);
|
||||
}
|
||||
}
|
||||
|
||||
#trusted-title {
|
||||
line-height: 40px;
|
||||
font-size: 30px;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: #cccccc;
|
||||
|
||||
mix-blend-mode: normal;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#trusted-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.trusted-block {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 25%;
|
||||
flex-shrink: 0;
|
||||
padding: 30px 0 90px;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
border: 1px solid #CCCCCC;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
#footer-title {
|
||||
line-height: 40px;
|
||||
font-size: 30px;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: #cccccc;
|
||||
|
||||
mix-blend-mode: normal;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#footer-link {
|
||||
position: relative;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 30px;
|
||||
text-decoration-line: underline;
|
||||
|
||||
color: #CCCCCC;
|
||||
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
right: -35px;
|
||||
top: 10px;
|
||||
width: 20px;
|
||||
height: 25px;
|
||||
background: url("./svg/Arrow.svg") no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Projects */
|
||||
#projects-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
padding-top: 80px;
|
||||
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 850px) {
|
||||
padding-top: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
#projects-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
width: calc(100vw - 60px);
|
||||
min-height: calc(100vh - 80px);
|
||||
box-sizing: border-box;
|
||||
padding: 50px 0;
|
||||
|
||||
@media (max-width: 850px) {
|
||||
min-height: calc(100vh - 170px);
|
||||
}
|
||||
}
|
||||
|
||||
#projects-title {
|
||||
line-height: 40px;
|
||||
font-size: xx-large;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: #cccccc;
|
||||
|
||||
mix-blend-mode: normal;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#projects-content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
|
||||
.project-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: calc(33% - 15px);
|
||||
height: auto;
|
||||
margin-bottom: 30px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
width: calc(50% - 15px);
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
width: 100%;
|
||||
|
||||
:before {
|
||||
background-blend-mode: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-image {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
transition: background-color 0.3s;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-blend-mode: luminosity;
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project-title .project-arrow {
|
||||
display: block;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
margin: 0 10px 3px;
|
||||
background: url("./svg/Arrow_to_bottom.svg") no-repeat center;
|
||||
background-size: contain;
|
||||
transform: rotate(-90deg);
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
|
||||
.project-container:hover .project-title {
|
||||
backdrop-filter: invert(0.4);
|
||||
}
|
||||
|
||||
.project-container:hover .project-arrow {
|
||||
transform: rotate(-90deg) translateY(10px);
|
||||
}
|
||||
|
||||
.project-title {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
/* left: 50%; */
|
||||
/* transform: translate(-50%, -50%); */
|
||||
width: 100%;
|
||||
backdrop-filter: invert(0.7);
|
||||
font-size: 30px;
|
||||
line-height: 37px;
|
||||
transition: backdrop-filter 0.5s;
|
||||
height: 3em;
|
||||
|
||||
|
||||
text-transform: uppercase;
|
||||
/* padding-left: 25px; */
|
||||
align-items: center;
|
||||
|
||||
color: var(--primary-text-color);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project-title span {
|
||||
display: flex;
|
||||
margin: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.project-text {
|
||||
font-size: 28px;
|
||||
line-height: 37px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
/* Contacts */
|
||||
.contacts-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 80px);
|
||||
padding: 110px 30px 0;
|
||||
background: var(--primary-color);
|
||||
color: var(--primary-text-color);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
@media (max-width: 850px) {
|
||||
padding-top: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
.contacts-main {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 50px;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.contacts-content {
|
||||
width: 33%;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
width: 50%;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
width: 100%;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.contacts-title {
|
||||
line-height: 40px;
|
||||
font-size: 30px;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: #cccccc;
|
||||
|
||||
mix-blend-mode: normal;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.contacts-text {
|
||||
width: 320px;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
|
||||
color: #CCCCCC;
|
||||
|
||||
mix-blend-mode: normal;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.contacts-link {
|
||||
position: relative;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 30px;
|
||||
text-decoration-line: underline;
|
||||
|
||||
color: #cccccc;
|
||||
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
After Width: | Height: | Size: 535 B |
|
After Width: | Height: | Size: 525 B |
|
After Width: | Height: | Size: 3.3 KiB |
Loading…
Reference in new issue