<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polygons </title>
<!-- Fonts Google -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=optional" rel="stylesheet">
<!-- End Fonts Google -->
<!-- Main File Style -->
<link rel="stylesheet" href="/polygon.css">
</head>
<body>
<div class="title"><h1 class="clip">Clip-Paths</h1></div>
<div class="container">
<div class="hole"></div>
<img src="https://codezillaye.com/wp-content/uploads/2024/06/Header.png" class="hole">
<div class="hole-two"></div>
<img src="https://codezillaye.com/wp-content/uploads/2024/06/cropped-codezillaye-high-resolution-logo.png" class="hole-two">
</div>
</body>
</html>
body {
margin: 0;
min-height: 100vh;
width: 100%;
/* display: flex; */
flex-direction: row;
/* grid-auto-flow: column; */
gap: 50px;
background-color: #beaeac;
/* font-family: "Jersey 25", sans-serif; */
font-weight: 400;
font-style: normal;
}
.container {
display: flex;
justify-content: space-between;
place-content: center;
}
/* .jersey-25-regular {
font-family: "Jersey 25", sans-serif;
font-weight: 400;
font-style: normal;
} */
.title {
text-align: center;
width: 95%;
display: flex;
place-content: center;
}
.hole {
height: 250px;
aspect-ratio: 1;
background: repeating-linear-gradient(47deg, red 0 7px, white 0 16px);
mask: radial-gradient(30px at 30% 30px, #0000 97%, #000) 50% -30px;
mask-size: 70px 1%;
}
.clip {
font-size: 3rem;
font-weight: bold;
/* font-family: "Jersey 25", sans-serif; */
background-color: #cddc39;
padding: 1rem;
margin: 3rem;
border-radius: 22px;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
-ms-border-radius: 22px;
-o-border-radius: 22px;
}
.hole-two {
height: 265px;
aspect-ratio: 1;
background: repeating-linear-gradient(139deg, #e01313eb 0 30px, white 0 48px);
mask: radial-gradient(48px at 69% -61px, #0000 387%, #000) 60% -76px;
/* mask-size: 78px 43%; */
}