├── img
    ├── bg.1.jpg
    ├── bg.2.jpg
    ├── bg.3.jpg
    ├── bg.4.jpg
    ├── bg.5.jpg
    ├── bg.6.jpg
    ├── bg.7.jpg
    ├── bg.8.jpg
    ├── bg.9.jpg
    ├── bg14.jpg
    ├── Logo.1.jpg
    ├── bg.10.jpg
    ├── bg.11.jpg
    ├── bg.12.jpg
    ├── bg.13.jpg
    ├── bg.15.jpg
    ├── bg.16.jpg
    ├── bg.17.jpg
    ├── bg.18.jpg
    ├── bg.19.jpg
    ├── bg.20.jpg
    ├── bg.21.jpg
    ├── bg.22.jpg
    ├── bg.23.jpg
    ├── bg.24.jpg
    ├── bg.25.jpg
    ├── bg.26.jpg
    ├── bg.27.jpg
    ├── bg.28.jpg
    ├── bg.29.jpg
    ├── cover.1.jpg
    └── Broken Hearts.jpg
├── html
    ├── profile.html
    ├── videos.html
    └── pictures.html
├── css
    └── style.css
└── index.html


/img/bg.1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.1.jpg


--------------------------------------------------------------------------------
/img/bg.2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.2.jpg


--------------------------------------------------------------------------------
/img/bg.3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.3.jpg


--------------------------------------------------------------------------------
/img/bg.4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.4.jpg


--------------------------------------------------------------------------------
/img/bg.5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.5.jpg


--------------------------------------------------------------------------------
/img/bg.6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.6.jpg


--------------------------------------------------------------------------------
/img/bg.7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.7.jpg


--------------------------------------------------------------------------------
/img/bg.8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.8.jpg


--------------------------------------------------------------------------------
/img/bg.9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.9.jpg


--------------------------------------------------------------------------------
/img/bg14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg14.jpg


--------------------------------------------------------------------------------
/img/Logo.1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/Logo.1.jpg


--------------------------------------------------------------------------------
/img/bg.10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.10.jpg


--------------------------------------------------------------------------------
/img/bg.11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.11.jpg


--------------------------------------------------------------------------------
/img/bg.12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.12.jpg


--------------------------------------------------------------------------------
/img/bg.13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.13.jpg


--------------------------------------------------------------------------------
/img/bg.15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.15.jpg


--------------------------------------------------------------------------------
/img/bg.16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.16.jpg


--------------------------------------------------------------------------------
/img/bg.17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.17.jpg


--------------------------------------------------------------------------------
/img/bg.18.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.18.jpg


--------------------------------------------------------------------------------
/img/bg.19.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.19.jpg


--------------------------------------------------------------------------------
/img/bg.20.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.20.jpg


--------------------------------------------------------------------------------
/img/bg.21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.21.jpg


--------------------------------------------------------------------------------
/img/bg.22.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.22.jpg


--------------------------------------------------------------------------------
/img/bg.23.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.23.jpg


--------------------------------------------------------------------------------
/img/bg.24.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.24.jpg


--------------------------------------------------------------------------------
/img/bg.25.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.25.jpg


--------------------------------------------------------------------------------
/img/bg.26.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.26.jpg


--------------------------------------------------------------------------------
/img/bg.27.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.27.jpg


--------------------------------------------------------------------------------
/img/bg.28.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.28.jpg


--------------------------------------------------------------------------------
/img/bg.29.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/bg.29.jpg


--------------------------------------------------------------------------------
/img/cover.1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/cover.1.jpg


--------------------------------------------------------------------------------
/img/Broken Hearts.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-Basit-Ansari/Static-Hearts/HEAD/img/Broken Hearts.jpg


