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 =
<!-- Font Awesome Icons -->
< link rel = "stylesheet" href =
< 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: