Hugging Face's logo

Spaces:
broadfield-dev
/
real-app
Running

App Files Community
broadfield-dev commited on
Commit
5c6f850
·
verified ·
1 Parent(s): 1294069

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +42 -16
index.html CHANGED
@@ -10,12 +10,20 @@
10
  display: flex;
11
  flex-direction: column;
12
  align-items: center;
13
- background-color: #f9f9f9;
 
 
 
 
 
 
 
 
14
  }
15
  .logos {
16
  display: flex;
17
- gap: 20px;
18
- margin: 20px 0;
19
  }
20
  .logo {
21
  width: 50px;
@@ -23,48 +31,66 @@
23
  }
24
  .timeline {
25
  position: relative;
26
- width: 300px;
27
- height: 50px;
28
  }
29
  .line {
30
  position: absolute;
31
- top: 20px;
32
  width: 100%;
33
  border-top: 2px dashed #ccc;
34
  }
35
  .dot {
36
  position: absolute;
37
- top: 10px;
38
  width: 20px;
39
  height: 20px;
40
  background-color: #333;
41
  border-radius: 50%;
42
  cursor: pointer;
 
43
  }
44
  .position {
45
  position: absolute;
46
- top: 30px;
47
  width: 10px;
48
  height: 10px;
49
  background-color: #ccc;
50
  border-radius: 50%;
51
  }
 
 
 
 
52
  </style>
53
  </head>
54
  <body>
55
- <h1>Mandate of Heaven</h1>
56
  <div class="logos">
57
- <img src="https://via.placeholder.com/50?text=Logo1" alt="Logo 1" class="logo">
58
- <img src="https://via.placeholder.com/50?text=Google" alt="Google" class="logo">
59
- <img src="https://via.placeholder.com/50?text=Anthropic" alt="Anthropic" class="logo">
60
- <img src="https://via.placeholder.com/50?text=xAI" alt="xAI" class="logo">
 
 
 
 
 
 
 
 
 
 
 
 
61
  </div>
62
  <div class="timeline">
63
  <div class="line"></div>
64
  <div class="dot" id="movingDot" onclick="moveDot()"></div>
65
- <div class="position" style="left: 33%;"></div>
66
- <div class="position" style="left: 66%;"></div>
67
- <div class="position" style="left: 100%;"></div>
 
68
  </div>
69
 
70
  <script>
 
10
  display: flex;
11
  flex-direction: column;
12
  align-items: center;
13
+ background-color: #fff;
14
+ margin: 0;
15
+ padding: 20px;
16
+ }
17
+ h1 {
18
+ font-size: 36px;
19
+ font-weight: bold;
20
+ margin: 20px 0;
21
+ color: #000;
22
  }
23
  .logos {
24
  display: flex;
25
+ gap: 30px;
26
+ margin-bottom: 40px;
27
  }
28
  .logo {
29
  width: 50px;
 
31
  }
32
  .timeline {
33
  position: relative;
34
+ width: 400px;
35
+ height: 60px;
36
  }
37
  .line {
38
  position: absolute;
39
+ top: 25px;
40
  width: 100%;
41
  border-top: 2px dashed #ccc;
42
  }
43
  .dot {
44
  position: absolute;
45
+ top: 15px;
46
  width: 20px;
47
  height: 20px;
48
  background-color: #333;
49
  border-radius: 50%;
50
  cursor: pointer;
51
+ transition: left 0.3s ease;
52
  }
53
  .position {
54
  position: absolute;
55
+ top: 35px;
56
  width: 10px;
57
  height: 10px;
58
  background-color: #ccc;
59
  border-radius: 50%;
60
  }
61
+ #pos1 { left: 0%; }
62
+ #pos2 { left: 33%; }
63
+ #pos3 { left: 66%; }
64
+ #pos4 { left: 100%; }
65
  </style>
66
  </head>
67
  <body>
68
+ <h1>Mandate of Heaven<br>Mandate of Heaven</h1>
69
  <div class="logos">
70
+ <svg class="logo" viewBox="0 0 100 100">
71
+ <circle cx="50" cy="50" r="40" fill="none" stroke="#000" stroke-width="10"/>
72
+ <path d="M30 30 L70 70 M70 30 L30 70" stroke="#000" stroke-width="10"/>
73
+ </svg>
74
+ <svg class="logo" viewBox="0 0 100 100">
75
+ <rect x="10" y="10" width="80" height="80" fill="#008744"/>
76
+ <rect x="20" y="20" width="60" height="60" fill="#0057e7"/>
77
+ <rect x="30" y="30" width="40" height="40" fill="#d62d20"/>
78
+ <rect x="40" y="40" width="20" height="20" fill="#ffa700"/>
79
+ </svg>
80
+ <svg class="logo" viewBox="0 0 100 100">
81
+ <text x="10" y="60" font-size="40" fill="#000">A</text>
82
+ </svg>
83
+ <svg class="logo" viewBox="0 0 100 100">
84
+ <text x="10" y="60" font-size="40" fill="#000">xAI</text>
85
+ </svg>
86
  </div>
87
  <div class="timeline">
88
  <div class="line"></div>
89
  <div class="dot" id="movingDot" onclick="moveDot()"></div>
90
+ <div class="position" id="pos1"></div>
91
+ <div class="position" id="pos2"></div>
92
+ <div class="position" id="pos3"></div>
93
+ <div class="position" id="pos4"></div>
94
  </div>
95
 
96
  <script>