--------------------------------------------------------------------------------
/html/profile.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |     <title> Broken Hearts </title>
  8 |     <link rel="icon" type="image/x-icon" href="../img/logo.1.jpg">
  9 |     <link rel="stylesheet" a href="../css/style.css" type="text/css" />
 10 | 
 11 | </head>
 12 | 
 13 | 
 14 | <body>
 15 | 
 16 | 
 17 | 
 18 | 
 19 | 
 20 | 
 21 | 
 22 |     
 23 | <div class="h1" align="center" color="gray">WELCOME TO BROKEN HEARTS<br>SAY GOOD BYE TO SADNESS</div>
 24 | 
 25 | 
 26 | <header class="header">
 27 | 
 28 |     <div class="right">
 29 |         <button class="btn"><a href="../index.html"> Upload</a></button>
 30 |         <button class="btn">Email Us</button>
 31 |     </div>
 32 | 
 33 | 
 34 | 
 35 | 
 36 |     <div class="left">
 37 | 
 38 | 
 39 |         <div>Broken HEARTS</div>
 40 |     </div>
 41 | 
 42 |     <div class="mid">
 43 |         <ul class="navbar">
 44 |             <li><a href="../index.html">Home</a></li>
 45 |             <li><a href="pictures.html">pictures</a></li>
 46 |             <li><a href="videos.html">Videos</a></li>
 47 |             <li><a href="profile.html" class="active">Profile</a></li>
 48 |         </ul>
 49 |     </div>
 50 | 
 51 | 
 52 | 
 53 | </header>
 54 | 
 55 | 
 56 | 
 57 | 
 58 | 
 59 | 
 60 | 
 61 | 
 62 | 
 63 | 
 64 | 
 65 | 
 66 | 
 67 | 
 68 | 
 69 | 
 70 | 
 71 | 
 72 | 
 73 | 
 74 | 
 75 | 
 76 | 
 77 | 
 78 | 
 79 | 
 80 | 
 81 | 
 82 | 
 83 | 
 84 | 
 85 | 
 86 | 
 87 | 
 88 | 
 89 | 
 90 | 
 91 |     
 92 | <footer class="footer" align="center">
 93 |     <div>
 94 |         Current time is <span id="time"></span>
 95 |     
 96 |     <br> 
 97 |     <br> 
 98 |         @BROKEN HEARTS OFFICIAL
 99 |     </div>
100 |     
101 | </footer>	
102 |     <script>
103 |         let now = new Date();
104 |         console.log(now);
105 | 
106 |         let dt = new Date(1000);
107 |         console.log(dt);
108 | 
109 |        
110 | 
111 |        
112 |         let newDate = new Date(3020, 4, 6, 9, 3, 2, 34);
113 |         console.log(newDate);
114 | 
115 |         let yr = newDate.getFullYear();
116 | 
117 |         let dat = newDate.getDate();
118 | 
119 |         let month = newDate.getMonth();
120 | 
121 |         let hours = newDate.getHours();
122 | 
123 |         newDate.setDate(8);
124 |         newDate.setMinutes(29);
125 |         console.log(newDate)
126 |         setInterval(updateTime, 1000);
127 | 
128 |         function updateTime() {
129 |             time.innerHTML = new Date();
130 |         }
131 |         
132 |         function clear() {
133 |             input.innerHTML = "";
134 |         }
135 | 
136 | 
137 |     </script>
138 | </body></html>


