├── README.md ├── index.html ├── purple-website.jpg ├── script.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | موقع الكتروني مصمم باستخدام 2 | HTML CSS JS 3 | مناسب لجميع الأحجام 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | مطورون 16 | 17 | 18 |
19 | 20 | 36 | 37 |
38 |

مطورون، خيارك لتصميم المواقع الالكترونية

39 |
40 | 41 | 42 |
43 |
44 | 45 |
46 |

كل التصاميم التي تحتاجها

47 |
تصاميم جاهزة لتختار منها
48 |
49 |
50 |
51 | 52 |

الخاصية الأولى

53 |

54 | شرح الخاصية الأولى شرح الخاصية الأولى شرح الخاصية الأولى شرح 55 | الخاصية الأولى شرح الخاصية الأولى شرح الخاصية الأولى شرح الخاصية 56 |

57 |
58 | purple website 59 |
60 |
61 |
62 | 63 |

الخاصية الثانية

64 |

65 | شرح الخاصية الثانية شرح الخاصية الثانية شرح الخاصية الثانية شرح 66 | الخاصية الثانية شرح الخاصية الثانية شرح الخاصية الثانية شرح 67 |

68 |
69 | purple website 70 |
71 |
72 |
73 | 74 |

الخاصية الثالثة

75 |

76 | شرح الخاصية الثالثة شرح الخاصية الثالثة شرح الخاصية الثالثة شرح 77 | الخاصية الثالثة شرح الخاصية الثالثة شرح الخاصية الثالثة شرح 78 |

79 |
80 | purple website 81 |
82 |
83 |
84 | 85 |
86 |

مجموعة تفاصيل عنا

87 |
مجموعة تفاصيل تشرح من نحن لمن لا يعرفنا
88 |
89 |
90 | 91 |

تفصيل 1

92 |

93 | شرح التفصيل الأول شرح التفصيل الأول شرح التفصيل الأول شرح التفصيل 94 | الأول شرح التفصيل الأول شرح التفصيل الأول 95 |

96 |
97 |
98 | 99 |

تفصيل 1

100 |

101 | شرح التفصيل الأول شرح التفصيل الأول شرح التفصيل الأول شرح التفصيل 102 | الأول شرح التفصيل الأول شرح التفصيل الأول 103 |

104 |
105 |
106 | 107 |

تفصيل 1

108 |

109 | شرح التفصيل الأول شرح التفصيل الأول شرح التفصيل الأول شرح التفصيل 110 | الأول شرح التفصيل الأول شرح التفصيل الأول 111 |

112 |
113 |
114 | 115 |

تفصيل 1

116 |

117 | شرح التفصيل الأول شرح التفصيل الأول شرح التفصيل الأول شرح التفصيل 118 | الأول شرح التفصيل الأول شرح التفصيل الأول 119 |

120 |
121 |
122 | 123 |

تفصيل 1

124 |

125 | شرح التفصيل الأول شرح التفصيل الأول شرح التفصيل الأول شرح التفصيل 126 | الأول شرح التفصيل الأول شرح التفصيل الأول 127 |

128 |
129 |
130 | 131 |

تفصيل 1

132 |

133 | شرح التفصيل الأول شرح التفصيل الأول شرح التفصيل الأول شرح التفصيل 134 | الأول شرح التفصيل الأول شرح التفصيل الأول 135 |

