Arsenal vs Tottenham - Match Day 3
How do I make an arsenal vs tottenham - match day 3?
Last night result from the big North London derby match @ the Emirates.(via http://www.arsenalreport.com/). What is a arsenal vs tottenham - match day 3? How do you make a arsenal vs tottenham - match day 3? This script and codes were developed by Pankaj Parashar on 12 August 2022, Friday.
Arsenal vs Tottenham - Match Day 3 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Arsenal vs Tottenham - Match Day 3</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* zocial */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
body
{ font-family: "Titillium Web", "Lucida Grande", sans-serif; overflow: hidden;
}
#articleIntro
{ width: 1140px; height: 450px; margin: 50px auto; position: relative;
}
#articleIntro .homeTeamLogo, #articleIntro .awayTeamLogo
{ display: block; width: 170px; height: 170px; margin: 25px 0 0; position: absolute; z-index: 101;
}
#articleIntro .homeTeamLogo { left: 280px; }
#articleIntro .awayTeamLogo { right: 280px; }
.pitch {display: block;
width: 1023;
height: 283px;
margin: 0 auto;
padding-top: 156px;
background: url(http://www.arsenalreport.com/wp-content/themes/ar2013/img/pitch.png) center bottom no-repeat;
position: relative; z-index:-1;
}
#articleIntro .articleScore
{ width: 200px; position: absolute; top: 55px; left: 50%; margin-left: -100px; text-shadow: 1px 1px 10px #fff;
}
#articleIntro .articleScore h1
{ text-align: center; font-weight: 700; font-size: 85px; line-height: 0.3;
}
#articleIntro .articleScore span
{ font-size: 40px; line-height: 0; position: relative; top: -18px;
}
#articleIntro .highestRated
{ position: absolute; top: 80px; width: 270px; display: block; text-align: right; text-indent: 50px; background:rgba(255,255,255,.25);
}
#articleIntro .highestRated h2
{ font-size: 1em; line-height: 1; font-weight: 400;
}
.entypo-network { font-style: normal; font-size: .9em; color: #333; margin-right:5px;}
.entypo-clipboard {font-style: normal; font-size: .9em; color: #FFCF00; margin-right:5px; line-height:inherit}
#articleIntro .highestRatedHome h2 span { color:#c00;}
#articleIntro .highestRatedAway h2 span { color:#09c;}
#articleIntro .highestRatedAway
{ right: 0; text-indent: 0; text-align: left;
}
.animated
{ animation-duration: 2s; animation-fill-mode: both;
}
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0); }
}
.animated.fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown;
}
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); }
}
.animated.fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp;
}
@keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); }
}
.animated.bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft;
}
@keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); }
}
.animated.bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight;
}
@keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
.animated.flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX;
}
@keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateY(0); }
}
.animated.fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="articleIntro"> <div class="homeTeamLogo animated fadeInDown" style="background: url(http://www.arsenalreport.com/wp-content/themes/ar2013/img/logos/arsenal.png);"></div> <div class="awayTeamLogo animated fadeInDown" style="background: url(http://www.arsenalreport.com/wp-content/themes/ar2013/img/logos/tottenham.png);"></div> <div class="articleScore animated flipInX"><h1>1 <span>-</span> 0</h1></div> <div class="pitch animated fadeInUpBig"></div> <div class="highestRated highestRatedHome animated bounceInLeft"> <h2><i class="entypo-network"></i> Giroud <span>22'</span></h2> <h2><i class="entypo-clipboard"></i> Rosicky <span>34'</span> , Flamini <span>55'</span></h2> </div> <div class="highestRated highestRatedAway animated bounceInRight"> <h2><i class="entypo-clipboard"></i> Defoe <span>81'</span> , Dawson <span>90'</span></h2> </div>
</div>
</body>
</html>
Arsenal vs Tottenham - Match Day 3 - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* zocial */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
body
{ font-family: "Titillium Web", "Lucida Grande", sans-serif; overflow: hidden;
}
#articleIntro
{ width: 1140px; height: 450px; margin: 50px auto; position: relative;
}
#articleIntro .homeTeamLogo, #articleIntro .awayTeamLogo
{ display: block; width: 170px; height: 170px; margin: 25px 0 0; position: absolute; z-index: 101;
}
#articleIntro .homeTeamLogo { left: 280px; }
#articleIntro .awayTeamLogo { right: 280px; }
.pitch {display: block;
width: 1023;
height: 283px;
margin: 0 auto;
padding-top: 156px;
background: url(http://www.arsenalreport.com/wp-content/themes/ar2013/img/pitch.png) center bottom no-repeat;
position: relative; z-index:-1;
}
#articleIntro .articleScore
{ width: 200px; position: absolute; top: 55px; left: 50%; margin-left: -100px; text-shadow: 1px 1px 10px #fff;
}
#articleIntro .articleScore h1
{ text-align: center; font-weight: 700; font-size: 85px; line-height: 0.3;
}
#articleIntro .articleScore span
{ font-size: 40px; line-height: 0; position: relative; top: -18px;
}
#articleIntro .highestRated
{ position: absolute; top: 80px; width: 270px; display: block; text-align: right; text-indent: 50px; background:rgba(255,255,255,.25);
}
#articleIntro .highestRated h2
{ font-size: 1em; line-height: 1; font-weight: 400;
}
.entypo-network { font-style: normal; font-size: .9em; color: #333; margin-right:5px;}
.entypo-clipboard {font-style: normal; font-size: .9em; color: #FFCF00; margin-right:5px; line-height:inherit}
#articleIntro .highestRatedHome h2 span { color:#c00;}
#articleIntro .highestRatedAway h2 span { color:#09c;}
#articleIntro .highestRatedAway
{ right: 0; text-indent: 0; text-align: left;
}
.animated
{ animation-duration: 2s; animation-fill-mode: both;
}
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0); }
}
.animated.fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown;
}
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); }
}
.animated.fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp;
}
@keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); }
}
.animated.bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft;
}
@keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); }
}
.animated.bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight;
}
@keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
.animated.flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX;
}
@keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateY(0); }
}
.animated.fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig;
}
Developer | Pankaj Parashar |
Username | pankajparashar |
Uploaded | August 12, 2022 |
Rating | 4.5 |
Size | 4,184 Kb |
Views | 40,480 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Pure CSS Tags | 2,089 Kb |
Todo App using React.js | 2,487 Kb |
Selection Co-ordinates | 2,822 Kb |
The Chili Recipe | 23,620 Kb |
Skillset using HTML5 progress bars with CSS3 animations | 5,923 Kb |
Password strength meter | 2,776 Kb |
Pure CSS Calendar Icon | 2,221 Kb |
Neat hover animations on buttons | 2,697 Kb |
Reading Position Indicator | 5,454 Kb |
HTML5 Meter Element | 2,732 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Css or Czz.. | Judag | 4,111 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
Border-radius animation | Yukulele | 2,480 Kb |
Fluid Responsive Typography | Jonmilner | 4,205 Kb |
Z-index demo | Kblh | 1,534 Kb |
A Pen by Theun | Tjoen | 6,152 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!