├── img ├── cabin.png ├── cake.png ├── game.png ├── safe.png ├── circus.png ├── profile.png └── submarine.png ├── README.md ├── index.html └── style.css /img/cabin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emrahalkan/WebProgramlama/HEAD/img/cabin.png -------------------------------------------------------------------------------- /img/cake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emrahalkan/WebProgramlama/HEAD/img/cake.png -------------------------------------------------------------------------------- /img/game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emrahalkan/WebProgramlama/HEAD/img/game.png -------------------------------------------------------------------------------- /img/safe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emrahalkan/WebProgramlama/HEAD/img/safe.png -------------------------------------------------------------------------------- /img/circus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emrahalkan/WebProgramlama/HEAD/img/circus.png -------------------------------------------------------------------------------- /img/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emrahalkan/WebProgramlama/HEAD/img/profile.png -------------------------------------------------------------------------------- /img/submarine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emrahalkan/WebProgramlama/HEAD/img/submarine.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WebProgramlama 2 | 3 | # https://startbootstrap.com/previews/freelancer sitesinin frontend birebir yeniden tasarımı 4 | ## BS435 Web Programlama 1 Dersi Vize Ödevi 5 | ### Erciyes Üniversitesi Bilgisayar Mühendisliği Bölümü 6 | 7 | Tasarlayan: **Emrah Alkan** 8 | Öğretim Üyesi: Dr. Fehim KÖYLÜ 9 | 10 | 11 | # Dosyalar 12 | 13 | 1. img 14 | 2. index.html 15 | 3. style.css 16 | 4. script.js 17 | 18 | 19 | # Kullanılan Araçlar 20 | 21 | 1. HTML5 22 | 2. CSS3 23 | 4. Javascript 24 | 5. Jquery 25 | 26 | # Kullanılan Yazılımlar 27 | 28 | 1. VSCode 29 | 2. Notepad++ 30 | 31 | # Kullanılan Yöntemler 32 | 33 | 1. Tasarım sistemleri 34 | 2. Localhost 35 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Freelancer Web Template 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 53 | 54 |

55 |

56 |

57 |

Start Bootstrap

58 |

59 |

60 | Web Developer - Graphic Artist - User Experience Designer 61 |

62 |

63 |

64 | 65 |

66 |

67 |

68 | Portfolio 69 |

70 |

71 | 72 |

73 | 74 |

75 |

76 | 77 |

84 | 85 |

86 |

87 |

88 |

89 | 90 |

97 | 98 |

99 |

100 |

101 |

102 | 103 | 104 |

110 | 111 |

112 |

113 |

114 |

115 | 116 |

122 | 123 |

124 |

125 |

126 |

127 | 128 |

134 | 135 |

136 |

137 |

138 |

139 | 140 |

146 | 147 |

148 |

149 |

150 |

151 |

152 | 153 |

154 |

About

155 | 156 |

157 | 158 |

159 | 160 |

161 |

162 | 09 Temmuz 1994'de Kocaeli'nin Gebze ilçesinde doğdum. İlköğretimi burada okuduktan sonra Fevzi Çakmak Anadolu Lisesini kazanarak lise hayatıma başladım. Şu an Erciyes Üniversitesi Bilgisayar Mühendisliği bölümünde devam etmekteyim. Programlamaya Java ile başladıktan sonra HTML, CSS, JavaScript ve C# ile çalışmalar yapıyorum ve kendimi bu alanda geliştirmeye devam ediyorum. 163 |

164 |

165 |

166 |

167 | Son zamanlarda JavaScript framworklerine ve Mobil Programlama(Flutter) kısmına daha çok yönelmekteyim. Kariyer hedefim, görev alacağım pozisyonlarda teknik bilgi ve becerilerimi ortaya koyup başarılı işler yapmaktır. Hakkımda daha çok bilgi edinmek için aşağıda ki butona tıklayabilir ve iletişim geçmek için aşağıda ki Contact bölümünden bana mail atabilirsiniz. 168 |

169 |

170 | 171 |

172 | 175 |

176 | 177 |

178 | 179 |

180 | 181 |

182 | Contact Me 183 |

184 |

185 | 186 | 187 | 211 |

212 |

213 | 214 | 265 |

266 |

271 |