--------------------------------------------------------------------------------
/html/videos.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |      <head>
  3 | 	     <meta charset="utf-8">  
  4 |          <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5 |          <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6 |          <title> Broken Hearts </title>
  7 | 	     <link rel="icon" type="image/x-icon" href="../img/logo.1.jpg"> 
  8 |          <link rel="stylesheet" a href="../css/style.css"type="text/css"/>
  9 |      </head>
 10 | 	 
 11 | 	 
 12 |      <body>
 13 | 	  
 14 | 		  
 15 | 	  
 16 | 	  
 17 | 
 18 |     
 19 | <div class="h1" align="center" color="gray">WELCOME TO BROKEN HEARTS<br>SAY GOOD BYE TO SADNESS</div>
 20 | 
 21 | 
 22 | <header class="header">
 23 | 
 24 |     <div class="right">
 25 |         <button class="btn"><a href="../index.html"> Upload</a></button>
 26 |         <button class="btn">Email Us</button>
 27 |     </div>
 28 | 
 29 | 
 30 | 
 31 | 
 32 |     <div class="left">
 33 | 
 34 | 
 35 |         <div>Broken HEARTS</div>
 36 |     </div>
 37 | 
 38 |     <div class="mid">
 39 |         <ul class="navbar">
 40 |             <li><a href="../index.html">Home</a></li>
 41 |             <li><a href="pictures.html">pictures</a></li>
 42 |             <li><a href="videos.html"  class="active">Videos</a></li>
 43 |             <li><a href="profile.html">Profile</a></li>
 44 |         </ul>
 45 |     </div>
 46 | 
 47 | 
 48 | 
 49 | </header>
 50 | 	
 51 | 	
 52 | 
 53 | 	
 54 | 	
 55 |         <iframe class="video" src="https://www.youtube.com/embed/QotYeitdh1U?start=5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 56 |         
 57 |     
 58 | 	
 59 |     
 60 | 	<iframe class="video" src="https://www.youtube.com/embed/pLpXgIUnQZc?start=5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 61 | 	
 62 | 	
 63 | 	
 64 | 	
 65 | 	
 66 | 	
 67 | 	
 68 | 	
 69 | 	
 70 | 	
 71 | 	
 72 | 	
 73 | 	
 74 | 	
 75 | 				   
 76 | 	
 77 | <footer class="footer" align="center">
 78 |     <div>
 79 |         Current time is <span id="time"></span>
 80 |     
 81 |     <br> 
 82 |     <br> 
 83 |         @BROKEN HEARTS OFFICIAL
 84 |     </div>
 85 |     
 86 | </footer>	
 87 |     <script>
 88 |         let now = new Date();
 89 |         console.log(now);
 90 | 
 91 |         let dt = new Date(1000);
 92 |         console.log(dt);
 93 | 
 94 |        
 95 | 
 96 |        
 97 |         let newDate = new Date(3020, 4, 6, 9, 3, 2, 34);
 98 |         console.log(newDate);
 99 | 
