├── _config.yml
├── hi2.mp3
├── pic1.jpg
├── pic10.jpg
├── pic11.jpg
├── pic12.jpg
├── pic13.jpg
├── pic14.jpg
├── pic15.jpg
├── pic16.jpg
├── pic2.jpg
├── pic3.jpg
├── pic4.jpg
├── pic5.jpg
├── pic6.jpg
├── pic7.jpg
├── pic8.jpg
├── pic9.jpg
├── birthdaysong.mp3
├── README.md
└── index.html


/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/hi2.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/hi2.mp3


--------------------------------------------------------------------------------
/pic1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic1.jpg


--------------------------------------------------------------------------------
/pic10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic10.jpg


--------------------------------------------------------------------------------
/pic11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic11.jpg


--------------------------------------------------------------------------------
/pic12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic12.jpg


--------------------------------------------------------------------------------
/pic13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic13.jpg


--------------------------------------------------------------------------------
/pic14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic14.jpg


--------------------------------------------------------------------------------
/pic15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic15.jpg


--------------------------------------------------------------------------------
/pic16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic16.jpg


--------------------------------------------------------------------------------
/pic2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic2.jpg


--------------------------------------------------------------------------------
/pic3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic3.jpg


--------------------------------------------------------------------------------
/pic4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic4.jpg


--------------------------------------------------------------------------------
/pic5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic5.jpg


--------------------------------------------------------------------------------
/pic6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic6.jpg


--------------------------------------------------------------------------------
/pic7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic7.jpg


--------------------------------------------------------------------------------
/pic8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic8.jpg


--------------------------------------------------------------------------------
/pic9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/pic9.jpg


--------------------------------------------------------------------------------
/birthdaysong.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanakagrawal54/Happy-Birthday/HEAD/birthdaysong.mp3


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Happy-Birthday
 2 | 
 3 | Want to give surprise to your close ones on their birthday? Here's a website for greeting them.
 4 | Its a webpage, greeting card for birthday wishes. 
 5 | 
 6 | Fork the repositry, Just a slight changes and here it is
 7 |      
 8 |      Friend Name--> birthday person's name
 9 |      
