|
Резиновый Grid
#39582790
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
|
бухалтер фантоцци, находится сайт у меня на локальном сервере... Поэтому
---HTML---
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<body>
<header>
<div id="hellopreloader_preload"></div>
<div id="logo_name">MAX PLOTITSYN</div>
<div id="copyright">Made with love by Me</div>
</header>
<main>
<div id="my_name">Max Pløtitsyn</div>
<div id="description">
<p>Работаю с любыми рекламными бюджетами в том числе и минимальными. Достаточно большой опыт в контекстной рекламе.
Никаких шаблонов - персональный подход к каждому проекту.</p>
<p>Создание, настройка, внедрение и сопровождение рекламных кампаний Facebook, Instagram и Google.</p>
</div>
<div class="button draw" id="tr_html">HTML</div>
<div class="button draw" id="tr_css">CSS</div>
<div class="button draw " id="tr_js">JS</div>
<div class="button draw" id="tr_seo">SEO</div>
<div class="button draw" id="tr_smm">SMM</div>
<div class="button draw" id="tr_cms">CMS</div>
<div class="button draw" id="tr_skype">tarantayka.max</div>
<div class="button draw" id="tr_telegram">tArAntAykA</div>
<div class="button draw" id="tr_facebook">Max Plotitsyn</div>
<div class="button draw" id="tr_email">plotitsyn.max@gmail.com<;/div>
</main>
<footer>
</footer>
<script src="js/index.js"></script>
</body>
---СSS---
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
@import url('https://fonts.googleapis.com/css?family=Roboto|Oswald');
/* @import url('https://fonts.googleapis.com/css?family=Oswald'); */
html::before {
content: '';
background: url(../images/portret_crop2.jpg) no-repeat center center fixed;
background-size: cover;
height: 100vh;
position: fixed;
width: 100%;
z-index: -2;
}
#hellopreloader_preload {
display: block;
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 1000px;
background: #000000 url(http://hello-site.ru//main/images/preloads/bars.svg) center center no-repeat;
background-size: 85px;
}
body {
margin: auto;
font-family: 'Roboto';
}
header {
display: flex;
justify-content: space-between;
background-color: rgba(167, 167, 167, 0.2);
font-family: 'Roboto', sans-serif;
}
#logo_name {
padding-left: 50px;
padding-top: 10px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
#logo_name:hover {
color: #800000;
transition-duration: 500ms;
cursor: pointer;
}
#copyright {
padding-right: 50px;
padding-top: 10px;
font-size: 16px;
font-weight: bold;
color: white;
}
#copyright:hover {
cursor: pointer;
}
main {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-gap: 1rem;
color: white;
}
#my_name {
display: flex;
justify-content: center;
align-items: center;
font-size: 75px;
font-weight: bold;
font-family: 'Oswald';
grid-column: 4 / 6;
grid-row: 2;
}
#description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 5px;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
text-align: center;
grid-column: 4 / 6;
grid-row: 3 / span 3;
/* background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fff;
border: 6px solid #171717; */
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#description p {
font-size: 22px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
width: 100%;
padding: 5px;
}
#tr_html {
display: flex;
justify-content: center;
align-items: center;
/* background-color: rgb(255, 255, 255); */
/* height: 5em; */
text-align: center;
grid-column: 7;
grid-row: 1;
cursor: pointer;
}
#tr_css {
display: flex;
justify-content: center;
align-items: center;
/* border: 1px solid white; */
/* background-color: rgb(255, 255, 255); */
/* height: 5em; */
text-align: center;
grid-column: 7;
grid-row: 2;
cursor: pointer;
}
#tr_js {
display: flex;
justify-content: center;
align-items: center;
/* border: 1px solid white; */
/* background-color: rgb(255, 255, 255); */
/* height: 5em; */
text-align: center;
grid-column: 7;
grid-row: 3;
cursor: pointer;
}
#tr_smm {
display: flex;
justify-content: center;
align-items: center;
/* border: 1px solid white; */
/* background-color: rgb(255, 255, 255); */
/* height: 5em; */
text-align: center;
grid-column: 7;
grid-row: 4;
cursor: pointer;
}
#tr_seo {
display: flex;
justify-content: center;
align-items: center;
/* border: 1px solid white; */
/* background-color: rgb(255, 255, 255); */
/* height: 5em; */
text-align: center;
grid-column: 7;
grid-row: 5;
cursor: pointer;
}
#tr_cms {
display: flex;
justify-content: center;
align-items: center;
/* border: 1px solid white; */
/* background-color: rgb(255, 255, 255); */
/* height: 5em; */
text-align: center;
grid-column: 7;
grid-row: 6;
cursor: pointer;
}
#tr_skype {
display: flex;
justify-content: center;
align-items: center;
/* border: 1px solid white; */
/* background-color: rgb(255, 255, 255); */
/* height: 5em; */
text-align: center;
grid-column: 3;
grid-row: 7;
}
#tr_telegram {
display: flex;
justify-content: center;
align-items: center;
/* border: 1px solid white; */
/* background-color: rgb(255, 255, 255); */
/* height: 5em; */
text-align: center;
grid-column: 4;
grid-row: 7;
}
#tr_facebook {
display: flex;
justify-content: center;
align-items: center;
/* border: 1px solid white; */
/* background-color: rgb(255, 255, 255); */
/* height: 5em; */
text-align: center;
grid-column: 5;
grid-row: 7;
}
#tr_email {
display: flex;
justify-content: center;
align-items: center;
/* border: 1px solid white; */
/* background-color: rgb(255, 255, 255); */
/* height: 5em; */
text-align: center;
grid-column: 6;
grid-row: 7;
}
.button {
background: none;
/* -webkit-box-sizing: border-box; */
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
-webkit-box-shadow: inset 0 0 0 1px #171A27;
box-shadow: inset 0 0 0 1px #171A27;
color: #ffffff;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
cursor: pointer;
}
.button::before,
.button::after {
/* -webkit-box-sizing: inherit; */
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.draw {
/* -webkit-transition: color 0.25s; */
transition: color 0.25s;
}
.draw::before,
.draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover {
color: #60daaa;
}
.draw:hover::before,
.draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #434857;
border-right-color: #434857;
/* -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; */
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #434857;
border-left-color: #434857;
/* -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; */
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
---JS---
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
var hellopreloader = document.getElementById("hellopreloader_preload");
function fadeOutnojquery(el) {
el.style.opacity = 1;
var interhellopreloader = setInterval(function () {
el.style.opacity = el.style.opacity - 0.05;
if (el.style.opacity <= 0.05) {
clearInterval(interhellopreloader);
hellopreloader.style.display = "none";
}
}, 16);
}
window.onload = function () {
setTimeout(function () {
fadeOutnojquery(hellopreloader);
}, 2500);
};
|
|
|
