انشاء صفحة هبوط

انشاء صفحة هبوط

7 تعليقات / Blog, HTML

إزاي تصمّم لاندنج بيدج احترافية باستخدام HTML, CSS, و JavaScript؟

تصميم لاندنج بيدج ب HTML, CSS, و JavaScript او انشاء صفحة هبوط مش بس بيخلّي موقعك خفيف وسريع، لكنه كمان بيدّيك تحكّم كامل في الشكل والوظائف. اللاندنج بيدج دي بتكون أول انطباع عن مشروعك، وهدفها الأساسي هو توجيه الزائر لاتخاذ إجراء معين زي التسجيل، الشراء، أو حتى الاشتراك في النشرة البريدية.

  • HTML: هو الهيكل الأساسي. تقدر تبدأ بكتابة أقسام زي العنوان، وصف المميزات، الصور، والنماذج. خلي العناصر واضحة ومنظمة.
  • CSS: هنا السحر بيحصل! الألوان، الخطوط، والأزرار هي اللي بتخلّي التصميم جذّاب. استخدم قواعد زي Flexbox أو Grid لتنظيم العناصر بشكل احترافي.
  • JavaScript: بيضيف الديناميكية! سواء كنت محتاج تعمل تأثيرات عند التمرير، تحقق من بيانات النماذج، أو حتى عدّ تنازلي لعرض خاص.

ماذا تعني صفحة هبوط وما الفرق بينها وبين الصفحة العادية؟

صفحة الهبوط (Landing Page) هي صفحة ويب مخصصة تهدف إلى تحقيق هدف معين ومحدد، مثل جمع بيانات العملاء، الترويج لمنتج، دعوة لاتخاذ إجراء معين (مثل الاشتراك أو الشراء)، أو عرض معلومات محددة بشكل موجز. يتم تصميم صفحة الهبوط بشكل استراتيجي لتحقيق هدف تسويقي أو ترويجي واضح، وتكون عادةً مرتبطة بحملة تسويقية عبر البريد الإلكتروني، أو إعلانات عبر الإنترنت، أو الروابط الدعائية.

 

انشاء صفحة هبوط

صفحة index.html

الصفحة دي عبارة عن لاندنج بيدج ديناميكية بتعكس تصميم احترافي وبسيط لجذب المستخدمين وتركيزهم على أهداف محددة زي الاشتراك أو التعرف على الخدمات. بتبدأ بعنوان رئيسي ترحيبي ورسالة مختصرة عن الموقع، بعدها قسم المميزات اللي بيوضح أهم نقاط القوة في الخدمة زي السرعة والأمان والدعم الفني. فيه كمان قسم للإحصائيات بيعرض أرقام ديناميكية زي عدد العملاء والمشاريع المكتملة، وده بيزود مصداقية الموقع.

بالإضافة لكده، فيه نموذج للاشتراك في النشرة البريدية بطريقة سهلة وسريعة، وبعده تذييل (Footer) منسق بشكل جميل، بيحتوي على معلومات التواصل، روابط الصفحات المهمة، وأيقونات وسائل التواصل الاجتماعي. الصفحة منظمة ومتجاوبة مع كل الأجهزة، وبتدمج بين التصميم الجذاب والديناميكية باستخدام JavaScript لتحقيق تجربة مستخدم مميزة.

				
					<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحة الهبوط الديناميكية المتقدمة</title>
    <link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'"  rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'"  rel="preload" href="styles.css">
