Home
About
Work
Components
Contact
Glass morphism Bootstrap & CSS cards
Glass morphism Bootstrap & CSS cards
New Glass morphism effect
Languages used
HTML
CSS
BOOTSTRAP
Feauters
Responsive Design
Mini css
Glass effect
Powered by
Froala Editor
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <div class="container mt-4"> <div class="container row soft-card justify-content-center justify-content-between "> <div class="col-md-3 single-soft-card"> <h1 class="soft-card-heading">Hi</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque asperiores inventore accusamus impedit at repellat veritatis voluptatum, doloremque, porro dolor delectus illum numquam, sed ut perferendis consequatur sequi culpa distinctio?</p> </div> <div class="col-md-3 single-soft-card"> <h1 class="soft-card-heading">Hi</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque asperiores inventore accusamus impedit at repellat veritatis voluptatum, doloremque, porro dolor delectus illum numquam, sed ut perferendis consequatur sequi culpa distinctio?</p> </div> <div class="col-md-3 single-soft-card"> <h1 class="soft-card-heading">Hi</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque asperiores inventore accusamus impedit at repellat veritatis voluptatum, doloremque, porro dolor delectus illum numquam, sed ut perferendis consequatur sequi culpa distinctio?</p> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </body> </html>
CSS
body{ background-image: url('https://images.unsplash.com/photo-1470229538611-16ba8c7ffbd7?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-repeat: no-repeat; background-size: cover; } .soft-card{ margin-left: auto; margin-right: auto; margin-top: 25vh; justify-content: space-evenly; display: flex; } .single-soft-card{ background-color: rgba(0, 0, 0, 0.459); color: white; border-radius: 5px; margin-top: 10px; margin-right: 5px; } .soft-card-heading{ font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-weight: 900; } @media (max-width:610px) { .soft-card{ margin-left: auto; margin-right: auto; margin-top: 25vh; justify-content: space-evenly; display: flex; flex-direction: column; } }
Javascript
......
Socials
Facebook
Instagram
Github
Tiktok
Recent Components
Tailwind Login form
Tailwind infnite logo Carousel
Newsletter form tailwindcss
Login Form
Green glow button
Pricing Card
Glass morphism Bootstrap & CSS cards
Pages
Terms and Conditions
Privacy Policy
Ready to discuss your project requirements?
Get In Touch
