Scribd
Upload
2 views1 page

.Modal (

The document contains CSS styles for a modal component, defining its appearance and behavior. It includes styles for the modal's background, padding, border, and text, as well as a close button with hover effects. Additionally, it specifies a fade-in animation for the modal's entrance.

Uploaded by

mogalakanksha85
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views1 page

.Modal (

The document contains CSS styles for a modal component, defining its appearance and behavior. It includes styles for the modal's background, padding, border, and text, as well as a close button with hover effects. Additionally, it specifies a fade-in animation for the modal's entrance.

Uploaded by

mogalakanksha85
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

.

modal {
background: white;
padding: 20px;
border-radius: 8px;
width: 400px;
text-align: center;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
border: 2px solid #333;
animation: fadeIn 0.3s ease-in-out;
position: relative;
z-index: 1001;
}

/* Modal Heading */
.modal h2 {
margin-bottom: 15px;
font-size: 22px;
color: #333;
}

/* Modal Text */
.modal p {
font-size: 16px;
color: #555;
margin: 10px 0;
}

/* Close Button */
.modal button {
background: red;
color: white;
padding: 10px 15px;
margin-top: 15px;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s ease;
}

.modal button:hover {
background-color: darkred;
}

/* Modal Animation */
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.9); } */
to { opacity: 1; transform: scale(1); }
} */

You might also like