</head>
<body>

    <header class="hero-section">
        <div class="container">
            <h1>مرحبًا بك في موقعنا المتميز</h1>
            <p>نحن نقدم خدمات مبتكرة لحل مشاكلك.</p>
            <a href="#features" class="btn">اكتشف المزيد</a>
        </div>
    </header>

    <section id="features" class="features-section">
        <div class="container">
            <h2>مميزات موقعنا</h2>
            <div class="features-grid">
                <div class="feature-box">
                    <h3>السرعة</h3>
                    <p>نحن نقدم خدمات سريعة وموثوقة لتلبية احتياجاتك.</p>
                </div>
                <div class="feature-box">
                    <h3>الأمان</h3>
                    <p>الأمان والخصوصية في صميم كل ما نقدمه لك.</p>
                </div>
                <div class="feature-box">
                    <h3>الدعم الفني</h3>
                    <p>دعم على مدار الساعة لحل مشاكلك التقنية في أي وقت.</p>
                </div>
            </div>
        </div>
    </section>

    <section id="counters" class="counters-section">
        <div class="container">
            <h2>إحصائياتنا</h2>
            <div class="counters-grid">
                <div class="counter-box">
                    <h3><span id="counter1">0</span>+</h3>
                    <p>عملاء سعداء</p>
                </div>
                <div class="counter-box">
                    <h3><span id="counter2">0</span>+</h3>
                    <p>مشاريع مكتملة</p>
                </div>
                <div class="counter-box">
                    <h3><span id="counter3">0</span>+</h3>
                    <p>سنوات من الخبرة</p>
                </div>
            </div>
        </div>
    </section>

    <section id="subscription" class="subscription-section">
        <div class="container">
            <h2>انضم إلينا</h2>
            <form id="subscription-form">
                <input type="email" id="email" placeholder="أدخل بريدك الإلكتروني" required>
                <button type="submit" class="btn">اشترك الآن</button>
            </form>
            <p id="success-message" class="hidden">تم الاشتراك بنجاح!</p>
        </div>
    </section>

    <footer class="footer-section">
        <div class="container">
            <div class="footer-content">
                <div class="footer-about">
                    <h3>عن الموقع</h3>
                    <p>احنا هنا عشان نوفر لك أفضل الحلول لمشاكلك، سواء كانت تقنية أو خدمات مميزة.</p>
                </div>
                <div class="footer-contact">
                    <h3>اتواصل معانا</h3>
                    <p><strong>العنوان:</strong> شارع رئيسي، القاهرة، مصر</p>
                    <p><strong>الموبايل:</strong> +201234567890</p>
                    <p><strong>الإيميل:</strong> contact@website.com</p>
                </div>
                <div class="footer-social">
                    <h3>تابعنا على</h3>
                    <div class="social-icons" style="padding: 0 100px;">
                        <a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="footer-links">
                    <h3>روابط سريعة</h3>
                    <a href="#features">مميزاتنا</a> | <a href="#testimonials">آراء العملاء</a> | <a href="#faq">أسئلة شائعة</a>
                </div>
            </div>
            <p class="copyright">© 2024 جميع الحقوق محفوظة</p>
        </div>
    </footer> <script type="litespeed/javascript" data-src="script.js"></script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://onemoka.com/wp-content/litespeed/js/276752c34cf842944ac3ee47f9e8a2a8.js?ver=4f2dd"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>

صفحة styles.css

				
					
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
}

.hero-section {
    background: #5b88f0;
    color: #fff;
    padding: 100px 0;
    text-align: center;
}

.hero-section h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.btn {
    display: inline-block;
    background: #fff;
    color: #5b88f0;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
}

.features-section {
    background: #fff;
    color: #333;
    padding: 60px 0;
}

.features-grid {
    display: flex;
    justify-content: space-between;
}

.feature-box {
    text-align: center;
    padding: 20px;
    width: 30%;
    background: #f9f9f9;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.counters-section {
    background: #f4f4f4;
    padding: 60px 0;
}

.counters-grid {
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.counter-box {
    width: 30%;
}

#counter1, #counter2, #counter3 {
    font-size: 48px;
    color: #5b88f0;
}

.subscription-section {
    background: #fff;
    padding: 60px 0;
    text-align: center;
}

#subscription-form {
    display: inline-block;
    text-align: center;
}

#subscription-form input {
    padding: 10px;
    width: 300px;
    margin-right: 10px;
}

#subscription-form button {
    padding: 10px 20px;
}

#success-message {
    color: green;
    margin-top: 20px;
    display: none;
}

.map-section {
    padding: 60px 0;
    text-align: center;
}

#map {
    width: 100%;
    height: 400px;
    background: #ddd;
}

.hidden {
    display: none;
}

.footer-section {
    background-color: #222;
    color: #ddd;
    padding: 40px 0;
    border-top: 3px solid #5b88f0;
}

