├── 01 sportSite ├── about.html ├── article.html ├── css │ ├── mobile.css │ └── style.css ├── img │ ├── img-1.webp │ ├── img-2.webp │ ├── img-3.webp │ ├── logo.png │ └── rowing.jpeg └── index.html ├── 02 movieapp ├── css │ ├── base.css │ ├── buttons.css │ ├── forms.css │ └── styles.css ├── img │ ├── bg.jpeg │ ├── features.jpeg │ ├── home-bg.jpeg │ ├── poster-1.jpeg │ ├── poster-2.jpeg │ ├── poster-3.jpeg │ └── poster-4.jpeg ├── index.html └── register.html ├── 03 hotelSite ├── blogs.html ├── css │ ├── style.css │ └── utils.css ├── img │ ├── 1.jpeg │ ├── 2.jpeg │ ├── 3.jpeg │ ├── 4.jpeg │ ├── about1.jpeg │ ├── about2.jpeg │ ├── bg-1.jpeg │ ├── bg-2.jpeg │ ├── blog-1.jpeg │ ├── blog-2.jpeg │ ├── blog-3.jpeg │ ├── blog-4.jpeg │ ├── contact.jpeg │ ├── p1.jpeg │ ├── p2.jpeg │ ├── p3.jpeg │ ├── room1.jpeg │ ├── room2.jpeg │ └── room3.jpeg └── index.html ├── 04 freelancerSite_Sass ├── package-lock.json ├── package.json ├── public │ ├── about.html │ ├── contact.html │ ├── css │ │ ├── lightbox.min.css │ │ ├── main.css │ │ └── owl.carousel.min.css │ ├── img │ │ ├── .DS_Store │ │ ├── about.jpeg │ │ ├── bg.jpeg │ │ ├── joomla.png │ │ ├── logo.png │ │ ├── user-1.jpeg │ │ ├── user-2.jpeg │ │ ├── user-3.jpeg │ │ ├── user-4.jpeg │ │ ├── wix.png │ │ ├── woocommerce.png │ │ ├── wordpress.png │ │ ├── work-1.jpeg │ │ ├── work-2.jpeg │ │ ├── work-3.jpeg │ │ ├── work-4.jpeg │ │ └── work-5.jpeg │ ├── index.html │ ├── js │ │ ├── jquery.min.js │ │ ├── lightbox.min.js │ │ ├── owl.carousel.js │ │ └── type-writer.js │ └── projects.html └── scss │ ├── _about.scss │ ├── _base.scss │ ├── _contact.scss │ ├── _footer.scss │ ├── _header.scss │ ├── _home.scss │ ├── _mobile.scss │ ├── _projects.scss │ ├── _utilities.scss │ ├── _variables.scss │ └── main.scss ├── 05 bootstrapSite_one ├── blogs.html ├── contact.html ├── img │ ├── 1.jpeg │ ├── 2.jpeg │ ├── 3.jpeg │ ├── 4.jpeg │ ├── 5.jpeg │ ├── 6.jpeg │ ├── 7.jpeg │ └── bg.png ├── index.html └── style.css ├── 06 bootstrapProductCard ├── 1.jpeg ├── 2.jpeg ├── 3.jpeg ├── index.html └── style.css ├── 07 bootstrapComments ├── 1.jpeg ├── 2.jpeg ├── 3.jpeg ├── index.html └── style.css ├── 08 bootstrapFilter ├── index.html └── style.css ├── 09 bootstrapShoppingSite ├── .gitignore ├── css │ └── bootstrap.css ├── package-lock.json ├── package.json ├── public │ ├── details.html │ ├── img │ │ ├── 1-big.jpeg │ │ ├── 1.jpeg │ │ ├── 2-big.jpeg │ │ ├── 2.jpeg │ │ ├── 3-big.jpeg │ │ ├── 3.jpeg │ │ ├── 4-big.jpeg │ │ ├── 4.jpeg │ │ ├── 5-big.jpeg │ │ ├── 5.jpeg │ │ ├── 6.jpeg │ │ ├── 7.jpeg │ │ ├── 8.jpeg │ │ ├── slider-1.jpeg │ │ ├── slider-2.jpeg │ │ └── slider-3.jpeg │ └── index.html └── scss │ ├── _bs-overrides.scss │ ├── _styles.scss │ └── bootstrap.scss ├── 10 movieAppOnlyHTML ├── Don’t Look Up.html ├── Fractured.html ├── Wrath of Man.html ├── eniyifilmler.html ├── form projek.html ├── foto │ ├── Don't look up.jpg │ ├── Fractured.jpg │ ├── img.jpg │ └── wrath.jpg └── index.html ├── 11 cinemaReservation ├── index.html ├── script.js └── style.css ├── 12 drawingApp ├── app.js ├── index.html └── style.css ├── 13 menuRightToLeft ├── app.js ├── index.html └── style.css └── README.md /01 sportSite/about.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/01 sportSite/about.html -------------------------------------------------------------------------------- /01 sportSite/article.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | new site 7 (Article Details) 14 | 15 | 16 | 17 | 34 | 35 |
36 |
37 |
38 |
39 | 40 |

Lorem ipsum dolor sit amet.

41 |
42 | 43 | Written by Rasul Jangirli 21 Ocak 2024 44 | 45 |
Sport
46 |
47 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora amet odit ratione delectus asperiores reiciendis distinctio molestiae maxime? Sapiente nesciunt ducimus repudiandae recusandae error laboriosam dolorum, temporibus obcaecati veniam?

48 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex dolore officiis neque accusamus facere pariatur tempore quaerat, quam nesciunt inventore illo provident saepe placeat corporis distinctio architecto ad, cumque sed id vero amet! Ullam aspernatur aperiam sit culpa voluptate, illo voluptatibus officia eligendi et consectetur unde excepturi facere odit nisi natus quas soluta obcaecati velit, cum optio aliquam iste in aut dolores. Magni voluptate ducimus totam repellendus tenetur? Nihil laudantium et labore aliquam tenetur, commodi eveniet, quam odio omnis adipisci, culpa animi repellat. Aliquam voluptatum deleniti repellat numquam ut laudantium harum id natus, animi iusto excepturi qui necessitatibus. Illo maxime possimus sint, quo accusantium quia consequuntur, aut qui blanditiis quae quod tenetur voluptates eaque tempore eveniet deleniti voluptate dolor, nostrum quas pariatur. Ratione temporibus, fuga vitae quidem corporis error architecto facere cum, sint maiores ad necessitatibus aspernatur. Quidem commodi repellat corrupti velit eos explicabo odio omnis eligendi molestias architecto harum, error atque voluptates dolor autem sunt aperiam similique consequatur suscipit natus dolore quae fugit tempore? A sit ullam quaerat fuga possimus accusantium est voluptatem adipisci eos dolor harum iure sed tempore impedit, sapiente dolorem pariatur accusamus velit nulla expedita perferendis ab! Officia distinctio enim sed velit omnis, quod similique magni!

49 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quasi odio exercitationem deserunt dolores possimus? Temporibus iusto facilis unde. Beatae, cum incidunt officiis recusandae reprehenderit commodi officia corrupti harum voluptatum tempora nostrum non, soluta magni eaque ipsum consequatur magnam at ipsam qui earum quo molestias, debitis eveniet. Est ipsa atque quam corporis et cupiditate explicabo! Nostrum accusamus ea expedita! Repellendus, eius. Praesentium neque placeat vitae eos facere minima beatae corrupti quaerat, cupiditate delectus facilis, sunt eligendi voluptatum? Quos eveniet excepturi non beatae optio provident odit sequi repudiandae, voluptatibus ut et hic sapiente culpa quaerat aperiam repellat, neque dolore? Commodi, qui.

50 |
51 | 56 | 66 |
67 |
68 |
69 | 70 | 71 | 111 | 112 | -------------------------------------------------------------------------------- /01 sportSite/css/mobile.css: -------------------------------------------------------------------------------- 1 | #main-nav .social-icons { 2 | display: none; 3 | } 4 | 5 | #main-nav .container { 6 | grid-template-columns: 1fr; 7 | gap: 1.2rem; 8 | } 9 | 10 | #main-nav ul, 11 | #main-nav img { 12 | justify-self: center; 13 | } 14 | 15 | #main-articles .articles-container { 16 | grid-template-columns: repeat(2,1fr); 17 | } 18 | 19 | @media (max-width:600px) { 20 | #header .header-container, 21 | #main-articles .articles-container, 22 | #main-footer .footer-container 23 | { 24 | grid-template-columns: 1fr; 25 | } 26 | 27 | #main-footer .footer-container > *:last-child 28 | { 29 | grid-column: 1; 30 | } 31 | 32 | #main-footer .footer-container > * 33 | { 34 | border-bottom: 1px dotted #444; 35 | padding-bottom: 1rem; 36 | } 37 | 38 | .page-container { 39 | grid-template-columns: 1fr; 40 | } 41 | 42 | } -------------------------------------------------------------------------------- /01 sportSite/css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color:#e76f51; 3 | --secondary-color:#2a9d8f; 4 | --light-color:#f8f9fa; 5 | --dark-color:#6c757d; 6 | 7 | --max-width:1100px; 8 | } 9 | 10 | * { 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | } 15 | 16 | html { 17 | font-size: 10px; 18 | } 19 | 20 | body { 21 | font-family: 'Lato', sans-serif; 22 | font-size: 1.6rem; 23 | line-height: 1.5; 24 | background-color: var(--light-color); 25 | } 26 | 27 | a { 28 | color: var(--dark-color); 29 | text-decoration: none; 30 | } 31 | 32 | ul { 33 | list-style: none; 34 | } 35 | 36 | img { 37 | width: 100%; 38 | } 39 | 40 | h1, h2, h3, h4, h5, h6 { 41 | font-family: 'Varela Round', sans-serif; 42 | margin: .7rem; 43 | line-height: 1.3; 44 | } 45 | 46 | p { 47 | margin: .5rem 0; 48 | } 49 | 50 | /* utilis */ 51 | 52 | .container { 53 | max-width: var(--max-width); 54 | margin: 0 auto; 55 | padding: 0 2rem; 56 | } 57 | 58 | .btn { 59 | display: inline-block; 60 | border: none; 61 | background-color: var(--dark-color); 62 | color: #fff; 63 | padding: .4rem 1.6rem; 64 | text-align: center; 65 | } 66 | 67 | .btn-light { background-color: var(--light-color); } 68 | .btn-dark { background-color: var(--dark-color); } 69 | .btn-primary { background-color: var(--primary-color);} 70 | 71 | .btn:hover { opacity: 0.8; } 72 | 73 | .btn-block { 74 | display: block; 75 | width: 100%; 76 | text-align: center; 77 | } 78 | 79 | .bg-primary {background-color: var(--primary-color); color: #fff;} 80 | .bg-secondary {background-color: var(--secondary-color) !important; color: #fff;} 81 | .bg-light {background-color: var(--light-color); color: var(--dark-color);} 82 | .bg-dark {background-color: var(--dark-color); color:#fff;} 83 | 84 | .p-1 { padding: .5rem;} 85 | .p-2 {padding:0.6rem;} 86 | .p-3 {padding:0.8rem;} 87 | .p-4 {padding:1rem;} 88 | 89 | .pt-1 {padding-top: .5rem;} 90 | .pt-2 {padding-top:0.6rem;} 91 | .pt-3 {padding-top:0.8rem;} 92 | .pt-4 {padding-top:1rem;} 93 | 94 | .py-1 {padding-top: 0.5rem; padding-bottom: 0.5rem;} 95 | .py-2 {padding-top: 1.5rem; padding-bottom: 1.5rem;} 96 | 97 | .px-1 {padding-right: 0.5rem; padding-left: 0.5rem;} 98 | .px-2 {padding-right: 0.6rem; padding-left: 0.6rem;} 99 | 100 | .m-1 {margin:0.5rem;} 101 | .m-2 {margin:0.6rem;} 102 | .m-3 {margin:0.8rem;} 103 | .m-4 {margin:1rem;} 104 | 105 | .mb-1 {margin-bottom:0.5rem;} 106 | .mb-2 {margin-bottom:0.6rem;} 107 | .mb-3 {margin-bottom:0.8rem;} 108 | .mb-4 {margin-bottom:1.6rem;} 109 | 110 | 111 | .card { 112 | background-color: #fff; 113 | padding: 1rem; 114 | } 115 | 116 | .card-primary { 117 | background-color: var(--primary-color); 118 | padding: 1rem; 119 | } 120 | 121 | .category { 122 | display: inline-block; 123 | color: #fff; 124 | font-size: 1.2rem; 125 | letter-spacing: 1px; 126 | padding: .4rem .6rem; 127 | border-radius: 15px; 128 | margin-bottom: .5rem; 129 | } 130 | 131 | /* navbar */ 132 | #main-nav { 133 | background-color: #fff; 134 | position: sticky; 135 | top: 0; 136 | z-index: 3; 137 | } 138 | 139 | #main-nav .container { 140 | display: grid; 141 | grid-template-columns: 0.6fr 3fr 2fr; 142 | padding: 1rem; 143 | align-items: center; 144 | } 145 | 146 | #main-nav .logo { 147 | width: 65px; 148 | } 149 | 150 | #main-nav ul { 151 | display: flex; 152 | justify-self: start; 153 | } 154 | 155 | #main-nav ul li a { 156 | padding: 0.6rem; 157 | font-weight: bold; 158 | } 159 | 160 | #main-nav ul li a.active { 161 | background-color: var(--primary-color); 162 | color: #fff; 163 | border-radius: 5px; 164 | } 165 | 166 | #main-nav ul li a:hover { 167 | background-color: var(--light-color); 168 | color: var(--dark-color); 169 | } 170 | 171 | #main-nav .social-icons { 172 | justify-self: end; 173 | } 174 | 175 | /* header */ 176 | 177 | #header { 178 | color: #fff; 179 | background: #333; 180 | padding: 2rem; 181 | position: relative; 182 | } 183 | 184 | #header::before { 185 | content: ""; 186 | background: url('../img/rowing.jpeg') no-repeat center center/cover; 187 | position: absolute; 188 | top: 0; 189 | left: 0; 190 | width: 100%; 191 | height: 100%; 192 | opacity:0.4; 193 | } 194 | 195 | #header .header-container { 196 | display: grid; 197 | grid-template-columns: repeat(2, 1fr); 198 | height: 50vh; 199 | align-items: center; 200 | } 201 | 202 | #header .header-content { 203 | z-index:2; 204 | } 205 | 206 | /* articles */ 207 | 208 | #main-articles .articles-container { 209 | display: grid; 210 | grid-template-columns: repeat(3, 1fr); 211 | gap: 1rem; 212 | } 213 | 214 | /* footer */ 215 | #main-footer { 216 | background-color: var(--dark-color); 217 | color: #fff; 218 | } 219 | 220 | #main-footer img { 221 | width: 150px; 222 | } 223 | 224 | #main-footer a { 225 | color: #fff; 226 | } 227 | 228 | #main-footer .footer-container { 229 | display: grid; 230 | grid-template-columns: repeat(4, 1fr); 231 | gap: 1.3rem; 232 | } 233 | 234 | #main-footer .footer-container > *:last-child{ 235 | background-color: #444; 236 | grid-column: 1 / span 4; 237 | padding: .5rem; 238 | text-align: center; 239 | } 240 | 241 | #main-footer .footer-container input[type='email'] { 242 | width: 90%; 243 | padding: .5rem; 244 | margin-bottom: .5rem; 245 | } 246 | 247 | #main-footer .footer-container input[type='submit'] { 248 | width: 90%; 249 | } 250 | 251 | #main-footer .footer-container ul li { 252 | padding: .5rem 0; 253 | border-bottom: 1px dotted #555; 254 | width: 90%; 255 | } 256 | 257 | #main-footer .footer-container ul li a:hover { 258 | color: var(--primary-color); 259 | } 260 | 261 | /* articles detailes */ 262 | .page-container { 263 | display: grid; 264 | grid-template-columns: 5fr 2fr; 265 | margin: 2.5rem 0; 266 | gap: 1.5rem; 267 | } 268 | .page-container > *:first-child { 269 | grid-row: 1 / span 3; 270 | } 271 | 272 | #article .meta { 273 | display: flex; 274 | justify-content: space-between; 275 | align-items: center; 276 | padding: 1rem; 277 | background-color: #eee; 278 | } 279 | 280 | .page-container #categories ul li { 281 | padding: .5rem 0; 282 | border-bottom: 1px dotted #555; 283 | width: 90%; 284 | } 285 | 286 | .page-container #categories ul li a:hover { 287 | color: var(--primary-color); 288 | } -------------------------------------------------------------------------------- /01 sportSite/img/img-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/01 sportSite/img/img-1.webp -------------------------------------------------------------------------------- /01 sportSite/img/img-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/01 sportSite/img/img-2.webp -------------------------------------------------------------------------------- /01 sportSite/img/img-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/01 sportSite/img/img-3.webp -------------------------------------------------------------------------------- /01 sportSite/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/01 sportSite/img/logo.png -------------------------------------------------------------------------------- /01 sportSite/img/rowing.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/01 sportSite/img/rowing.jpeg -------------------------------------------------------------------------------- /01 sportSite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | new site 7 (Article Details) 14 | 15 | 16 | 17 | 34 | 35 | 36 | 37 | 49 | 50 | 51 |
52 |
53 |

