mirrors
/
codepens
1
Fork 0
Code Issues Pull Requests Releases Activity
codepens/stacking-cards/dist/index.html

235 lines
7.8 KiB
HTML
Raw Permalink Normal View History

init
2023-10-06 23:12:53 +02:00
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Stacking Cards</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="phone-frame">
<div class="phone-screen">
<div class="content">
<div class="list">
<svg class="golazo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 21" height="31.8" width="66">
<path d="M16.532 12.423H13.03v1.79h1.513v.775c-.138.138-.763.538-1.864.538-1.39 0-2.466-1-2.466-2.627 0-1.415.9-2.503 2.465-2.503 1.175 0 1.925.7 2.113.95l1.35-1.4c-.45-.564-1.5-1.527-3.564-1.527C9.85 8.42 8 10.434 8 12.936c0 2.815 2.052 4.567 4.53 4.567 2.013 0 3.076-.663 4.002-1.376zM22.01 17.503c2.765 0 4.592-1.977 4.592-4.554 0-2.54-1.827-4.53-4.592-4.53-2.764 0-4.59 1.99-4.59 4.53 0 2.576 1.826 4.553 4.59 4.553zm0-7.08c1.402 0 2.365 1.087 2.365 2.526 0 1.475-.976 2.55-2.365 2.55-1.388 0-2.364-1.075-2.364-2.55 0-1.44.963-2.528 2.364-2.528zM32.47 17.34v-1.914h-2.627V8.583h-2.14v8.757zM38.275 15.376l.626 1.964h2.152l-3.027-8.757h-2.252l-3.027 8.757h2.15l.627-1.964zm-.55-1.752h-1.652l.826-2.777zM48.306 17.34v-1.89h-3.954l3.916-5.516v-1.35h-6.655v1.888h3.778l-3.877 5.504v1.364zM53.41 17.503c2.763 0 4.59-1.977 4.59-4.554 0-2.54-1.827-4.53-4.59-4.53-2.766 0-4.593 1.99-4.593 4.53 0 2.576 1.827 4.553 4.592 4.553zm0-7.08c1.4 0 2.363 1.087 2.363 2.526 0 1.475-.976 2.55-2.364 2.55-1.39 0-2.366-1.075-2.366-2.55 0-1.44.963-2.528 2.365-2.528z" />
<path d="M3 18.94V3h60v15.94" fill="none" stroke="#000" stroke-width="2" />
</svg>
<p>
Lorem FC scores two in four-four-two, goal saved by center-half
goalie. Pass the ball striker scores hat-trick and knocks referee
over in one-two UEFA game.
</p>
<div class="ads">Ads by Annoying Ads Inc.</div>
<div class="matches">
<div class="matches-title">MATCHES</div>
<div class="top-filler"></div>
<div class="cards">
<div class="card">
<div class="match">
AIK
<div class="crest aik"></div>
<span class="divider">-</span>BKH
<div class="crest bkh"></div>
</div>
<div class="result">1 - 1</div>
</div>
<div class="card">
<div class="match">
MFF
<div class="crest mff"></div>
<span class="divider">-</span>IFK
<div class="crest ifk"></div>
</div>
<div class="result">2 - 0</div>
</div>
<div class="card">
<div class="match">
KFF
<div class="crest kff"></div>
<span class="divider">-</span>IFE
<div class="crest ife"></div>
</div>
<div class="result">1 - 0</div>
</div>
<div class="card">
<div class="match">
NOR
<div class="crest nor"></div>
<span class="divider">-</span>DFF
<div class="crest dff"></div>
</div>
<div class="result">1 - 3</div>
</div>
<div class="card">
<div class="match">
HIF
<div class="crest hif"></div>
<span class="divider">-</span>DIF
<div class="crest dif"></div>
</div>
<div class="result">2 - 2</div>
</div>
</div>
</div>
<div class="title">TABLE</div>
<table class="standings">
<thead>
<th>#</th>
<th>Team</th>
<th>MP</th>
<th>W</th>
<th>D</th>
<th>L</th>
<th>P</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<div class="team">
<div class="crest crest-inline mff"></div>
<div class="team-name">Malmö FF</div>
</div>
</td>
<td>30</td>
<td>17</td>
<td>9</td>
<td>4</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>
<div class="team">
<div class="crest crest-inline ife"></div>
<div class="team-name">Elfsborg</div>
</div>
</td>
<td>30</td>
<td>12</td>
<td>15</td>
<td>3</td>
<td>51</td>
</tr>
<tr>
<td>3</td>
<td>
<div class="team">
<div class="crest crest-inline bkh"></div>
<div class="team-name">Häcken</div>
</div>
</td>
<td>30</td>
<td>12</td>
<td>13</td>
<td>5</td>
<td>49</td>
</tr>
<tr>
<td>4</td>
<td>
<div class="team">
<div class="crest crest-inline dif"></div>
<div class="team-name">Djurgården</div>
</div>
</td>
<td>30</td>
<td>14</td>
<td>6</td>
<td>10</td>
<td>48</td>
</tr>
<tr>
<td>5</td>
<td>
<div class="team">
<div class="crest crest-inline maif"></div>
<div class="team-name">Mjällby</div>
</div>
</td>
<td>30</td>
<td>13</td>
<td>8</td>
<td>9</td>
<td>47</td>
</tr>
<tr>
<td>6</td>
<td>
<div class="team">
<div class="crest crest-inline nor"></div>
<div class="team-name">Norrköping</div>
</div>
</td>
<td>30</td>
<td>13</td>
<td>7</td>
<td>10</td>
<td>46</td>
</tr>
<tr>
<td>7</td>
<td>
<div class="team">
<div class="crest crest-inline ösk"></div>
<div class="team-name">Örebro</div>
</div>
</td>
<td>30</td>
<td>12</td>
<td>6</td>
<td>12</td>
<td>42</td>
</tr>
<tr>
<td>8</td>
<td>
<div class="team">
<div class="crest crest-inline hif"></div>
<div class="team-name">Hammarby</div>
</div>
</td>
<td>30</td>
<td>10</td>
<td>11</td>
<td>9</td>
<td>41</td>
</tr>
<tr>
<td>9</td>
<td>
<div class="team">
<div class="crest crest-inline iks"></div>
<div class="team-name">Sirius</div>
</div>
</td>
<td>30</td>
<td>9</td>
<td>11</td>
<td>10</td>
<td>38</td>
</tr>
</tbody>
</table>
<div class="title">NEWS</div>
<li><a href="#">Ipsum United winger sings new deal</a></li>
<li><a href="#">3 red and 4 yellow cards in one game</a></li>
<ul></ul>
<div class="title">STATS</div>
...
<div class="bottom-filler"></div>
</div>
<div class="nav"></div>
</div>
</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>