272 | 273 | 274 | 275 | 281 | 282 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /*Genel Dizayn Kısım */ 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | html { 9 | font-size: 6px; 10 | } 11 | 12 | body { 13 | font-family: 'Lato', sans-serif; 14 | font-size: 1.6rem; 15 | font-weight: 400; 16 | line-height: 1.5; 17 | background-color: #fff; 18 | } 19 | 20 | h1, h2, h3, h4, h5, h6 { 21 | font-weight: 700; 22 | font-family: Montserrat; 23 | } 24 | 25 | a { 26 | text-decoration: none; 27 | } 28 | 29 | ul { 30 | list-style-type: none; 31 | } 32 | 33 | section { 34 | padding-top: 10rem; 35 | padding-bottom: 10rem; 36 | text-align: center; 37 | } 38 | 39 | .btn-large { 40 | font-size: 2rem; 41 | padding: 2.2rem 1.6rem; 42 | } 43 | 44 | .btn { 45 | margin-top:4rem; 46 | font-weight: 400; 47 | display: inline-block; 48 | border:2px solid transparent; 49 | border-radius: .4rem; 50 | cursor: pointer; 51 | transition: all .5s; 52 | } 53 | 54 | .btn-social { 55 | width: 5rem; 56 | height: 5rem; 57 | border-radius: 50%; 58 | font-size: 2rem; 59 | line-height: 2rem; 60 | } 61 | 62 | .btn-outline { 63 | color:#fff; 64 | border-color: #fff; 65 | background-color: transparent; 66 | } 67 | 68 | .btn-outline:hover { 69 | color: #212529; 70 | background-color: #fff; 71 | } 72 | 73 | .btn-primary { 74 | background-color: #18BC9C; 75 | border-color: #18BC9C; 76 | color: #fff; 77 | padding: 1.5rem 1.5rem; 78 | font-size: 2rem; 79 | } 80 | 81 | .btn-primary:hover { 82 | background-color: #128f76; 83 | border-color: #128f76; 84 | } 85 | 86 | .img-fluid { 87 | max-width: 100%; 88 | height: auto; 89 | } 90 | 91 | .clearfix::after { 92 | content: ""; 93 | display: block; 94 | clear: both; 95 | } 96 | 97 | .col { 98 | float: left; 99 | width: 100%; 100 | padding: 1rem; 101 | } 102 | 103 | .container { 104 | width: 100%; 105 | margin-left: auto; 106 | margin-right: auto; 107 | padding-left: .5rem; 108 | padding-right: .5rem; 109 | } 110 | 111 | @media (min-width: 576px) { 112 | 113 | .container { 114 | max-width: 540px; 115 | } 116 | 117 | html { 118 | font-size: 7px; 119 | } 120 | } 121 | 122 | @media (min-width: 768px) { 123 | .container { 124 | max-width: 720px; 125 | } 126 | 127 | html { 128 | font-size: 8px; 129 | } 130 | 131 | .col { 132 | width: 50%; 133 | } 134 | } 135 | 136 | @media (min-width: 992px) { 137 | .container { 138 | max-width: 960px; 139 | } 140 | 141 | html { 142 | font-size: 9px; 143 | } 144 | 145 | .col { 146 | width: 33.33333%; 147 | } 148 | } 149 | 150 | @media (min-width: 1200px) { 151 | .container { 152 | max-width: 1140px; 153 | } 154 | 155 | html { 156 | font-size: 10px; 157 | } 158 | } 159 | 160 | 161 | .text-uppercase { 162 | text-transform: uppercase; 163 | } 164 | 165 | /*NAVBAR Dizayn Kısım*/ 166 | 167 | nav { 168 | width: 100%; 169 | font-family: Montserrat; 170 | background-color: #2C3E50; 171 | color: #fff; 172 | padding-top: 2.4rem; 173 | padding-bottom: 2.4rem; 174 | position: fixed; 175 | z-index: 500; 176 | } 177 | 178 | #logo-box { 179 | float: left; 180 | padding-top: .5rem; 181 | } 182 | 183 | #logo-box .logo { 184 | color: #fff; 185 | font-weight: 700; 186 | font-size: 3.2rem; 187 | } 188 | 189 | #nav-links { 190 | float: right; 191 | } 192 | 193 | #nav-links .nav-item { 194 | float: left; 195 | margin: .4rem; 196 | } 197 | 198 | #nav-links .nav-link { 199 | color: #fff; 200 | font-size: 1.6rem; 201 | font-weight: 700; 202 | display: block; 203 | padding: 1.6rem; 204 | letter-spacing: .1rem; 205 | transition: color .3s; 206 | } 207 | 208 | #nav-links .nav-link:hover { 209 | color: #18bc9c; 210 | } 211 | 212 | #nav-links .nav-icon { 213 | display: none; 214 | } 215 | 216 | @media (max-width: 992px) { 217 | 218 | #logo-box { 219 | float: none; 220 | text-align: left; 221 | 222 | } 223 | #nav-links { 224 | float: none; 225 | } 226 | 227 | 228 | #nav-links.responsive li:not(:first-child) { 229 | display: none; 230 | } 231 | 232 | #nav-links .nav-link { 233 | font-size: 2rem; 234 | padding-left: 0; 235 | } 236 | 237 | #nav-links .nav-item { 238 | float: none; 239 | text-align: left; 240 | } 241 | 242 | #nav-links .nav-icon { 243 | display: block; 244 | position: absolute; 245 | top: 10px; 246 | right: 5px; 247 | font-size: 3rem; 248 | } 249 | } 250 | 251 | 252 | 253 | /*HEADER Dizayn Kısım*/ 254 | 255 | header { 256 | background-color: #18BC9C; 257 | padding-top:calc(112px + 10rem); 258 | padding-bottom: 112px; 259 | text-align: center; 260 | } 261 | 262 | header h1 { 263 | color: #fff; 264 | font-size: 7.6rem; 265 | } 266 | 267 | header h2 { 268 | color: #fff; 269 | font-size: 2.8rem; 270 | font-family: 'Lato'; 271 | font-weight: 300; 272 | } 273 | 274 | hr.star-light { 275 | border-color: #fff; 276 | } 277 | 278 | hr.star-dark { 279 | border-color: #2C3E50; 280 | } 281 | 282 | .star-light, .star-dark { 283 | border: none; 284 | border-top: .4rem solid; 285 | max-width: 25rem; 286 | margin: 3rem auto; 287 | padding: 5px; 288 | overflow: visible; 289 | height: 0; 290 | } 291 | 292 | .star-light::after { 293 | color: #fff; 294 | background-color: #18BC9C; 295 | } 296 | 297 | .star-dark::after { 298 | color: #2C3E50; 299 | background-color: #fff; 300 | } 301 | 302 | .star-light::after, .star-dark::after { 303 | content: "\f005"; 304 | font-family: "Font Awesome 5 Free"; 305 | font-weight: 900; 306 | font-size: 3rem; 307 | position: relative; 308 | padding: 0 8px; 309 | top: -3rem; 310 | } 311 | 312 | /* PORTFOLİO DİZAYN KISIM */ 313 | #portfolio h2 { 314 | font-size: 4.8rem; 315 | color: #2C3E50; 316 | } 317 | .portfolio-item { 318 | position: relative; 319 | } 320 | .portfolio-item img { 321 | display: block; 322 | } 323 | .img-overlay { 324 | position: absolute; 325 | top: 0; 326 | left: 0; 327 | height: 100%; 328 | width: 100%; 329 | background-color: #18BC9C; 330 | opacity: 0; 331 | transition: opacity .5s ease; 332 | } 333 | 334 | 335 | .img-overlay .icon { 336 | color: #fff; 337 | font-size: 2rem; 338 | position: absolute; 339 | top: 50%; 340 | left: 50%; 341 | transform: translate(-50%,-50%); 342 | } 343 | 344 | 345 | .portfolio-item:hover .img-overlay { 346 | opacity: 0.8; 347 | } 348 | 349 | /* ABOUT DİZAYN KISIM*/ 350 | #about { 351 | background-color: #18BC9C; 352 | color: #fff; 353 | } 354 | 355 | #about h2 { 356 | font-size: 4.8rem; 357 | } 358 | 359 | #about-text { 360 | text-align: left; 361 | } 362 | 363 | #about-text .left { 364 | float: none; 365 | width: 100%; 366 | padding-right: 5px; 367 | padding-left: 25px; 368 | } 369 | 370 | #about-text .right { 371 | float: none; 372 | width: 100%; 373 | padding-right: 5px; 374 | padding-left: 25px; 375 | } 376 | 377 | #about-text .text{ 378 | font-size: 2rem; 379 | } 380 | .btn-about{ 381 | margin-left: 10px; 382 | font-size: 3rem; 383 | } 384 | 385 | @media (min-width: 992px) { 386 | #about-text .left { 387 | float: left; 388 | width: 50%; 389 | padding-right: 10px; 390 | padding-left: 210px; 391 | } 392 | 393 | #about-text .right { 394 | float: right; 395 | width: 50%; 396 | padding-right: 210px; 397 | padding-left: 10px; 398 | } 399 | } 400 | 401 | 402 | 403 | /*CONTACT DİZAYN KISIM*/ 404 | 405 | #contact h2 { 406 | font-size: 4.8rem; 407 | color: #2C3E50; 408 | } 409 | 410 | #contact-form { 411 | width: 70%; 412 | margin: 0 auto; 413 | text-align: left; 414 | } 415 | 416 | .form-group { 417 | border-bottom: 1px solid #e9ecef; 418 | padding-bottom: 3rem; 419 | margin-bottom: 4rem; 420 | } 421 | 422 | 423 | .form-group input,.form-group textarea { 424 | border: none; 425 | width: 100%; 426 | display: block; 427 | font-size: 2.4rem; 428 | } 429 | 430 | .form-group input:focus { 431 | outline: 0; 432 | } 433 | 434 | footer { 435 | padding-top: 6rem; 436 | padding-bottom: 6rem; 437 | background-color: #2C3E50; 438 | color: #fff; 439 | text-align: center; 440 | } 441 | 442 | footer h4 { 443 | font-size: 2.4rem; 444 | } 445 | 446 | footer p { 447 | font-size: 2rem; 448 | margin-top: 1rem; 449 | } 450 | 451 | footer li { 452 | display: inline-block; 453 | margin-right: 1rem; 454 | } 455 | 456 | .copyright { 457 | background-color: #1A252F; 458 | padding-top: 2.4rem; 459 | padding-bottom: 2.4rem; 460 | color: #fff; 461 | text-align: center; 462 | } 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | --------------------------------------------------------------------------------