100 |         let yr = newDate.getFullYear();
101 | 
102 |         let dat = newDate.getDate();
103 | 
104 |         let month = newDate.getMonth();
105 | 
106 |         let hours = newDate.getHours();
107 | 
108 |         newDate.setDate(8);
109 |         newDate.setMinutes(29);
110 |         console.log(newDate)
111 |         setInterval(updateTime, 1000);
112 | 
113 |         function updateTime() {
114 |             time.innerHTML = new Date();
115 |         }
116 |         
117 |         function clear() {
118 |             input.innerHTML = "";
119 |         }
120 | 
121 | 
122 |     </script>
123 | 
124 |    </body>
125 |    </html>
126 |     


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | .input{
  2 | 	  background-color:black;size:50;color:gray;border:double;border-color:gray;
  3 | 	  font-style:italic;text-align:center;border-radius:30px;font-size:2.2vw;width: 30vw; height: 3vw;}
  4 | 
  5 | 
  6 | #date{
  7 | 	  background-color:black;color:gray;border:double;border-color:gray;
  8 | 	  font-style:italic;text-align:center;border-radius:30px;width: 30vw; height: 3vw;}
  9 | 
 10 | 
 11 | .form-btn{
 12 | 	  background-color:black;color:gray;border:double;border-color:gray;
 13 | 	  font-style:italic;text-align:center;border-radius:30px;width: 20vw; height: 3vw;font-size: 2vw;}
 14 | 
 15 | 	  select{
 16 | 		background-color:black; color:darkgray; border:double;border-color:gray;border-radius:20px;
 17 | 		font-style:oblique;font-weight:bold;text-align:center;position:relative;font-size: 2.2vw; width: 30vw;height: 3vw;}
 18 | 	   
 19 | 
 20 | 
 21 | 	
 22 | body{
 23 | 	margin: 0%;
 24 | 	padding: 0%;
 25 | 	/* background-image:url("bg.11.jpg"); */
 26 | 	background-image: linear-gradient(#C69247,#614223,#806135,#785930,#C69247,#614223,#A07437);
 27 | 	
 28 | 	/* background-repeat: no-repeat; */
 29 | }
 30 | #about{
 31 | 	width: 40vw;background-color:black; color:gray; border:double;border-color:gray;border-radius:20px;font-size: 2vw;
 32 |     font-style:oblique;font-weight:bold;text-align:center;position:relative;
 33 | }
 34 | label{
 35 | 	font-size: 2vw;
 36 | }
 37 | P{
 38 | 	color:gray;font-style:oblique;font-weight:bold;	}
 39 | .h1{
 40 | 	color:gray; 
 41 | 	background-color:black;
 42 | 	font-style:  oblique ;
 43 | 	font-size:2vw;
 44 | 	padding-top: .8vw;
 45 | 	border:double;
 46 | 	border-radius:10px;
 47 | 	height:7vw;
 48 | 	width:99vw;
 49 | 	margin-left: .2vw;
 50 | 	position:sticky;
 51 | 	
 52 | }
 53 | .container{
 54 | 	font-size: 1.2vw;
 55 | 	margin: .1vw 3vw;
 56 | }	
 57 | .container p{
 58 | 	color: black;
 59 | 	font-size: 2vw;
 60 | 	margin-top: 1vh;
 61 | 	margin: 1vw 3vw;
 62 | }	
 63 | #form{    
 64 |    padding:.1vw 0vw;
 65 | 	border:double black;
 66 |      border-radius:30px;
 67 |      font-size:1vw;
 68 | 	 width: 96vw;
 69 | 	 /* height: 28vw; */
 70 | 	 margin: .5vw 0vw 0vw 1.4vw;
 71 | 
 72 | 
 73 | }    
 74 | 
 75 | 		
 76 | 		
 77 | 	
 78 | .video{
 79 | 	width: 93vw;
 80 | 	height: 40vw;
 81 | 	margin: 3vw;
 82 | }
 83 | 
 84 | .footer{
 85 | 	margin-top: 1.4vw;
 86 | 	background-color:black;
 87 | 	border:double gray;
 88 | 	color:gray;
 89 | 	border-radius:1vw;
 90 | 	height:13vw;
 91 | 	padding-top: 1vw;
 92 | 	font-size:2.5vw;
 93 | 	
 94 | }
 95 | 
 96 | 
 97 | .left {
 98 | 	display: inline-block;
 99 | 	color: gray;
100 | 	position: absolute;
101 | 	left: 6vw;
102 | 	top: 2vw;
103 | 	font-size: 1.6vw;
104 | }
105 | 
106 | 
107 | 
108 | .mid {
109 | 	display: block;
110 | 	width: 36%;
111 | 	margin: 1vw 5vw;
112 | }
113 | 
114 | .right {
115 | 	position: absolute;
116 | 	right: 10vw;
117 | 	top:1vh;
118 | 	display: inline-block;
119 | }
120 | 
121 | .navbar {
122 | 	display: inline-block;
123 | 	width: 90vw;
124 | 	margin-bottom: 1%;
125 | 	margin-top: .1%;
126 | }
127 | 
128 | .navbar li {
129 | 	display: inline-block;
130 | 	border-style: double;
131 | 	/* lable-size: 20px; */
132 | 	padding:1vw;
133 | 	margin-left: 1.5vw;
134 | 	background-color: black;
135 | 	border-color: gray;
136 | 	border-radius: 10px;
137 | }
138 | 
139 | .navbar li a {
140 | 	font-size: 1.3vw;
141 | 	color: gray;
142 | 	text-decoration: none;
143 | 	padding: .4vw;
144 | }
145 | 
146 | .navbar li a:hover,
147 | .navbar li a.active {
148 | 	text-decoration: underline;
149 | 	color: brown;
150 | }
151 | 
152 | .btn {
153 | 	/* lable-family: 'italic'; */
154 | 	margin: 0% .5vw;
155 | 	background-color: black;
156 | 	color: gray;
157 | 	padding: .4vw 1.4vw;
158 | 	font-size: 1.3vw;
159 | 	border: .2vw double gray;
160 | 	border-radius: 1vw;
161 | 	/* lable-size: 20px; */
162 | 	cursor: pointer;
163 | }
164 | 
165 | .btn:hover {
166 | 	background-color: rgb(31, 30, 30);
167 | }
168 | 
169 | .container h1 {
170 | 	text-align: center;
171 | }
172 | 
173 | .container button {
174 | 	display: block;
175 | 	width: 74%;
176 | 	margin: 20px auto;
177 | }
178 | 
179 | 
180 |     
181 | 
182 | .btn:hover {
183 | 	background-color: rgb(31, 30, 30);
184 | }
185 | 
186 | 
187 | 
188 | 
189 | 
190 | 
191 | img{
192 |   margin-left:3vw; margin-bottom: 1vw; border-radius:4vw;grid-gap:2vw;border:.3vw solid black;
193 | width: 20vw;height: 15vw;
194 | }
195 | img:hover{
196 | 	transform:scale(0.8,0.8);transition:.2s transform;	 
197 | }
198 | #cheakbox{
199 | 	height: 2.5vw;
200 | 	
201 | }
202 | #cheakbox{
203 | 	height: 2.5vw;
204 | 	
205 | }
206 | #radio{
207 | 	height: 2.5vw;
208 | 	
209 | }