Latest News

54 |
55 |
56 | 57 |
58 |
Sport
59 |

Lorem ipsum dolor sit amet. 60 |

61 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quisquam facere excepturi laboriosam maiores veritatis?

62 |
63 |
64 |
65 | 66 |
67 |
Economy
68 |

Lorem ipsum dolor sit amet. 69 |

70 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quisquam facere excepturi laboriosam maiores veritatis?

71 |
72 |
73 |
74 | 75 |
76 |
Healt
77 |

Lorem ipsum dolor sit amet. 78 |

79 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quisquam facere excepturi laboriosam maiores veritatis?

80 |
81 |
82 |
83 | 84 |
85 |
Sport
86 |

Lorem ipsum dolor sit amet. 87 |

88 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quisquam facere excepturi laboriosam maiores veritatis?

89 |
90 |
91 |
92 | 93 |
94 |
Sport
95 |

Lorem ipsum dolor sit amet. 96 |

97 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quisquam facere excepturi laboriosam maiores veritatis?

98 |
99 |
100 |
101 | 102 |
103 |
Healt
104 |

Lorem ipsum dolor sit amet. 105 |

106 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quisquam facere excepturi laboriosam maiores veritatis?

107 |
108 |
109 |
110 |
111 |
112 | 113 | 114 | 154 | 155 | -------------------------------------------------------------------------------- /02 movieapp/css/base.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | margin: 0; 8 | font-family: 'Lato', sans-serif; 9 | } 10 | 11 | .row { 12 | margin-top: 40px; 13 | } 14 | 15 | .row::after { 16 | content: ""; 17 | display: block; 18 | clear: both; 19 | } 20 | 21 | .col-4 { 22 | float: left; 23 | width: 25%; 24 | } 25 | 26 | .col-3 { 27 | float: left; 28 | width: 33.3%; 29 | } 30 | 31 | .col-2 { 32 | float: left; 33 | width: 50%; 34 | } 35 | 36 | .clearfix::after { 37 | content: ""; 38 | display: block; 39 | clear: both; 40 | } 41 | 42 | .container { 43 | width: 100%; 44 | } 45 | 46 | .img-fluid { 47 | width: 100%; 48 | } 49 | /* X-small devices (portrait phones, less than 576px) */ 50 | /* No media query for 'xs' since this is the default in Bootsrap */ 51 | /* Small devices (Landscape phones, 576px and up) */ 52 | @media(min-width: 576px) { 53 | .container { 54 | margin: 0 auto; 55 | width: 540px; 56 | } 57 | } 58 | 59 | /* Medium devices ( tablets, 768px and up) */ 60 | @media(min-width:768px) { 61 | .container { 62 | margin: 0 auto; 63 | width: 720px; 64 | } 65 | } 66 | /* Large devices (desktops,992px and up) */ 67 | @media(min-width:992px) { 68 | .container { 69 | margin: 0 auto; 70 | width: 960px; 71 | } 72 | } 73 | /* X-large devices (large desktops,1200px and up) */ 74 | @media(min-width:1200px) { 75 | .container { 76 | margin: 0 auto; 77 | width: 1140px; 78 | } 79 | } 80 | /* XX-Large devices (large desktops,1400px and up) */ 81 | @media(min-width: 1400px) { 82 | .container { 83 | margin: 0 auto; 84 | width: 1320px; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /02 movieapp/css/buttons.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | text-align: center; 3 | text-decoration: none; 4 | display: inline-block; 5 | padding: 7px 15px; 6 | font-size: 16px; 7 | cursor: pointer; 8 | border: none; 9 | border-radius: 3px; 10 | transition-duration: .6s 11 | } 12 | 13 | .btn-primary { 14 | background: #FC997C; 15 | color: #fff; 16 | border: 2px solid #FC997C; 17 | } 18 | 19 | .btn-primary:hover { 20 | background: #fff; 21 | color: #FC997C; 22 | border: 2px solid #FC997C; 23 | } 24 | 25 | .btn-outline-primary { 26 | background: #fff; 27 | color: #FC997C; 28 | border: 2px solid #FC997C; 29 | } 30 | 31 | .btn-outline-primary:hover { 32 | background: #FC997C; 33 | color: #fff; 34 | border: 2px solid #FC997C; 35 | } 36 | 37 | .btn-secondary { 38 | background: #2E4C6D; 39 | color: #fff; 40 | border: 2px solid #2E4C6D; 41 | } 42 | 43 | .btn-secondary:hover { 44 | background: #fff; 45 | color: #2E4C6D; 46 | border: 2px solid #2E4C6D; 47 | } 48 | 49 | .btn-outline-secondary { 50 | background: #fff; 51 | color: #2E4C6D; 52 | border: 2px solid #2E4C6D; 53 | } 54 | 55 | .btn-outline-secondary:hover { 56 | background: #2E4C6D; 57 | color: #fff; 58 | border: 2px solid #2E4C6D; 59 | } -------------------------------------------------------------------------------- /02 movieapp/css/forms.css: -------------------------------------------------------------------------------- 1 | 2 | .signup-page{ 3 | padding-top: 20px; 4 | } 5 | .signup-title { 6 | text-align: center; 7 | font-size: 30px; 8 | color: #2E4C6d; 9 | } 10 | 11 | .signup-form { 12 | width: 500px; 13 | margin: auto; 14 | } 15 | 16 | .signup-form label, 17 | .signup-form input:not([type="checkbox"]), 18 | .signup-form select { 19 | display: block; 20 | width: 100%; 21 | margin-top: 10px; 22 | } 23 | 24 | .signup-form input[type="checkbox"], 25 | .signup-form input[type="checkbox"] + label { 26 | display: inline-block; 27 | width: auto; 28 | margin-top: 15px; 29 | } 30 | 31 | .signup-form button[type="submit"] { 32 | display: block; 33 | margin-top: 15px; 34 | } 35 | 36 | .signup-form input:not([type="checkbox"]), 37 | .signup-form select { 38 | border: 1px solid #ccc; 39 | padding: 10px 15px; 40 | } 41 | 42 | .signup-form input:not([type="checkbox"]):focus, 43 | .signup-form select:focus { 44 | outline: none; 45 | background-color: yellow; 46 | border: 1px solid greenyellow; 47 | } 48 | 49 | .signup-form input[type="checkbox"] { 50 | appearance: none; 51 | width: 20px; 52 | height: 20px; 53 | border: 1px solid #2E4C6d; 54 | vertical-align: bottom; 55 | border-radius: 50%; 56 | } 57 | 58 | .signup-form input[type="checkbox"]:hover { 59 | background: gray; 60 | } 61 | 62 | .signup-form input[type="checkbox"]:checked { 63 | background: #FC997C; 64 | } 65 | 66 | 67 | -------------------------------------------------------------------------------- /02 movieapp/css/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"); 2 | @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto:wght@400;700&display=swap'); 3 | @import url("buttons.css"); 4 | @import url("base.css"); 5 | 6 | html { 7 | scroll-behavior: smooth; 8 | } 9 | 10 | main { 11 | margin-top: 50px; 12 | } 13 | 14 | #showcase { 15 | background: 16 | linear-gradient(to bottom, rgba(252, 153, 124, 0.2),rgba(250, 81, 30, 0.2)), 17 | url('../img/bg.jpeg'); 18 | background-position: center; 19 | background-size: cover; 20 | height: 40vh; 21 | width: 100%; 22 | position: relative; 23 | } 24 | #showcase .content { 25 | position: absolute; 26 | top: 60%; 27 | left: 50%; 28 | transform: translate(-50%,-50%); 29 | color: #fff; 30 | font-size: 15px; 31 | background: rgba(46, 76, 109, 0.3); 32 | padding: 20px; 33 | width: 60%; 34 | border-radius: 10px; 35 | } 36 | 37 | 38 | #showcase h1 { 39 | position: absolute; 40 | top: 50%; 41 | margin: 0; 42 | color: #fff; 43 | /* font-size: 45px; */ 44 | left: 50%; 45 | transform: translate(-50%, -50%); 46 | } 47 | /* Medium devices ( tablets, 768px and up) */ 48 | @media(min-width: 576px) { 49 | #showcase { 50 | height: 50vh; 51 | } 52 | #showcase .content{ 53 | font-size: 23px; 54 | } 55 | } 56 | 57 | @media(min-width:768px) { 58 | #showcase { 59 | height: 60vh; 60 | } 61 | #showcase .content{ 62 | font-size: 25px; 63 | } 64 | } 65 | 66 | @media(min-width:992px) { 67 | #showcase { 68 | height: 70vh; 69 | } 70 | #showcase .content{ 71 | font-size: 26px; 72 | } 73 | } 74 | 75 | 76 | 77 | .main-header { 78 | background-color: #FC997C; 79 | padding: 8px 16px; 80 | } 81 | 82 | .main-nav { 83 | display: inline-block; 84 | width: calc(100% - 105px); 85 | text-align: right; 86 | font-family: 'Roboto', sans-serif; 87 | } 88 | .main-nav__items { 89 | margin: 0; 90 | padding: 0; 91 | list-style: none; 92 | } 93 | 94 | .main-nav__item { 95 | display: inline-block; 96 | margin: 0 10px; 97 | } 98 | 99 | .main-header { 100 | position: fixed; 101 | z-index: 1; 102 | width: 100%; 103 | top: 0; 104 | } 105 | 106 | .main-header__logo { 107 | color: #fff; 108 | text-decoration: none; 109 | font-weight: bold; 110 | font-size: 21px; 111 | } 112 | 113 | .main-nav__item a { 114 | text-decoration: none; 115 | color: #fff; 116 | } 117 | 118 | .main-nav__item a:hover, .main-nav__item:hover::before { 119 | color: #2E4C6D; 120 | } 121 | 122 | .main-nav__item:active::before, .main-nav__item a:active { 123 | color: #fff; 124 | } 125 | 126 | .main-nav__item::before { 127 | content: '\2022'; 128 | color: #fff; 129 | } 130 | 131 | .main-nav__item--login::before { 132 | content:none; 133 | } 134 | 135 | #how-it-works { 136 | padding: 10px; 137 | text-align: center; 138 | } 139 | 140 | .icon-box h3 { 141 | color: #3e4555; 142 | font-size: 26px; 143 | } 144 | 145 | .icon-box i { 146 | color: #FC997C; 147 | } 148 | 149 | .features__left { 150 | background: 151 | linear-gradient(to bottom, rgba(252, 153, 124, 0.2),rgba(250, 81, 30, 0.2)), 152 | url('../img/features.jpeg'); 153 | background-size: cover; 154 | background-position: top center; 155 | } 156 | 157 | .features__right { 158 | background-color: #edf5f7; 159 | padding: 40px; 160 | vertical-align: top; 161 | } 162 | 163 | .features__left, 164 | .features__right { 165 | height: 350px; 166 | } 167 | 168 | .features__right h3 { 169 | font-size: 30px; 170 | } 171 | 172 | .section-title { 173 | text-align: center; 174 | margin-bottom: 40px; 175 | color: #3e4555; 176 | font-size: 30px; 177 | } 178 | 179 | .plan { 180 | text-align: center; 181 | padding: 5px; 182 | } 183 | 184 | .plan__badge { 185 | background: #fff; 186 | color: #FC997C; 187 | padding: 8px; 188 | border-radius: 5px; 189 | } 190 | 191 | .recommended_plan { 192 | color: #fff; 193 | background: #396EB0!important; 194 | } 195 | 196 | .inner-plan { 197 | background: #edf5f7; 198 | padding: 25px 10px; 199 | border-radius: 5px; 200 | box-shadow: 0px 7px 29px 0px rgba(100, 100, 111, 0.2); 201 | transition: box-shadow .6s; 202 | } 203 | 204 | .inner-plan:hover { 205 | box-shadow: 0px 7px 29px 0px rgba(100, 100, 111, 0.5); 206 | } 207 | 208 | .plan__features { 209 | list-style: none; 210 | margin: 0; 211 | padding: 0; 212 | } 213 | 214 | .plan--featured { 215 | position: relative; 216 | top: -20px; 217 | } 218 | 219 | .plan__features li { 220 | margin: 6px 0; 221 | } 222 | 223 | #backtotop { 224 | position: fixed; 225 | bottom: 10px; 226 | right: 10px; 227 | } 228 | 229 | #backtotop i { 230 | color: #2E4C6D; 231 | font-size: 45px; 232 | transition: color .6s; 233 | } 234 | 235 | #backtotop i:hover { 236 | color:#2E4C6D; 237 | } 238 | 239 | .counter { 240 | background: linear-gradient(to bottom, #fc997c 0%, #fc8b69 100%); 241 | text-align: center; 242 | padding: 50px; 243 | } 244 | 245 | .counter__item { 246 | font-size: 30px; 247 | font-weight: 500; 248 | color: #fff; 249 | } 250 | 251 | .counter h4 { 252 | margin: 0; 253 | color: #fff; 254 | } 255 | 256 | .card-container { 257 | padding: 10px; 258 | } 259 | 260 | .card { 261 | background-color: #fff; 262 | border-radius: 5px; 263 | cursor: pointer; 264 | box-shadow: 10px 10px 40px rgba(52,58,64,0.1); 265 | /* position: relative; */ 266 | /* top: 0; */ 267 | transition: all .3s; 268 | } 269 | .card:hover { 270 | /* top: -10px; */ 271 | transform: translateY(-10px); 272 | } 273 | 274 | .card-image { 275 | max-height: 350px; 276 | } 277 | 278 | .card-body { 279 | padding: 30px; 280 | } 281 | 282 | footer { 283 | background-color: #2E4C6D; 284 | padding: 30px; 285 | margin-top: 30px; 286 | 287 | position: relative; 288 | bottom: -200px; 289 | } 290 | 291 | footer a { 292 | color: #fff; 293 | font-size: 18px; 294 | text-decoration: none; 295 | } 296 | 297 | footer ul { 298 | margin: 0; 299 | padding: 0; 300 | } 301 | 302 | footer ul li { 303 | list-style-type: none; 304 | display: inline-block; 305 | margin-left: 5px; 306 | } 307 | 308 | #social-links { 309 | text-align: right; 310 | } 311 | 312 | .fab { 313 | padding: 10px; 314 | font-size: 25px; 315 | border-radius: 50%; 316 | } 317 | 318 | .fab:hover { 319 | opacity: 0.7; 320 | } 321 | 322 | .fa-facebook { 323 | background-color: #3B5998; 324 | color: #fff; 325 | } 326 | 327 | .fa-twitter { 328 | background-color: #55ACEE; 329 | color: #fff; 330 | } 331 | 332 | .fa-instagram { 333 | background-color: #125688; 334 | color: #fff; 335 | } -------------------------------------------------------------------------------- /02 movieapp/img/bg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/02 movieapp/img/bg.jpeg -------------------------------------------------------------------------------- /02 movieapp/img/features.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/02 movieapp/img/features.jpeg -------------------------------------------------------------------------------- /02 movieapp/img/home-bg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/02 movieapp/img/home-bg.jpeg -------------------------------------------------------------------------------- /02 movieapp/img/poster-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/02 movieapp/img/poster-1.jpeg -------------------------------------------------------------------------------- /02 movieapp/img/poster-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/02 movieapp/img/poster-2.jpeg -------------------------------------------------------------------------------- /02 movieapp/img/poster-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/02 movieapp/img/poster-3.jpeg -------------------------------------------------------------------------------- /02 movieapp/img/poster-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/02 movieapp/img/poster-4.jpeg -------------------------------------------------------------------------------- /02 movieapp/register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 29 |
30 |
31 | 32 |
33 |

Create Your Account

34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 53 | 54 | 55 | 58 | 59 | 60 |
61 |
62 | 63 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /03 hotelSite/blogs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | 16 | Document 17 | 18 | 19 |
20 |
21 |

22 | 23 | Deluxe Hotel 24 |

25 | 34 |
35 | 36 |
37 |

Deluxe Hotel Blog

38 |
39 |
40 | 41 |
42 | 43 |
44 |
45 |
46 |
47 |
48 | 49 |
50 |
51 |
52 |
53 |

Blog Title One

54 |

55 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 56 | Veniam, possimus. 57 |

58 | 59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 | 68 |
69 |
70 |
71 |
72 |

Blog Title Two

73 |

74 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 75 | Veniam, possimus. 76 |

77 | 78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |
90 |
91 |

Blog Title Three

92 |

93 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 94 | Veniam, possimus. 95 |

96 | 97 |
98 |
99 |
100 |
101 |
102 |
103 | 104 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /03 hotelSite/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html { 10 | font-size: 10px; 11 | scroll-behavior: smooth; 12 | } 13 | 14 | body { 15 | font-family: 'Open Sans', sans-serif; 16 | font-size: 1.6rem; 17 | background: #fff; 18 | color: #333; 19 | line-height: 1.6; 20 | } 21 | 22 | ul { 23 | list-style: none; 24 | } 25 | 26 | a { 27 | color: #333; 28 | text-decoration: none; 29 | } 30 | 31 | h1,h2 { 32 | font-weight: 300; 33 | line-height: 1.2; 34 | } 35 | 36 | p { 37 | margin: 1rem 0; 38 | } 39 | 40 | img { 41 | width: 100%; 42 | } 43 | 44 | .text-center { 45 | text-align: center; 46 | } 47 | 48 | /* navbar */ 49 | .navbar { 50 | display: flex; 51 | align-items: center; 52 | justify-content: space-between; 53 | background-color: var(--dark); 54 | opacity: 0.8; 55 | color: #fff; 56 | position: fixed; 57 | top: 0; 58 | width: 100%; 59 | height: 70px; 60 | padding: 0 3rem; 61 | } 62 | 63 | .navbar a { 64 | color: #fff; 65 | padding: 1rem 2rem; 66 | margin: 0 .5px; 67 | } 68 | 69 | .navbar a:hover { 70 | border-bottom: 2px solid var(--warning); 71 | } 72 | 73 | .navbar ul { 74 | display: flex; 75 | } 76 | 77 | .navbar .brand { 78 | font-weight: 400; 79 | } 80 | 81 | .navbar h1 { 82 | font-size: 3rem; 83 | } 84 | 85 | .navbar span { 86 | color: var(--warning); 87 | } 88 | 89 | /* header */ 90 | 91 | .main-header { 92 | background-image: url('../img/bg-1.jpeg'); 93 | background-repeat: no-repeat; 94 | background-size: cover; 95 | background-position: center; 96 | height: 100vh; 97 | color: #fff; 98 | position: relative; 99 | } 100 | 101 | .main-header.blog { 102 | background-image: url('../img/bg-2.jpeg'); 103 | height: 50vh; 104 | } 105 | 106 | .main-header .content { 107 | display: flex; 108 | flex-direction: column; 109 | align-items: center; 110 | justify-content: center; 111 | text-align: center; 112 | height: 100%; 113 | } 114 | 115 | .main-header::before { 116 | content: ''; 117 | position: absolute; 118 | top: 0; 119 | left: 0; 120 | width: 100%; 121 | height: 100%; 122 | background: rgba(0, 0, 0, 0.6) 123 | } 124 | 125 | .main-header * { 126 | z-index: 5; 127 | } 128 | 129 | .main-header .content h1 { 130 | font-size: 5.5rem; 131 | } 132 | 133 | .main-header .content p { 134 | font-size: 2.3rem; 135 | max-width: 60rem; 136 | margin: 2rem 0 3rem; 137 | } 138 | 139 | /* icons */ 140 | .icons { 141 | padding: 30px; 142 | } 143 | 144 | .icons h3 { 145 | font-weight: 400; 146 | margin-bottom: 15px; 147 | } 148 | 149 | .icons i { 150 | background-color: var(--primary); 151 | color: #fff; 152 | padding: 1rem; 153 | border-radius: 50%; 154 | margin-bottom: 1.5rem; 155 | } 156 | 157 | 158 | /* about */ 159 | .about { 160 | color: #fff; 161 | } 162 | 163 | .about h2 { 164 | font-size: 4rem; 165 | font-weight: 400; 166 | } 167 | 168 | .about p { 169 | margin: 2rem 0; 170 | } 171 | 172 | /* gallery */ 173 | .gallery img:hover { 174 | cursor: pointer; 175 | opacity: 0.8; 176 | } 177 | 178 | /* cards */ 179 | .card { 180 | color: #fff; 181 | font-weight: 700; 182 | } 183 | 184 | .card-body { 185 | padding: 2rem; 186 | } 187 | 188 | /* teams */ 189 | .teams img { 190 | border-radius: 50%; 191 | } 192 | 193 | .teams img:hover { 194 | opacity: 0.7; 195 | } 196 | 197 | /* contact */ 198 | .contact-form { 199 | width: 100%; 200 | padding: 2rem 0; 201 | } 202 | 203 | .contact-form label { 204 | display: block; 205 | margin-bottom: .5rem; 206 | } 207 | 208 | .contact-form .form-control { 209 | margin-bottom: 1.5rem; 210 | } 211 | 212 | .contact-form input { 213 | width: 100%; 214 | padding: 5px; 215 | height: 40px; 216 | border: 1px solid #f5f5f5; 217 | } 218 | 219 | .contact-form .btn { 220 | margin-top: 20px; 221 | } 222 | 223 | .contact h2 { 224 | font-size: 4rem; 225 | } 226 | 227 | /* article */ 228 | .articles { 229 | padding: 3rem 5rem; 230 | } 231 | 232 | .article { 233 | margin-top: 1.5rem; 234 | color: #fff; 235 | } 236 | 237 | /* footer */ 238 | .footer { 239 | display: flex; 240 | flex-direction: column; 241 | justify-content: center; 242 | align-items: center; 243 | text-align: center; 244 | height: 200px; 245 | } 246 | 247 | .footer a { 248 | color: var(--danger); 249 | } 250 | 251 | .footer a:hover { 252 | opacity: 0.7; 253 | } 254 | 255 | .footer .social a { 256 | margin-right: 10px; 257 | } 258 | 259 | /* mobile */ 260 | @media(max-width: 768px) { 261 | html { 262 | font-size: 9px; 263 | } 264 | 265 | .navbar { 266 | flex-direction: column; 267 | height: 120px; 268 | padding: 20px; 269 | } 270 | 271 | .navbar a { 272 | padding: 10px; 273 | margin: 0 3px; 274 | } 275 | 276 | .teams img { 277 | width: 70%; 278 | } 279 | } -------------------------------------------------------------------------------- /03 hotelSite/css/utils.css: -------------------------------------------------------------------------------- 1 | /* 2 | #007bff 3 | #6c757d 4 | #28a745 5 | #dc3545 6 | #ffc107 7 | #17a2b8 8 | #343a40 9 | #f8f9fa 10 | */ 11 | 12 | :root { 13 | --white: #fff; 14 | --primary: #007bff; 15 | --secondary: #6c757d; 16 | --success: #28a745; 17 | --danger: #dc3545; 18 | --warning: #ffc107; 19 | --info: #17a2b8; 20 | --dark: #343a40; 21 | --light: #f8f9fa; 22 | } 23 | 24 | /* text color */ 25 | .text-primary { color: var(--primary); } 26 | .text-secondary { color: var(--secondary); } 27 | .text-success { color: var(--success); } 28 | .text-danger { color: var(--danger); } 29 | .text-warning { color: var(--warning); } 30 | .text-info { color: var(--info); } 31 | .text-dark { color: var(--dark); } 32 | .text-light { color: var(--light); } 33 | 34 | /* bg-colors */ 35 | .bg-primary { background-color: var(--primary); } 36 | .bg-secondary { background-color: var(--secondary); } 37 | .bg-success { background-color: var(--success); } 38 | .bg-danger { background-color: var(--danger); } 39 | .bg-warning { background-color: var(--warning); } 40 | .bg-info { background-color: var(--info); } 41 | .bg-dark { background-color: var(--dark); } 42 | .bg-light { background-color: var(--light); } 43 | 44 | /* buttons */ 45 | .btn { 46 | cursor: pointer; 47 | display: inline-block; 48 | padding: 10px 30px; 49 | border: none; 50 | border-radius: 5px; 51 | } 52 | 53 | .btn:hover { 54 | opacity: 0.9; 55 | } 56 | 57 | .btn-primary { 58 | color: var(--white); 59 | background-color: var(--primary); 60 | } 61 | 62 | .btn-secondary { 63 | color: var(--white); 64 | background-color: var(--secondary); 65 | } 66 | 67 | .btn-success { 68 | color: var(--white); 69 | background-color: var(--success); 70 | } 71 | 72 | 73 | .btn-danger { 74 | color: var(--white); 75 | background-color: var(--danger); 76 | } 77 | 78 | .btn-warning { 79 | color: var(--white); 80 | background-color: var(--warning); 81 | } 82 | 83 | .btn-dark { 84 | color: var(--white); 85 | background-color: var(--dark); 86 | } 87 | 88 | .btn-outline { 89 | background: transparent; 90 | border: 1px solid var(--white); 91 | color: var(--white); 92 | } 93 | 94 | .btn-outline-primary { 95 | background: transparent; 96 | border: 1px solid var(--primary); 97 | color: var(--dark); 98 | } 99 | 100 | .btn-outline-primary:hover { 101 | background-color: var(--primary); 102 | border: 1px solid var(--primary); 103 | color: var(--white); 104 | } 105 | 106 | /* flex items */ 107 | .flex-items { 108 | display: flex; 109 | justify-content: center; 110 | text-align: center; 111 | height: 100%; 112 | } 113 | 114 | .flex-items > div { 115 | padding: 20px; 116 | flex-basis: 100%; 117 | } 118 | 119 | /* flex columns */ 120 | .flex-columns.flex-reverse .row { 121 | flex-direction: row-reverse; 122 | } 123 | .flex-columns .row { 124 | display: flex; 125 | flex-direction: row; 126 | flex-wrap: wrap; 127 | width: 100%; 128 | } 129 | 130 | .flex-columns .column { 131 | flex: 1; 132 | } 133 | 134 | .flex-columns.article .column:nth-child(odd) { 135 | flex: 2; 136 | } 137 | 138 | .flex-columns.article .column:nth-child(even) { 139 | flex: 3; 140 | } 141 | 142 | .flex-columns .column .column-1, 143 | .flex-columns .column .column-2 { 144 | height: 100%; 145 | } 146 | 147 | .flex-columns .column-2 { 148 | display: flex; 149 | flex-direction: column; 150 | align-items: flex-start; 151 | justify-content: center; 152 | padding: 3rem; 153 | } 154 | 155 | .flex-columns img { 156 | width: 100%; 157 | height: 100%; 158 | } 159 | 160 | 161 | /* flex grid */ 162 | .flex-grid .row { 163 | display: flex; 164 | flex-wrap: wrap; 165 | padding: 0 .4rem; 166 | } 167 | 168 | .flex-grid .column { 169 | flex: 25%; 170 | padding: 0 .4rem; 171 | } 172 | 173 | /* section */ 174 | .section-header { 175 | display: flex; 176 | flex-direction: column; 177 | align-items: center; 178 | justify-content: center; 179 | text-align: center; 180 | padding: 3rem; 181 | } 182 | 183 | .section-header h2 { 184 | font-size: 4rem; 185 | margin: 2rem 0; 186 | } 187 | 188 | .section-padding { 189 | padding: 2rem 2rem 4rem; 190 | } 191 | 192 | @media(max-width: 768px) { 193 | 194 | .flex-items { 195 | flex-direction: column; 196 | } 197 | 198 | .flex-items > div { 199 | padding: 10px; 200 | } 201 | 202 | .flex-columns .column { 203 | flex: 100% !important; 204 | } 205 | 206 | .flex-grid .column { 207 | flex: 50%; 208 | } 209 | 210 | } -------------------------------------------------------------------------------- /03 hotelSite/img/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/1.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/2.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/3.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/4.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/about1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/about1.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/about2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/about2.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/bg-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/bg-1.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/bg-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/bg-2.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/blog-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/blog-1.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/blog-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/blog-2.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/blog-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/blog-3.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/blog-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/blog-4.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/contact.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/contact.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/p1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/p1.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/p2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/p2.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/p3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/p3.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/room1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/room1.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/room2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/room2.jpeg -------------------------------------------------------------------------------- /03 hotelSite/img/room3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/03 hotelSite/img/room3.jpeg -------------------------------------------------------------------------------- /04 freelancerSite_Sass/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frelancer-temel-ayarlar", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "scss": "node-sass -w scss -o public/css" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "lightbox2": "^2.11.3", 14 | "node-sass": "^8.0.0", 15 | "owl.carousel": "^2.3.4" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | Document 16 | 17 | 18 | 19 | 20 |
21 |
22 | 31 |
32 |
33 | 34 | 35 |
36 |
37 |

About Me

38 |
39 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut facere dolores impedit aperiam quaerat deleniti iure et minima vitae cum.

40 |
41 | 42 |
43 |

Lorem ipsum dolor sit amet.

44 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Id voluptate fuga cum fugiat doloribus quibusdam amet, sit unde dicta omnis minima quidem dolore, harum, vero vitae beatae consectetur non praesentium.

45 |
46 |
47 |
48 |
49 | 50 | 51 |
52 |
53 |

What I Know... 54 |

55 |
56 | 57 |
58 |

Web Development

59 |
60 |
61 |
62 |

Mobil App Development

63 |
64 |
65 |
66 |

Data Science

67 |
68 |
69 |
70 |

Machine Learning

71 |
72 |
73 |
74 |
75 |
76 |
77 | 78 | 79 |
80 |
81 |
82 | 83 | 84 | 85 | 86 |
87 |
88 |
89 | 90 | 91 |
92 |
93 |

References

94 |
95 |

96 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 97 |

98 |
99 |
100 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque doloremque sequi enim nesciunt perspiciatis ipsum at, placeat distinctio quas fugiat.

101 |
    102 |
    • 103 |
  • Lorem, ipsum dolor.
    • 104 |
105 |
106 |
107 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque doloremque sequi enim nesciunt perspiciatis ipsum at, placeat distinctio quas fugiat.

108 |
    109 |
    • 110 |
  • Lorem, ipsum dolor.
    • 111 |
112 |
113 |
114 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque doloremque sequi enim nesciunt perspiciatis ipsum at, placeat distinctio quas fugiat.

115 |
    116 |
    • 117 |
  • Lorem, ipsum dolor.
    • 118 |
119 |
120 |
121 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque doloremque sequi enim nesciunt perspiciatis ipsum at, placeat distinctio quas fugiat.

122 |
    123 |
    • 124 |
  • Lorem, ipsum dolor.
    • 125 |
126 |
127 |
128 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque doloremque sequi enim nesciunt perspiciatis ipsum at, placeat distinctio quas fugiat.

129 |
    130 |
    • 131 |
  • Lorem, ipsum dolor.
    • 132 |
133 |
134 |
135 |
136 |
137 | 138 | 139 | 151 | 152 | 154 | 156 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | Document 17 | 18 | 19 | 20 | 21 |
22 |
23 | 32 |
33 |
34 | 35 | 36 |
37 |
38 |

Contact Me

39 |
40 |

Lorem ipsum dolor sit amet.

41 |
44 |
45 | 46 | 47 | 48 | 49 | 50 |
51 | 52 |
53 |
54 |
55 |
56 | 57 | 58 |
59 |
60 |
61 |
62 | 63 |

Email

64 |

mail@gmail.com

65 |
66 |
67 | 68 |

Phone

69 |

(+994) 99 365 99 09

70 |
71 |
72 | 73 |

Address

74 |

Baku,Azerbaijan

75 |
76 |
77 |
78 |
79 | 80 | 81 | 82 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/css/lightbox.min.css: -------------------------------------------------------------------------------- 1 | .lb-loader,.lightbox{text-align:center;line-height:0;position:absolute;left:0}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{width:100%;z-index:10000;font-weight:400;outline:0}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-outerContainer:after{content:"";display:table;clear:both}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{content:"";display:table;clear:both}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1} -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/css/owl.carousel.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/.DS_Store -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/about.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/about.jpeg -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/bg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/bg.jpeg -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/joomla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/joomla.png -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/logo.png -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/user-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/user-1.jpeg -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/user-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/user-2.jpeg -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/user-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/user-3.jpeg -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/user-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/user-4.jpeg -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/wix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/wix.png -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/woocommerce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/woocommerce.png -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/wordpress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/wordpress.png -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/work-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/work-1.jpeg -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/work-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/work-2.jpeg -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/work-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/work-3.jpeg -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/work-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/work-4.jpeg -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/img/work-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/04 freelancerSite_Sass/public/img/work-5.jpeg -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | Document 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | 33 |
34 |

I'm John Anderson 35 | 39 | 40 |

41 | View My Profile 42 |
43 |
44 |
45 | 46 | 47 |
48 |
49 |

Introduction 50 |

51 |
52 |
53 |

54 | I am Junior Developer able to build a Web presence from the ground up - from concept, navigation, layout and programing to UX and SEO. Skilled at writing well-designed, testable and efficient sode using current best practices in Web development. Fast learner, hard worker and team player who is proficient in an array of scripting languages and multimedia Web tools. 55 |

56 |
57 |
58 | 59 |

Javascript

60 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, delectus.

61 |
62 |
63 | 64 |

Asp.Net

65 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, delectus.

66 |
67 |
68 | 69 |

Python

70 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, delectus.

71 |
72 |
73 | 74 |

Databases

75 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, delectus.

76 |
77 | 78 | 79 |
80 |
81 |
82 | 83 | 84 |
85 |
86 |

Profile 87 |

88 |
89 |
90 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto temporibus eum eius, incidunt ullam voluptatem?

91 |
92 |
93 |
94 |
    95 |
    • 96 |
  • Customers
    • 97 |
  • 50
    • 98 |
99 |
100 |
101 |
    102 |
    • 103 |
  • Projects
    • 104 |
  • 50
    • 105 |
106 |
107 |
108 |
    109 |
    • 110 |
  • Hourse
    • 111 |
  • 7200
    • 112 |
113 |
114 |
115 |
    116 |
    • 117 |
  • Projects Completed
    • 118 |
  • 36
    • 119 |
120 |
121 |
122 |
123 | 124 | 125 |
126 |
127 |

Working Process 128 |

129 |
130 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, commodi recusandae. Corporis ipsum sunt dolorum ipsa dolores dolorem harum. Praesentium?

131 |
132 |
133 | 134 |
1
135 | 136 |

Step 1

137 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eaque veniam, consectetur recusandae aliquam ut?

138 |
139 |
140 | 141 |
2
142 | 143 |

Step 2

144 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eaque veniam, consectetur recusandae aliquam ut?

145 |
146 |
147 | 148 |
3
149 | 150 |

Step 3

151 |

Lorem psum dolor sit amet consectetur adipisicing elit. Suscipit eaque veniam, consectetur recusandae aliquam ut?

152 |
153 |
154 | 155 |
4
156 | 157 |

Step 4

158 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eaque veniam, consectetur recusandae aliquam ut?

159 |
160 |
161 |
162 |
163 | 164 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/js/lightbox.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Lightbox v2.11.3 3 | * by Lokesh Dhakar 4 | * 5 | * More info: 6 | * http://lokeshdhakar.com/projects/lightbox2/ 7 | * 8 | * Copyright Lokesh Dhakar 9 | * Released under the MIT license 10 | * https://github.com/lokesh/lightbox2/blob/master/LICENSE 11 | * 12 | * @preserve 13 | */ 14 | !function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):"object"==typeof exports?module.exports=b(require("jquery")):a.lightbox=b(a.jQuery)}(this,function(a){function b(b){this.album=[],this.currentImageIndex=void 0,this.init(),this.options=a.extend({},this.constructor.defaults),this.option(b)}return b.defaults={albumLabel:"Image %1 of %2",alwaysShowNavOnTouchDevices:!1,fadeDuration:600,fitImagesInViewport:!0,imageFadeDuration:600,positionFromTop:50,resizeDuration:700,showImageNumberLabel:!0,wrapAround:!1,disableScrolling:!1,sanitizeTitle:!1},b.prototype.option=function(b){a.extend(this.options,b)},b.prototype.imageCountLabel=function(a,b){return this.options.albumLabel.replace(/%1/g,a).replace(/%2/g,b)},b.prototype.init=function(){var b=this;a(document).ready(function(){b.enable(),b.build()})},b.prototype.enable=function(){var b=this;a("body").on("click","a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]",function(c){return b.start(a(c.currentTarget)),!1})},b.prototype.build=function(){if(!(a("#lightbox").length>0)){var b=this;a('
').appendTo(a("body")),this.$lightbox=a("#lightbox"),this.$overlay=a("#lightboxOverlay"),this.$outerContainer=this.$lightbox.find(".lb-outerContainer"),this.$container=this.$lightbox.find(".lb-container"),this.$image=this.$lightbox.find(".lb-image"),this.$nav=this.$lightbox.find(".lb-nav"),this.containerPadding={top:parseInt(this.$container.css("padding-top"),10),right:parseInt(this.$container.css("padding-right"),10),bottom:parseInt(this.$container.css("padding-bottom"),10),left:parseInt(this.$container.css("padding-left"),10)},this.imageBorderWidth={top:parseInt(this.$image.css("border-top-width"),10),right:parseInt(this.$image.css("border-right-width"),10),bottom:parseInt(this.$image.css("border-bottom-width"),10),left:parseInt(this.$image.css("border-left-width"),10)},this.$overlay.hide().on("click",function(){return b.end(),!1}),this.$lightbox.hide().on("click",function(c){"lightbox"===a(c.target).attr("id")&&b.end()}),this.$outerContainer.on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$lightbox.find(".lb-prev").on("click",function(){return 0===b.currentImageIndex?b.changeImage(b.album.length-1):b.changeImage(b.currentImageIndex-1),!1}),this.$lightbox.find(".lb-next").on("click",function(){return b.currentImageIndex===b.album.length-1?b.changeImage(0):b.changeImage(b.currentImageIndex+1),!1}),this.$nav.on("mousedown",function(a){3===a.which&&(b.$nav.css("pointer-events","none"),b.$lightbox.one("contextmenu",function(){setTimeout(function(){this.$nav.css("pointer-events","auto")}.bind(b),0)}))}),this.$lightbox.find(".lb-loader, .lb-close").on("click",function(){return b.end(),!1})}},b.prototype.start=function(b){function c(a){d.album.push({alt:a.attr("data-alt"),link:a.attr("href"),title:a.attr("data-title")||a.attr("title")})}var d=this,e=a(window);e.on("resize",a.proxy(this.sizeOverlay,this)),this.sizeOverlay(),this.album=[];var f,g=0,h=b.attr("data-lightbox");if(h){f=a(b.prop("tagName")+'[data-lightbox="'+h+'"]');for(var i=0;ik||g.height>j)&&(g.width/k>g.height/j?(i=k,h=parseInt(g.height/(g.width/i),10),f.width(i),f.height(h)):(h=j,i=parseInt(g.width/(g.height/h),10),f.width(i),f.height(h))),c.sizeContainer(f.width(),f.height())},g.src=this.album[b].link,this.currentImageIndex=b},b.prototype.sizeOverlay=function(){var b=this;setTimeout(function(){b.$overlay.width(a(document).width()).height(a(document).height())},0)},b.prototype.sizeContainer=function(a,b){function c(){d.$lightbox.find(".lb-dataContainer").width(g),d.$lightbox.find(".lb-prevLink").height(h),d.$lightbox.find(".lb-nextLink").height(h),d.$overlay.focus(),d.showImage()}var d=this,e=this.$outerContainer.outerWidth(),f=this.$outerContainer.outerHeight(),g=a+this.containerPadding.left+this.containerPadding.right+this.imageBorderWidth.left+this.imageBorderWidth.right,h=b+this.containerPadding.top+this.containerPadding.bottom+this.imageBorderWidth.top+this.imageBorderWidth.bottom;e!==g||f!==h?this.$outerContainer.animate({width:g,height:h},this.options.resizeDuration,"swing",function(){c()}):c()},b.prototype.showImage=function(){this.$lightbox.find(".lb-loader").stop(!0).hide(),this.$lightbox.find(".lb-image").fadeIn(this.options.imageFadeDuration),this.updateNav(),this.updateDetails(),this.preloadNeighboringImages(),this.enableKeyboardNav()},b.prototype.updateNav=function(){var a=!1;try{document.createEvent("TouchEvent"),a=!!this.options.alwaysShowNavOnTouchDevices}catch(a){}this.$lightbox.find(".lb-nav").show(),this.album.length>1&&(this.options.wrapAround?(a&&this.$lightbox.find(".lb-prev, .lb-next").css("opacity","1"),this.$lightbox.find(".lb-prev, .lb-next").show()):(this.currentImageIndex>0&&(this.$lightbox.find(".lb-prev").show(),a&&this.$lightbox.find(".lb-prev").css("opacity","1")),this.currentImageIndex1&&this.options.showImageNumberLabel){var c=this.imageCountLabel(this.currentImageIndex+1,this.album.length);this.$lightbox.find(".lb-number").text(c).fadeIn("fast")}else this.$lightbox.find(".lb-number").hide();this.$outerContainer.removeClass("animating"),this.$lightbox.find(".lb-dataContainer").fadeIn(this.options.resizeDuration,function(){return a.sizeOverlay()})},b.prototype.preloadNeighboringImages=function(){if(this.album.length>this.currentImageIndex+1){(new Image).src=this.album[this.currentImageIndex+1].link}if(this.currentImageIndex>0){(new Image).src=this.album[this.currentImageIndex-1].link}},b.prototype.enableKeyboardNav=function(){this.$lightbox.on("keyup.keyboard",a.proxy(this.keyboardAction,this)),this.$overlay.on("keyup.keyboard",a.proxy(this.keyboardAction,this))},b.prototype.disableKeyboardNav=function(){this.$lightbox.off(".keyboard"),this.$overlay.off(".keyboard")},b.prototype.keyboardAction=function(a){var b=a.keyCode;27===b?(a.stopPropagation(),this.end()):37===b?0!==this.currentImageIndex?this.changeImage(this.currentImageIndex-1):this.options.wrapAround&&this.album.length>1&&this.changeImage(this.album.length-1):39===b&&(this.currentImageIndex!==this.album.length-1?this.changeImage(this.currentImageIndex+1):this.options.wrapAround&&this.album.length>1&&this.changeImage(0))},b.prototype.end=function(){this.disableKeyboardNav(),a(window).off("resize",this.sizeOverlay),this.$lightbox.fadeOut(this.options.fadeDuration),this.$overlay.fadeOut(this.options.fadeDuration),this.options.disableScrolling&&a("body").removeClass("lb-disable-scrolling")},new b}); 15 | //# sourceMappingURL=lightbox.min.map -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/js/type-writer.js: -------------------------------------------------------------------------------- 1 | var TxtType = function (el, toRotate, period) { 2 | this.toRotate = toRotate; 3 | this.el = el; 4 | this.loopNum = 0; 5 | this.period = parseInt(period, 10) || 2000; 6 | this.txt = ''; 7 | this.tick(); 8 | this.isDeleting = false; 9 | }; 10 | 11 | TxtType.prototype.tick = function () { 12 | var i = this.loopNum % this.toRotate.length; 13 | var fullTxt = this.toRotate[i]; 14 | 15 | if (this.isDeleting) { 16 | this.txt = fullTxt.substring(0, this.txt.length - 1); 17 | } else { 18 | this.txt = fullTxt.substring(0, this.txt.length + 1); 19 | } 20 | 21 | this.el.innerHTML = '' + this.txt + ''; 22 | 23 | var that = this; 24 | var delta = 200 - Math.random() * 100; 25 | 26 | if (this.isDeleting) { delta /= 2; } 27 | 28 | if (!this.isDeleting && this.txt === fullTxt) { 29 | delta = this.period; 30 | this.isDeleting = true; 31 | } else if (this.isDeleting && this.txt === '') { 32 | this.isDeleting = false; 33 | this.loopNum++; 34 | delta = 500; 35 | } 36 | 37 | setTimeout(function () { 38 | that.tick(); 39 | }, delta); 40 | }; 41 | 42 | window.onload = function () { 43 | var elements = document.getElementsByClassName('typewrite'); 44 | for (var i = 0; i < elements.length; i++) { 45 | var toRotate = elements[i].getAttribute('data-type'); 46 | var period = elements[i].getAttribute('data-period'); 47 | if (toRotate) { 48 | new TxtType(elements[i], JSON.parse(toRotate), period); 49 | } 50 | } 51 | // INJECT CSS 52 | var css = document.createElement("style"); 53 | css.type = "text/css"; 54 | css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}"; 55 | document.body.appendChild(css); 56 | }; -------------------------------------------------------------------------------- /04 freelancerSite_Sass/public/projects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | Document 16 | 17 | 18 | 19 | 20 |
21 |
22 | 31 |
32 |
33 | 34 |
35 |
36 |

My Projects 37 |

38 |
39 |
Lorem ipsum dolor sit amet.
40 | 41 |
42 |
43 |
44 | 45 | 46 | 47 |
48 |
49 |
50 |

Web Development

51 |

52 | Lorem, ipsum dolor. 53 |

54 |
55 |
56 |
57 |
58 |
59 | 60 | 61 | 62 |
63 |
64 |
65 |

Web Development

66 |

67 | Lorem, ipsum dolor. 68 |

69 |
70 |
71 |
72 |
73 |
74 | 75 | 76 | 77 |
78 |
79 |
80 |

Web Development

81 |

82 | Lorem, ipsum dolor. 83 |

84 |
85 |
86 |
87 |
88 |
89 | 90 | 91 | 92 |
93 |
94 |
95 |

Web Development

96 |

97 | Lorem, ipsum dolor. 98 |

99 |
100 |
101 |
102 |
103 |
104 | 105 | 106 | 107 |
108 |
109 |
110 |

Web Development

111 |

112 | Lorem, ipsum dolor. 113 |

114 |
115 |
116 |
117 |
118 |
119 | 120 | 121 | 122 |
123 |
124 |
125 |

Web Development

126 |

127 | Lorem, ipsum dolor. 128 |

129 |
130 |
131 |
132 |
133 |
134 | 135 | 136 | 137 |
138 |
139 |
140 |

Web Development

141 |

142 | Lorem, ipsum dolor. 143 |

144 |
145 |
146 |
147 |
148 |
149 | 150 | 151 | 152 |
153 |
154 |
155 |

Web Development

156 |

157 | Lorem, ipsum dolor. 158 |

159 |
160 |
161 |
162 |
163 |
164 | 165 | 166 | 167 |
168 |
169 |
170 |

Web Development

171 |

172 | Lorem, ipsum dolor. 173 |

174 |
175 |
176 |
177 |
178 |
179 |
180 | 181 | 182 | 183 |
184 |
185 |

Copyright © 2025. All Rights Reserved.

186 | 193 |
194 |
195 | 196 | 198 | 199 | 200 | 201 | -------------------------------------------------------------------------------- /04 freelancerSite_Sass/scss/_about.scss: -------------------------------------------------------------------------------- 1 | #about { 2 | &-a { 3 | .info { 4 | display: grid; 5 | grid-template-columns: 1fr 2fr; 6 | gap: 1.2rem; 7 | 8 | &__image { 9 | border: 1px solid $light-color; 10 | padding: .5rem; 11 | border-radius: 3px; 12 | } 13 | 14 | &__bio { 15 | border: 1px solid $light-color; 16 | padding: .8rem; 17 | } 18 | } 19 | } 20 | 21 | &-b { 22 | color: #fff; 23 | .progress { 24 | height: 20px; 25 | background-color: $medium-color; 26 | border-radius: 5px; 27 | margin-bottom: .8rem; 28 | 29 | div { 30 | height: 100%; 31 | text-align: center; 32 | background-color: $primary-color; 33 | } 34 | } 35 | } 36 | 37 | &-c { 38 | .about-logos { 39 | display: grid; 40 | grid-template-columns: repeat(4,1fr); 41 | gap: 2rem; 42 | align-items: center; 43 | 44 | img { 45 | width: 70%; 46 | } 47 | } 48 | } 49 | 50 | &-d { 51 | .references { 52 | ul { 53 | list-style: none; 54 | margin-top: 1rem; 55 | display: flex; 56 | align-items: center; 57 | } 58 | p { 59 | border: 1px solid $medium-color; 60 | border-radius: 5px; 61 | padding: 5rem; 62 | } 63 | img { 64 | width: 50px; 65 | height: 50px; 66 | border-radius: 50%; 67 | padding-right: 0.5rem; 68 | } 69 | } 70 | } 71 | } -------------------------------------------------------------------------------- /04 freelancerSite_Sass/scss/_base.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #fff; 9 | font-family: 'Prompt', sans-serif; 10 | line-height: 1.5; 11 | } 12 | 13 | a { 14 | text-decoration: none; 15 | color: $dark-color; 16 | } 17 | 18 | ul { 19 | list-style: none; 20 | } 21 | 22 | img { 23 | width: 100%; 24 | } 25 | 26 | -------------------------------------------------------------------------------- /04 freelancerSite_Sass/scss/_contact.scss: -------------------------------------------------------------------------------- 1 | #contact { 2 | &-a { 3 | .form-fields { 4 | display: grid; 5 | grid-template-areas: 6 | 'name email' 7 | 'subject phone' 8 | 'message message' 9 | 'button button'; 10 | gap: 1rem; 11 | margin-bottom: 1rem; 12 | 13 | .name { 14 | grid-area: name; 15 | } 16 | .email { 17 | grid-area: email; 18 | } 19 | .phone { 20 | grid-area: phone; 21 | } 22 | .subject { 23 | grid-area: subject; 24 | } 25 | .message { 26 | grid-area: message; 27 | height: 180px; 28 | } 29 | .btn-dark { 30 | grid-area: button; 31 | } 32 | .input { 33 | padding: .5rem 1rem; 34 | } 35 | } 36 | } 37 | 38 | &-b { 39 | .contact-info { 40 | display: grid; 41 | grid-template-columns: repeat(3,1fr); 42 | text-align: center; 43 | color: #000; 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /04 freelancerSite_Sass/scss/_footer.scss: -------------------------------------------------------------------------------- 1 | #main-footer { 2 | background-color: $dark-color; 3 | color: #fff; 4 | height: 5rem; 5 | 6 | .footer-content { 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | height: 5rem; 11 | 12 | .social .fab { 13 | margin-right: 1rem; 14 | border: 2px solid #fff; 15 | border-radius: 50%; 16 | text-align: center; 17 | padding: 0.6rem; 18 | transition: all .6s; 19 | 20 | &:hover { 21 | background-color: $primary-color; 22 | cursor: pointer; 23 | } 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /04 freelancerSite_Sass/scss/_header.scss: -------------------------------------------------------------------------------- 1 | // main-nav 2 | .main-nav { 3 | display: flex; 4 | justify-content: space-between; 5 | padding-top: 1rem; 6 | 7 | &__logo { 8 | width: 70px; 9 | height: 70px; 10 | } 11 | &__items { 12 | display: flex; 13 | 14 | li { 15 | padding: 1rem 1.5rem; 16 | 17 | a { 18 | text-decoration: none; 19 | color: #fff; 20 | text-transform: uppercase; 21 | border-bottom: 3px transparent solid; 22 | padding-bottom: .5rem; 23 | transition: border-color .5s; 24 | 25 | &:hover { 26 | border-color: $medium-color; 27 | } 28 | &.active { 29 | border-color: $primary-color; 30 | } 31 | } 32 | } 33 | } 34 | } 35 | 36 | #header { 37 | &__home { 38 | background: $bg-image no-repeat center right/cover; 39 | height: 100vh; 40 | color: #fff; 41 | 42 | .header-content { 43 | text-align: center; 44 | padding: 30%; 45 | } 46 | 47 | h1 { 48 | font-size: 3.2rem; 49 | line-height: 1.2; 50 | } 51 | 52 | .typewrite { 53 | display: block; 54 | } 55 | } 56 | 57 | &__inner { 58 | background: $bg-image no-repeat 40% 20%/cover; 59 | height: 5.5rem; 60 | border-bottom:3px solid $primary-color ; 61 | } 62 | } -------------------------------------------------------------------------------- /04 freelancerSite_Sass/scss/_home.scss: -------------------------------------------------------------------------------- 1 | #home { 2 | // home section a 3 | &__a { 4 | .skills { 5 | display: grid; 6 | grid-template-columns: repeat(4,1fr); 7 | gap: 1rem; 8 | margin-bottom: 2.5rem; 9 | 10 | i { 11 | color: $primary-color; 12 | padding-bottom: .5rem; 13 | } 14 | } 15 | } 16 | // home section b 17 | &__b { 18 | .profile { 19 | display: grid; 20 | grid-template-columns: repeat(4,1fr); 21 | 22 | li { 23 | &.title { 24 | font-size: 1.5rem; 25 | } 26 | &.number { 27 | font-size: 2rem; 28 | font-weight: bold; 29 | } 30 | } 31 | div { 32 | padding: 3rem 0; 33 | 34 | &:nth-child(odd) { 35 | background-color: $light-color; 36 | } 37 | &:nth-child(even) { 38 | background-color: $medium-color; 39 | } 40 | } 41 | } 42 | } 43 | 44 | // home section c 45 | &__c { 46 | .process { 47 | display: grid; 48 | grid-template-columns: repeat(4,1fr); 49 | gap: 1.5rem; 50 | text-align: center; 51 | 52 | &__step { 53 | position: absolute; 54 | top: 0; 55 | right: 0; 56 | font-size: 25px; 57 | background-color: $primary-color; 58 | border-radius: 50%; 59 | line-height: 15px; 60 | padding: 1rem; 61 | transition: all 1s; 62 | } 63 | 64 | &__icon { 65 | position: relative; 66 | width: 125px; 67 | height: 125px; 68 | border-radius: 50%; 69 | background-color: $dark-color; 70 | color: #fff; 71 | padding: 2rem; 72 | text-align: center; 73 | 74 | &:hover { 75 | background-color: $primary-color; 76 | 77 | .process__step { 78 | background-color: $dark-color; 79 | } 80 | } 81 | } 82 | } 83 | } 84 | } -------------------------------------------------------------------------------- /04 freelancerSite_Sass/scss/_mobile.scss: -------------------------------------------------------------------------------- 1 | // tablets and smaller 2 | @media(max-width: 768px) { 3 | #header { 4 | &__home { 5 | height: 30rem; 6 | 7 | .header-content { 8 | padding-top: 7rem; 9 | 10 | h1 { 11 | font-size: 2.6rem; 12 | } 13 | } 14 | } 15 | } 16 | 17 | #home__a .skills, 18 | #home__b .profile, 19 | #home__c .process, 20 | .items { 21 | grid-template-columns:repeat(2,1fr); 22 | 23 | } 24 | } 25 | 26 | // mobile 27 | @media(max-width: 576px) { 28 | 29 | #home { 30 | &__a { 31 | .skills div { 32 | border-bottom: 1px $light-color solid; 33 | padding-bottom:1rem; 34 | &:last-child { 35 | border: none; 36 | padding-bottom: 0; 37 | } 38 | } 39 | } 40 | } 41 | 42 | .lead { 43 | font-size: 1rem; 44 | margin-bottom: 1.2rem; 45 | word-spacing: 1px; 46 | } 47 | 48 | #header { 49 | &__home { 50 | height: 10rem; 51 | border-bottom: 2px solid $primary-color; 52 | background-position: 20% 30%; 53 | 54 | .header-content { 55 | display: none; 56 | } 57 | } 58 | &__inner { 59 | height: 10rem; 60 | } 61 | } 62 | 63 | .main-nav { 64 | flex-direction: column; 65 | align-items: center; 66 | 67 | li { 68 | padding: 1rem; 69 | } 70 | } 71 | 72 | #home__a .skills, 73 | #home__b .profile, 74 | #home__c .process, 75 | .items, 76 | #contact-b .contact-info { 77 | grid-template-columns:1fr; 78 | } 79 | 80 | 81 | #main-footer { 82 | height: 7rem; 83 | 84 | .footer-content { 85 | flex-direction: column; 86 | padding: 1rem; 87 | height: 5rem; 88 | 89 | .social { 90 | padding-top: 1rem; 91 | } 92 | } 93 | } 94 | 95 | #about { 96 | &-a { 97 | .info { 98 | grid-template-columns: 1fr; 99 | } 100 | } 101 | 102 | &-c { 103 | display: none; 104 | } 105 | } 106 | 107 | #contact { 108 | &-a { 109 | .form-fields { 110 | grid-template-areas: 111 | 'name' 112 | 'email' 113 | 'subject' 114 | 'phone' 115 | 'message' 116 | 'button'; 117 | } 118 | } 119 | 120 | &-b { 121 | div { 122 | margin-bottom: 1rem; 123 | padding-bottom: 1rem; 124 | border-bottom: 1px dashed #333; 125 | 126 | &:last-child { 127 | border: none; 128 | padding-bottom: 0; 129 | margin-bottom: 0; 130 | } 131 | } 132 | } 133 | } 134 | } 135 | 136 | -------------------------------------------------------------------------------- /04 freelancerSite_Sass/scss/_projects.scss: -------------------------------------------------------------------------------- 1 | .items { 2 | display: grid; 3 | grid-template-columns: repeat(3,1fr); 4 | gap: 1rem; 5 | box-shadow: rgba(149, 154, 145, .2) 0px 8px 24px; 6 | 7 | .item { 8 | position: relative; 9 | background-color:$light-color; 10 | overflow:hidden; 11 | 12 | &::after { 13 | content:''; 14 | position: absolute; 15 | display: block; 16 | background-color: $primary-color; 17 | opacity: .6; 18 | top: 0; 19 | left: 0; 20 | width: 100%; 21 | height: 100%; 22 | transform: translateX(-120%) translateY(-120%) rotate(45deg); 23 | transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); 24 | } 25 | &:hover::after { 26 | transform: scale(2) translateX(-50%)translateY(-50%) rotate(45deg); 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /04 freelancerSite_Sass/scss/_utilities.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: $max-width; 3 | padding: 0 1.4rem; 4 | margin: auto; 5 | } 6 | 7 | //buttons 8 | 9 | %btn-shared { 10 | display: inline-block; 11 | padding: .7rem 2rem; 12 | transition: all .5s; 13 | border: none; 14 | cursor: pointer; 15 | } 16 | 17 | .btn { 18 | &-primary { 19 | @extend %btn-shared; 20 | color: #333; 21 | background-color: $primary-color; 22 | } 23 | &-light { 24 | @extend %btn-shared; 25 | color: #333; 26 | background-color: $light-color; 27 | } 28 | &-dark { 29 | @extend %btn-shared; 30 | color: #fff; 31 | background-color: $dark-color; 32 | } 33 | } 34 | 35 | button[class^='btn-']:hover, 36 | a[class^='btn-']:hover, 37 | input[class^='btn-']:hover { 38 | background-color: $primary-color; 39 | } 40 | 41 | // background 42 | 43 | .bg { 44 | &-dark { 45 | background-color: $dark-color; 46 | } 47 | &-primary { 48 | background-color: $primary-color; 49 | } 50 | &-light { 51 | background-color: $light-color; 52 | } 53 | } 54 | 55 | // padding 56 | 57 | .py { 58 | &-1 { 59 | padding: 1rem 0; 60 | } 61 | &-2 { 62 | padding: 2rem 0; 63 | } 64 | &-3 { 65 | padding: 3rem 0; 66 | } 67 | &-4 { 68 | padding: 4rem 0; 69 | } 70 | } 71 | 72 | // margin 73 | 74 | .my { 75 | &-1 { 76 | margin: 1rem 0; 77 | } 78 | &-2 { 79 | margin: 2rem 0; 80 | } 81 | &-3 { 82 | margin: 3rem 0; 83 | } 84 | &-4 { 85 | margin: 4rem 0; 86 | } 87 | } 88 | 89 | .text-center { 90 | text-align: center; 91 | } 92 | 93 | .section-title { 94 | font-size: 2rem; 95 | padding-bottom: 1rem; 96 | text-transform: uppercase; 97 | text-align: center; 98 | } 99 | 100 | .border-bottom { 101 | height: 3px; 102 | width: 3rem; 103 | background-color: $primary-color; 104 | margin:0 auto 1rem auto; 105 | } 106 | 107 | .lead { 108 | font-size: 1.4rem; 109 | margin-bottom: 2rem; 110 | word-spacing: 2px; 111 | } -------------------------------------------------------------------------------- /04 freelancerSite_Sass/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $max-width:1200px; 2 | $primary-color:#ef6d6d; 3 | $light-color:#f4f4f4; 4 | $medium-color:#ccc; 5 | $dark-color:#333; 6 | $bg-image:url('../img/bg.jpeg'); -------------------------------------------------------------------------------- /04 freelancerSite_Sass/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import 'utilities'; 3 | @import 'base'; 4 | @import 'header'; 5 | @import 'home'; 6 | @import 'about'; 7 | @import 'footer'; 8 | @import 'projects'; 9 | @import 'contact'; 10 | @import 'mobile'; 11 | 12 | 13 | -------------------------------------------------------------------------------- /05 bootstrapSite_one/blogs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Awesome Blog 11 | 12 | 13 | 14 | 15 | 46 | 47 |
48 |
49 |
50 |
51 | Category 1 52 | Category 2 53 | Category 3 54 | Category 4 55 | 56 |
57 |
58 |
59 | 66 |
67 |
68 |
69 | 70 |
71 |
72 |
Card Title
73 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas tempora, veritatis impedit possimus exercitationem aliquid ullam a commodi sequi. Molestiae?

74 |
75 |
76 |
77 |
78 |
79 |
80 | 81 |
82 |
83 |
Card Title
84 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas tempora, veritatis impedit possimus exercitationem aliquid ullam a commodi sequi. Molestiae?

85 |
86 |
87 |
88 |
89 |
90 |
91 | 92 |
93 |
94 |
Card Title
95 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas tempora, veritatis impedit possimus exercitationem aliquid ullam a commodi sequi. Molestiae?

96 |
97 |
98 |
99 |
100 |
101 |
102 | 103 |
104 |
105 |
Card Title
106 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas tempora, veritatis impedit possimus exercitationem aliquid ullam a commodi sequi. Molestiae?

107 |
108 |
109 |
110 | 123 |
124 | 125 |
126 |
127 | 128 | 129 |
130 |
131 | All Right Reserved. @2025 132 |
133 |
134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /05 bootstrapSite_one/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Awesome Blog 11 | 12 | 13 | 14 | 15 | 16 | 17 | 48 | 49 | 50 |
51 |
52 |

Contact Us

53 |
54 | 55 |
56 |
57 |
58 |
59 | Please fill out the form. 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 |
93 |
94 |
95 | 96 | 97 | 98 |
99 |
100 | All Right Reserved. @2025 101 |
102 |
103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /05 bootstrapSite_one/img/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/05 bootstrapSite_one/img/1.jpeg -------------------------------------------------------------------------------- /05 bootstrapSite_one/img/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/05 bootstrapSite_one/img/2.jpeg -------------------------------------------------------------------------------- /05 bootstrapSite_one/img/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/05 bootstrapSite_one/img/3.jpeg -------------------------------------------------------------------------------- /05 bootstrapSite_one/img/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/05 bootstrapSite_one/img/4.jpeg -------------------------------------------------------------------------------- /05 bootstrapSite_one/img/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/05 bootstrapSite_one/img/5.jpeg -------------------------------------------------------------------------------- /05 bootstrapSite_one/img/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/05 bootstrapSite_one/img/6.jpeg -------------------------------------------------------------------------------- /05 bootstrapSite_one/img/7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/05 bootstrapSite_one/img/7.jpeg -------------------------------------------------------------------------------- /05 bootstrapSite_one/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/05 bootstrapSite_one/img/bg.png -------------------------------------------------------------------------------- /05 bootstrapSite_one/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Awesome Blog 11 | 12 | 13 | 14 | 15 | 46 | 47 | 48 |
49 |
50 |

Awesome Blog

51 |
52 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis eligendi, perspiciatis harum unde tempora veniam reiciendis voluptates tempore nesciunt ipsam?

53 |
54 | Button 55 | Button 56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 | 66 | 67 |
68 |
69 |
70 |

Lorem Ipsum

71 |
72 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis eligendi, perspiciatis harum unde tempora veniam reiciendis voluptates tempore nesciunt ipsam?

73 |
74 | Button 75 | Button 76 |
77 |
78 |
79 |
80 | 81 |
82 |
83 |
84 |
85 | 86 |
87 |
Lorem, ipsum.
88 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, ad.

89 |
90 |
91 |
92 |
93 |
94 | 95 |
96 |
Lorem, ipsum.
97 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, ad.

98 |
99 |
100 |
101 |
102 |
103 | 104 |
105 |
Lorem, ipsum.
106 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, ad.

107 |
108 |
109 |
110 |
111 |
112 | 113 |
114 |
Lorem, ipsum.
115 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, ad.

116 |
117 |
118 |
119 |
120 |
121 | 122 |
123 |
Lorem, ipsum.
124 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, ad.

125 |
126 |
127 |
128 |
129 |
130 | 131 |
132 |
Lorem, ipsum.
133 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, ad.

134 |
135 |
136 |
137 |
138 |
139 | 140 |
141 |
Lorem, ipsum.
142 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, ad.

143 |
144 |
145 |
146 |
147 |
148 | 149 |
150 |
Lorem, ipsum.
151 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, ad.

152 |
153 |
154 |
155 |
156 |
157 | 158 |
159 |
Lorem, ipsum.
160 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, ad.

161 |
162 |
163 |
164 |
165 |
166 |
167 | 168 | 169 |
170 |
171 | All Right Reserved. @2025 172 |
173 |
174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | -------------------------------------------------------------------------------- /05 bootstrapSite_one/style.css: -------------------------------------------------------------------------------- 1 | 2 | .navbar { 3 | background-color: #085e7d!important; 4 | } 5 | 6 | .bg-dark { 7 | background-color: #085e7d!important; 8 | } 9 | 10 | .card-img-top { 11 | width: 100%; 12 | height: 30vh; 13 | object-fit: cover; 14 | } 15 | 16 | #map { 17 | height: 450px; 18 | } 19 | 20 | @media (min-width:768px) { 21 | .card-img-top { 22 | height: 32vh; 23 | } 24 | #map { 25 | height: 100%; 26 | } 27 | } 28 | 29 | -------------------------------------------------------------------------------- /06 bootstrapProductCard/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/06 bootstrapProductCard/1.jpeg -------------------------------------------------------------------------------- /06 bootstrapProductCard/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/06 bootstrapProductCard/2.jpeg -------------------------------------------------------------------------------- /06 bootstrapProductCard/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/06 bootstrapProductCard/3.jpeg -------------------------------------------------------------------------------- /06 bootstrapProductCard/style.css: -------------------------------------------------------------------------------- 1 | body {font-family: 'Open Sans', sans-serif;} 2 | 3 | 4 | /* product-cards */ 5 | @media(max-width: 768px) { 6 | .product-card .img-wrap { 7 | border-bottom: 1px solid #dee2e6; 8 | } 9 | } 10 | 11 | .product-card .img-wrap { 12 | height: 250px; 13 | padding: .5rem; 14 | display: block; 15 | text-align: center; 16 | } 17 | 18 | .product-card img { 19 | height: 100%; 20 | width: auto; 21 | max-width: 100%; 22 | object-fit: cover; 23 | } 24 | 25 | .product-card .checked { 26 | color: orange; 27 | } 28 | 29 | .product-card .title { 30 | text-decoration: none; 31 | color: #212529; 32 | } 33 | 34 | .product-card .price { 35 | color: orange; 36 | font-size: 22px; 37 | } 38 | 39 | .product-card .rating { 40 | font-size: 13px; 41 | } -------------------------------------------------------------------------------- /07 bootstrapComments/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/07 bootstrapComments/1.jpeg -------------------------------------------------------------------------------- /07 bootstrapComments/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/07 bootstrapComments/2.jpeg -------------------------------------------------------------------------------- /07 bootstrapComments/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/07 bootstrapComments/3.jpeg -------------------------------------------------------------------------------- /07 bootstrapComments/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Open Sans', sans-serif; 3 | } 4 | 5 | .content { 6 | display: inline-flex; 7 | align-items: center; 8 | vertical-align: middle; 9 | } 10 | 11 | .content img { 12 | width: 40px; 13 | height: 40px; 14 | margin-right: .6rem; 15 | } 16 | 17 | .content .fa-star { 18 | font-size: 12px; 19 | } 20 | 21 | .checked { 22 | color: orange; 23 | } 24 | 25 | .btn-light:hover { 26 | border-color: #c1c9d0; 27 | color: #0d6efd; 28 | } 29 | 30 | .form-control, .form-select { 31 | background-color: #f9f9f9; 32 | } -------------------------------------------------------------------------------- /08 bootstrapFilter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | Filters 22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 | Brand 34 | 35 |
36 |
37 |
38 | 47 |
48 |
49 |
50 |
51 |
52 | 53 | Price 54 | 55 |
56 |
57 |
58 |
59 |
60 | 61 | 62 |
63 |
64 | 65 | 66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 | 74 | Screen Size 75 | 76 |
77 |
78 |
79 | 83 | 87 | 91 | 95 |
96 |
97 |
98 |
99 |
100 | 101 | Ram 102 | 103 |
104 |
105 |
106 | 110 | 114 | 118 | 122 |
123 |
124 |
125 |
126 |
127 | 128 | Praduct Model 129 | 130 |
131 |
132 |
133 | 137 | 141 | 145 | 146 |
147 |
148 | 149 |
150 |
151 |
152 |
153 |
154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 165 | 166 | 167 | -------------------------------------------------------------------------------- /08 bootstrapFilter/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Open Sans', sans-serif; 3 | } 4 | 5 | .filters .filter-box { 6 | border-bottom: 1px solid #dee2e6; 7 | } 8 | 9 | .filters .filter-box .card-header { 10 | border-bottom: 0; 11 | border-radius: 0; 12 | } 13 | 14 | .filters .menu { 15 | list-style: none; 16 | margin-left: 0; 17 | padding-left: 0; 18 | } 19 | 20 | .filters .menu li { 21 | margin-bottom: 3px; 22 | } 23 | 24 | .filters .menu li>a { 25 | color: #51585e; 26 | text-decoration: none; 27 | } 28 | 29 | .filters .scroll { 30 | max-height: 200px; 31 | overflow: auto; 32 | } 33 | 34 | .filters .card-header a { 35 | text-decoration: none; 36 | color: #000; 37 | } 38 | 39 | .filters .fa-chevron-down { 40 | float: right; 41 | font-size: 14px; 42 | color: #9da1a7; 43 | margin-top:5px; 44 | } 45 | 46 | .filters .checkbox-btn { 47 | position: relative; 48 | } 49 | 50 | .filters .checkbox-btn input { 51 | opacity: 0; 52 | position: absolute; 53 | 54 | } 55 | 56 | .filters .checkbox-btn input:checked~.btn { 57 | background-color: #0d6efd; 58 | color: #fff; 59 | } 60 | 61 | .filters .btn-light { 62 | background-color: #fff; 63 | border-color: #dee2e6; 64 | color: #212529; 65 | } -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bs-starter", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "scss": "node-sass --watch scss/ -o css/ --output-style compressed" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "bootstrap": "^5.1.3", 14 | "fslightbox": "^3.3.1", 15 | "node-sass": "^8.0.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/1-big.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/1-big.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/1.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/2-big.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/2-big.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/2.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/3-big.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/3-big.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/3.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/4-big.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/4-big.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/4.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/5-big.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/5-big.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/5.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/6.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/7.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/8.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/slider-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/slider-1.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/slider-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/slider-2.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/public/img/slider-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/09 bootstrapShoppingSite/public/img/slider-3.jpeg -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/scss/_bs-overrides.scss: -------------------------------------------------------------------------------- 1 | $primary:#6610f2; -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/scss/_styles.scss: -------------------------------------------------------------------------------- 1 | .top-bar { 2 | padding-top: 1rem; 3 | padding-bottom: 1rem; 4 | } 5 | 6 | .btn-light { 7 | background-color: #fff; 8 | border-color: #dee2e6; 9 | color: #212529; 10 | } 11 | 12 | .btn-light:hover { 13 | border-color: #c1c9d0; 14 | color: $primary; 15 | } 16 | 17 | .btn-light:hover i { 18 | color: $primary; 19 | } 20 | 21 | .btn-light i { 22 | color: #9da1a7; 23 | } 24 | 25 | .slider { 26 | &__nav { 27 | max-height: 250px; 28 | } 29 | } 30 | 31 | @media(min-width: 1200px) { 32 | .slider { 33 | &__nav { 34 | max-height: 300px; 35 | } 36 | } 37 | } 38 | 39 | @media(min-width: 1400px) { 40 | .slider { 41 | &__nav { 42 | max-height: 350px; 43 | } 44 | } 45 | } 46 | 47 | // cards 48 | .card .img-wrap { 49 | height: 240px; 50 | } 51 | 52 | .img-wrap { 53 | position: relative; 54 | display: block; 55 | padding: 1rem; 56 | text-align: center; 57 | } 58 | 59 | .card .img-wrap img { 60 | height: 100%; 61 | width: auto; 62 | max-width: 100%; 63 | object-fit: cover; 64 | } 65 | 66 | .card .badge { 67 | position: absolute; 68 | top:10px; 69 | right: 10px; 70 | } 71 | 72 | .card .title { 73 | display: block; 74 | text-decoration: none; 75 | color: #51585e; 76 | } 77 | 78 | .card .info-wrap { 79 | padding: 1rem 1.2rem; 80 | } 81 | 82 | .btn-icon { 83 | width: 2.5rem; 84 | padding-left: 0; 85 | padding-right: 0; 86 | } 87 | 88 | // product details 89 | .breadcrumb a { 90 | color: #fff; 91 | opacity: .75; 92 | } 93 | 94 | .breadcrumb .breadcrumb-item { 95 | color: #fff; 96 | } 97 | 98 | //galery 99 | 100 | .gallery-wrap .img-big-wrap { 101 | display: block; 102 | width: 100%; 103 | height: 400px; 104 | margin-bottom: 1rem; 105 | text-align: center; 106 | background-color: #fff; 107 | } 108 | 109 | .gallery-wrap .img-big-wrap a { 110 | display: block; 111 | height: 100%; 112 | text-align: center; 113 | } 114 | .gallery-wrap .thumbs-wrap { 115 | text-align: center; 116 | } 117 | 118 | .gallery-wrap .thumbs-wrap a { 119 | width: 60px; 120 | height: 60px; 121 | border: 1px solid #dde2e6; 122 | border-radius: 0.4rem; 123 | margin: 3px; 124 | display: inline-block; 125 | overflow: hidden; 126 | } 127 | 128 | .gallery-wrap .thumbs-wrap img { 129 | max-width: 100%; 130 | max-height: 100%; 131 | object-fit: cover; 132 | cursor: zoom-in; 133 | } 134 | 135 | .checked { 136 | color: orange; 137 | } -------------------------------------------------------------------------------- /09 bootstrapShoppingSite/scss/bootstrap.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "../node_modules/bootstrap/scss/functions"; 3 | 4 | 5 | @import "bs-overrides"; 6 | 7 | 8 | @import "../node_modules/bootstrap/scss/variables"; 9 | @import "../node_modules/bootstrap/scss/mixins"; 10 | @import "../node_modules/bootstrap/scss/root"; 11 | 12 | 13 | @import "../node_modules/bootstrap/scss/utilities"; 14 | @import "../node_modules/bootstrap/scss/reboot"; 15 | @import "../node_modules/bootstrap/scss/type"; 16 | @import "../node_modules/bootstrap/scss/images"; 17 | @import "../node_modules/bootstrap/scss/containers"; 18 | @import "../node_modules/bootstrap/scss/grid"; 19 | 20 | 21 | // companents 22 | @import "../node_modules/bootstrap/scss/tables"; 23 | @import "../node_modules/bootstrap/scss/forms"; 24 | @import "../node_modules/bootstrap/scss/buttons"; 25 | @import "../node_modules/bootstrap/scss/transitions"; 26 | @import "../node_modules/bootstrap/scss/dropdown"; 27 | @import "../node_modules/bootstrap/scss/button-group"; 28 | @import "../node_modules/bootstrap/scss/nav"; 29 | @import "../node_modules/bootstrap/scss/navbar"; 30 | @import "../node_modules/bootstrap/scss/card"; 31 | @import "../node_modules/bootstrap/scss/accordion"; 32 | @import "../node_modules/bootstrap/scss/breadcrumb"; 33 | @import "../node_modules/bootstrap/scss/pagination"; 34 | @import "../node_modules/bootstrap/scss/badge"; 35 | @import "../node_modules/bootstrap/scss/alert"; 36 | @import "../node_modules/bootstrap/scss/progress"; 37 | @import "../node_modules/bootstrap/scss/list-group"; 38 | @import "../node_modules/bootstrap/scss/close"; 39 | @import "../node_modules/bootstrap/scss/toasts"; 40 | @import "../node_modules/bootstrap/scss/modal"; 41 | @import "../node_modules/bootstrap/scss/tooltip"; 42 | @import "../node_modules/bootstrap/scss/popover"; 43 | @import "../node_modules/bootstrap/scss/carousel"; 44 | @import "../node_modules/bootstrap/scss/spinners"; 45 | @import "../node_modules/bootstrap/scss/offcanvas"; 46 | @import "../node_modules/bootstrap/scss/placeholders"; 47 | 48 | 49 | @import "../node_modules/bootstrap/scss/helpers"; 50 | @import "../node_modules/bootstrap/scss/utilities/api"; 51 | 52 | @import "styles"; 53 | -------------------------------------------------------------------------------- /10 movieAppOnlyHTML/Don’t Look Up.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Don’t Look Up 8 | 9 | 10 |
11 | 16 |
17 |

Milyonlarca film, TV sovu ve kesfedilecek kisi, simdi kesfedin

18 |
19 |

Don’t Look Up

20 |

21 | Kocaman bir göktaşının, kısa süre içerisinde tüm dünyayı yok edeceği 22 | konusunda insanları uyarmak isteyen iki gökbilimcinin başından geçen 23 | olayları konu ediyor. Yeni filmler arasında yer alan bu yapım fazlasıyla 24 | ses getirmeyi başardı. 25 |

26 | Don’t Look Up 27 | 28 | 29 | -------------------------------------------------------------------------------- /10 movieAppOnlyHTML/Fractured.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fractured 8 | 9 | 10 |
11 | 16 |
17 |

Milyonlarca film, TV sovu ve kesfedilecek kisi, simdi kesfedin

18 |
19 |

Fractured (Kırık)

20 |

21 | Roy, trafik kazası sonucu kolu kırılan kızını, eşiyle birlikte hastaneye 22 | götürür. Tomografi odasına giden kızı ve eşi uzun süre geri dönmezler. 23 | Beklerken uyuya kalan Roy, hastane yetkililerinden akıl almaz yanıtlar 24 | alır. Kızının ve eşinin hastanede herhangi bir kaydının olmadığını ve 25 | hiçbir zaman gelmediklerini söylerler. 26 |

27 | Fractured 28 | 29 | 30 | -------------------------------------------------------------------------------- /10 movieAppOnlyHTML/Wrath of Man.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Wrath of Man 8 | 9 | 10 |
11 | 16 |
17 |

Milyonlarca film, TV sovu ve kesfedilecek kisi, simdi kesfedin

18 |
19 |

Wrath of Man

20 |

21 | 2021 yılının en iyi aksiyon filmlerinden biri olan Wrath of Man'da oğlunun 22 | intikamını almak isteyen bir babayı izliyoruz. Güçlü ve zengin bir adam 23 | olan H tüm olanaklarını bir kenara bırakarak basit bir işte çalışmaya 24 | başlar. Bu işte olmasının tek sebebi ise oğlunun ölümüne sebep olanları 25 | bulmaktır 26 |

27 | Wrath of Man 28 | 29 | 30 | -------------------------------------------------------------------------------- /10 movieAppOnlyHTML/eniyifilmler.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | en iyi filmler 8 | 9 | 10 |
11 | 16 |
17 |

En İyi Filmler | TOP LİST

18 |
19 | 20 | 21 | 68 | 69 |
22 |

Siralama

23 |
    24 |
  1. 25 | Fight Club (1999) 28 |
    2. 29 |
    30 |
  2. 31 | The Good, the Bad and the Ugly (1966) 35 |
    3. 36 |
    37 |
  3. 38 | Cinderella Man (2005) 41 |
    4. 42 |
    43 |
  4. 44 | Django Unchained (2012) 47 |
    5. 48 |
    49 |
  5. 50 | The Dark Knight (2008) 53 |
    6. 54 |
    55 |
  6. 56 | Pulp Fiction (1994) 59 |
    7. 60 |
    61 |
  7. 62 | Forrest Gump (1994) 65 |
    8. 66 |
67 |
70 |
71 | 72 | 73 | -------------------------------------------------------------------------------- /10 movieAppOnlyHTML/form projek.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | form proje 8 | 9 | 10 | 11 | 16 | 17 |

Lutfen Formu Eksiksiz Doldurunuz.

18 |
19 |

Hesap Bilgileriniz

20 | 21 | 22 | 25 | 26 | 29 | 30 | 31 | 32 | 35 | 36 | 44 | 45 | 46 | 47 | 50 | 51 | 59 | 60 |
23 | 24 | 27 | 28 |
33 | 34 | 37 | 43 |
48 | 49 | 52 | 58 |
61 | 62 |

Kisisel Bilgileriniz

63 | 64 | 65 | 68 | 69 | 72 | 73 | 74 | 77 | 78 | 86 | 87 | 88 | 91 | 92 | 101 | 102 | 103 | 106 | 107 | 112 | 113 | 114 | 117 | 118 | 128 | 129 | 130 | 131 | 132 | 135 | 136 |
66 | 67 | 70 | 71 |
75 | 76 | 79 | 85 |
89 | 90 | 93 | 94 | 100 |
104 | 105 | 108 | Erkek 109 | 110 | Kadin 111 |
115 | 116 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 |
133 | 134 |
137 | 138 | 139 | -------------------------------------------------------------------------------- /10 movieAppOnlyHTML/foto/Don't look up.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/10 movieAppOnlyHTML/foto/Don't look up.jpg -------------------------------------------------------------------------------- /10 movieAppOnlyHTML/foto/Fractured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/10 movieAppOnlyHTML/foto/Fractured.jpg -------------------------------------------------------------------------------- /10 movieAppOnlyHTML/foto/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/10 movieAppOnlyHTML/foto/img.jpg -------------------------------------------------------------------------------- /10 movieAppOnlyHTML/foto/wrath.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rasuljangirli/HTML5CSS3PraticForBeginnersAndAdvanced/a5719301857a82eda1c668ff942a2c659609932d/10 movieAppOnlyHTML/foto/wrath.jpg -------------------------------------------------------------------------------- /10 movieAppOnlyHTML/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Milyonlarca film, TV sovu ve kesfedilecek kisi, simdi 9 | kesfedin|themovie.org 10 | 11 | 12 | 13 |
14 | 19 |
20 |

Milyonlarca film, TV sovu ve kesfedilecek kisi, simdi kesfedin

21 |
22 |
23 | 24 |
25 | 26 | 27 | 136 | 137 | 163 | 164 |
28 |
29 |
30 |

Populer Filmler

31 | 32 | 33 | 36 | 37 | 46 | 47 |
34 | 35 | 38 |

39 | Wrath of Man 40 |

41 |

42 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 43 | Tempora, esse! 44 |

45 |
48 | 49 | 50 | 53 | 54 | 63 | 64 |
51 | 52 | 55 |

56 | Fractured (Kırık) 57 |

58 |

59 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 60 | Tempora, esse! 61 |

62 |
65 | 66 | 67 | 70 | 71 | 80 | 81 |
68 | 69 | 72 |

73 | Don’t Look Up 74 |

75 |

76 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 77 | Tempora, esse! 78 |

79 |
82 |
83 |
84 |

Populer Fragmanlar

85 | 86 | 87 | 99 | 100 |
88 |

Kurtlar Vadisi Vatan - Fragman | HD - Official

89 | 98 |
101 | 102 | 103 | 115 | 116 |
104 |

KURTLAR VADİSİ İLK FRAGMAN SHOW TV 2002

105 | 114 |
117 | 118 | 119 | 131 | 132 |
120 |

Kurtlar Vadisi Pusu 1. Bölüm Fragmanı -2

121 | 130 |
133 |
134 |
135 | 		138 | 162 |
165 |
166 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /11 cinemaReservation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | cinema reservation app 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

💖

18 |

💖

19 |

💖

20 | 21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 | 74 |
75 | 81 |
82 | 83 | 97 | 98 |

99 | The calculated fee for 0 seats is 0 USD. 100 |

101 | 102 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /11 cinemaReservation/script.js: -------------------------------------------------------------------------------- 1 | const container = document.querySelector(".container"); 2 | let count = document.getElementById("count"); 3 | let amount = document.getElementById("amount"); 4 | let select = document.querySelector("#movie"); 5 | const seats = document.querySelectorAll('.seat:not(.reserved)') 6 | 7 | 8 | getFromLocalStorage(); 9 | calculateTotal(); 10 | 11 | container.addEventListener("click", (e) => { 12 | if (e.target.classList.contains('seat') && !(e.target.classList.contains('reserved'))) { 13 | e.target.classList.toggle("selected"); 14 | calculateTotal(); 15 | }; 16 | }); 17 | 18 | select.addEventListener("change", () => { 19 | calculateTotal(); 20 | }); 21 | 22 | function calculateTotal() { 23 | const selectedSeats = container.querySelectorAll(".seat.selected"); 24 | const selectedSeatsArr = []; 25 | const seatsArr = []; 26 | 27 | selectedSeats.forEach((seat) => { 28 | selectedSeatsArr.push(seat); 29 | }); 30 | 31 | seats.forEach((seat) => { 32 | seatsArr.push(seat); 33 | }); 34 | 35 | let selectedSeatIndexs = selectedSeatsArr.map((seat) => { 36 | return seatsArr.indexOf(seat); 37 | }); 38 | 39 | const selectetSeats = container.querySelectorAll('.seat.selected'); 40 | let selectedSeatsLength = selectetSeats.length; 41 | count.innerHTML = selectedSeatsLength; 42 | amount.innerHTML = selectedSeatsLength * select.value; 43 | 44 | saveToLocalStorage(selectedSeatIndexs); 45 | }; 46 | 47 | function saveToLocalStorage(indexs) { 48 | localStorage.setItem('selectedSeats', JSON.stringify(indexs)); 49 | localStorage.setItem('selectedMovieIndex', select.selectedIndex); 50 | }; 51 | 52 | 53 | function getFromLocalStorage() { 54 | let selectedSeats = JSON.parse(localStorage.getItem("selectedSeats")); 55 | 56 | if (selectedSeats != null && selectedSeats.length > 0) { 57 | seats.forEach((seat, index) => { 58 | if (selectedSeats.indexOf(index) > -1) { 59 | seat.classList.add("selected"); 60 | }; 61 | }); 62 | }; 63 | 64 | let selectedMovieIndex = localStorage.getItem("selectedMovieIndex"); 65 | if (selectedMovieIndex != null) { 66 | select.selectedIndex = selectedMovieIndex; 67 | }; 68 | 69 | }; 70 | -------------------------------------------------------------------------------- /11 cinemaReservation/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #292929; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: center; 7 | height: 100vh; 8 | margin: 0; 9 | color: #fff; 10 | } 11 | 12 | .seat { 13 | background-color: #444451; 14 | height: 15px; 15 | width: 15px; 16 | margin: 3px; 17 | border-radius: 5px; 18 | } 19 | 20 | .seat.selected { 21 | background-color: #f6eb6f; 22 | } 23 | 24 | .seat.reserved { 25 | background-color: #fff; 26 | } 27 | 28 | .seat:not(.reserved):hover { 29 | cursor: pointer; 30 | transform: scale(1.3); 31 | } 32 | 33 | .seat:nth-of-type(2) { 34 | margin-right: 20px; 35 | } 36 | 37 | .seat:nth-last-of-type(3) { 38 | margin-right: 20px; 39 | } 40 | 41 | .row { 42 | display: flex; 43 | } 44 | 45 | .screen { 46 | background: rgb(26,230,6); 47 | background: linear-gradient(270deg, rgba(26,230,6,0.9893207282913166) 13%, rgba(122,29,208,1) 89%); 48 | height: 50px; 49 | width: 100%; 50 | margin: 20px 0; 51 | box-shadow: 0 3px 8px rgba(255, 255, 255, 0.7); 52 | transition: all 1s ease; 53 | display: flex; 54 | justify-content: space-between; 55 | align-items: center; 56 | color: black; 57 | border-radius: 5px; 58 | } 59 | 60 | .screen:hover { 61 | transform: scale(1.1); 62 | } 63 | 64 | .screen p { 65 | opacity: 0.4; 66 | cursor: default; 67 | transition: all 1s ease-in-out; 68 | } 69 | .screen:hover p { 70 | transform: scale(2); 71 | opacity: 0.9; 72 | } 73 | .movie-list { 74 | margin: 20px 0; 75 | } 76 | 77 | .info { 78 | background-color: rgba(0, 0, 0, 0.2); 79 | padding: 5px 10px; 80 | color: #777; 81 | display: flex; 82 | } 83 | 84 | .info li { 85 | display: flex; 86 | align-items: center; 87 | justify-content: center; 88 | margin: 0 10px; 89 | } 90 | 91 | p.text span { 92 | color: #f6eb6f; 93 | } -------------------------------------------------------------------------------- /12 drawingApp/app.js: -------------------------------------------------------------------------------- 1 | const canvas = document.getElementById("canvas"); 2 | const body = document.querySelector("body"); 3 | canvas.height = window.innerHeight; 4 | canvas.width = window.innerWidth; 5 | 6 | var theColor = ''; 7 | //? var theColor = ''; 8 | 9 | var linew = 5; 10 | let prevX = null; 11 | let prevY = null; 12 | let draw = false; 13 | 14 | body.style.backgroundColor = "#FFFFFF"; 15 | var theInput = document.getElementById("favcolor"); 16 | 17 | theInput.addEventListener("input", function () { 18 | theColor = theInput.value; 19 | body.style.backgroundColor = theColor; 20 | }, false); 21 | 22 | const ctx = canvas.getContext("2d"); 23 | ctx.lineWidth = linew; 24 | 25 | document.getElementById("ageInputId").oninput = function () { 26 | draw = null; 27 | linew = document.getElementById("ageInputId").value; 28 | document.getElementById("ageOutputId").innerHTML = linew; 29 | ctx.lineWidth = linew; 30 | } 31 | 32 | let clrs = document.querySelectorAll(".clr"); 33 | clrs = Array.from(clrs); 34 | clrs.forEach(clr => { 35 | clr.addEventListener("click", () => { 36 | ctx.strokeStyle = clr.dataset.clr; 37 | }); 38 | }); 39 | 40 | let clearBtn = document.querySelector(".clear"); 41 | clearBtn.addEventListener("click", () => { 42 | ctx.clearRect(0, 0, canvas.width, canvas.height) 43 | }); 44 | 45 | let saveBtn = document.querySelector(".save"); 46 | saveBtn.addEventListener("click", () => { 47 | let data = canvas.toDataURL("imag/png"); 48 | let a = document.createElement("a"); 49 | a.href = data; 50 | a.download = "sketch.png"; 51 | a.click(); 52 | }); 53 | 54 | window.addEventListener("mousedown", (e) => draw = true); 55 | window.addEventListener("mouseup", (e) => draw = false); 56 | 57 | window.addEventListener("mousemove", (e) => { 58 | if (prevX == null || prevY == null || !draw) { 59 | prevX = e.clientX; 60 | prevY = e.clientY; 61 | return 62 | }; 63 | let currentX = e.clientX; 64 | let currentY = e.clientY; 65 | // let currentY = e.clientY; 66 | 67 | 68 | ctx.beginPath(); 69 | ctx.moveTo(prevX, prevY); 70 | ctx.lineTo(currentX, currentY); 71 | ctx.stroke(); 72 | 73 | prevX = currentX; 74 | prevY = currentY; 75 | }); 76 | -------------------------------------------------------------------------------- /12 drawingApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drawing 🎨 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 | 26 | 5 27 |
🎨
28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /12 drawingApp/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | overflow: hidden; 5 | font-family: Arial, Helvetica, sans-serif; 6 | } 7 | .nav{ 8 | width: auto; 9 | height: 50px; 10 | position: fixed; 11 | top: 1%; 12 | left: 50%; 13 | transform: translateX(-50%); 14 | display: flex; 15 | align-items: center; 16 | justify-content: space-around; 17 | transition: opacity .5s; 18 | background:linear-gradient(to right, #4568DC, #B06AB3); 19 | padding: 10px; 20 | border-radius: 10px; 21 | border: 3px solid white; 22 | } 23 | img{ 24 | position: absolute; 25 | top: 50%; 26 | left: 50%; 27 | transform: translate(-50%, -50%); 28 | } 29 | .nav div, button, input{ 30 | margin: 5px; 31 | } 32 | .nav:hover{ 33 | cursor: pointer; 34 | } 35 | buttton:hover{ 36 | cursor: pointer; 37 | } 38 | .clr{ 39 | height: 35px; 40 | width: 35px; 41 | background-color: blue; 42 | border-radius: 50%; 43 | border: 3px solid white; 44 | transition: transform .5s; 45 | } 46 | .clr:hover{ 47 | transform: scale(1.2); 48 | } 49 | .clr:nth-child(1){ 50 | background-color: #000; 51 | } 52 | .clr:nth-child(2){ 53 | background-color: red; 54 | } 55 | .clr:nth-child(3){ 56 | background-color: orange; 57 | } 58 | .clr:nth-child(4){ 59 | background-color: blue; 60 | } 61 | .clr:nth-child(5){ 62 | background-color: purple; 63 | } 64 | .clr:nth-child(6){ 65 | background-color: yellowgreen; 66 | } 67 | .clr:nth-child(7){ 68 | background-color: yellow; 69 | } 70 | .clr:nth-child(8){ 71 | background-color: #fff; 72 | } 73 | button{ 74 | border: none; 75 | outline: none; 76 | padding: .6em 1em; 77 | border-radius: 3px; 78 | background-color: #03bb56; 79 | color: #fff; 80 | border: 3px solid white; 81 | font-size: 15px; 82 | font-weight: bold; 83 | } 84 | .save{ 85 | background-color: #0f65d4; 86 | } 87 | input[type="color"] { 88 | width: 60px; 89 | height: 40px; 90 | } 91 | #ageOutputId{ 92 | color: white; 93 | font-weight: bold; 94 | font-size: 15pt; 95 | } 96 | #ageInputId { 97 | background: linear-gradient(to right, #000428 0%, #004e92 100%); 98 | height: 7px; 99 | outline: none; 100 | -webkit-appearance: none; 101 | cursor: ew-resize; 102 | border-radius: 5px; 103 | border: 3px solid white; 104 | accent-color: white; 105 | } 106 | .emoji{ 107 | font-size: 40px; 108 | padding-bottom: 10px; 109 | } -------------------------------------------------------------------------------- /13 menuRightToLeft/app.js: -------------------------------------------------------------------------------- 1 | const sidebar = document.querySelector('.sidebar'); 2 | 3 | function showSidebar() { 4 | sidebar.style.display = 'flex'; 5 | } 6 | 7 | function hideSidebar() { 8 | sidebar.style.display = 'none'; 9 | } -------------------------------------------------------------------------------- /13 menuRightToLeft/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | menu from right left 8 | 9 | 11 | 12 | 13 | 14 | 38 | 39 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /13 menuRightToLeft/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body { 6 | min-height: 100vh; 7 | background-image: url(/img/anas-alshanti-feXpdV001o4-unsplash.jpg); 8 | background-size: cover; 9 | background-repeat: no-repeat; 10 | background-position: center; 11 | height: 999px; 12 | } 13 | nav { 14 | background-color: white; 15 | box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); 16 | position: fixed; 17 | width: 100%; 18 | } 19 | nav ul { 20 | width: 100%; 21 | list-style: none; 22 | display: flex; 23 | justify-content: flex-end; 24 | align-items: center; 25 | } 26 | nav li { 27 | height: 50px; 28 | 29 | } 30 | nav a { 31 | height: 100%; 32 | padding: 0 30px; 33 | text-decoration: none; 34 | display: flex; 35 | align-items: center; 36 | color: black; 37 | } 38 | nav a:hover { 39 | background-color: lightgray; 40 | } 41 | nav li:first-child { 42 | margin-right: auto; 43 | font-weight: bold; 44 | font-size: 2rem; 45 | } 46 | .sidebar { 47 | position: fixed; 48 | top: 0; 49 | right: 0; 50 | height: 100vh; 51 | width: 300px; 52 | z-index: 99; 53 | box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1); 54 | background-color: rgb(255, 255, 255, 0.3); 55 | backdrop-filter: blur(10px); 56 | display: none; 57 | flex-direction: column; 58 | justify-content: flex-start; 59 | align-items: flex-start; 60 | font-size: 2rem; 61 | } 62 | .sidebar li { 63 | width: 100%; 64 | } 65 | .sidebar a { 66 | width: 100%; 67 | } 68 | @media(max-width:800px) { 69 | .hideOnMobile { 70 | display: none; 71 | } 72 | } 73 | @media(min-width:800px) { 74 | .hideLarge { 75 | display: none; 76 | } 77 | } 78 | @media(max-width:400px) { 79 | .sidebar { 80 | width: 100%; 81 | } 82 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## HTML5 CSS3 başlanğıc səviyyədən irəli səviyyəyə qədər 2 | Youtube kanalımda dərs videolarından yararlanmaq üçün [klikləyin](https://www.youtube.com/@rasul_jangirli) 3 | 4 | Medium hesabımda məqalələrimlə tanış olmaq üçün [klikləyin](https://medium.com/@rasuljangirli) 5 | 6 | Burada olan proyektlərdən ilhamlanaraq **HTML** və **CSS** yazan dostlar öz proyektlərini yaza, eyni zamanda **HTML** və **CSS**-in dərinlikləri ilə tanış ola bilərlər. Repoda olan bəzi proyektlərdə əlavə olaraq **JavaScript**, **Bootstrap**, **Sass**, **ikonlar**, **Google Fonts** və s. istifadə edilmişdir. Bu repoda sadəcə **HTML** **CSS** və onlara yaxın texnologiyalar istifadə edildiyi üçün kopyala yapışdır məntiqindən istifadə edilmişdir. Təbii ki gündəlik həyatda iş mühitində bu yol müsbət deyil. Lakin öyrənmə prosesində və ya statik olan veb saytlar üçün kopyala yapışdır məntiqi uyğundur. Çünki bir data alış verişi olmadığı üçün səhivələrin statik olmasında problem yoxdur. Əlbətdə dinamik səhivələrlə daha çox çalışılır lakin qeyd etdiyim kimi öyrənmə prosesində bunu çoxda düşünməyə gərək yoxdur. Önəmli olan bu texnologiyalardan istifadə edərək müəyyən kodlar yaza bilməkdir. 7 | 8 | *QEYD: Əvvəllər bu proyektlər ayrı-ayrı repolarda idi, bu səbəbdən repoların sayı çox idi və qarışıqlıq yaradırdı. Buna görə də bütün proyektləri bir repo altında toplamağa qərar verdim.* 9 | 10 | ### PROYEKTLƏR HAQQINDA MƏLUMAT: 11 | 12 | * ### SPORT SİTE - filename: `sportSite` 13 | 14 | Bu proyektdə **FlexBox** ilə yanaşı **CSS Grid** istifadə edilir. **CSS Grid** daha çox ümumi səhifə dizaynında istifadə olunur və bu yönü ilə **FlexBox**-dan fərqlənir. Proyekt **responsive** dizayn edilmişdir. **CSS**-də rəng seçimlərinin idarə edilməsi üçün `:root` və `var()` dəyişənlərindən istifadə edilmişdir. Bu layihə, artıq bir neçə addım irəliləmiş istifadəçilər üçün faydalı bir nümunədir. Eyni zamanda fərdiləşdirilmiş kitabxana şəklində xüsusi `class`lar hazırlanmışdır ki, bu da gələcək proyektlər üçün əlverişlidir. Ana səhifədə menyu hissəsində fərqli seçimlər var, lakin test üçün yalnız **home** bölməsi işlənmişdir. Layihəni genişləndirmək üçün onu pull edərək digər səhifələri işləyə bilərsiniz. 15 | 16 | 17 | * ### MOVIEAPP - filename: `movieapp` 18 | 19 | Bu proyekt **HTML5**, **CSS3** və digər texnologiyalardan istifadə edir. Layihə **responsive** deyil, lakin onu pull edərək responsive dizayn edə bilərsiniz. Bu, responsive dizaynı öyrənmək istəyənlər üçün yaxşı bir məşq ola bilər. 20 | 21 | 22 | * ### HOTEL SITE - filename: `hotelSite` 23 | 24 | Burada **HTML5** və **CSS3** istifadə edilərək sadə bir sayt hazırlanmışdır. Bu proyekt əsasən **FlexBox** və onun xüsusiyyətlərini mənimsəmək üçün əlverişlidir. **FlexBox**-un `flex-direction`, `flex-wrap`, `justify-content`, `align-items`, `align-self`, `grow`, `shrink`, `basis`, `align-content`, `gaps`, `flex margin` kimi xüsusiyyətlərindən istifadə edilmişdir. 25 | 26 | 27 | * ### FREELANCER SİTE - filename: `freelancerSite_SassandLess` 28 | 29 | Bu proyektdə **HTML5**, **CSS3** qismən JavaScript və **SCSS**-dən istifadə edilmişdir (Əgər başlanğıc səviyyədəsinizsə, **JavaScript** hissəsinə çox diqqət etməyə bilərsiniz). Proyektə kənardan əlavələr edildiyi üçün `package.json` faylı əlavə olunmuşdur və içərisində istifadə edilən texnologiyaları görə bilərsiniz. **JavaScript**, yalnız ana səhifədə istifadə edilmişdir və hazır kod olaraq əlavə edilmişdir. Ümumilikdə bu, geniş bir layihədir və burada olan kodları incələyərək öz layihələrinizi daha da inkişaf etdirə bilərsiniz. 30 | 31 | 32 | * ### BOOTSTRAP SITE ONE - filename: `bootstrapSite_one` 33 | 34 | Bu layihə əsasən **HTML**, **CSS** və **Bootstrap** köməkliyi ilə hazırlanmışdır. 3 səhifədən ibarət bir layihədir. Səhifələrin hər birində fərqli və bir-birinin bənzəri olmayan dizaynlar mövcuddur ki, bu kodları təkrar işləmək istəyən şəxslərin daha möhkəm biliklərə sahib olmasına zəmin yaradır. Eyni zamanda layihədə əlaqə səhifəsində form və məkan məlumatları göstərilmişdir. Ümumilikdə çox böyük layihə olmasa da, içərisində **Bootstrap** daha çox istifadə edilmişdir və **Bootstrap** biliklərinin möhkəmlənməsinə dəstək verə biləcək bir layihədir. 35 | 36 | * ### BOOTSTRAP Product Cards - filename: `bootstrapProductCard` 37 | 38 | Layihə Bootstrap əsaslı hazırlanmışdır və əlavə olaraq **CSS** kodlarından istifadə edilmişdir. Bir məhsul kartı hansı formada olur və içərisində nələrdən istifadə edilir, bunların istifadəsinə aid sadə bir layihədir. Lokalda yerləşdirilən şəkillərdən istifadə edilmişdir görsəl hissəsində. 39 | 40 | * ### BOOTSTRAP Comments - filename: `bootstrapComments` 41 | 42 | Bu kiçik həcimli bol **bootstrap** classı istifadə edilmiş bir proyektdir. Təbii olaraq dinamik hazırlanmadığı üçün təkrar kodlar və kopyala yapışdır məntiqi istifadə edilmişdir. Gələcəkdə real iş mühitində proyektlərdə bu və ya buna yaxın formada comment səhivələri yazmaq üçün əla praktika proyektidir. Burada əsas məqsəd bootstrapın classlarının funksionallığını praktika edərək görməkdir. Eyni zamanda responsive dizayn üçündə classlar istifadə edilmişdir. 43 | 44 | * ### BOOTSTRAP Filter - filename: `bootstrapFilter` 45 | 46 | Bu proyekt ümumilikdə sadə, filtirləmə üçün isə orta dərəcəlidir. Burada yenə **Bootstrap**-dan istifadə edilmişdir, əlavə olaraq isə **CSS** kodları yazılmışdır. Örnək olaraq bir satış səhifəsinin filtr hissəsinə bənzədilməyə çalışılıb. Lakin əsas məqsəd tam olaraq hər hansı bir saytın filtirləməsini hazırlamaq deyil. Burada əsas məqsəd **Bootstrap** istifadə edərək necə filtreleme hissəsini hazırlaya biləcəyimizi öyrənməkdir. 47 | 48 | Təbii olaraq əlavələr və ya azaltmalar edə bilərik. Eyni yolla biz başqa formalı accordion menulərdə hazırlaya bilərik. Yəni istifadə olunan **Bootstrap** classları bizə çox şaxəli imkanlar təqdim edir. 49 | 50 | 51 | * ### BOOTSTRAP E-Shopping - filename: `bootstrapShoppingSite` 52 | 53 | Bu layihədə **HTML** və **CSS** ilə yanaşı, **Bootstrap** və **SCSS** istifadə edilmişdir. Layihə daxilində məhsul detalları səhifəsi də mövcuddur. Ana menyuda **slayd (slide)** funksionallığı əlavə edilmişdir. **JavaScript** istifadə edilərək məhsulların həm detallı səhifələri, həm də fotolarının geniş şəkildə təqdim edilməsi təmin edilmişdir. 54 | 55 | **Diqqət:** Layihəni GitHub hesabıma yüklədiyim zaman `node_modules` qovluğunu `.gitignore` faylına əlavə etmişəm. Layihəni lokalınızda aktiv etmək üçün terminalda aşağıdakı əmri icra etməyiniz vacibdir: 56 | 57 | ```cmd 58 | npm install 59 | ``` 60 | Bu əmrin icrası, `package.json` faylında göstərilən asılılıqları layihəyə əlavə edəcəkdir. Əks halda, bəzi funksionallıqlar deaktiv qala bilər. Məsələn, slaydın avtomatik dövr etməsi və ya əl ilə dəyişdirilməsi kimi xüsusiyyətlər işləməyə bilər. 61 | 62 | 63 | * ### Movie App Only HTML - filename: `movieAppOnlyHTML` 64 | 65 | Bu layihə çox əvvəlki dövrlərə aiddir. Yalnız **HTML** istifadə edilmişdir. **HTML** ilə yeni başlayan dostlar üçün əla bir təcrübədir. Səhifələr yalnız linklər vasitəsilə yönləndirilmişdir. **CSS** və digər texnologiyalardan istifadə edilməmişdir. 66 | 67 | **Əsas Xüsusiyyətlər:** 68 | - Yalnız **HTML** ilə hazırlanmışdır. 69 | - Linklər vasitəsilə səhifələr arasında yönləndirmə var. 70 | - Heç bir **CSS** və ya **JavaScript** istifadə edilməmişdir. 71 | 72 | Layihə əvvəllər yazdığım kodları araşdırarkən qarşıma çıxdı və nostalji hissi yaşatdı. Əminəm ki, bu repoya baxan və yeni başlayan dostlar da özlərini inkişaf etdirərək gələcəkdə bu hissləri yaşayacaqlar. 73 | 74 | 75 | * ### Cinema Reservation - filename: `cinemaReservation` 76 | 77 | Bu layihədə **HTML**, **CSS** və **JavaScript** istifadə edilmişdir. Funksionallıq baxımından əsas hissə **JavaScript** ilə təmin olunmuşdur, lakin **HTML** və **CSS** də aktiv şəkildə istifadə olunmuşdur. Proyekt, sinema rezervasiyası ilə bağlıdır və 3 fərqli kateqoriyada film seçimi imkanı təqdim edir. Hər kateqoriya üçün qiymətlər, bilet sayına görə avtomatik olaraq dəyişir. 78 | 79 | Ümumiyyətlə, bu layihə həm **HTML**, **CSS**, həm də **JavaScript** ilə işləməyi inkişaf etdirmək üçün əlverişli bir təcrübədir. 80 | 81 | 82 | * ### Drawing App - filename: `drawingApp` 83 | 84 | Bu layihədə **HTML**, **CSS** və **JavaScript** aktiv şəkildə istifadə edilmişdir. Layihədə əsasən **HTML** elementi olan `canvas` ön plana çıxır, çünki əsas iş sahəmiz məhz onun üzərindədir və bizə əlverişli şərait yaratmışdır. **CSS** ümumilikdə daha praktik və çox istifadə edilmişdir. Proyekti araşdırma etdikdən sonra özünüz kodları yazmağı yoxlaya bilərsiniz. İlk başlarda digər layihələrə nisbətdə daha qarışıq gələ bilər. Lakin incələmə yolu ilə daha da effektli işlər yaratmaq mümkündür. 85 | 86 | 87 | * ### Menu Right to Left - filename: `menuRightToLeft` 88 | 89 | **HTML**, **CSS** və **JavaScript** istifadə edilərək sadə, responsive dizaynda bir menyu hazırlanmışdır. **CSS** daha çox istifadə olunmuşdur. **JavaScript** istifadəsi sadəcə klikləmə funksiyalarında və display dəyişimlərində istifadə edilmişdir. Ümumilikdə **CSS**-in bir çox mövzularına toxunulmuş kiçik həcmli layihədir. Menyu hazır olduğu üçün davamını inkişaf etdirərək əla bir layihə yaratmaq olar. 90 | 91 | 92 | --- 93 | 94 | Youtube kanalımda dərs videolarından yararlanmaq üçün [klikləyin](https://www.youtube.com/@rasul_jangirli). 95 | 96 | Medium hesabımda məqalələrimlə tanış olmaq üçün [klikləyin](https://medium.com/@rasuljangirli). 97 | --------------------------------------------------------------------------------