source: imaps-frontend/src/pages/IMaps/components/HeroSection.css

main
Last change on this file was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 1.1 KB
Line 
1video {
2 object-fit: cover;
3 width: 100%;
4 height: 100%;
5 position: fixed;
6 z-index: -1;
7}
8
9.hero-container {
10 background: url("../images/img-home.jpg") center center/cover no-repeat;
11 height: 100vh;
12 width: 100%;
13 display: flex;
14 flex-direction: column;
15 justify-content: center;
16 align-items: center;
17 box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
18 object-fit: contain;
19}
20
21.hero-container > h1 {
22 color: #fff;
23 font-size: 100px;
24 margin-top: -100px;
25}
26
27.hero-container > p {
28 margin-top: 8px;
29 color: #fff;
30 font-size: 32px;
31 font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
32}
33
34.hero-btns {
35 margin-top: 32px;
36}
37
38.hero-btns .btn {
39 margin: 6px;
40}
41
42.fa-play-circle {
43 margin-left: 4px;
44}
45
46@media screen and (max-width: 960px) {
47 .hero-container > h1 {
48 font-size: 70px;
49 margin-top: -150px;
50 }
51}
52
53@media screen and (max-width: 768px) {
54 .hero-container > h1 {
55 font-size: 50px;
56 margin-top: -100px;
57 }
58
59 .hero-container > p {
60 font-size: 30px;
61 }
62
63 .btn-mobile {
64 display: block;
65 text-decoration: none;
66 }
67
68 .btn {
69 width: 100%;
70 }
71}
Note: See TracBrowser for help on using the repository browser.