Ministry Tiles

Developer
John Lueders
Size
3,505 Kb
Views
26,312
  1. Ministry Tiles Previews
  2. Ministry Tiles HTML Codes
  3. Ministry Tiles CSS Codes
  4. Ministry Tiles JS Codes

How do I make an ministry tiles?

Inspired by: 1. http://trentwalton.com/2010/11/22/css-box-shadowinset/ 2. http://codepen.io/bfeelyweb/pen/ozfvm. What is a ministry tiles? How do you make a ministry tiles? This script and codes were developed by John Lueders on 20 November 2022, Sunday.

Ministry Tiles Previews
IQ Test

Ministry Tiles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ministry Tiles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#" class="ministry africa"> <div class="vignette"> <img src="http://lorempixel.com/300/200/nature/1" alt=""> </div> <span>Africa</span>
</a>
<a href="" class="ministry youth-group"> <div class="vignette"> <img src="http://lorempixel.com/300/200/nature/2" alt=""> </div> <span>Youth Group</span>
</a>
<a href="" class="ministry congregation-cares"> <div class="vignette"> <img src="http://lorempixel.com/300/200/nature/3" alt=""> </div> <span>Congregation Cares</span>
</a>
<a href="" class="ministry worship"> <div class="vignette"> <img src="http://lorempixel.com/300/200/nature/4" alt=""> </div> <span>Worship</span>
</a>
<a href="" class="ministry"> <div class="vignette"> <img src="http://lorempixel.com/300/200/nature/5" alt=""> </div> <span>Fellowship</span>
</a>
<a href="" class="ministry"><span>Building</span></a>
<a href="" class="ministry"><span>Faith Formation</span></a>
<a href="" class="ministry"><span>Mission</span></a> <script src="js/index.js"></script>
</body>
</html>

Ministry Tiles - Script Codes CSS Codes

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local("Open Sans"), local("OpenSans"), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format("woff");
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html { background: #333; padding: 1em;
}
.ministry { background: #555; color: white; float: left; width: 300px; height: 200px; margin-right: 1em; margin-bottom: 1em; position: relative; border-radius: 10px; z-index: 0; box-shadow: 1px 1px 4px black;
}
.ministry img { border-radius: 10px; position: relative; z-index: -1;
}
.ministry span { font-family: 'Open Sans', sans-serif; background: rgba(0, 0, 0, 0.6); text-transform: uppercase; width: 100%; position: absolute; bottom: 0; display: inline-block; padding: 5px 0 5px 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-transition: background-color 0.1s; -o-transition: background-color 0.1s; -webkit-transition: background-color 0.1s; transition: background-color 0.1s;
}
.ministry:hover.africa span, .ministry:focus.africa span { background: red;
}
.ministry:hover.youth-group span, .ministry:focus.youth-group span { background: blue;
}
.ministry:hover.congregation-cares span, .ministry:focus.congregation-cares span { background: magenta;
}
.ministry:hover.worship span, .ministry:focus.worship span { background: tan;
}
.vignette { position: absolute; height: 100%; width: 100%; box-shadow: inset 0px 0px 85px rgba(0, 0, 0, 0.5); border-radius: 10px;
}
.vignette:hover, .vignette:focus { box-shadow: none;
}
@keyframes flyin { 0% { transform: translate(50px, 110px) rotate(35deg); opacity: 0; } 100% { transform: none; opacity: 1; }
}

Ministry Tiles - Script Codes JS Codes

// Inspired by:
// 1. trentwalton.com/2010/11/22/css-box-shadowinset/
// 2. codepen.io/bfeelyweb/pen/ozfvm
Ministry Tiles - Script Codes
Ministry Tiles - Script Codes
Home Page Home
Developer John Lueders
Username elmsoftware
Uploaded November 20, 2022
Rating 3
Size 3,505 Kb
Views 26,312
Do you need developer help for Ministry Tiles?

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!

John Lueders (elmsoftware) Script Codes
Name
Nice Pressable Button
OS Detection
Material Design Elements
IDoHQ Homepage Cost Savings Interface
Resize Div to Fit Screen
Simple Transforms
Expanding Hero
Tooltip
SnappySnippet Test
Project Shell
Create amazing Facebook ads 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!