Hugging Face's logo

Spaces:
chartManD
/
turitezo
Sleeping

App Files Community
chartManD commited on
Commit
c4f6f92
·
1 Parent(s): e42ae37

Make responsive the index page

Browse files
Files changed (2) hide show
  1. public/css/main.css +30 -8
  2. public/index.php +3 -0
public/css/main.css CHANGED
@@ -6,14 +6,12 @@
6
 
7
  body {
8
  overflow: hidden;
9
- min-height: 100vh;
10
- min-width: 100vh;
11
  display: flex;
12
  align-items: center;
13
  justify-content: center;
14
- background-image: url("https://images.adsttc.com/media/images/5f2d/9c64/b357/65a1/9700/00ad/newsletter/06_(1).jpg?1596824644");
15
- background-size: cover;
16
- background-position: top;
17
  }
18
 
19
  h1 {
@@ -21,12 +19,36 @@ h1 {
21
  color: #ffffff;
22
  }
23
 
 
 
 
 
 
24
 
25
- span {
26
- font-size: 6rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  }
28
 
29
- .fond{
30
  height: 100%;
31
  width: 100%;
32
  position: absolute;
 
6
 
7
  body {
8
  overflow: hidden;
9
+ height: 100vh;
10
+ width: 100vw;
11
  display: flex;
12
  align-items: center;
13
  justify-content: center;
14
+ background-color: white;
 
 
15
  }
16
 
17
  h1 {
 
19
  color: #ffffff;
20
  }
21
 
22
+ @media (max-width: 670px) {
23
+ h1 {
24
+ font-size: 4rem;
25
+ }
26
+ }
27
 
28
+ @media (max-width: 500px) {
29
+ h1 {
30
+ font-size: 2rem;
31
+ }
32
+ }
33
+
34
+ @media (max-width: 375px) {
35
+ h1 {
36
+ font-size: 1.5rem;
37
+ }
38
+ }
39
+
40
+ img {
41
+ height: 100vh;
42
+ width: 100vw;
43
+ object-fit: cover;
44
+ object-position: top;
45
+ }
46
+
47
+ .image-fond{
48
+ position: absolute;
49
  }
50
 
51
+ .fond {
52
  height: 100%;
53
  width: 100%;
54
  position: absolute;
public/index.php CHANGED
@@ -10,6 +10,9 @@
10
  </head>
11
 
12
  <body>
 
 
 
13
  <div class="fond"></div>
14
  <div class="content ani-bounce">
15
  <h1>TURITEZO</h1>
 
10
  </head>
11
 
12
  <body>
13
+ <div class="image-fond">
14
+ <img src="https://images.adsttc.com/media/images/5f2d/9c64/b357/65a1/9700/00ad/newsletter/06_(1).jpg?1596824644" alt="Un lugar en el tope de un cerro">
15
+ </div>
16
  <div class="fond"></div>
17
  <div class="content ani-bounce">
18
  <h1>TURITEZO</h1>