--------------------------------------------------------------------------------
/html/pictures.html:
--------------------------------------------------------------------------------
  1 | <!doctype >
  2 | <html>
  3 |      <head>
  4 | 	     <meta charset="utf-8">  
  5 |          <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |          <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |          <title> Broken Hearts </title>
  8 | 	     <link rel="icon" type="image/x-icon" href="../img/logo.1.jpg"> 
  9 |          <link rel="stylesheet" a href="../css/style.css"type="text/css"/>
 10 | 	 
 11 | 	 
 12 | 	 </head>
 13 | 	 <body>
 14 | 	 
 15 | 	       
 16 | 
 17 | 	  
 18 | 	  
 19 | 	  
 20 | 	  
 21 | 	  
 22 | 	  
 23 | 	
 24 | <div class="h1" align="center" color="gray">WELCOME TO BROKEN HEARTS<br>SAY GOOD BYE TO SADNESS</div>
 25 | 
 26 | 
 27 | <header class="header">
 28 | 
 29 |     <div class="right">
 30 |         <button class="btn"><a href="../index.html"> Upload</a></button>
 31 |         <button class="btn">Email Us</button>
 32 |     </div>
 33 | 
 34 | 
 35 | 
 36 | 
 37 |     <div class="left">
 38 | 
 39 | 
 40 |         <div>Broken HEARTS</div>
 41 |     </div>
 42 | 
 43 |     <div class="mid">
 44 |         <ul class="navbar">
 45 |             <li><a href="../index.html">Home</a></li>
 46 |             <li><a href="pictures.html" class="active">pictures</a></li>
 47 |             <li><a href="videos.html">Videos</a></li>
 48 |             <li><a href="profile.html">Profile</a></li>
 49 |     </ul>
 50 |     </div>
 51 | 
 52 | 
 53 | 
 54 | </header>
 55 |    
 56 |       
 57 | 	 <main class="main">
 58 | 	 
 59 | 	 
 60 | 	   
 61 | 
 62 | 
 63 | 
 64 | 
 65 | 
 66 | 
 67 | 
 68 | 
 69 | 
 70 | 
 71 | 
 72 | 							  
 73 |         	<div class="imgbox" id="gallary">
 74 | 	
 75 |             <a href="../img/bg.13.jpg"class="ibox" > <img src = "../img/bg.13.jpg"   class="box"></img></a>
 76 | 	        <a href="../img/bg.12.jpg"class="ibox" > <img src = "../img/bg.12.jpg" class="box"></img></a>
 77 |         	<a href="../img/bg.15.jpg"class="ibox" > <img src = "../img/bg.15.jpg" class="box"></img></a>
 78 |          	<a href="../img/bg.16.jpg"class="ibox" > <img src = "../img/bg.16.jpg" class="box"></img></a>
 79 | 	        <a href="../img/bg.17.jpg"class="ibox" > <img src = "../img/bg.17.jpg" class="box"></img></a>
 80 | 	        <a href="../img/bg.18.jpg"class="ibox" > <img src = "../img/bg.18.jpg" class="box"></img></a>
 81 | 	        <a href="../img/bg.19.jpg"class="ibox" > <img src = "../img/bg.19.jpg" class="box"></img></a>
 82 |         	<a href="../img/bg.20.jpg"class="ibox" > <img src = "../img/bg.20.jpg" class="box"></img></a>
 83 |          	<a href="../img/bg.1.jpg" class="ibox"> <img src = "../img/bg.1.jpg" class="box"></img></a>
 84 |         	<a href="../img/bg.2.jpg" class="ibox"> <img src = "../img/bg.2.jpg" class="box"></img></a>
 85 | 	        <a href="../img/bg.3.jpg" class="ibox"> <img src = "../img/bg.3.jpg" class="box"></img></a>
 86 |         	<a href="../img/bg.4.jpg" class="ibox"> <img src = "../img/bg.4.jpg" class="box"></img></a>
 87 | 	        <a href="../img/bg.5.jpg" class="ibox"> <img src = "../img/bg.5.jpg" class="box"></img></a>
 88 | 	        <a href="../img/bg.6.jpg" class="ibox"> <img src = "../img/bg.6.jpg" class="box"></img></a>
 89 | 	        <a href="../img/bg.7.jpg" class="ibox"> <img src = "../img/bg.7.jpg" class="box"></img></a>
 90 | 	        <a href="../img/bg.8.jpg" class="ibox"> <img src = "../img/bg.8.jpg" class="box"></img></a>
 91 | 	        <a href="../img/bg.9.jpg" class="ibox"> <img src = "../img/bg.9.jpg" class="box"></img></a>
 92 | 	        <a href="../img/bg.10.jpg"class="ibox" > <img src = "../img/bg.10.jpg" class="box"></img></a>
 93 | 	        <a href="../img/bg.21.jpg"class="ibox" > <img src = "../img/bg.21.jpg" class="box"></img></a>
 94 | 	        <a href="../img/bg.22.jpg"class="ibox" > <img src = "../img/bg.22.jpg" class="box"></img></a>
 95 | 	        <a href="../img/bg.24.jpg"class="ibox" > <img src = "../img/bg.24.jpg" class="box"></img></a>
 96 | 	        <a href="../img/bg.25.jpg"class="ibox" > <img src = "../img/bg.25.jpg" class="box"></img></a>
 97 | 	        <a href="../img/bg.26.jpg"class="ibox" > <img src = "../img/bg.26.jpg" class="box"></img></a>
 98 | 	        <a href="../img/bg.27.jpg"class="ibox" > <img src = "../img/bg.27.jpg" class="box"></img></a>
 99 | 	      
