Playing with Flexbox

Developer
Amy Kapernick
Size
2,941 Kb
Views
2,024
  1. Playing with Flexbox Previews
  2. Playing with Flexbox HTML Codes
  3. Playing with Flexbox CSS Codes
  4. Playing with Flexbox JS Codes

How do I make an playing with flexbox?

What is a playing with flexbox? How do you make a playing with flexbox? This script and codes were developed by Amy Kapernick on 31 January 2023, Tuesday.

Playing with Flexbox Previews
IQ Test

Playing with Flexbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playing with Flexbox</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="items">	<div class="teaser-item">
<div class="intro">	<div class="thumb">	<img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_ea01ef2f2dc58f422148318e5c7f35d0.jpeg" alt="Offshore" width="308" height="231">	</div>	<h2 class="title"> Offshore	</h2>
</div>
<div class="item-info cf">	<div class="description"> <p>	Offshore Grade Chain comes in a number of various grades and is used predominantly in the Oil &amp; Gas Industry on Rigs, FPSO &amp; Turret Moorings, Chafe Chains etc. Using a higher Grade of Steel than Grade 2 &amp; 3 Offshore Cain is a specialty item for long term installations that are difficult to maintain or replace.</p>
<p>	Jeyco has access to and has provided ORQ and R4 chain to some major installations globally.</p>	</div>	<div class="document"> <p>	<a href="/images/files/catalogue/chainfittings/Chain%20Specifications.pdf" target="_blank">Chain Sizing</a></p>
<p>	<a href="/images/files/catalogue/chainfittings/Studlink%20Chain%20-%20Offshore%20Grades.pdf" target="_blank">Offshore Grade Chain Specs</a></p>	</div>	<div class="gallery"> <div class="zoo-gallery" id="5a4552bb-b345-46d4-a7f0-07c73010b611-59c1d13193f8d">	<div class="zoo-gallery-wall clearfix margin ">	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/Devils-Tower-2.jpeg" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="Devils-Tower-2"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_1c6efce6f080abdd24df1a2cd498ce59.jpeg" width="100" height="75" alt="Devils-Tower-2.jpeg"></a>	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/R4-Offshore-Chain.JPG" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="R4-Offshore-Chain"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/R4-Offshore-Chain_61f7f2cb4758715829ca86b9e2d94c68.JPG" width="100" height="66" alt="R4-Offshore-Chain.JPG"></a>	</div>
</div>	</div>	</div>	</div>	<div class="teaser-item">
<div class="intro">	<div class="thumb">	<img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_ea01ef2f2dc58f422148318e5c7f35d0.jpeg" alt="Offshore" width="308" height="231">	</div>	<h2 class="title"> Offshore	</h2>
</div>
<div class="item-info cf">	<div class="description"> <p>	Offshore Grade Chain comes in a number of various grades and is used predominantly in the Oil &amp; Gas Industry on Rigs, FPSO &amp; Turret Moorings, Chafe Chains etc. Using a higher Grade of Steel than Grade 2 &amp; 3 Offshore Cain is a specialty item for long term installations that are difficult to maintain or replace.</p>
<p>	Jeyco has access to and has provided ORQ and R4 chain to some major installations globally.</p>	</div>	<div class="document"> <p>	<a href="/images/files/catalogue/chainfittings/Chain%20Specifications.pdf" target="_blank">Chain Sizing</a></p>
<p>	<a href="/images/files/catalogue/chainfittings/Studlink%20Chain%20-%20Offshore%20Grades.pdf" target="_blank">Offshore Grade Chain Specs</a></p>	</div>	<div class="gallery"> <div class="zoo-gallery" id="5a4552bb-b345-46d4-a7f0-07c73010b611-59c1d13193f8d">	<div class="zoo-gallery-wall clearfix margin ">	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/Devils-Tower-2.jpeg" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="Devils-Tower-2"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_1c6efce6f080abdd24df1a2cd498ce59.jpeg" width="100" height="75" alt="Devils-Tower-2.jpeg"></a>	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/R4-Offshore-Chain.JPG" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="R4-Offshore-Chain"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/R4-Offshore-Chain_61f7f2cb4758715829ca86b9e2d94c68.JPG" width="100" height="66" alt="R4-Offshore-Chain.JPG"></a>	</div>
</div>	</div>	</div>	</div>	<div class="teaser-item">
<div class="intro">	<div class="thumb">	<img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_ea01ef2f2dc58f422148318e5c7f35d0.jpeg" alt="Offshore" width="308" height="231">	</div>	<h2 class="title"> Offshore	</h2>
</div>
<div class="item-info cf">	<div class="description"> <p>	Offshore Grade Chain comes in a number of various grades and is used predominantly in the Oil &amp; Gas Industry on Rigs, FPSO &amp; Turret Moorings, Chafe Chains etc. Using a higher Grade of Steel than Grade 2 &amp; 3 Offshore Cain is a specialty item for long term installations that are difficult to maintain or replace.</p>
<p>	Jeyco has access to and has provided ORQ and R4 chain to some major installations globally.</p>	</div>	<div class="document"> <p>	<a href="/images/files/catalogue/chainfittings/Chain%20Specifications.pdf" target="_blank">Chain Sizing</a></p>
<p>	<a href="/images/files/catalogue/chainfittings/Studlink%20Chain%20-%20Offshore%20Grades.pdf" target="_blank">Offshore Grade Chain Specs</a></p>	</div>	<div class="gallery"> <div class="zoo-gallery" id="5a4552bb-b345-46d4-a7f0-07c73010b611-59c1d13193f8d">	<div class="zoo-gallery-wall clearfix margin ">	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/Devils-Tower-2.jpeg" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="Devils-Tower-2"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_1c6efce6f080abdd24df1a2cd498ce59.jpeg" width="100" height="75" alt="Devils-Tower-2.jpeg"></a>	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/R4-Offshore-Chain.JPG" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="R4-Offshore-Chain"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/R4-Offshore-Chain_61f7f2cb4758715829ca86b9e2d94c68.JPG" width="100" height="66" alt="R4-Offshore-Chain.JPG"></a>	</div>
</div>	</div>	</div>	</div>	<div class="teaser-item">
<div class="intro">	<div class="thumb">	<img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_ea01ef2f2dc58f422148318e5c7f35d0.jpeg" alt="Offshore" width="308" height="231">	</div>	<h2 class="title"> Offshore	</h2>
</div>
<div class="item-info cf">	<div class="description"> <p>	Offshore Grade Chain comes in a number of various grades and is used predominantly in the Oil &amp; Gas Industry on Rigs, FPSO &amp; Turret Moorings, Chafe Chains etc. Using a higher Grade of Steel than Grade 2 &amp; 3 Offshore Cain is a specialty item for long term installations that are difficult to maintain or replace.</p>
<p>	Jeyco has access to and has provided ORQ and R4 chain to some major installations globally.</p>	</div>	<div class="document"> <p>	<a href="/images/files/catalogue/chainfittings/Chain%20Specifications.pdf" target="_blank">Chain Sizing</a></p>
<p>	<a href="/images/files/catalogue/chainfittings/Studlink%20Chain%20-%20Offshore%20Grades.pdf" target="_blank">Offshore Grade Chain Specs</a></p>	</div>	<div class="gallery"> <div class="zoo-gallery" id="5a4552bb-b345-46d4-a7f0-07c73010b611-59c1d13193f8d">	<div class="zoo-gallery-wall clearfix margin ">	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/Devils-Tower-2.jpeg" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="Devils-Tower-2"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_1c6efce6f080abdd24df1a2cd498ce59.jpeg" width="100" height="75" alt="Devils-Tower-2.jpeg"></a>	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/R4-Offshore-Chain.JPG" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="R4-Offshore-Chain"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/R4-Offshore-Chain_61f7f2cb4758715829ca86b9e2d94c68.JPG" width="100" height="66" alt="R4-Offshore-Chain.JPG"></a>	</div>
</div>	</div>	</div>	</div>	<div class="teaser-item">
<div class="intro">	<div class="thumb">	<img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_ea01ef2f2dc58f422148318e5c7f35d0.jpeg" alt="Offshore" width="308" height="231">	</div>	<h2 class="title"> Offshore	</h2>
</div>
<div class="item-info cf">	<div class="description"> <p>	Offshore Grade Chain comes in a number of various grades and is used predominantly in the Oil &amp; Gas Industry on Rigs, FPSO &amp; Turret Moorings, Chafe Chains etc. Using a higher Grade of Steel than Grade 2 &amp; 3 Offshore Cain is a specialty item for long term installations that are difficult to maintain or replace.</p>
<p>	Jeyco has access to and has provided ORQ and R4 chain to some major installations globally.</p>	</div>	<div class="document"> <p>	<a href="/images/files/catalogue/chainfittings/Chain%20Specifications.pdf" target="_blank">Chain Sizing</a></p>
<p>	<a href="/images/files/catalogue/chainfittings/Studlink%20Chain%20-%20Offshore%20Grades.pdf" target="_blank">Offshore Grade Chain Specs</a></p>	</div>	<div class="gallery"> <div class="zoo-gallery" id="5a4552bb-b345-46d4-a7f0-07c73010b611-59c1d13193f8d">	<div class="zoo-gallery-wall clearfix margin ">	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/Devils-Tower-2.jpeg" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="Devils-Tower-2"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_1c6efce6f080abdd24df1a2cd498ce59.jpeg" width="100" height="75" alt="Devils-Tower-2.jpeg"></a>	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/R4-Offshore-Chain.JPG" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="R4-Offshore-Chain"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/R4-Offshore-Chain_61f7f2cb4758715829ca86b9e2d94c68.JPG" width="100" height="66" alt="R4-Offshore-Chain.JPG"></a>	</div>
</div>	</div>	</div>	</div>	<div class="teaser-item">
<div class="intro">	<div class="thumb">	<img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_ea01ef2f2dc58f422148318e5c7f35d0.jpeg" alt="Offshore" width="308" height="231">	</div>	<h2 class="title"> Offshore	</h2>
</div>
<div class="item-info cf">	<div class="description"> <p>	Offshore Grade Chain comes in a number of various grades and is used predominantly in the Oil &amp; Gas Industry on Rigs, FPSO &amp; Turret Moorings, Chafe Chains etc. Using a higher Grade of Steel than Grade 2 &amp; 3 Offshore Cain is a specialty item for long term installations that are difficult to maintain or replace.</p>
<p>	Jeyco has access to and has provided ORQ and R4 chain to some major installations globally.</p>	</div>	<div class="document"> <p>	<a href="/images/files/catalogue/chainfittings/Chain%20Specifications.pdf" target="_blank">Chain Sizing</a></p>
<p>	<a href="/images/files/catalogue/chainfittings/Studlink%20Chain%20-%20Offshore%20Grades.pdf" target="_blank">Offshore Grade Chain Specs</a></p>	</div>	<div class="gallery"> <div class="zoo-gallery" id="5a4552bb-b345-46d4-a7f0-07c73010b611-59c1d13193f8d">	<div class="zoo-gallery-wall clearfix margin ">	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/Devils-Tower-2.jpeg" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="Devils-Tower-2"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_1c6efce6f080abdd24df1a2cd498ce59.jpeg" width="100" height="75" alt="Devils-Tower-2.jpeg"></a>	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/R4-Offshore-Chain.JPG" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="R4-Offshore-Chain"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/R4-Offshore-Chain_61f7f2cb4758715829ca86b9e2d94c68.JPG" width="100" height="66" alt="R4-Offshore-Chain.JPG"></a>	</div>
</div>	</div>	</div>	</div>	<div class="teaser-item">
<div class="intro">	<div class="thumb">	<img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_ea01ef2f2dc58f422148318e5c7f35d0.jpeg" alt="Offshore" width="308" height="231">	</div>	<h2 class="title"> Offshore	</h2>
</div>
<div class="item-info cf">	<div class="description"> <p>	Offshore Grade Chain comes in a number of various grades and is used predominantly in the Oil &amp; Gas Industry on Rigs, FPSO &amp; Turret Moorings, Chafe Chains etc. Using a higher Grade of Steel than Grade 2 &amp; 3 Offshore Cain is a specialty item for long term installations that are difficult to maintain or replace.</p>
<p>	Jeyco has access to and has provided ORQ and R4 chain to some major installations globally.</p>	</div>	<div class="document"> <p>	<a href="/images/files/catalogue/chainfittings/Chain%20Specifications.pdf" target="_blank">Chain Sizing</a></p>
<p>	<a href="/images/files/catalogue/chainfittings/Studlink%20Chain%20-%20Offshore%20Grades.pdf" target="_blank">Offshore Grade Chain Specs</a></p>	</div>	<div class="gallery"> <div class="zoo-gallery" id="5a4552bb-b345-46d4-a7f0-07c73010b611-59c1d13193f8d">	<div class="zoo-gallery-wall clearfix margin ">	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/Devils-Tower-2.jpeg" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="Devils-Tower-2"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_1c6efce6f080abdd24df1a2cd498ce59.jpeg" width="100" height="75" alt="Devils-Tower-2.jpeg"></a>	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/R4-Offshore-Chain.JPG" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="R4-Offshore-Chain"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/R4-Offshore-Chain_61f7f2cb4758715829ca86b9e2d94c68.JPG" width="100" height="66" alt="R4-Offshore-Chain.JPG"></a>	</div>
</div>	</div>	</div>	</div>	<div class="teaser-item">
<div class="intro">	<div class="thumb">	<img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_ea01ef2f2dc58f422148318e5c7f35d0.jpeg" alt="Offshore" width="308" height="231">	</div>	<h2 class="title"> Offshore	</h2>
</div>
<div class="item-info cf">	<div class="description"> <p>	Offshore Grade Chain comes in a number of various grades and is used predominantly in the Oil &amp; Gas Industry on Rigs, FPSO &amp; Turret Moorings, Chafe Chains etc. Using a higher Grade of Steel than Grade 2 &amp; 3 Offshore Cain is a specialty item for long term installations that are difficult to maintain or replace.</p>
<p>	Jeyco has access to and has provided ORQ and R4 chain to some major installations globally.</p>	</div>	<div class="document"> <p>	<a href="/images/files/catalogue/chainfittings/Chain%20Specifications.pdf" target="_blank">Chain Sizing</a></p>
<p>	<a href="/images/files/catalogue/chainfittings/Studlink%20Chain%20-%20Offshore%20Grades.pdf" target="_blank">Offshore Grade Chain Specs</a></p>	</div>	<div class="gallery"> <div class="zoo-gallery" id="5a4552bb-b345-46d4-a7f0-07c73010b611-59c1d13193f8d">	<div class="zoo-gallery-wall clearfix margin ">	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/Devils-Tower-2.jpeg" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="Devils-Tower-2"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/Devils-Tower-2_1c6efce6f080abdd24df1a2cd498ce59.jpeg" width="100" height="75" alt="Devils-Tower-2.jpeg"></a>	<a class="thumb" href="http://jeyconew.dev.dashdigi.com/images/products/Chain/Offshore/R4-Offshore-Chain.JPG" data-uk-lightbox="{group:'5a4552bb-b345-46d4-a7f0-07c73010b611'}" title="R4-Offshore-Chain"><img src="http://jeyconew.dev.dashdigi.com/media/zoo/images/R4-Offshore-Chain_61f7f2cb4758715829ca86b9e2d94c68.JPG" width="100" height="66" alt="R4-Offshore-Chain.JPG"></a>	</div>
</div>	</div>	</div>	</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Playing with Flexbox - Script Codes CSS Codes

body {	width: 920px;
}
.items {	display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;
}
.teaser-item { width: 200px; margin-bottom: 20px;
}
.intro .thumb { height: 200px; overflow: hidden; padding: 7px;
}
.intro { border: 3px solid #ffc72a; cursor: pointer; position: relative;
}
.item-info { background: #cccccc; background: rgba(204, 204, 204, 0.7); clear: left; display: none; margin: 15px 0 20px; padding: 20px; position: relative; top: 20px; width: 920px;
}
.teaser-item.active .item-info { display: block;
}

Playing with Flexbox - Script Codes JS Codes

$(".intro").click(function(){	var currentItem = $(this).parent();	if( ! currentItem.hasClass('active') ){	$(".teaser-item.active").removeClass('active');	currentItem.addClass('active');	} else {	$(".teaser-item").removeClass('active')	}	})
Playing with Flexbox - Script Codes
Playing with Flexbox - Script Codes
Home Page Home
Developer Amy Kapernick
Username aimhigherwebdesign-amy
Uploaded January 31, 2023
Rating 3
Size 2,941 Kb
Views 2,024
Do you need developer help for Playing with Flexbox?

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!

Amy Kapernick (aimhigherwebdesign-amy) Script Codes
Name
Enquire Now Button with SVG
WebEx Troubleshooting
Nutrition Calculator
Corner Triangle
Triangles
Fancy table search
Border Gradient
Instant Quote Generator
A Pen by Amy Kapernick
Developing Imaginative Layouts
Create amazing captions 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!