4-block-flex Round

Developer
Xavier Martínez
Size
3,301 Kb
Views
22,264
  1. 4-block-flex Round Previews
  2. 4-block-flex Round HTML Codes
  3. 4-block-flex Round CSS Codes

How do I make an 4-block-flex round?

What is a 4-block-flex round? How do you make a 4-block-flex round? This script and codes were developed by Xavier Martínez on 19 September 2022, Monday.

4-block-flex Round Previews
IQ Test

4-block-flex Round - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>4-block-flex Round</title>	<link href="https://fonts.googleapis.com/css?family=Dosis:400,500,600,700|Shadows+Into+Light+Two" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Camping Le Grillou</h1>
<div class="container-100"> <div class="container-1180"> <div class="flex-100"> <div class="flex-block"> <a href="#" class="item-block"> <div class="item-block-img"> <img src="http://xmpdesign.com/img/codepen/block1.jpg"> </div> <div class="item-title"> <h2>Galerie photos</h2> </div> </a> </div> <div class="flex-block"> <a href="#" class="item-block"> <div class="item-block-img"> <img src="http://xmpdesign.com/img/codepen/block2.jpg"> </div> <div class="item-title"> <h2>Activités</h2> </div> </a> </div> <div class="flex-block"> <a href="#" class="item-block"> <div class="item-block-img"> <img src="http://xmpdesign.com/img/codepen/block3.jpg"> </div> <div class="item-title"> <h2>Le restaurant</h2> </div> </a> </div> <div class="flex-block"> <a href="#" class="item-block"> <div class="item-block-img"> <img src="http://xmpdesign.com/img/codepen/block4.jpg"> </div> <div class="item-title"> <h2>Aux Alentours</h2> </div> </a> </div> </div> </div>
</div>
</body>
</html>

4-block-flex Round - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Dosis");
body { background-color: white; margin: 0;
}
h1 { font-family: "Dosis", sans-serif; color: #00596c; text-align: center; background-color: white; border-bottom: 8px solid #00596c; margin: 0; padding: 10px;
}
.container-100 { width: 100%; background-image: url("http://xmpdesign.com/img/codepen/bkg-plage-legrillou.jpg"); background-size: cover;
}
.container-1180 { margin: 0 auto; max-width: 1180px;
}
.flex-100 { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; min-height: 490px;
}
.flex-block { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex: 1 1 220px; -ms-flex: 1 1 220px; flex: 1 1 220px; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-top: 30px; padding-bottom: 30px;
}
.flex-block .item-block { border: 10px solid white; border-radius: 50%; overflow: hidden; background-color: white; transition: all 0.6s ease 0s; z-index: 1;
}
.flex-block .item-block:hover { border-color: #AB47BC; background-color: #AB47BC; cursor: pointer;
}
.flex-block .item-block:link { text-decoration: none;
}
.flex-block .item-block:hover > .item-title { background-color: #AB47BC;
}
.flex-block .item-block:hover > .item-title h2 { color: white;
}
.flex-block .item-block:hover > .item-block-img > img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);
}
.flex-block .item-block .item-block-img { width: 220px; height: 140px; overflow: hidden;
}
.flex-block .item-block .item-block-img img { transition: all .2s ease-in-out;
}
.flex-block .item-block .item-title { background-color: white; height: 80px; transition: all 0.6s ease 0s;
}
.flex-block .item-block .item-title h2 { font-family: "Dosis", sans-serif; color: #00596c; margin: 0px; font-size: 20px; text-align: center; padding-top: 20px; text-transform: uppercase; transition: all 0.6s ease 0s;
}
@media all and (max-width: 600px) { .flex-block:nth-child(even) { background-color: #00596c; } .flex-block:nth-child(odd) { background-color: #cee042; }
}
4-block-flex Round - Script Codes
4-block-flex Round - Script Codes
Home Page Home
Developer Xavier Martínez
Username xmjol
Uploaded September 19, 2022
Rating 3
Size 3,301 Kb
Views 22,264
Do you need developer help for 4-block-flex Round?

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!

Xavier Martínez (xmjol) Script Codes
Name
ReactJS Simple Component
SVG Business Card
Flex Side-content-2
Pixel Anim Test
THRWidgets
A beautiful day
React UI - 03 - CardList
Background Styles
Article Header Collapse
ReactJS Tutorial Testing
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!