Design Features:
Luxurious Color Scheme:
- Deep emerald green background (#0a2e1f)
- Rich gold text and accents (#d4af37)
- Subtle diamond pattern in the background
Elegant Typography:
- "Playfair Display" for headings (uppercase)
- "Great Vibes" for couple names and subtitle
- "Lora" for body text with italic styling
Royal Design Elements:
- Double gold border frame
- Decorative corner accents
- Ornamental flourishes (✻) between sections
- Luxurious spacing and padding
Responsive Layout:
- Adapts beautifully to all screen sizes
- Adjusted font sizes and spacing for mobile
- Maintains elegance on small devices
Interactive RSVP Button:
- Gold border with transparent background
- Hover effect turns solid gold with dark text
- Prominent placement at the bottom
Content Structure:
- Formal wording throughout
- Classic wedding quote
- Clear section hierarchy
- Traditional date formatting
This design exudes sophistication with its rich color palette, elegant typography, and refined details, perfect for a formal wedding invitation.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #0a2e1f;
background-image:
linear-gradient(rgba(10, 46, 31, 0.9), rgba(10, 46, 31, 0.9)),
url('data:image/svg+xml;utf8,');
font-family: 'Lora', serif;
color: #d4af37;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.invitation-card {
max-width: 650px;
width: 100%;
margin: 30px auto;
padding: 50px 40px;
background-color: rgba(10, 46, 31, 0.7);
border: 2px solid #d4af37;
border-radius: 3px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
text-align: center;
position: relative;
overflow: hidden;
}
.invitation-card::before {
content: "";
position: absolute;
top: 15px;
bottom: 15px;
left: 15px;
right: 15px;
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 2px;
pointer-events: none;
}
h1 {
font-family: 'Playfair Display', serif;
font-size: 2.8rem;
color: #d4af37;
margin-bottom: 10px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}
.subtitle {
font-family: 'Great Vibes', cursive;
font-size: 1.8rem;
margin-bottom: 30px;
color: #d4af37;
}
.couple-names {
font-family: 'Great Vibes', cursive;
font-size: 3.5rem;
color: #d4af37;
margin: 30px 0;
line-height: 1.2;
}
.details {
margin: 40px 0;
}
.detail-item {
margin: 20px 0;
}
.detail-title {
font-family: 'Playfair Display', serif;
font-weight: 500;
font-size: 1.1rem;
letter-spacing: 1px;
color: #d4af37;
display: block;
margin-bottom: 8px;
text-transform: uppercase;
}
.detail-content {
font-size: 1.1rem;
}
.message {
font-style: italic;
margin: 40px 0 30px;
color: rgba(212, 175, 55, 0.9);
line-height: 1.8;
font-size: 1.1rem;
}
.rsvp-button {
display: inline-block;
background: transparent;
color: #d4af37;
padding: 15px 40px;
margin: 20px 0 10px;
text-decoration: none;
border-radius: 0;
font-family: 'Playfair Display', serif;
font-weight: 500;
letter-spacing: 1px;
transition: all 0.3s ease;
border: 2px solid #d4af37;
cursor: pointer;
font-size: 1rem;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.rsvp-button:hover {
background-color: #d4af37;
color: #0a2e1f;
box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}
.ornament {
font-size: 1.8rem;
color: rgba(212, 175, 55, 0.5);
letter-spacing: 15px;
margin: 20px 0;
}
.corner {
position: absolute;
width: 40px;
height: 40px;
border-color: #d4af37;
border-style: solid;
border-width: 0;
opacity: 0.6;
}
.top-left {
top: 15px;
left: 15px;
border-top-width: 2px;
border-left-width: 2px;
}
.top-right {
top: 15px;
right: 15px;
border-top-width: 2px;
border-right-width: 2px;
}
.bottom-left {
bottom: 15px;
left: 15px;
border-bottom-width: 2px;
border-left-width: 2px;
}
.bottom-right {
bottom: 15px;
right: 15px;
border-bottom-width: 2px;
border-right-width: 2px;
}
@media (max-width: 700px) {
.invitation-card {
padding: 40px 25px;
margin: 20px auto;
}
h1 {
font-size: 2.2rem;
}
.subtitle {
font-size: 1.5rem;
}
.couple-names {
font-size: 2.8rem;
}
.ornament {
font-size: 1.4rem;
letter-spacing: 10px;
margin: 15px 0;
}
.detail-item {
margin: 15px 0;
}
.rsvp-button {
padding: 12px 30px;
}
}
@media (max-width: 480px) {
.invitation-card {
padding: 30px 20px;
}
h1 {
font-size: 1.8rem;
}
.couple-names {
font-size: 2.2rem;
margin: 20px 0;
}
.ornament {
font-size: 1.2rem;
letter-spacing: 8px;
margin: 10px 0;
}
.detail-title {
font-size: 1rem;
}
.detail-content {
font-size: 1rem;
}
.message {
font-size: 1rem;
margin: 30px 0;
}
}
// no script
إرسال تعليق
Thank you
Learning robo team