Design a Wedding Theme based Page using HTML and CSS
Designing a wedding-themed webpage is a fun way to capture the joy of this special day. In this article, we’ll help you create a beautiful webpage using simple HTML and CSS.
Preview
Approach
- Firslty, create a new file with the “index.html”. Include Google Fonts, Font Awesome Icons, and external CSS link.
- Then, organise content in header, navigation, main sections, and footer. Central header has “Geek & Marry” and heart icon. Navigation bar with Font Awesome icon links.
- Set properties with box-sizing, font styles, and color schemes. Apply hover effects for navigation links and buttons.
- Responsive layout adjustments for smaller screens. Design footer with copyright notice.
- Footer has styling includes background color and box shadow.
Example: The example illustrates how to design a Wedding theme based page using HTML and CSS.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title > Geek & Marry - We are getting Married </ title > <!-- Google Fonts --> < link rel = "stylesheet" href = "https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" > <!-- Font Awesome Icons --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" > < link rel = "stylesheet" href = "styles.css" > </ head > < body > < header > < h1 > Geek < i class = "fas fa-heart" ></ i > Marry </ h1 > < h2 >We are Getting Married</ h2 > </ header > < nav > < ul > < li > < a href = "#our-story" > < i class = "fas fa-heart" ></ i > Our Story </ a > </ li > < li > < a href = "#the-date" > < i class = "far fa-calendar-alt" ></ i > The Date & Venue </ a > </ li > < li > < a href = "#rsvp" > < i class = "fas fa-check" ></ i > RSVP </ a > </ li > < li > < a href = "#gallery" > < i class = "far fa-image" ></ i > Gallery </ a > </ li > < li > < a href = "#wishes" > < i class = "fas fa-feather-alt" ></ i > Share Your Wishes </ a > </ li > </ ul > </ nav > < main > < section id = "our-story" > < h2 > < i class = "fas fa-heart" ></ i > Our Happily Ever After Begins... </ h2 > < p > John and Jane met in the most unexpected way and fell deeply in love. Their journey together is a story of laughter, adventures, and unwavering support. </ p > </ section > < section id = "the-date" > < h2 > < i class = "far fa-calendar-alt" ></ i > Mark Your Calendars! </ h2 > < p > We'll tie the knot on 14 Feb 2024 at 11:00 PM at Marriage Lawn. </ p > < p > XYZ, Hazratganj ,Luckonw , Uttar Pradesh </ p > </ section > < section id = "rsvp" > < h2 > < i class = "fas fa-check" ></ i > Save your Spoons for Dessert! </ h2 > < p > Please RSVP by 25 January so we can finalize our enchanted guest list. </ p > < a href = "#" > < i class = "far fa-edit" ></ i > RSVP Here </ a > </ section > < section id = "gallery" > < h2 > < i class = "far fa-images" ></ i > Memories to Last a Lifetime </ h2 > </ section > < section id = "wishes" > < h2 > < i class = "fas fa-feather-alt" ></ i > Shower us with Love & Laughter! </ h2 > < p > Leave your heartfelt wishes for our enchanting journey together. </ p > < form action = "/" method = "post" > < label for = "name" > Your Name </ label > < input type = "text" name = "name" id = "name" required> < label for = "message" > Your Warmest Wishes </ label > < textarea name = "message" id = "message" required> </ textarea > < button type = "submit" > < i class = "far fa-paper-plane" ></ i > Send your Wishes </ button > </ form > </ section > </ main > < footer > < p > © John & Jane 2024. All rights reserved. </ p > </ footer > </ body > </ html > |
CSS
body, h 1 , h 2 , p, ul,li { margin : 0 ; padding : 0 ; box-sizing: border-box; } body { font-family : 'Segoe UI' , Tahoma , Geneva, Verdana , sans-serif ; background-color : #f8f8f8 ; color : #333 ; font-family : 'Quicksand' , sans-serif ; } header { text-align : center ; padding : 20px ; background-color : #ffffff ; box-shadow: 0px 2px 10px rgba( 0 , 0 , 0 , 0.1 ); border-radius: 10px ; } header h 1 { font-size : 2.5em ; color : #4c2c69 ; } header h 2 { font-size : 1.5em ; color : #6b567c ; } /* Navigation styles */ nav { background-color : #4c2c69 ; box-shadow: 0px 2px 5px rgba( 0 , 0 , 0 , 0.2 ); } nav ul { list-style : none ; display : flex; justify- content : center ; padding : 10px ; } nav li { margin : 0 ; } nav a { text-decoration : none ; color : #fff ; padding : 10px 20px ; margin : 0 10px ; border-radius: 5px ; transition: background-color 0.3 s ease; display : inline- block ; } nav a:hover { background-color : #6b567c ; } /* Main content styles */ main { padding : 20px ; } section { margin-bottom : 40px ; background-color : #fff ; padding : 20px ; border-radius: 10px ; box-shadow: 0px 2px 10px rgba( 0 , 0 , 0 , 0.1 ); } section h 2 { color : #4c2c69 ; } p { line-height : 1.6 ; } /* Image grid styles */ .image-grid { display : grid; grid-template-columns: repeat (auto-fill, minmax( 250px , 1 fr)); gap: 20px ; } img { width : 100% ; border-radius: 5px ; box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 , 0.1 ); } /* Form styles */ form { margin-top : 20px ; background-color : #fff ; padding : 20px ; border-radius: 10px ; box-shadow: 0px 2px 10px rgba( 0 , 0 , 0 , 0.1 ); } label { display : block ; margin-bottom : 5px ; color : #4c2c69 ; } input, textarea { width : 100% ; padding : 10px ; margin-bottom : 15px ; border : 1px solid #ccc ; border-radius: 5px ; } button { background-color : #4c2c69 ; color : #fff ; padding : 10px 20px ; border : none ; border-radius: 5px ; cursor : pointer ; transition: background-color 0.3 s ease; } button:hover { background-color : #6b567c ; } /* Footer styles */ footer { text-align : center ; padding : 10px ; background-color : #4c2c69 ; color : #fff ; box-shadow: 0px -2px 5px rgba( 0 , 0 , 0 , 0.2 ); } /* Media query for smaller screens */ @media ( max-width : 768px ) { nav ul { flex- direction : column; align-items: center ; } nav a { margin : 5px 0 ; } .image-grid { grid-template-columns: repeat (auto-fill, minmax( 100% , 1 fr)); } } /* Additional styles */ header { background-color : #ffcccb ; color : #4c2c69 ; } nav a { color : #fff ; } section { background-color : #f8f8f8 ; padding : 20px ; border-radius: 10px ; box-shadow: 0px 2px 10px rgba( 0 , 0 , 0 , 0.1 ); margin-bottom : 20px ; } button { background-color : #4c2c69 ; color : #fff ; } footer { background-color : #4c2c69 ; color : #fff ; padding : 10px ; text-align : center ; } /* Add hover effects for links and buttons */ nav a:hover, button:hover { background-color : #6b567c ; } /* Styling for Font Awesome icons */ i { margin-right : 5px ; } main { padding : 20px ; } section { background-color : #f8f8f8 ; padding : 20px ; border-radius: 10px ; box-shadow: 0px 2px 10px rgba( 0 , 0 , 0 , 0.1 ); margin-bottom : 20px ; } section h 2 { color : #4c2c69 ; display : flex; align-items: center ; margin-bottom : 15px ; } section p { line-height : 1.6 ; margin-bottom : 15px ; } section a { display : inline- block ; padding : 10px 20px ; background-color : #4c2c69 ; color : #fff ; text-decoration : none ; border-radius: 5px ; transition: background-color 0.3 s ease; } section a:hover { background-color : #6b567c ; } form { margin-top : 20px ; background-color : #fff ; padding : 20px ; border-radius: 10px ; box-shadow: 0px 2px 10px rgba( 0 , 0 , 0 , 0.1 ); } form label { display : block ; margin-bottom : 10px ; color : #4c2c69 ; } form input, form textarea { width : 100% ; padding : 10px ; margin-bottom : 15px ; border : 1px solid #ccc ; border-radius: 5px ; } form button { background-color : #4c2c69 ; color : #fff ; padding : 10px 20px ; border : none ; border-radius: 5px ; cursor : pointer ; transition: background-color 0.3 s ease; } form button:hover { background-color : #6b567c ; } /* Styling for Font Awesome icons */ section i { font-size : 24px ; margin-right : 10px ; color : #6b567c ; } |
Output:
Contact Us