├── images ├── overlay.png ├── pic01.jpg ├── pic02.jpg └── pic03.jpg ├── fonts ├── FontAwesome.otf ├── fontawesome-webfont.eot ├── fontawesome-webfont.ttf ├── fontawesome-webfont.woff └── fontawesome-webfont.woff2 ├── valid.html ├── js └── script.js ├── css ├── style.css └── font-awesome.min.css └── index.html /images/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HamzaNabil/Template-HTML_CSS_JS/HEAD/images/overlay.png -------------------------------------------------------------------------------- /images/pic01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HamzaNabil/Template-HTML_CSS_JS/HEAD/images/pic01.jpg -------------------------------------------------------------------------------- /images/pic02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HamzaNabil/Template-HTML_CSS_JS/HEAD/images/pic02.jpg -------------------------------------------------------------------------------- /images/pic03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HamzaNabil/Template-HTML_CSS_JS/HEAD/images/pic03.jpg -------------------------------------------------------------------------------- /fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HamzaNabil/Template-HTML_CSS_JS/HEAD/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HamzaNabil/Template-HTML_CSS_JS/HEAD/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HamzaNabil/Template-HTML_CSS_JS/HEAD/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HamzaNabil/Template-HTML_CSS_JS/HEAD/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HamzaNabil/Template-HTML_CSS_JS/HEAD/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /valid.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | function HoverButton() 2 | { 3 | document.getElementById("butt").style.backgroundColor="#080"; 4 | } 5 | 6 | function Hover() 7 | { 8 | document.getElementById("butt").style.backgroundColor="#00BCBA"; 9 | 10 | } 11 | 12 | function Show() 13 | { 14 | document.getElementById("Click").style.visibility="visible"; 15 | } 16 | 17 | function Hide() 18 | { 19 | document.getElementById("Click").style.visibility="hidden"; 20 | } 21 | 22 | var n = 0; 23 | function Hovered() 24 | { 25 | n = n + 1 ; 26 | document.getElementById("img1").innerHTML = n; 27 | } 28 | 29 | 30 | function clc() 31 | { 32 | document.getElementById("Clicks").style.color="f50"; 33 | document.getElementById("Clicks").style.textDecoration="underline"; 34 | } 35 | 36 | function valid() 37 | { 38 | var t = prompt("Name .."); 39 | if (t == "hamza") 40 | { 41 | window.location = "index.html"; 42 | } 43 | else 44 | { 45 | alert ("Wrong !!"); 46 | } 47 | 48 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .container 8 | { 9 | width: 1150px; 10 | margin: auto; 11 | } 12 | 13 | .header 14 | { 15 | width: 100%; 16 | height: 350px; 17 | background-color: blueviolet; 18 | } 19 | 20 | .header .heading 21 | { 22 | width: 50%; 23 | float: left; 24 | margin-top: 100px; 25 | border-right: 1px solid #EEE; 26 | } 27 | 28 | .header .heading h2 29 | { 30 | width: 49%; 31 | color:#fff; 32 | line-height: 1.8; 33 | font-size: 25px; 34 | } 35 | 36 | .header .heading h2 span:hover 37 | { 38 | color: #00BCBA; 39 | cursor: pointer 40 | } 41 | 42 | .header .Lorem 43 | { 44 | width: 40%; 45 | margin-left: 3%; 46 | margin-top: 100px; 47 | float: left 48 | } 49 | 50 | .header .Lorem p 51 | { 52 | font-family: Tahoma; 53 | color: darkgray; 54 | line-height: 1.8; 55 | font-weight: bold; 56 | } 57 | 58 | .header .Lorem button 59 | { 60 | border:0; 61 | background: none; 62 | color: #fff; 63 | font-size: 20px; 64 | background: #00BCBA; 65 | padding: 15px; 66 | border-radius: 50px; 67 | width: 200px; 68 | text-transform: uppercase; 69 | outline: 0; 70 | cursor: pointer; 71 | } 72 | 73 | /* Magna */ 74 | 75 | .Magna 76 | { 77 | width: 100%; 78 | height: 350px; 79 | border-bottom: 2px solid #DDD; 80 | padding-top: 50px; 81 | } 82 | 83 | .Magna .learn 84 | { 85 | width: 50%; 86 | float: left; 87 | border-right: 2px solid #DDD; 88 | } 89 | 90 | .Magna .learn h2 91 | { 92 | font-family: Tahoma; 93 | color: #777; 94 | text-decoration: underline; 95 | 96 | } 97 | 98 | .Magna .learn p 99 | { 100 | line-height: 1.9; 101 | font-family: Tahoma ; 102 | color: #888 103 | } 104 | 105 | .Magna .learn button 106 | { 107 | border: 0; 108 | background: #fff; 109 | border: 1px solid #DDD; 110 | padding: 15px; 111 | border-radius: 30px; 112 | width: 200px; 113 | color: #888; 114 | cursor: pointer; 115 | text-transform: uppercase; 116 | outline: 0; 117 | } 118 | 119 | .Ipsum 120 | { 121 | float: left; 122 | width: 40%; 123 | margin-left: 5%; 124 | visibility: hidden; 125 | } 126 | 127 | .Ipsum p 128 | { 129 | line-height: 2; 130 | font-family: Tahoma; 131 | font-weight: bold; 132 | color: #666; 133 | } 134 | 135 | .Ipsum i 136 | { 137 | padding-right: 25px; 138 | color: #00BCBA; 139 | } 140 | 141 | /* Pharetra */ 142 | 143 | .Pharetra 144 | { 145 | width: 100%; 146 | height: auto; 147 | padding-top: 50px; 148 | padding-bottom: 50px; 149 | overflow: hidden; 150 | background: #f2f2f2; 151 | } 152 | 153 | .Pharetra .part img 154 | { 155 | float: left; 156 | Width: 40%; 157 | } 158 | 159 | .Pharetra .part .he 160 | { 161 | width: 40%; 162 | float: left; 163 | padding-left: 70px; 164 | padding-top: 50px; 165 | } 166 | 167 | .Pharetra .part .he h2 168 | { 169 | color: #777; 170 | font-family: Tahoma; 171 | text-decoration: underline; 172 | 173 | } 174 | 175 | .Pharetra .part .he p 176 | { 177 | color: #888; 178 | font-family: Tahoma; 179 | line-height: 2; 180 | font-weight: bold; 181 | } 182 | 183 | .Pharetra .part 184 | { 185 | padding-bottom: 50px; 186 | height: 350px; 187 | } 188 | .clear { clear: both} 189 | 190 | .Pharetra .part .he button 191 | { 192 | background: none; 193 | border: 1px solid #DDD; 194 | width: 150px; 195 | border-radius: 20px; 196 | padding: 15px; 197 | font-size: 20px; 198 | color: #777; 199 | text-transform: uppercase; 200 | cursor: pointer; 201 | } 202 | 203 | .Pharetra .part .he button:hover 204 | { 205 | background-color: #888; 206 | color: #fff; 207 | } 208 | 209 | /* form */ 210 | 211 | .form 212 | { 213 | width: 100%; 214 | height: auto; 215 | overflow: hidden; 216 | padding-top: 50px; 217 | padding-bottom: 50px; 218 | } 219 | 220 | .form .inputs 221 | { 222 | width: 50%; 223 | float: left; 224 | border-right: 2px solid #DDD; 225 | } 226 | 227 | .form .inputs h2 228 | { 229 | font-family: Tahoma; 230 | } 231 | 232 | .form .inputs p 233 | { 234 | line-height: 2; 235 | font-family: Tahoma; 236 | font-weight: bold; 237 | color: #888; 238 | } 239 | 240 | .form .inputs input[type=text] , input[type=email] 241 | { 242 | width: 250px; 243 | height: 50px; 244 | padding-left: 20px; 245 | margin-bottom: 10px; 246 | outline: 0; 247 | font-size: 20px; 248 | } 249 | 250 | .form .inputs textarea 251 | { 252 | width: 505px; 253 | outline: 0; 254 | padding-left: 20px; 255 | font-size: 15px; 256 | } 257 | 258 | .form .inputs input[type=submit] 259 | { 260 | width:150px; 261 | border-radius: 20px; 262 | border: 1px solid #DDD; 263 | padding: 15px; 264 | margin-top: 15px; 265 | cursor: pointer; 266 | background: #fff; 267 | text-transform: uppercase 268 | } 269 | 270 | .form .links 271 | { 272 | float: left; 273 | padding-top: 50px; 274 | padding-left: 50px; 275 | } 276 | 277 | .form .links p 278 | { 279 | line-height: 2.5 280 | } 281 | 282 | .form .links p i 283 | { 284 | padding-right: 25px; 285 | color: #00BCBA; 286 | } 287 | 288 | /* footer */ 289 | 290 | .footer 291 | { 292 | width: 100%; 293 | height 150px; 294 | border-top: 1px solid #DDD; 295 | } 296 | 297 | .footer p 298 | { 299 | text-align: center; 300 | line-height: 150px; 301 | font-family: Tahoma; 302 | color: #777; 303 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |17 | Lorem ipsum nisl sed cursus magna et amet veroeros. Phasellus aliquam et tempus lorem dolor feugiat adipiscing lorem. 18 |
19 | 20 |29 | Lorem ipsum nisl sed cursus magna et amet veroeros. Sed phasellus aliquam et tempus lorem feugiat adipiscing lorem. Morbi pharetra vitae felis placerat pharetra. Nulla risus orci, dapibus id malesuada et nec, malesuada quis orci. Pellentesque eget consequat. 30 |
31 | 32 |Ipsum nisl sed cursus magna
35 |Amet veroeros sed aliquam consequat
36 |Tempus lorem adipiscing et lorem
37 |Morbi pharetra vitae felis placerat
38 |Pharetra nulla risus orci dapibus
39 |
47 | 50 | Lorem ipsum nisl sed cursus magna et amet veroeros. Sed phasellus malesuada quis orci. Pellentesque eget consequat. 51 |
52 | 53 |You hoverd :
54 |
61 | 64 | Lorem ipsum nisl sed cursus magna et amet veroeros. Sed phasellus malesuada quis orci. Pellentesque eget consequat. 65 |
66 | 67 |
74 | 77 | Lorem ipsum nisl sed cursus magna et amet veroeros. Sed phasellus malesuada quis orci. Pellentesque eget consequat. 78 |
79 | 80 |91 | Morbi pharetra vitae felis placerat pharetra. Nulla risus orci, dapibus id malesuada et nec, malesuada quis pellentesque eget. 92 |
93 | 99 |twitter.com/untitled-tld
102 |facebook.com/untitled-tld
103 |instagram.com/untitled-tld
104 |information@untitled.tld
105 |1234 Somewhere Road Suite 9823
106 |