Wedding Invitation (Template)

In this example below you will see how to do a Wedding Invitation (Template) with some HTML / CSS and Javascript

Html, Css animation and JavaScript button. modal box; navbar

Thumbnail
This awesome code was written by ReshaFori, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ReshaFori ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Wedding Invitation (Template)</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<meta name="viewport" content="widce=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--Container-->	
<div class="container">
	<div class="all">
                                        <!--header-->
		<header  id="home">
			<div class="heading">
					<h1>Jane & John</h1>
					<h2>Are getting married</h2>
                <h2>17.07.2017</h2>
			</div>
																									<!--end header-->
		</header>
																									<!--start section1-->
		<section class="start">
																									<!--part Jane And John-->
			<div class="two" id="us">
				<h3>Jane & John</h3>
				<img src="https://www.w3schools.com/w3images/wedding_couple2.jpg">
				<p><i>You all know us. And we all know you. We are getting married lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint
				occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
					laboris nisi ut aliquip ex ea commodo consequat.</i></p>
				<button class="black"><a href="#wedding" class="dif">Wedding Details</a></button>
			</div>
			<div class="ofCourse">
				<div class="heading">
					<h1>You Are Invited</h1>
					<h2>Of course..</h2>
				</div>
			</div>
			<div class="two" id="wedding">
				<h3>THE WEDDING</h3>
				<img src="https://www.w3schools.com/w3images/wedding_location.jpg">
			</div>
			<div class="content">
				<div class="whenWhere">
					<h2>When</h2>
					<p>Wedding Ceremony - 2:00pm</p>
					<p>Reception & Dinner - 5:00pm</p>
				</div>
				<div class="whenWhere">
					<h2>Where</h2>
					<p>Some place, an address</p>
					<p>Some where, some address</p>
				</div>
			</div>
																									<!--end section1-->
		</section>
																									<!--start section2-->
		<section class="second">
			<div class="beforEnd">
				<h1>HOPE YOU CAN MAKE IT!</h1>
				<p>Kindly Respond By January, 2017</p>
				<button id="appear">RSVP</button>
			</div>																							<!--end section2-->
		</section>
	</div>	
																									<!--box modal-->
					<div class="ok">
            <div id="box" class="animated zoomIn">
                    <h1>CAN YOU COME?</h1>
                    <p>We really hope you can make it.</p>
                    <form>
                        <input type="text" placeholder="Name(s)" name="name">
                    </form>
                    <p><i>Sincerely, John & Jane</i></p>
							<div id="disappear">
                    <div class="green" >
                        <button class="one" >Going</button>
                    </div>
                    <div class="red" >
                        <button class="another">Can't come</button>
                    </div>
							</div>
		      </div>
			</div>                                     <!--navbar bottom-->
		<nav>			
				<a href="#home">Home</a>
				<a href="#us">Jane & John</a>
				<a href="#wedding">Wedding</a>
				<a href="#appear" class="del">RSVP</a>
		</nav>
																						                                          <!--end container-->
</div>
																								<!--footer-->
	<footer>
		<p>Powered by<a href="https://www.w3schools.com/w3css/default.asp" title="w3.css" target="_blank" class="com"> w3.css</a></p>	
	</footer>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ReshaFori/wedding-invitation-template-xqBrMm */
body,h1,h2{font-family: "Raleway", sans-serif}
body, html{height:100%}		
p{line-height:2}
															/*header*/
.container{width:100%}
.all{
	background-color:lavenderblush; width:100%
}
header{
	background:url("https://www.w3schools.com/w3images/wedding_couple.jpg") no-repeat; background-size:cover; height:660px;  -webkit-filter: grayscale(50%);filter: grayscale(50%); width:100%
	
}
.heading{
	color:white; text-align:center ;padding:200px 0 0 0; 
}
.heading h1{font-size:55px; letter-spacing:4px}
.heading h2{font-size:25px; letter-spacing:4px}
											/*section1 & part Jane And John*/