100 | 							   
101 | 							   
102 |      	</div>                 
103 | 							   
104 | 							   
105 | 							   
106 | 							   
107 | 	
108 | 	  </main>
109 | 	
110 | 	
111 | 	
112 | 	
113 | 	
114 | 	
115 | 	
116 | 	
117 | 	
118 | 	
119 | 	
120 | 	
121 | 	
122 | 	
123 | 	
124 | 	
125 | 	
126 | 	
127 | 	
128 | 	
129 | 	
130 | 	
131 | 	
132 | 	
133 | 	
134 | 	
135 | 	
136 | 	
137 | 	
138 | 	
139 | 	
140 | 	
141 | 	
142 | 	
143 | </style>	
144 | 			   
145 | 	   	
146 | 
147 | <footer class="footer" align="center">
148 |     <div>
149 |         Current time is <span id="time"></span>
150 |     
151 |     <br> 
152 |     <br> 
153 |         @BROKEN HEARTS OFFICIAL
154 |     </div>
155 |     
156 | </footer>	
157 |     <script>
158 |         let now = new Date();
159 |         console.log(now);
160 | 
161 |         let dt = new Date(1000);
162 |         console.log(dt);
163 | 
164 |        
165 | 
166 |        
167 |         let newDate = new Date(3020, 4, 6, 9, 3, 2, 34);
168 |         console.log(newDate);
169 | 
170 |         let yr = newDate.getFullYear();
171 | 
172 |         let dat = newDate.getDate();
173 | 
174 |         let month = newDate.getMonth();
175 | 
176 |         let hours = newDate.getHours();
177 | 
178 |         newDate.setDate(8);
179 |         newDate.setMinutes(29);
180 |         console.log(newDate)
181 |         setInterval(updateTime, 1000);
182 | 
183 |         function updateTime() {
184 |             time.innerHTML = new Date();
185 |         }
186 |         
187 |         function clear() {
188 |             input.innerHTML = "";
189 |         }
190 | 
191 | 
192 |     </script>
193 | 	 
194 | 	 </body>
195 | 
196 | 
197 | 
198 | 
199 | 
200 | 
201 | 
202 | 
203 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |     <title> Broken Hearts </title>
  8 |     <link rel="icon" type="image/x-icon" href="img/logo.1.jpg">
  9 |     <link rel="stylesheet" a href="css/style.css" type="text/css" />
 10 | </head>
 11 | 
 12 | 
 13 | <body>
 14 | 
 15 | 
 16 | 
 17 | 
 18 | 
 19 | 
 20 | 
 21 | 
 22 | 
 23 | 
 24 |     
 25 |         <div class="h1" align="center" color="gray">WELCOME TO BROKEN HEARTS<br>SAY GOOD BYE TO SADNESS</div>
 26 | 
 27 | 
 28 |     <header class="header">
 29 | 
 30 |         <div class="right">
 31 |             <button class="btn"><a href="index.html"> Upload</a></button>
 32 |             <button class="btn">Email Us</button>
 33 |         </div>
 34 | 
 35 | 
 36 | 
 37 | 
 38 |         <div class="left">
 39 | 
 40 | 
 41 |             <div>Broken HEARTS</div>
 42 |         </div>
 43 | 
 44 |         <div class="mid">
 45 |             <ul class="navbar">
 46 |                 <li><a href="index.html" class="active">Home</a></li>
 47 |                 <li><a href="html/pictures.html">pictures</a></li>
 48 |                 <li><a href="html/videos.html">Videos</a></li>
 49 |                 <li><a href="html/profile.html">Profile</a></li>
 50 |             </ul>
 51 |         </div>
 52 | 
 53 | 
 54 | 
 55 |     </header>
 56 |    
 57 |             <div id="form" align="center">
 58 | <h1 style="font-size: 3vw;margin: 1vw 0% 2vw 0%;">Create Profile</h1>
 59 |                 <label for="name">					 
 60 | 					 <lable color="darkgray"> Name:</lable> <align=center> 
 61 | 				       <input type="text" placeholder="-------" name="my name" class="input" id="name">	
 62 | 				   <label for="age">
 63 |                      <lable color="darkgray"> Age:</lable>
 64 | 				       <input type="text"  placeholder="-------" name="my age" class="input" id="age"><br><br> 
 65 | 				   <label for="work">
 66 |                      <lable color="darkgray"> Work:</lable>
 67 | 				       <input type ="text" placeholder="-------"  class="input" name="my Work"id="work">
 68 | 				   <label for="country">
 69 |                      <lable color="Darkgray"> Country:</lable>
 70 | 				       <input type ="text" class="input" placeholder="-------"  name="my Country"id="country"><br><br>
 71 | 				  
 72 | 				  
 73 | 				  
 74 | 				  
 75 | 				   <label for="interest"><lable color="darkgray">Interest in</label>
 76 |                 <select name="My interest" id="interest">
 77 |     			      <option value="game">Game</option>
 78 |     				  <option value="study">Social Work</option>
 79 |     				  <option value="Bus">Business </option>
 80 |     				  <option value="Job">Job</option>
 81 |     				  <option value="sp">Social Apps</option>
 82 |     				  <option value="nt" selected>Nothing</option></lable>
 83 |                 </select >
 84 |     				  
 85 | 			      
 86 | 
 87 | 				  <label for="student">
 88 |                      <lable color="darkgray"> Are You Student:</lable>
 89 | 					  <input  Type="checkbox" Name="are you student"id="cheakbox"/> <br> <br>
 90 | 				   <label for="Gender">
 91 | 			         <lable color="darkgray"> Gender:&nbsp;&nbsp;&nbsp;Male</lable>
 92 | 				      <input type="radio" Name="my gender" id="radio"><lable color="darkgray"> Female</lable><input type="radio" Name="my gender" id="radio"><lable color="darkgray"> Other</lable><input type="radio" Name="my gender"id="radio"><br><br>
 93 | 				   
 94 | 			         <lable for="date" color="darkgray"> Date:</lable>
 95 | 				      <input type="date"name="date"id="date"><br><br>
 96 | 			       
 97 | 			         <lable for="about" color="darkgray"> Write About Your Self:</lable> <br><textarea   name="my text" placeholder="''''''''''''''''''''''''" cols="50"rows="5"id="about"></textarea>  <br><br>
 98 | 				      <input class="form-btn" type="Reset"value="Reset Info" onclick="clear()">
 99 | 			          <input class="form-btn" type="submit"value="Submit Now"><br><br><br>
