A Pen by Joost Jansen

Developer
Joost Jansen
Size
4,394 Kb
Views
10,120
  1. A Pen by Joost Jansen Previews
  2. A Pen by Joost Jansen HTML Codes
  3. A Pen by Joost Jansen CSS Codes
  4. A Pen by Joost Jansen JS Codes

How do I make an a pen by joost jansen?

What is a a pen by joost jansen? How do you make a a pen by joost jansen? This script and codes were developed by Joost Jansen on 19 November 2022, Saturday.

A Pen by Joost Jansen Previews
IQ Test

A Pen by Joost Jansen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Joost Jansen</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>
<div id="app"> <div class="filter-block expanded"> <div class="filter-header"> <h1>allergies</h1> </div> <div class="filter-content"> <div class="content-card selected"></div> <div class="content-card"></div> <div class="content-card"></div> <div class="content-card"></div> <div class="content-card"></div> <div class="content-card"></div> </div> </div> <div class="filter-block"> <div class="filter-header"> <h1>ingredients</h1> </div> <div class="filter-content"> <div class="content-card"></div> <div class="content-card"></div> <div class="content-card"></div> <div class="content-card"></div> <div class="content-card"></div> <div class="content-card"></div> </div> </div> <div class="results"> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

A Pen by Joost Jansen - Script Codes CSS Codes

/* variables
----------------------------------- */
/* mixins
----------------------------------- */
/* base/reset
----------------------------------- */
body,
html { height: 100%; width: 100%;
}
h1,
h2,
h3,
p { margin: 0;
}
/* colors and typography
----------------------------------- */
#app { background-color: #92d287; box-shadow: 0 5px 60px -5px rgba(0,0,0,0.2), 0 15px 70px -15px rgba(0,0,0,0.4);
}
#app .filter-block .filter-header { background-color: #fff; color: #92d287; cursor: pointer;
}
#app .filter-block .filter-header h1 { text-transform: uppercase;
}
#app .filter-block .filter-content { background-color: #eef8ec;
}
/* positioning
----------------------------------- */
body { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
#app { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; height: 667px; width: 375px; overflow-y: auto;
}
#app .filter-block,
#app .filter-header { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 1; flex-shrink: 1; min-height: 100px; min-width: calc(100% - 10px);
}
#app .filter-block { margin-top: 10px;
}
#app .filter-block .filter-content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; height: 0; width: calc(100% - 10px); position: relative; -webkit-transform: translate(0, 0, 0); transform: translate(0, 0, 0); -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: top center; transform-origin: top center; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; overflow-y: auto;
}
#app .filter-block .filter-content .btn-search { height: 50px; width: 150px; border: 0; position: fixed; bottom: 50px; -webkit-transform: translateX(calc((37% - 150px) * -1)); transform: translateX(calc((37% - 150px) * -1));
}
#app .filter-block .filter-content .content-card { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; height: 200px; background-image: url("http://placehold.it/300x300"); background-repeat: no-repeat; background-position: center; background-blend-mode: multiply; -webkit-transition: all 300ms linear; transition: all 300ms linear;
}
#app .filter-block .filter-content .content-card:after { content: ""; position: relative; opacity: 0;
}
#app .filter-block .filter-content .content-card:hover { background-color: rgba(0,0,0,0.1);
}
#app .filter-block .filter-content .content-card.selected { background-color: rgba(146,210,135,0.8);
}
#app .filter-block .filter-content .content-card.selected:after { border-top: 5px solid #000; border-right: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid transparent; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); left: 75px; top: 90px; opacity: 1;
}
#app .filter-block .filter-content .content-card.selected:hover { background-color: rgba(146,210,135,0.5);
}
#app .filter-block.expanded > .filter-content { height: calc(667px - 230px); -webkit-transform: scale(1); transform: scale(1);
}

A Pen by Joost Jansen - Script Codes JS Codes

// mock data
var recipes = [	{	triggersAllergies: [ "anaphylaxis", "angioedema" ],	hasIngredients: [ "meat", "eggs" ]	},	{	triggersAllergies: [ "angioedema" ],	hasIngredients: [ "meat" ]	}
];
// query elements
var filterBlocks = document.querySelectorAll(".filter-block"),	contentCards = document.querySelectorAll(".content-card"),	searchButtons = document.querySelectorAll(".btn-search");
var activeFilterBlock = Array.prototype.find.call(filterBlocks, function(f) {	return f.classList.contains("expanded");
});
// add event handlers to elements
function addListenerToHTMLCollectionItem(coll, ev, func) {	Array.prototype.forEach.call(coll, function(i) {	i.addEventListener(ev, func.bind(this, i));	});
}
addListenerToHTMLCollectionItem(filterBlocks, "click", expandFilterBlock);
addListenerToHTMLCollectionItem(contentCards, "click", selectCard);
addListenerToHTMLCollectionItem(searchButtons, "click", searchRecipes);
// control functions
function expandFilterBlock(f) {	if (f !== activeFilterBlock) {	f.classList.add("expanded");	activeFilterBlock.classList.remove("expanded");	activeFilterBlock = f;	}
}
function selectCard(c) {	c.classList.toggle("selected");
}
function searchRecipes() {
}
A Pen by Joost Jansen - Script Codes
A Pen by Joost Jansen - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded November 19, 2022
Rating 3
Size 4,394 Kb
Views 10,120
Do you need developer help for A Pen by Joost Jansen?

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!

Joost Jansen (DevItWithDavid) Script Codes
Name
JQuery Image Slider
IPhone
Material ripple effect with pure CSS and JS
Star Wars Battlefront I 2016 Interface
Personal Website Redesign v2.0
League of Legends Login UI
TicTacToe
Skyrim Start Game UI
Flexbox Mixin
Portfolio Joost Jansen 2016
Create amazing web content 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!