.footer-section .container {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

.footer-content {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.footer-content > div {
    flex: 1;
    min-width: 220px;
}

.footer-about h3, .footer-contact h3, .footer-social h3, .footer-links h3 {
    font-size: 18px;
    color: #5b88f0;
    margin-bottom: 10px;
}

.footer-about p, .footer-contact p, .footer-links a {
    font-size: 14px;
    color: #bbb;
    line-height: 1.5;
}

.footer-contact p {
    margin-bottom: 8px;
}

.footer-links a {
    color: #bbb;
    text-decoration: none;
    margin-right: 10px;
}

.footer-links a:hover {
    color: #5b88f0;
    text-decoration: underline;
}

.social-icons a {
    color: #bbb;
    margin-right: 10px;
    font-size: 18px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #5b88f0;
}

.footer-about, .footer-contact, .footer-links {
    margin-bottom: 20px;
}

.footer-about p, .footer-contact p, .footer-links a {
    margin-bottom: 10px;
}

.social-icons {
    display: flex;
}

.social-icons a {
    color: #ddd;
}

.social-icons a:hover {
    color: #5b88f0;
}

footer p {
    text-align: center;
    color: #777;
    font-size: 13px;
    margin-top: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

صفحة script.js

الكود يحتوي على عدة أجزاء وظيفية مخصصة لتحسين تجربة المستخدم، مثل التمرير السلس، تشغيل عدادات الإحصائيات، ومعالجة نموذج الاشتراك. دعنا نشرح كل جزء :

				
					// Smooth Scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

// Counters Animation
let countersStarted = false;
window.addEventListener('scroll', () => {
    const countersSection = document.getElementById('counters');
    const position = countersSection.getBoundingClientRect().top;
    const screenPosition = window.innerHeight / 1.3;
    
    if (position < screenPosition && !countersStarted) {
        startCounters();
        countersStarted = true;
    }
});

function startCounters() {
    const counters = [
        { id: 'counter1', max: 1500 },
        { id: 'counter2', max: 3200 },
        { id: 'counter3', max: 10 }
    ];

    counters.forEach(counter => {
        let count = 0;
        const element = document.getElementById(counter.id);
        const interval = setInterval(() => {
            element.innerText = count;
            if (count >= counter.max) {
                clearInterval(interval);
            }
            count += Math.ceil(counter.max / 100);
        }, 30);
    });
}

// Subscription Form
const form = document.getElementById('subscription-form');
const successMessage = document.getElementById('success-message');

form.addEventListener('submit', function (e) {
    e.preventDefault();
    successMessage.style.display = 'block';
});

window.onload = initMap;

1. Smooth Scroll (التمرير السلس):

  • يضيف تأثير التمرير السلس عند النقر على الروابط التي تحتوي على رابط داخلي يبدأ بـ # (روابط الأقسام داخل الصفحة).
  • العملية:
    1. querySelectorAll('a[href^="#"]'): يجلب كل الروابط التي تشير إلى أقسام داخل الصفحة.
    2. addEventListener('click', function (e) {...}): يضيف مستمع للأحداث للروابط.
    3. e.preventDefault(): يمنع السلوك الافتراضي للنقر على الرابط (القفز مباشرة إلى القسم).
    4. scrollIntoView({ behavior: 'smooth' }): يمرر الصفحة بشكل سلس إلى القسم المطلوب.

2. Counters Animation (تحريك العدادات):

الجزء الأول: تفعيل العدادات عند التمرير

  • يتحقق إذا وصلت نافذة العرض إلى قسم الإحصائيات (counters) أثناء التمرير.
  • العملية:
    1. window.addEventListener('scroll', ...): يستمع لحدث التمرير.
    2. getBoundingClientRect().top: يحدد المسافة بين القسم وأعلى نافذة العرض.
    3. window.innerHeight / 1.3: يُستخدم لتحديد نقطة بداية تشغيل العدادات.
    4. الشرط:
      • إذا كان القسم مرئيًا (داخل نطاق الشاشة)، يتم تشغيل العدادات مرة واحدة باستخدام متغير countersStarted.

الجزء الثاني: تشغيل العدادات

  • يحرك عدادات الإحصائيات من 0 إلى القيم المحددة (max) لكل عداد.
  • العملية:
    1. counters: يحتوي على بيانات العدادات (الهوية والقيمة القصوى).
    2. forEach: يمر على كل عداد.
    3. setInterval: يُستخدم لتحديث الرقم كل 30 مللي ثانية.
    4. count += Math.ceil(counter.max / 100): يزيد الرقم تدريجيًا حتى يصل إلى القيمة القصوى.
    5. clearInterval(interval): يوقف التحديث عند الوصول إلى القيمة النهائية.

3. Subscription Form (نموذج الاشتراك):

  • يعالج عملية إرسال نموذج الاشتراك، ويعرض رسالة نجاح عند إتمام العملية.
  • العملية:
    1. form.addEventListener('submit', ...): يستمع لحدث الإرسال (Submit).
    2. e.preventDefault(): يمنع السلوك الافتراضي للنموذج (إعادة تحميل الصفحة).
    3. successMessage.style.display = 'block';: يظهر رسالة النجاح (كانت مخفية افتراضيًا باستخدام CSS).
    4. يعالج عملية إرسال نموذج الاشتراك، ويعرض رسالة نجاح عند إتمام العملية.
    5. العملية:
      1. form.addEventListener('submit', ...): يستمع لحدث الإرسال (Submit).
      2. e.preventDefault(): يمنع السلوك الافتراضي للنموذج (إعادة تحميل الصفحة).
      3. successMessage.style.display = 'block';: يظهر رسالة النجاح (كانت مخفية افتراضيًا باستخدام CSS).
انشاء صفحة هبوط
Result

نماذج لصفحات هبوط

Post Views: 187

7 أفكار عن “انشاء صفحة هبوط”

  1. FarukhTourb

    Betzula, canl? bahis konusunda yenilikci cozumler sunar. derbi heyecan? icin guvenli bir sekilde yuksek oranlar? kesfedebilirsiniz.

    Betzula’n?n h?zl? odeme yontemleri, her cihazdan erisim imkan? tan?r. Betzula Twitter hesab?n? takip ederek yeni kampanyalardan haberdar olabilirsiniz.

    Turkiye Super Lig derbilerinin heyecan?n? Betzula ile yasayabilirsiniz.

    Ayr?ca, platformun en yeni versiyonu, mobil cihazlar uzerinden kolay erisim sunar. Ozel olarak, [url=https://denizlieniyimasaj.com/]betzula giris[/url], kolay ve h?zl? giris imkan?.

    Betzula, en genis bahis seceneklerinden ozel turnuvalara kadar en iyi deneyimi yasatmay? amaclar. en guncel oranlar? gormek icin Betzula ile kazanmaya baslay?n!
    371212+

    رد
  2. FarukhTourb

    Betzula guncel giris, en populer bahis platformu konusunda benzersiz secenekler sunar. en heyecanl? maclar icin guvenli bir sekilde kazanma sans?n?z? art?rabilirsiniz.

    Betzula’n?n yuksek guvenlik onlemleri, kullan?c?lar?na her zaman kolayl?k saglar. Betzula Twitter hesab?n? takip ederek yeni kampanyalardan haberdar olabilirsiniz.

    en onemli spor etkinliklerinin bahislerinizi an?nda yapabilirsiniz.

    Ayr?ca, bet zula giris linki, mobil cihazlar uzerinden kolay erisim sunar. Ozel olarak, [url=https://denizlieniyimasaj.com/]betzula[/url], tum bahis severler icin en iyi cozum.

    Betzula, spor bahislerinden canl? casino oyunlar?na kadar tum kullan?c?lar?n ihtiyaclar?n? kars?lar. Fenerbahce Galatasaray derbisi icin bahis yapmak icin Betzula ile kazanmaya baslay?n!
    371212+

    رد
  3. Torefactos

    Искал, где можно найти [url=https://torrentsigruha.net/games-2025/]игры 2025[/url], и снова убедился, что torrentsigruha.net — один из лучших. Новинки выходят здесь практически сразу, а качество файлов на высоте.

    رد
  4. Torefactos

    Если вы ищете, где [url=https://torrentsigruha.net/]игры скачать[/url], загляните на torrentsigruha.net. Все проекты проверены и безопасны, а загрузка возможна без регистрации. Идеальный выбор для тех, кто ценит своё время.

    رد
  5. Torefactos

    Любителям компьютеров стоит обратить внимание на [url=https://torrentsigruha.net/]игры через торрент на ПК[/url]. Это возможность получить доступ к новинкам и классике жанра без дополнительных затрат и сложностей.

    رد
  6. Torefactos

    Хотите [url=https://torrentsigruha.net/]скачать игры на ПК[/url] без вирусов и рекламы? Этот сайт предлагает удобный способ получить самые свежие новинки игровой индустрии или классические хиты в один клик.

    رد

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Related Posts

اساسيات HTML

اساسيات HTML

Blog, HTML

تعلم اساسيات HTML يعتبر خطوة مهمة لفهم كيفية بناء صفحات الويب وتنظيم المحتوى عليها.

More »

php, elephant, blue elephant-2066704.jpg

php

Blog, PHP

PHP هي لغة برمجة قوية وشائعة الاستخدام في تطوير تطبيقات الويب. أصبحت تستخدم بشكل واسع…

More »

اقترب من المستقبل الذي تحلم بة

Scroll to Top