A Pen by Brendan Skousen

Developer
Brendan Skousen
Size
2,954 Kb
Views
10,120
  1. A Pen by Brendan Skousen Previews
  2. A Pen by Brendan Skousen HTML Codes
  3. A Pen by Brendan Skousen CSS Codes
  4. A Pen by Brendan Skousen JS Codes

How do I make an a pen by brendan skousen?

What is a a pen by brendan skousen? How do you make a a pen by brendan skousen? This script and codes were developed by Brendan Skousen on 09 December 2022, Friday.

A Pen by Brendan Skousen Previews
IQ Test

A Pen by Brendan Skousen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Brendan Skousen</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.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! */ body { margin: 20px auto; display: table; background: #D8D4C9;
}
ul.tiles { list-style-type: none; width: 980px; height: 490px; padding: 10px; background: #fff; box-shadow: inset 1px 1px 10px 1px #ddd;
}
ul.tiles li { float: left; width: 245px; height: 245px;
}
ul.tiles li { font-family: 'Pathway Gothic One', sans-serif; line-height: 1; box-sizing: border-box;
}
ul.tiles li h2 { color: #fbfaf0; font-size: 36px;
}
ul.tiles li a:link { text-decoration: none; font-size: 14px; text-transform: uppercase; color: #fbfaf0;
}
ul.tiles li a:hover, ul.tiles li a:visited { color: #fbfa0;
}
ul.tiles li img { width: 245px; height: 245px; transition: transform 250ms;
}
ul.tiles li img:hover { transform: scale(1.1) rotate(-5deg);
}
ul.tiles li:first-of-type { background: #E3896F; text-align: right; padding: 50px 20px;
}
ul.tiles li:nth-of-type(3) { background: #72C8C5; text-align: right; padding: 120px 20px;
}
ul.tiles li:nth-of-type(6) { background: #EAC763; padding: 120px 20px;
}
ul.tiles li:nth-of-type(8) { background: #C9C2A8; padding: 120px 20px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul class="tiles"> <li> <h2>Culture, Wine, Food And Shopping</h2> <a href="#">Learn More >></a> </li> <li class="wow bounceInLeft"> <img src="http://images.hayneedle.com/mgen/master:RIB118.jpg?is=368,368"> </li> <li> <h2>Itinerary</h2> <a href="#">Learn More >></a> </li> <li class="wow bounceInRight"> <img src="http://media-cache-ak0.pinimg.com/736x/34/ab/ec/34abec2582c784f74f7910689f7dfaa8.jpg"> </li> <li class="wow bounceInLeft"> <img src="http://2.imimg.com/data2/XQ/OD/FRL-3032268/images-beach-04-500x500.jpg"> </li> <li> <h2>Our Team</h2> <a href="#">Learn More >></a> </li> <li class="wow bounceInRight"> <img src="http://www.royalislander.com/images/specials.jpg"> </li> <li> <h2>2014 Tour Dates</h2> <a href="#">View All >></a> </li>
</ul> <script src='http://webcodefolio.com/js/wow.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Brendan Skousen - Script Codes CSS Codes

body { margin: 20px auto; display: table; background: #D8D4C9;
}
ul.tiles { list-style-type: none; width: 980px; height: 490px; padding: 10px; background: #fff; box-shadow: inset 1px 1px 10px 1px #ddd;
}
ul.tiles li { float: left; width: 245px; height: 245px;
}
ul.tiles li { font-family: 'Pathway Gothic One', sans-serif; line-height: 1; box-sizing: border-box;
}
ul.tiles li h2 { color: #fbfaf0; font-size: 36px;
}
ul.tiles li a:link { text-decoration: none; font-size: 14px; text-transform: uppercase; color: #fbfaf0;
}
ul.tiles li a:hover, ul.tiles li a:visited { color: #fbfa0;
}
ul.tiles li img { width: 245px; height: 245px; transition: transform 250ms;
}
ul.tiles li img:hover { transform: scale(1.1) rotate(-5deg);
}
ul.tiles li:first-of-type { background: #E3896F; text-align: right; padding: 50px 20px;
}
ul.tiles li:nth-of-type(3) { background: #72C8C5; text-align: right; padding: 120px 20px;
}
ul.tiles li:nth-of-type(6) { background: #EAC763; padding: 120px 20px;
}
ul.tiles li:nth-of-type(8) { background: #C9C2A8; padding: 120px 20px;
}

A Pen by Brendan Skousen - Script Codes JS Codes

new WOW().init();
A Pen by Brendan Skousen - Script Codes
A Pen by Brendan Skousen - Script Codes
Home Page Home
Developer Brendan Skousen
Username bskousen
Uploaded December 09, 2022
Rating 4
Size 2,954 Kb
Views 10,120
Do you need developer help for A Pen by Brendan Skousen?

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!

Brendan Skousen (bskousen) Script Codes
Name
Testimonial fade in and out
CSS3 Warp Shadow
Disable Copy of Text without Javascript
Nivo Slider Dark Theme
Float My Goat CSS3
CSS transition hover with fontawesome
Responsive Gray Accordion
Simple Thumbnail Gallery
Give me money
Playing with wow and animate
Create amazing video scripts with AI!

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!