Spaces:
Running
Running
Update index.html
Browse files- index.html +10 -15
index.html
CHANGED
|
@@ -19,6 +19,7 @@
|
|
| 19 |
font-weight: bold;
|
| 20 |
margin: 20px 0;
|
| 21 |
color: #000;
|
|
|
|
| 22 |
}
|
| 23 |
.logos {
|
| 24 |
display: flex;
|
|
@@ -42,17 +43,18 @@
|
|
| 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:
|
| 56 |
width: 10px;
|
| 57 |
height: 10px;
|
| 58 |
background-color: #ccc;
|
|
@@ -61,28 +63,21 @@
|
|
| 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>
|
|
|
|
| 19 |
font-weight: bold;
|
| 20 |
margin: 20px 0;
|
| 21 |
color: #000;
|
| 22 |
+
text-align: center;
|
| 23 |
}
|
| 24 |
.logos {
|
| 25 |
display: flex;
|
|
|
|
| 43 |
}
|
| 44 |
.dot {
|
| 45 |
position: absolute;
|
| 46 |
+
top: 15px; /* Adjusted to align with the line's center */
|
| 47 |
width: 20px;
|
| 48 |
height: 20px;
|
| 49 |
background-color: #333;
|
| 50 |
border-radius: 50%;
|
| 51 |
cursor: pointer;
|
| 52 |
transition: left 0.3s ease;
|
| 53 |
+
left: 0%; /* Start at the first position */
|
| 54 |
}
|
| 55 |
.position {
|
| 56 |
position: absolute;
|
| 57 |
+
top: 20px; /* Adjusted to be on the line */
|
| 58 |
width: 10px;
|
| 59 |
height: 10px;
|
| 60 |
background-color: #ccc;
|
|
|
|
| 63 |
#pos1 { left: 0%; }
|
| 64 |
#pos2 { left: 33%; }
|
| 65 |
#pos3 { left: 66%; }
|
| 66 |
+
#pos4 { left: 100%; margin-left: -5px; } /* Adjust for end alignment */
|
| 67 |
</style>
|
| 68 |
</head>
|
| 69 |
<body>
|
| 70 |
<h1>Mandate of Heaven<br>Mandate of Heaven</h1>
|
| 71 |
<div class="logos">
|
| 72 |
+
<!-- Real Images or SVGs -->
|
| 73 |
+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/120px-Google_%22G%22_Logo.svg.png" alt="Google" class="logo">
|
| 74 |
+
<img src="https://www.anthropic.com/favicon.ico" alt="Anthropic" class="logo" style="width: 50px; height: 50px;">
|
| 75 |
+
<img src="https://x.ai/favicon.ico" alt="xAI" class="logo" style="width: 50px; height: 50px;">
|
| 76 |
+
<!-- SVG for the first logo (placeholder) -->
|
| 77 |
<svg class="logo" viewBox="0 0 100 100">
|
| 78 |
<circle cx="50" cy="50" r="40" fill="none" stroke="#000" stroke-width="10"/>
|
| 79 |
<path d="M30 30 L70 70 M70 30 L30 70" stroke="#000" stroke-width="10"/>
|
| 80 |
</svg>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 81 |
</div>
|
| 82 |
<div class="timeline">
|
| 83 |
<div class="line"></div>
|