136 |
137 |
138 |
139 |
140 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /purple-website.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anasomar1/developers/882722f2da6cd96b8640ef7c8f9eda1ce41a6860/purple-website.jpg -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const mobileToggle = document.getElementById("mobile-toggle"); 2 | 3 | mobileToggle.addEventListener("click", () => { 4 | document.querySelector(".nav-items").classList.toggle("active"); 5 | }); 6 | 7 | const navLinks = document.querySelectorAll(".nav-item").forEach((navItem) => { 8 | navItem.addEventListener("click", () => { 9 | document.querySelector(".nav-items").classList.toggle("active"); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800&display=swap"); 2 | 3 | :root { 4 | --white: #fff; 5 | --gray: #c4c4c4; 6 | --light-purple: #564ccf; 7 | --dark-purple: #4c3fe2; 8 | } 9 | 10 | * { 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | } 15 | 16 | html { 17 | font-size: 16px; 18 | } 19 | 20 | body { 21 | background-color: #1e2028; 22 | font-family: "Tajawal", sans-serif; 23 | } 24 | 25 | main { 26 | max-width: 1366px; 27 | margin: 0 auto; 28 | } 29 | 30 | nav { 31 | display: flex; 32 | justify-content: space-around; 33 | align-items: center; 34 | height: 10vh; 35 | } 36 | 37 | nav #mobile-toggle { 38 | display: none; 39 | color: var(--white); 40 | font-size: 2rem; 41 | cursor: pointer; 42 | } 43 | 44 | nav .logo { 45 | font-size: 3rem; 46 | color: var(--light-purple); 47 | } 48 | 49 | nav .nav-items { 50 | list-style-type: none; 51 | display: flex; 52 | } 53 | 54 | nav .nav-items .nav-item { 55 | padding-left: 2rem; 56 | } 57 | 58 | .nav-item .nav-link { 59 | color: var(--gray); 60 | text-decoration: none; 61 | } 62 | 63 | .nav-item .nav-link:hover { 64 | color: #faf5f5; 65 | text-decoration: none; 66 | } 67 | 68 | .cta { 69 | font-family: inherit; 70 | padding: 0.75rem 2rem; 71 | border: none; 72 | color: white; 73 | border-radius: 1rem; 74 | cursor: pointer; 75 | font-size: 1rem; 76 | } 77 | 78 | .cta.dark { 79 | background-color: #252731; 80 | transition: background-color 0.3s; 81 | } 82 | 83 | .cta.dark:hover { 84 | background-color: #2b2c31; 85 | } 86 | 87 | /* القسم الأساسي */ 88 | 89 | .hero { 90 | height: 60vh; 91 | display: flex; 92 | flex-direction: column; 93 | justify-content: center; 94 | align-items: center; 95 | } 96 | 97 | .hero h1 { 98 | font-size: 3rem; 99 | width: 40%; 100 | text-align: center; 101 | color: var(--white); 102 | font-weight: 600; 103 | margin-bottom: 2rem; 104 | } 105 | 106 | .hero h1 span { 107 | color: var(--light-purple); 108 | } 109 | 110 | .cta.purple { 111 | background-color: var(--light-purple); 112 | margin-left: 1rem; 113 | transition: background-color 0.3s; 114 | } 115 | 116 | .cta.purple:hover { 117 | background-color: var(--dark-purple); 118 | } 119 | 120 | /* الميزات */ 121 | .features { 122 | display: flex; 123 | flex-direction: column; 124 | align-items: center; 125 | } 126 | 127 | .features h3 { 128 | color: var(--white); 129 | font-size: 2rem; 130 | margin-bottom: 1rem; 131 | } 132 | 133 | .features h6 { 134 | color: var(--gray); 135 | font-size: 1rem; 136 | margin-bottom: 3rem; 137 | } 138 | 139 | .feature { 140 | background-color: #252731; 141 | display: flex; 142 | border-radius: 3rem; 143 | overflow: hidden; 144 | margin-bottom: 3rem; 145 | box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 146 | } 147 | 148 | .feature .content { 149 | padding: 4rem; 150 | flex: 1; 151 | } 152 | 153 | .feature .content i { 154 | color: var(--dark-purple); 155 | margin-bottom: 2rem; 156 | font-size: 2rem; 157 | } 158 | 159 | .feature .content h2 { 160 | color: white; 161 | margin-bottom: 2rem; 162 | } 163 | 164 | .feature .content p { 165 | color: var(--gray); 166 | font-size: 1.2rem; 167 | width: 80%; 168 | line-height: 2; 169 | } 170 | 171 | .feature img { 172 | flex: 1; 173 | max-width: 50%; 174 | } 175 | 176 | /* التفاصيل */ 177 | .details { 178 | margin-top: 10rem; 179 | display: flex; 180 | flex-direction: column; 181 | align-items: center; 182 | margin-bottom: 10rem; 183 | } 184 | 185 | .details h2 { 186 | color: var(--white); 187 | font-size: 2rem; 188 | margin-bottom: 1rem; 189 | } 190 | 191 | .details h6 { 192 | color: var(--gray); 193 | font-size: 1rem; 194 | } 195 | 196 | .details-list { 197 | display: grid; 198 | grid-template-columns: 1fr 1fr 1fr; 199 | gap: 2rem; 200 | margin-top: 4rem; 201 | } 202 | 203 | .detail { 204 | background-color: #252731; 205 | padding: 3rem; 206 | border-radius: 2rem; 207 | color: var(--white); 208 | box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 209 | } 210 | 211 | .detail i { 212 | font-size: 1.5rem; 213 | margin-bottom: 2rem; 214 | color: var(--light-purple); 215 | } 216 | 217 | .detail h3 { 218 | font-size: 2rem; 219 | margin-bottom: 1rem; 220 | } 221 | 222 | .detail p { 223 | color: var(--gray); 224 | } 225 | 226 | /* التذييل */ 227 | footer { 228 | background-color: #252731; 229 | min-height: 25vh; 230 | padding: 2rem 0; 231 | display: flex; 232 | flex-direction: column; 233 | align-items: center; 234 | } 235 | 236 | footer h3 { 237 | color: var(--white); 238 | font-size: 2rem; 239 | padding-bottom: 1rem; 240 | margin-bottom: 2rem; 241 | border-bottom: 1px solid var(--gray); 242 | width: 100%; 243 | text-align: center; 244 | } 245 | 246 | footer p { 247 | font-size: 1.5rem; 248 | 249 | color: var(--white); 250 | margin-bottom: 1rem; 251 | } 252 | 253 | footer .icon { 254 | color: var(--gray); 255 | margin: 1rem; 256 | font-size: 1.5rem; 257 | } 258 | 259 | footer .icon:hover { 260 | color: var(--dark-purple); 261 | } 262 | 263 | /* تصميم لأحجام مختفلة */ 264 | 265 | @media screen and (max-width: 1400px) { 266 | main { 267 | max-width: 1024px; 268 | } 269 | } 270 | @media screen and (max-width: 1050px) { 271 | main { 272 | max-width: 768px; 273 | } 274 | .features-list img { 275 | display: none; 276 | } 277 | .details-list { 278 | grid-template-columns: 1fr 1fr; 279 | } 280 | } 281 | 282 | @media screen and (max-width: 800px) { 283 | main { 284 | max-width: 600px; 285 | } 286 | .details-list { 287 | grid-template-columns: 1fr; 288 | } 289 | html { 290 | font-size: 90%; 291 | } 292 | } 293 | 294 | @media screen and (max-width: 600px) { 295 | main { 296 | margin: 2rem; 297 | text-align: center; 298 | } 299 | .feature .content p { 300 | width: 100%; 301 | } 302 | .hero { 303 | margin: 5rem 0; 304 | } 305 | .hero h1 { 306 | width: 80%; 307 | } 308 | nav #mobile-toggle { 309 | display: block; 310 | } 311 | nav .nav-items { 312 | display: none; 313 | flex-direction: column; 314 | position: absolute; 315 | justify-content: center; 316 | left: 0; 317 | top: 12vh; 318 | width: 100%; 319 | height: 50%; 320 | background-color: var(--dark-purple); 321 | } 322 | 323 | nav .nav-items.active { 324 | display: flex; 325 | } 326 | 327 | nav .nav-items .nav-item { 328 | padding: 2rem 0; 329 | font-size: 1.4rem; 330 | } 331 | } 332 | --------------------------------------------------------------------------------