100 | 			   
101 |                    </div>
102 | 			      
103 | 			   
104 | 			   
105 | 			   
106 | 			   
107 | 		   
108 | 	     
109 | 		 
110 |                    <div class="container">
111 | 
112 | 
113 | 
114 |                     <p align="left">BROKEN HEARTS's HOME
115 |             
116 |                         <br>Visit& Follow My FACEBOOk<sup>1</sup> Page
117 |                         <a href=https://www.facebook.com/shareefshahzada109/ target="blank">
118 |                             <lable color="black">"Click Here"</lable>
119 |                         </a>
120 |                         <br>Visit& Follow Me On INSTAGRAM<sup>1</sup><sub>1</sub>
121 |                         <a href=https://l.facebook.com/l.php?u=https%3A%2F%2Finstagram.com%2Fbroken.hearts.official.insta%3Futm_medium%3Dcopy_link%26fbclid%3DIwAR0j7gl61ToRsk5ljR8bSL6QBANVe6N6Fy6eGh78VIkmDhLNYgKXQr9iQYE&h=AT0iMp7exiuRPt9SD_Z1YzhBFI0l-zkta6v7pz3MdtPhpc5ueZZmGRT_UebgORnYl3fxKbU71HcYDayLAd9bFewnGkUj0b1l4nmUHElU3hslKHk18pFb3l-C_Xw5JK6muNdD
122 |                             target="blank">
123 |                             <lable color="black">"Click Here"</lable>
124 |                         </a>
125 |                         <br>Visit& Subcribe My YOUTUBE<sub>1</sub> Channel
126 |                         <a href=https://l.facebook.com/l.php?u=https%3A%2F%2Fyoutube.com%2Fchannel%2FUCYacZHzCLLAw3z7uCwQ0GrQ%3Ffbclid%3DIwAR0L2X1nrRyQuYV__jKl6ipmXxsFhmf9-VzfETTGl0KAOzPQqQgKJXBxsSI&h=AT0iMp7exiuRPt9SD_Z1YzhBFI0l-zkta6v7pz3MdtPhpc5ueZZmGRT_UebgORnYl3fxKbU71HcYDayLAd9bFewnGkUj0b1l4nmUHElU3hslKHk18pFb3l-C_Xw5JK6muNdD
127 |                             target="balnk">
128 |                             <lable color="black">"Click Here"</lable>
129 |                         </a>
130 |                     </P>
131 |                 
132 |             </div>
133 | 	
134 | 
135 | <footer class="footer" align="center">
136 |     <div>
137 |         Current time is <span id="time"></span>
138 |     
139 |     <br> 
140 |     <br> 
141 |         @BROKEN HEARTS OFFICIAL
142 |     </div>
143 |     
144 | </footer>	
145 |     <script>
146 |         let now = new Date();
147 |         console.log(now);
148 | 
149 |         let dt = new Date(1000);
150 |         console.log(dt);
151 | 
152 |        
153 | 
154 |        
155 |         let newDate = new Date(3020, 4, 6, 9, 3, 2, 34);
156 |         console.log(newDate);
157 | 
158 |         let yr = newDate.getFullYear();
159 | 
160 |         let dat = newDate.getDate();
161 | 
162 |         let month = newDate.getMonth();
163 | 
164 |         let hours = newDate.getHours();
165 | 
166 |         newDate.setDate(8);
167 |         newDate.setMinutes(29);
168 |         console.log(newDate)
169 |         setInterval(updateTime, 1000);
170 | 
171 |         function updateTime() {
172 |             time.innerHTML = new Date();
173 |         }
174 |         
175 |         function clear() {
176 |             input.innerHTML = "";
177 |         }
178 | 
179 | 
180 |     </script>
181 | 
182 |          	 
183 | 			   
184 | 			   
185 |      </body>
186 |     
187 | 
188 | </html>


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