.two{
	 justify-content:center; text-align:center; margin:75px 30px 0 25px
}
.two h3{
	font-size:40px; color:gray
}
.two img{
	-webkit-filter: grayscale(50%);filter: grayscale(50%); border-radius:1%; max-width:100%
}
.two p{
	font-size:13.50px; line-height:35px; text-align:left; margin:40px 70px 
}
.black {
	padding:15px 18px; font-size:18px; background-color:black; border:none; cursor:pointer; margin:45px
}
.black:hover{
	background-color:lightgray;
}
.black a{
	text-decoration:none; color:white; font-size:15px
}
.black .dif:hover{color:blue}
.ofCourse{
    background:url(https://www.w3schools.com/w3images/flowers.jpg) no-repeat; background-size:cover; height:700px;width:100%
}
.content{
	display:flex; text-align:center; margin:75px ; justify-content:space-around
}
.second{
	background-color:mistyrose; height:350px; 
}
.beforEnd{
	padding:100px; text-align:center; font-size:20px; letter-spacing:4px
}
.beforEnd p{font-size:15px}
.beforEnd button{
	padding:12px 40px; font-size:30px; color:white; border:none; cursor:pointer; background-color:salmon; border-radius:3%
}
.beforEnd button:hover{
	background-color:lightgray; color:black;  
}
.ok{
    width:100%; height:100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); position:relative; z-index:0
}
#box{
	box-shadow:2px 2px 18px gray; width:60%; margin:0 0 0 210px; text-align:center; height:335px; position:fixed; bottom:50px; background-color: white; z-index:1; display:none 
}
.animated{
    -o-animation-duration: 0.1s;
    -o-animation-name:zoomIn;
    animation-duration: 0.4s; 
    animation-name:zoomIn;
    animation-fill-mode:both
}
@-o-keyframes zoomIn{
    0% {
        opacity:0;
        transform:scale3d(.3, .3, .3);
    }
    50% {
        opacity:1;
    }
}
@keyframes zoomIn{
    0% {
        opacity:0;
        transform:scale3d(.3, .3, .3);
    }
    50% {
        opacity:1;
    }
}

#box h1{
	padding:50px 0 0 0px; letter-spacing:4px
}
#box p{font-size:13px}
input{width:80%; padding:8px}
#box div{
	width:83%; display:inline-flex; padding:10px; margin:0 0px; cursor:pointer 
}
button{
	cursor:pointer; border:none; color:white; opacity:.7
}
.green, .one{
	background-color:green; justify-content:center; cursor:pointer; opacity:.7
}
.red, .another{
	background-color:red; justify-content:center; opacity:.7; 
}
.green:hover{background-color:lightgray}
.red:hover{background-color:lightgray}
															/*navbar bottom*/
nav{
	background-color:white;opacity:.7; position:fixed;left:0; bottom:0; width:100%; padding:15px
}
nav a{
	text-decoration:none; font-size:12px; color:black; padding:10px 95px
}
.del:hover{color:white; background-color:black}

nav a:hover{background-color:gray; padding:10px 95px}
footer{
	background-color:black;  padding:40px; text-align:center; font-size:15px; margin-bottom:50px 
}
footer p, .com{ color:white}
p .com:hover{color:green}
																							/*media quary*/
@media screen and (max-width:767px){
    
	body{background-color: violet; }
	.container{width:100%; }
	.all{max-height:100%}
	header{background-size:contain}
	.heading h1{margin-top:-125px; font-size:30px}
	.heading h2{font-size:20px}
	.ofCourse{background-size:contain}
	.beforEnd button{margin-bottom:102px;}
	.content{display:block}
	.beforEnd{font-size:14px; padding:50px}
	.start{margin-top:-370px}
	.two{margin-top:-450px}
	.two p{margin:18px 0px}
	.whenWhere{margin:50px 0}
	#box{ margin:0 0 120px 0 ;width:100%}
	footer{padding:22px;margin-bottom:165px}
	nav a{display:inline-flex; margin-left:50px }
    
}


/*Downloaded from https://www.codeseek.co/ReshaFori/wedding-invitation-template-xqBrMm */

var one = document.getElementById("appear")
		two = document.getElementById("disappear") 
	one.onclick = function() { document.getElementById("box").style.display = "block";
}

	two.onclick = function() { document.getElementById("box").style.display = "none";
}

Comments