How to Make a Responsive RSVP Wedding Invitation Card using Html Css

0

Design Features:
Elegant Typography:

  • Uses "Great Vibes" for headings and couple names
  • "Lora" for body text with italic styling for emphasis

Soft Color Palette:

  • Blush pink (#d4a59a) for accents
  • Warm brown (#b38867) for secondary accents
  • Cream/white background with subtle pattern

Responsive Layout:

  • Adapts to mobile screens with adjusted font sizes
  • Centered content with appropriate spacing

Visual Elements:

  • Decorative border with inner subtle border
  • Floral-inspired SVG background pattern
  • Ornamental dots to separate sections
  • Prominent RSVP button with hover effects

Content Structure:

  • Clear section hierarchy
  • Important information emphasized
  • Personal message with romantic quote

The design maintains elegance while being fully responsive across devices. The RSVP button is prominently displayed and interactive.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wedding Invitation</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"> </head> <body> <div class="invitation-card"> <h1>You're Invited</h1> <div class="ornament">• • •</div> <div class="couple-names"> Sarah & Michael </div> <div class="ornament">• • •</div> <div class="details"> <div class="detail-item"> <span class="detail-title">Date</span> Saturday, June 15th, 2024 </div> <div class="detail-item"> <span class="detail-title">Time</span> 4:30 in the afternoon </div> <div class="detail-item"> <span class="detail-title">Location</span> The Grand Ballroom<br> 123 Riverside Drive<br> Portland, Oregon </div> </div> <div class="message"> "Love is not about how many days, months or years you have been together. It's all about how much you love each other every single day." <br><br> Please join us as we begin our new journey together. </div> <button class="rsvp-button">RSVP BY MAY 15TH</button> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background-color: #f9f3f0;
            font-family: 'Lora', serif;
            color: #555;
            line-height: 1.6;
            padding: 20px;
        }
        
        .invitation-card {
            max-width: 600px;
            margin: 30px auto;
            padding: 40px;
            background-color: white;
            background-image: url('data:image/svg+xml;utf8,');
            background-size: 200px;
            background-position: center;
            border-radius: 5px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(0, 0, 0, 0.05);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .invitation-card::before {
            content: "";
            position: absolute;
            top: 20px;
            bottom: 20px;
            left: 20px;
            right: 20px;
            border: 1px solid #e8c4c4;
            border-radius: 3px;
            pointer-events: none;
        }
        
        h1 {
            font-family: 'Great Vibes', cursive;
            font-size: 3.5rem;
            color: #d4a59a;
            margin-bottom: 20px;
            font-weight: normal;
            line-height: 1.2;
        }
        
        .couple-names {
            font-family: 'Great Vibes', cursive;
            font-size: 2.8rem;
            color: #b38867;
            margin: 30px 0;
            line-height: 1.2;
        }
        
        .details {
            margin: 30px 0;
        }
        
        .detail-item {
            margin: 15px 0;
        }
        
        .detail-title {
            font-weight: 600;
            font-style: italic;
            color: #b38867;
            display: block;
            margin-bottom: 5px;
        }
        
        .message {
            font-style: italic;
            margin: 30px 0;
            color: #777;
            line-height: 1.8;
        }
        
        .rsvp-button {
            display: inline-block;
            background-color: #d4a59a;
            color: white;
            padding: 12px 30px;
            margin: 20px 0;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            box-shadow: 0 4px 15px rgba(212, 165, 154, 0.3);
        }
        
        .rsvp-button:hover {
            background-color: #b38867;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(212, 165, 154, 0.4);
        }
        
        .ornament {
            font-size: 1.5rem;
            color: #d4a59a;
            letter-spacing: 10px;
            margin: 20px 0;
        }
        
        @media (max-width: 600px) {
            .invitation-card {
                padding: 30px 20px;
            }
            
            h1 {
                font-size: 2.8rem;
            }
            
            .couple-names {
                font-size: 2.2rem;
            }
            
            .ornament {
                font-size: 1.2rem;
                letter-spacing: 5px;
            }
        }
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension. 


// no script
We hope you would like this Calculator using html css and javascript code
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome