Organic responsive rounded container

Developer
Hawcubite
Size
1,710 Kb
Views
8,096
  1. Organic responsive rounded container Previews
  2. Organic responsive rounded container HTML Codes
  3. Organic responsive rounded container CSS Codes

How do I make an organic responsive rounded container?

What is a organic responsive rounded container? How do you make a organic responsive rounded container? This script and codes were developed by Hawcubite on 14 December 2022, Wednesday.

Organic responsive rounded container Previews
IQ Test

Organic responsive rounded container - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Organic responsive rounded container</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="site"> <div class="site-content"> </div> </div>
</div>
</body>
</html>

Organic responsive rounded container - Script Codes CSS Codes

html, body, .wrapper { height: 100%;
}
body { margin: 0; padding: 0; background: #5a5050;
}
.wrapper { display: flex; align-items: center; justify-content: center; margin: 10px;
}
.site { flex: 0 0 auto; position: relative; height: calc(10rem + 40vh); max-height: 100vh; width: calc(20rem + 25vw); max-width: 100vw; background: #e5eec1; box-shadow: 0 10px 2vw -20px rgba(0,0,0,.25);
}
.site::before,
.site::after { z-index: 1; display: block; position: absolute; content: ""; height: 100%; width: calc(10px + 5vh); top: 0; left: 0; background: #e5eec1; border-radius: 100% 100% 100% 100%; transform: translateX(-50%);
}
.site::after { left: auto; right: 0; transform: translateX(50%);
}
.site-content { z-index: 2; position: relative;
}
Organic responsive rounded container - Script Codes
Organic responsive rounded container - Script Codes
Home Page Home
Developer Hawcubite
Username hawcubite
Uploaded December 14, 2022
Rating 3
Size 1,710 Kb
Views 8,096
Do you need developer help for Organic responsive rounded container?

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!

Hawcubite (hawcubite) Script Codes
Name
Full CSS Resizing Tiles
A Pen by hawcubite
Transitional Hover-Boxes
Radial Image Preview
Table scroll shadows
Vue.js Tutorial
LastFM Scrobbling Notifications
Color Picker Cube
Gooey cube
Testing 3D text in CSS
Create amazing blog posts 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!