|
| 1 | +<html> |
| 2 | +<head> |
| 3 | + <link href="https://fonts.googleapis.com/css?family=Teko:300,400,500,600,700" rel="stylesheet"> |
| 4 | + <link rel="stylesheet" type="text/css" href="css/styles.min.css"> |
| 5 | +</head> |
| 6 | + |
| 7 | +<body> |
| 8 | + <svg class="svg-definitions"> |
| 9 | + <defs> |
| 10 | + <clipPath id="tshirt"> |
| 11 | + <path d="M121.836,61.831c0,0,14.031-11.348,28.164-15.681c-5.57-10.729-17.95-33.528-17.95-33.528 |
| 12 | + s-25.104-6.423-36.871-9.582C93.298,0.009,88.843,0,87.073,0c-1.908,0-4.065,0.167-6.152,0.332C78.887,0.49,76.782,0.654,75,0.654 |
| 13 | + s-3.887-0.164-5.921-0.323C66.991,0.167,64.834,0,62.927,0c-1.769,0-6.225,0.009-8.105,3.04c-11.768,3.16-36.871,9.582-36.871,9.582 |
| 14 | + S5.571,35.42,0,46.149c14.134,4.333,28.164,15.681,28.164,15.681l5.57-11.348c5.056,43.985,0.705,92.38-0.035,99.942 |
| 15 | + C34.697,150.895,43.371,155,75,155c31.629,0,40.303-4.105,41.301-4.575c-0.74-7.562-5.09-55.957-0.035-99.942L121.836,61.831z"/> |
| 16 | + <!-- path d="M243.673,123.661c0,0,28.061-22.696,56.327-31.362c-11.141-21.458-35.901-67.057-35.901-67.057 |
| 17 | + s-50.206-12.845-73.741-19.164C186.596,0.018,177.685,0,174.146,0c-3.815,0-8.13,0.335-12.304,0.663 |
| 18 | + C157.774,0.98,153.565,1.309,150,1.309s-7.773-0.329-11.843-0.646C133.983,0.335,129.669,0,125.854,0 |
| 19 | + c-3.538,0-12.45,0.018-16.211,6.079c-23.536,6.319-73.742,19.164-73.742,19.164S11.142,70.841,0,92.299 |
| 20 | + c28.267,8.666,56.327,31.362,56.327,31.362l11.141-22.696c10.112,87.971,1.409,184.759-0.069,199.884 |
| 21 | + C69.395,301.79,86.742,310,150,310c63.259,0,80.606-8.21,82.601-9.151c-1.479-15.125-10.18-111.913-0.07-199.884L243.673,123.661z"/ --> |
| 22 | + </clipPath> |
| 23 | + <clipPath id="arms"> |
| 24 | + <path d="M150,46.149c-5.57-10.729-17.95-33.528-17.95-33.528s-12.07,15.578-15.784,37.861l5.571,11.348 |
| 25 | + C121.836,61.831,135.867,50.482,150,46.149z"/> |
| 26 | + <path d="M0,46.149c14.134,4.333,28.164,15.681,28.164,15.681l5.57-11.348C30.021,28.199,17.95,12.622,17.95,12.622 |
| 27 | + S5.571,35.42,0,46.149z"/> |
| 28 | + <!-- path d="M300,92.299c-11.141-21.458-35.901-67.057-35.901-67.057s-24.14,31.156-31.568,75.722l11.142,22.696 |
| 29 | + C243.673,123.661,271.734,100.965,300,92.299z"/> |
| 30 | + <path d="M0,92.299c28.267,8.666,56.327,31.362,56.327,31.362l11.141-22.696 |
| 31 | + c-7.427-44.566-31.567-75.722-31.567-75.722S11.142,70.841,0,92.299z"/ --> |
| 32 | + </clipPath> |
| 33 | + <clipPath id="neck"> |
| 34 | + <path d="M92.538,5.091C91.3,1.893,81.706,4,75,4S58.7,1.893,57.462,5.091C56.224,8.289,65.199,19,75,19 |
| 35 | + S93.776,8.289,92.538,5.091z"/> |
| 36 | + <!-- path d="M185.075,10.181C182.6,3.785,163.411,8,150,8s-32.6-4.215-35.075,2.181C112.448,16.577,130.398,38,150,38 |
| 37 | + S187.552,16.577,185.075,10.181z"/ --> |
| 38 | + </clipPath> |
| 39 | + </defs> |
| 40 | + </svg> |
| 41 | + |
| 42 | + <main> |
| 43 | + <h1>Argentina</h1> |
| 44 | + <h2>Primera División 2017</h2> |
| 45 | + <div class="jersey" id="aldosivi" data-name="Aldosivi"></div> |
| 46 | + <div class="jersey" id="argentinos" data-name="Argentinos Juniors"></div> |
| 47 | + <div class="jersey" id="arsenal" data-name="Arsenal"></div> |
| 48 | + <div class="jersey" id="rafaela" data-name="Atlético de Rafaela"></div> |
| 49 | + <div class="jersey" id="atletico" data-name="Atlético Tucumán"></div> |
| 50 | + <div class="jersey" id="banfield" data-name="Banfield"></div> |
| 51 | + <div class="jersey" id="belgrano" data-name="Belgrano"></div> |
| 52 | + <div class="jersey" id="boca" data-name="Boca Juniors"></div> |
| 53 | + <div class="jersey" id="chacarita" data-name="Chacarita Juniors"></div> |
| 54 | + <div class="jersey" id="colon" data-name="Colón"></div> |
| 55 | + <div class="jersey" id="defensa" data-name="Defensa y Justicia"></div> |
| 56 | + <div class="jersey" id="estudiantes" data-name="Estudiantes de La Plata"></div> |
| 57 | + <div class="jersey" id="gimnasia" data-name="Gimnasia y Esgrima"></div> |
| 58 | + <div class="jersey" id="godoycruz" data-name="Godoy Cruz"></div> |
| 59 | + <div class="jersey" id="brown" data-name="Guillermo Brown"></div> |
| 60 | + <div class="jersey" id="huracan" data-name="Huracán"></div> |
| 61 | + <div class="jersey" id="independiente" data-name="Independiente"></div> |
| 62 | + <div class="jersey" id="lanus" data-name="Lanús"></div> |
| 63 | + <div class="jersey" id="newells" data-name="Newell's Old Boys"></div> |
| 64 | + <div class="jersey" id="olimpo" data-name="Olimpo"></div> |
| 65 | + <div class="jersey" id="patronato" data-name="Patronato"></div> |
| 66 | + <div class="jersey" id="quilmes" data-name="Quilmes"></div> |
| 67 | + <div class="jersey" id="racing" data-name="Racing"></div> |
| 68 | + <div class="jersey" id="river" data-name="River Plate"></div> |
| 69 | + <div class="jersey" id="central" data-name="Rosario Central"></div> |
| 70 | + <div class="jersey" id="sanlorenzo" data-name="San Lorenzo"></div> |
| 71 | + <div class="jersey" id="sanmartin" data-name="San Martín"></div> |
| 72 | + <div class="jersey" id="sarmiento" data-name="Sarmiento"></div> |
| 73 | + <div class="jersey" id="talleres" data-name="Talleres"></div> |
| 74 | + <div class="jersey" id="temperley" data-name="Temperley"></div> |
| 75 | + <div class="jersey" id="tigre" data-name="Tigre"></div> |
| 76 | + <div class="jersey" id="union" data-name="Unión"></div> |
| 77 | + <div class="jersey" id="velez" data-name="Velez Sarsfield"></div> |
| 78 | + </main> |
| 79 | + |
| 80 | + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
| 81 | + <script type="text/javascript"> |
| 82 | + $(document).ready(function (){ |
| 83 | + function setNamesPosition(){ |
| 84 | + $('.name').remove(); |
| 85 | + $('.jersey').each(function(){ |
| 86 | + offset = $(this).offset(); |
| 87 | + $(this).before( '<div class="name" style="top: '+offset.top+'; left: '+offset.left+';">'+$(this).data('name')+'</div>' ); |
| 88 | + }); |
| 89 | + } |
| 90 | + setNamesPosition(); |
| 91 | + |
| 92 | + $('.jersey').mouseenter(function(){ |
| 93 | + $(this).prev().addClass('active'); |
| 94 | + }); |
| 95 | + |
| 96 | + $('.jersey').mouseleave(function(){ |
| 97 | + $(this).prev().removeClass('active'); |
| 98 | + }); |
| 99 | + |
| 100 | + $(window).resize(function(){ |
| 101 | + setNamesPosition(); |
| 102 | + }) |
| 103 | + }); |
| 104 | + </script> |
| 105 | +</body> |
0 commit comments