10 |      pic1, pic2 ....pic16 to images which you want them to show.
11 |      
12 | ( Dont worry if you dont have 16 pictures, I have already set some pictures for you.)
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>
  5 | 		Friend Name
  6 | 	</title>
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1"/> 
  8 | 	 <embed src='hi2.mp3' loop="true" autostart="true" width="2" height="0" hidden="true" allow="autoplay">
  9 | 	  <style type="text/css">
 10 | 	  	@import url("https://fonts.googleapis.com/css?family=Sacramento&display=swap");
 11 | body{
 12 | 	background-color:black;
 13 | 	margin:0px;
 14 | }
 15 | h1 {
 16 |    font-size: calc(20px + 18vh);
 17 |    line-height: calc(30px + 22vh);
 18 | /* text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
 19 |     0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
 20 |   color: #fccaff; */
 21 |    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
 22 |    color: #fff6a9;
 23 |    font-family: "Sacramento", cursive;
 24 |    text-align: center;
 25 |    animation: blink 5s infinite;
 26 |   -webkit-animation: blink 5s infinite;
 27 | }
 28 | 
 29 | .Happy {
 30 |   padding 2vw;
 31 |   display: flex;
 32 |   justify-content: center;
 33 |   align-items: center;
 34 |   height: 100vh;
 35 |   background: #222;
 36 |   background-image: repeating-linear-gradient(
 37 |     to bottom,
 38 |     transparent 7px,
 39 |     rgba(0, 0, 0, 0.8) 9px,
 40 |     rgba(0, 0, 0, 0.8) 13px,
 41 |     transparent 13px
 42 |   );
 43 | }
 44 | 
 45 | @-webkit-keyframes blink {
 46 |   20%,
 47 |   24%,
 48 |   55% {
 49 |     color: #111;
 50 |     text-shadow: none;
 51 |   }
 52 | 
 53 |   0%,
 54 |   19%,
 55 |   21%,
 56 |   23%,
 57 |   25%,
 58 |   54%,
 59 |   56%,
 60 |   100% {
 61 | /*     color: #fccaff;
 62 |     text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
 63 |       0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
 64 |   text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
 65 |     color: #fff6a9;
 66 |   }
 67 | }
 68 | 
 69 | @keyframes blink {
 70 |   20%,
 71 |   24%,
 72 |   55% {
 73 |     color: #111;
 74 |     text-shadow: none;
 75 |   }
 76 | 
 77 |   0%,
 78 |   19%,
 79 |   21%,
 80 |   23%,
 81 |   25%,
 82 |   54%,
 83 |   56%,
 84 |   100% {
 85 |   text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
 86 |     color: #fff6a9;
 87 |   }
 88 | }
 89 | .pic{
 90 | 	background-color:#222;
 91 | 	background-image: repeating-linear-gradient(
 92 | 	    to bottom,
 93 | 	    transparent 7px,
 94 | 	    rgba(0, 0, 0, 0.8) 9px,
 95 | 	    rgba(0, 0, 0, 0.8) 13px,
 96 | 	    transparent 13px
 97 | 	  );
 98 | 	max-width:100%;
 99 | 	height: 900px;
100 | 	
101 | }
102 | .main {
103 |   display: flex;
104 |   overflow: hidden;
105 |   height: 50vw;
106 |   background: #333;
107 |   max-width:80%;
108 |   margin-left:10%;
109 |   height:700px;
110 |   border:10px solid #fff6a9;
111 |   box-shadow:  0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
112 | }
113 |  
114 | .main img {
115 |   width:20vw;
116 |   height:310px; 
117 |   vertical-align: middle;
118 |   border: 2px solid white;
119 |   box-sizing: border-box;
120 |   transition: opacity .2s;
121 | }
122 |  
123 | .main:hover img {
124 |   opacity: 0.5;
125 | }
126 |  
127 | .main img:hover {
128 |   opacity: 1;
129 | }
130 |  
131 | .main .single-column {
132 | 	animation:slide 16s infinite linear;
133 | }
134 |  
135 | .main .single-column:hover {
136 | 	animation-play-state: paused;
137 | }
138 |  
139 | .main .single-column:nth-of-type(odd) {
140 |   align-self: flex-end;
141 |   --direction: 40%;
142 | }
143 |  
144 | @keyframes slide {
145 |   to {
146 |     -webkit-transform: translateY(var(--direction, -50%));
147 |             transform: translateY(var(--direction, -50%));
148 |   }
149 | }
150 | 
151 | @media screen and (max-width:550px){
152 | 	h1{
153 | 		font-size:70px;
154 | 		line-height:15vh;
155 | 	}
156 | 
157 | 	.main{
158 | 		border:3px solid #fff6a9;
159 | 		max-width:90%;
160 | 		margin-left:5%;
161 | 		height:70vh;
162 | 	}
163 | 	.main img{
164 | 		width:22vw;
165 | 		border:1px solid white;
166 | 		height:200px;
167 | 	}
168 | 	
169 |  	.main .single-column:nth-of-type(odd) {
170 |   align-self: flex-end;
171 |   --direction: 35%;
172 | }
173 | 	
174 | }
175 | 
176 | 	  </style>
177 | </head>
178 | <body>
179 | <div class="Happy">
180 | 	<h1>Happy Birthday <br> 
181 |              Friend Name
182 | 	</h1>
183 | </div>
184 | <div class="pic">
185 |    <div class="main">
186 | 	 <div class="single-column">
187 | 		<a href="#"><img src="pic1.jpg" alt="image"></a>
188 | 		<a href="#"><img src="pic3.jpg" alt="image"></a>
189 | 		<a href="#"><img src="pic2.jpg" alt="image"></a>
190 | 		<a href="#"><img src="pic4.jpg" alt="image"></a>
191 | 	</div>
192 | 	<div class="single-column">
193 | 		<a href="#"><img src="pic5.jpg" alt="image"></a>
194 | 		<a href="#"><img src="pic6.jpg" alt="image"></a>
195 | 		<a href="#"><img src="pic7.jpg" alt="image"></a>
196 | 		<a href="#"><img src="pic8.jpg" alt="image"></a>
197 | 	</div>
198 | 	<div class="single-column">
199 | 		<a href="#"><img src="pic9.jpg" alt="image"></a>
200 | 		<a href="#"><img src="pic10.jpg" alt="image"></a>
201 | 		<a href="#"><img src="pic11.jpg" alt="image"></a>
202 | 		<a href="#"><img src="pic12.jpg" alt="image"></a>
203 | 	</div>
204 | 	<div class="single-column">
205 | 		<a href="#"><img src="pic13.jpg" alt="image"></a>
206 | 		<a href="#"><img src="pic14.jpg" alt="image"></a>
207 | 		<a href="#"><img src="pic15.jpg" alt="image"></a>
208 | 		<a href="#"><img src="pic16.jpg" alt="image"></a>
209 | 	</div>
210 |     </div>
211 | </div>
212 | </body>
213 | </html>
214 | 


--------------------------------------------------------------------------------