قالب های آماده فرود. قالب های صفحه فرود

یک وب سایت یک صفحه ای برای بازرگانان راحت است زیرا می توان آن را به معنای واقعی کلمه در یک روز انجام داد. اگر یک قالب وب سایت یک صفحه ای آماده دانلود می کنید، می توانید با حداقل مبلغ یک وب سایت برای شرکت خود بسازید، زیرا فقط باید هزینه میزبانی را بپردازید. برای یک مشتری، یک صفحه راحت است زیرا تمام اطلاعات موجود در آن تا حد امکان مختصر و ساختار یافته ارائه می شود، هیچ چیز اضافی وجود ندارد. به دلیل راحتی مشتری، تک پیجرها اغلب بیشتر نشان می دهند تبدیل بالانسبت به سایر انواع سایت ها

اگر تصمیم دارید برای شرکت خود انجام دهید صفحه فرودشما می توانید قالب را از وب سایت ما دانلود کنید. ما همه قالب ها را برای ویروس ها به دقت بررسی می کنیم، بنابراین نمی توانید از دانلود یک فایل آلوده نترسید. تمام قالب های صفحه فرود در کاتالوگ ما دارای طراحی مدرن، ساخته شده در بیشترین سبک های متفاوت. قابلیت تنظیم تعداد بلوک، تغییر طرح رنگیو ویژگی های دیگر به شما کمک می کند تا یک سایت اصلی منحصر به فرد بر اساس یک قالب ساده ایجاد کنید.

مشکل اصلی کسانی که تصمیم به دانلود رایگان قالب صفحه فرود دارند تعداد زیادی ویروس و خطا در قالب های رایگان. بنابراین، پیدا کردن یک وب سایت مطمئن و قابل اعتماد بسیار مهم است. ما از شما دعوت می کنیم که از ما دیدن کنید، زیرا ما به دقت امنیت را نظارت می کنیم. علاوه بر این، ما شما را با گسترده ترین طیف لذت خواهیم برد قالب های HTMLتک صفحه ای که می توانید همین الان دانلود کنید!

با سلام خدمت خوانندگان عزیزم. امروز در مورد صحبت خواهیم کرد نکات فنی، که با آن می توانیم تبدیل فروش محصولات یا خدمات خود را افزایش دهیم. یکی از نکات مهمخوب فکر شده است صفحه فرودبا کالا به اصطلاح صفحه فرود که در مورد ایجاد آن بیشتر صحبت خواهیم کرد و کدهای صفحه آماده را دریافت خواهیم کرد.

صفحه فرود چیست؟ این صفحه ای است که افراد معمولاً پس از کلیک بر روی یک تبلیغ وارد آن می شوند. این برای یک پیشنهاد ایجاد شده است: محصول، خدمات یا اشتراک. یک صفحه فرود موثر سنگ بنای بازاریابی آنلاین موفق است. محصول ممکن است بهترین در بازار باشد، تبلیغات به کمال رسیده است، اما بدون یک صفحه فرود خوب، تلاش ها نتیجه 100٪ نمی دهد. به بازدیدکنندگان می‌گوید چه چیزی پیشنهاد می‌شود و چرا باید آن را بخواهند. احساس فوریت به تصمیم گیری سریع و انتقال کاربر به مقوله مشتری کمک می کند.

چگونه یک فرود ایجاد کنیم؟ این اشتباه است که باور کنیم پاسخ در توانایی حروفچینی نهفته است. یک صفحه فرود خوب نتیجه کار هماهنگ شده روی اهداف، متن، طراحی و کد است. صفحه فرود، که نمونه‌هایی از آن در زیر آمده است، به مبتدیان کمک می‌کند تا اصول کار با چیدمان را بیاموزند، اما جایگزین متون تبدیل و درک مخاطب هدف نمی‌شود. همچنین می توانید آنها را با استفاده از سازنده های مختلف صفحه فرود ایجاد کنید.

بنابراین قبل از ایجاد یک صفحه فرود، از خود بپرسید:

• یک فرد پس از ورود به صفحه فرود چه کاری انجام می دهد؟ آیا او چیزی خواهد خرید؟ فرم پر کن؟ مشترک شدن در خبرنامه؟ قبل از ردیابی نرخ تبدیل خود، اهداف روشنی را تعیین کنید.
• رقبای من چه کسانی هستند؟ در واقع، این سه سؤال است: چه کسانی، چقدر موفق هستند و چگونه می توان دستاوردهای آنها را به کار برد؟ تقلید صادقانه شکل چاپلوسی است. اگر رقبا کاری را انجام می دهند که کار می کند، آن را در سایت خود تکرار کنید.
• مخاطب من کیست؟ هر چه مخاطبان هدف و جایگاه خود را بهتر درک کنید، احتمال اینکه تلاش های شما به ثمر برسد بیشتر است.

همه باید ارائه شود اطلاعات لازم، اما به اندازه ای نیست که مشتری بالقوه را تحت تأثیر قرار دهد و دور کند.

قبل از شروع به کار، بیایید نگاهی گذرا به HTML و CSS بیندازیم. درک نحوه کار آنها به ایجاد یک فرود کمک می کند.

HTML یک زبان نشانه گذاری مرورگر برای رندر کردن وب سایت ها است. با استفاده از تگ های محصور شده نوشته شده است براکت های زاویه، که محتوا را تعریف می کنند.

تگ () باز می شود و () در اطراف چاشنی بسته می شود:

محتوا

برای سفارشی سازی نقطه، ویژگی ها بعد از نام اضافه می شوند:

محتوا

CSS - نحوه موقعیت یابی را تعیین می کند عناصر HTML. شامل انتخابگرها، خواص و مقادیر:

#انتخاب کننده (ویژگی: ارزش؛)

انتخابگر با نام یک تگ خاص در html مطابقت دارد. با تغییر مقادیر و افزودن خواص، تنظیم می شود ظاهر. شما می توانید صفحات مختلف را با اعمال سبک های مختلف CSS در یک HTML ایجاد کنید.

برای چیدمان سریع، از قالبی با طراحی مینیمال بر اساس بوت استرپ استفاده خواهیم کرد. این یک سیستم با انتخابگرهای خاص خود است که در سراسر جهان برای سرعت بخشیدن به چیدمان استفاده می شود.

متواضع به نظر می رسد

سایتی برای هر سلیقه ای از این ماهی در چند مرحله ایجاد می شود.

ساختار دایرکتوری در یک پوشه:

• index.html: این فایل اصلی است که ما در حال ویرایش آن خواهیم بود.
• /assets: در اینجا فایل های کمکی وجود دارد:
• /css: دایرکتوری شامل سبک های بوت استرپ و آیکون است. فایلی که باید ویرایش شود main.css است.
• /img: پوشه برای تصاویر وب سایت.
• /fonts: فونت های نماد.
• /js: فایل های جاوا اسکریپت بوت استرپ.

مرحله 1: استفاده از هدر

عنوان و زیرعنوان مکان‌های کلیدی برای کمک به بیان ارزش پیشنهاد به شیوه‌ای واضح هستند.

عنوان و نام سایت را تغییر دهید. در اینجا، توانایی حروفچینی مورد نیاز نیست - متن شما در مکان هایی نوشته می شود که با رنگ زرد بر روی صفحه نمایش مشخص شده است.

مرحله 2. کوتاهی خواهر تبدیل است. افزودن مزایا و نرخ ها

شما به 4 بخش نیاز دارید:

• مزایای؛
• نرخ ها
• بررسی ها
• فراخوانی برای اقدام.

بیایید بخش "اصلی" محتوای اصلی را طراحی کنیم که بخش های لازم را در آن قرار می دهیم:

…..
…..
…..
…..

به جای نقطه پر کنید.

بخش مزایا به این کد نیاز دارد:

مزایای
سریع

بطرزی قابل اعتماد

سد دیم نانومی

الیت، sed diam nonummy

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

محتوای بصری:

تا اینجا شلخته به نظر می رسد، اما دلیلی برای وحشت وجود ندارد، ما ادامه می دهیم.

نرخ ها را بنویسید محتوا مشابه مرحله اول تغییر می کند. توضیحات کلیبا کلاس "تعرفه" و سه تعرفه.

طرح های تعرفه ای

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam، quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

در هر ماه / هر نفر

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• لورم ایپسوم دولور


• 10 لورم ایپسوم

در هر ماه / هر نفر

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• لورم ایپسوم دولور


• 10 لورم ایپسوم

در هر ماه / هر نفر

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• لورم ایپسوم دولور


• 10 لورم ایپسوم

به نظر می رسد.

در حالی که ما علاقه ای به ظاهر صفحه فرود آینده نداریم - نمونه هایی از تغییر سبک را در زیر در نظر خواهیم گرفت.

مرحله 3: به سیگنال ها و فراخوان برای اقدام اعتماد کنید

استفاده از سیگنال های هدف به بازدیدکنندگان نشان می دهد که برند قابل اعتماد است. سیگنال ها را می توان دریافت کرد انواع مختلف، اما کلاسیک ها نظرات مشتریان هستند.

نظرات مشتریان

Lorem ipsum dolor sit amet، consectetur adipisicing elit، sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:

یک فراخوان برای اقدام تنظیم کنید.

هنگام سفارش امروز سود ببرید

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

بررسی ها به مشتریان بالقوه کمک می کند تا یک محصول را بخرند. برای وضوح، ما به آواتارها نیاز داریم، بنابراین بلافاصله آنها را در جای خود می نویسیم - زیر هر نقل قول.

نام مشتری.

مرحله 4: یکپارچه سازی شبکه و سازگاری با موبایل

برای پیاده سازی گرید به کانتینرهای Bootstrap نیاز داریم. مهم است که به یاد داشته باشید که تعداد کل قطعات ستون مجاز 12 است. کلاس عرض نمایش محتوا را تعریف می کند. مزیت این توری آماده این است که ظروف با در نظر گرفتن سازگاری طراحی شده اند و بلافاصله قابل اجرا هستند. دستگاه های تلفن همراه. توصیف همراه با جزئیاتدر سایت رسمی . شبکه به این شکل است.

محتویات "اصلی" در یک ظرف پیچیده می شود. برای این کار در قسمت بالای آن نوشته شده است:

… .

اگر می‌خواهید بلوک با تمام عرض صفحه مطابقت داشته باشد، ظرف داخل آن قرار داده می‌شود. در اینجا یک جامبوترون و یک فراخوان برای اقدام خواهد بود.

تمام عناصری که باید روی هم چیده شوند با جداکننده های خطوط پیچیده می شوند.

اکنون می توانیم عرض ستون ها را با تمرکز روی شبکه راه انداز تنظیم کنیم. پس از بسته بندی، پر کردن به لبه های صفحه نمایش نمی چسبد، تورفتگی های منظمی ظاهر می شود.

با استفاده از کلاس ستون col-lg-4 قیمت ها را در یک ردیف تنظیم کنید. در داخل ردیف های ردیف، دیگر نیازی به نوشتن div های جداگانه برای wrapping نیست، می توانید آنها را با موارد موجود که با فاصله از هم جدا شده اند ترکیب کنید.

بر اساس قیاس، ما ستون هایی را برای بخش بررسی و مزایا تنظیم می کنیم. اگر می خواهید عنصر را به کناری منتقل کنید، از کلاس ستون افست col-lg-offset-2 استفاده کنید. عدد در انتها تعیین می کند که چند ستون پایه جابجا شوند.

مرحله 5. فونت ها و نمادها

ما فونت ها را برای سرفصل های فونت گوگل پیاده سازی می کنیم. پس از انتخاب، تب import را باز کنید و داده ها را از آن در فایل main.css کپی کنید. همچنین انتخابگرهای عنوان را به فایل اضافه می کنیم که فونت جدید برای آن اعمال می شود.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* وارد کردن فونت برای سرفصل ها */
.navbar-brand,
h1،
h2،
h3،
h4،
h5،
h6(
font-family: "Roboto Condensed", sans-serif; /* خروجی فونت گوگل */
}

برای وضوح، مزایا عبارتند از یک کلاس با نام مشخص متن-مرکز و نمادهای FontAwesome از مجموعه بوت استرپ.

این کار آماده سازی را کامل می کند.

ما از سه نوع محبوب استفاده می کنیم: با پیشنهاد، با فرم و با شمارش معکوس. با تکمیل طرح بندی، قالب با افکت ها تکمیل می شود.

پس زمینه بدنه اصلی و padding را طوری تنظیم کنید که صفحه اول پوشانده شود.

جامبوترون (
پس زمینه: #f5f5f5 url(../img/fon.jpg) top center no-repeat;
حداکثر عرض: 100%
padding-top: 250px;
padding-bottom: 200px
text-align: center;
}

اندازه عنوان jumbotron را از h2 به h1 تغییر دهید. در مرحله بعد، استایل هایی را برای عناصری که باید تغییر کنند، تجویز می کنیم.

بیایید با آیکون ها شروع کنیم.

مزایای i(
رنگ: #cac4c4;
}

یک رنگ بعد از علامت پوند مشخص می شود. شما می توانید با استفاده از جداول رنگ html یا ویرایشگر تصویر گزینه خود را انتخاب کنید.

تورفتگی برای سرفصل های بخش

بخش h2 (
padding-top: 30px;
حاشیه پایین: 25 پیکسل.
}

ظاهر تعرفه ها را مرتب کردیم. برای راحتی، کلاس های خود را برای عناصری که می خواهیم به صورت نقطه ای انتخاب کنیم ایجاد می کنیم.

تعرفه شماره 1
$10

در هر ماه / هر نفر

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• لورم ایپسوم دولور


• 10 لورم ایپسوم

و CSS زیاد. بخش ها مسئول کدام مکان ها هستند، در نظرات نوشته شده است - /* بین اسلش ها با ستاره */

/* =========سبک های تعرفه======== */
/* فرم کلیتعرفه */
.pricing_item(
پس زمینه: #f2f2f2;
موقعیت: نسبی;
نمایش: -webkit-flex.
نمایش: فلکس;

flex-direction: ستون;

align-اقلام: کشش;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
بالشتک: 2em 3em;
حاشیه: 1 دقیقه
رنگ: #262b38;
مکان نما: پیش فرض;
سرریز: پنهان;

}
/* تغییر پس زمینه با کلیک */
.pricing_item:hover (
رنگ: #444;
پس زمینه: #daebef;
}
/* برچسب قیمت تکی در هر تعرفه */
.pricing_item:first-child .price (
پس زمینه: #9ba9b5;
}
.pricing_item:nth-child(2) .price (
پس زمینه: #1f6098;
}
/* در صفحات گسترده، بالشتک و برجسته کردن ستون وسط تعرفه */
صفحه رسانه @ و (عرض حداقل: 66.250 میلی متر) (
.pricing_item(
حاشیه: 1.5em0;
}
.ویژه(
z-index: 10;
حاشیه: 0;
اندازه فونت: 1.15em
}
}
/* سرتیتر */
.pricing_item h3(
اندازه فونت: 2em
حاشیه: 0.5em 0 0;
رنگ: #1d211f;
}
/* پشتوانه برچسب قیمت */
.قیمت(
اندازه فونت: 2em
فونت-وزن: پررنگ;
رنگ: #fff;
موقعیت: نسبی;
z-index: 100;
ارتفاع خط: 95 پیکسل؛
عرض: 100 پیکسل
ارتفاع: 100 پیکسل؛
حاشیه: 1.15em خودکار 1em;
شعاع مرزی: 50%
پس زمینه: #77a5cc;
-webkit-transition: رنگ 0.3s، پس زمینه 0.3s.
انتقال: رنگ 0.3 ثانیه، پس زمینه 0.3 ثانیه؛
}
/* واحد پول */
.واحد پول(
اندازه فونت: 0.5em
vertical-align: super;
}
/* تصحیح جمله */
.جمله(
فونت-وزن: پررنگ;
حاشیه: 0 0 1em 0;
بالشتک: 0 0 0.5em;
رنگ: #2a6496;
}
/* لیست */
.pricing_item ul (
اندازه فونت: 0.95em
حاشیه: 0;
بالشتک: 1.5em 0.5em 2.5em
text-align: left;
}
/* لیست موارد */
.pricing_item li(
بالشتک: 0.15em0;
}
/* دکمه سفارش تعرفه */
دکمه .pricing_item(
فونت-وزن: پررنگ;
حاشیه بالا: خودکار;
بالشتک: 1em 2em;
رنگ: #fff;
شعاع حاشیه: 5 پیکسل
پس زمینه: #428bca;
-webkit-transition: background-color 0.3s.
انتقال: رنگ پس زمینه 0.3 ثانیه.
}
/* تغییر رنگ با کلیک روی دکمه */
دکمه .pricing_item:hover,
دکمه .pricing_item:focus(
پس زمینه رنگ: #285e8e;
}
/* پس زمینه تعرفه*/
.bg-2 (
پس زمینه: #ddddd;
}

نتیجه

نظرات مشتریان بیایید به آنها نگاهی منظم داشته باشیم، مکان را مشخص کنیم.

/* ========= سبک های گواهینامه======== */
توصیفات (
بالشتک: 4em0;
text-align: center;
}
.testimonials .avatar img (
شعاع مرزی: 50%
شناور به سمت چپ؛
صفحه نمایش: درون خطی;
حاشیه سمت راست: 1em;
عرض: 65 پیکسل
ارتفاع: 65 پیکسل؛
حاشیه پایین: 30 پیکسل.
}
گواهینامه ها .avatar p(
text-align: left;
padding-top: 1em;
رنگ: #5d5d5d;
وزن قلم: 900
}

باقی مانده است که آخرین فراخوان و پاورقی را تزئین کنیم.

/* عمل */
.عمل(
پس زمینه: #476177;
حداقل ارتفاع: 180 پیکسل؛
عرض: 100%
بالشتک: 4em0;
text-align: center;
}
اکشن h2(
رنگ: #fff;
وزن قلم: 300

}
.actionp(
رنگ: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
اندازه فونت: 1.2em
}
.action .container(
حاشیه بالا: 3em;
}
/* پاورقی */
پاورقی (
پس زمینه: #333333;
بالشتک: 1em0;
text-align: right;
}
پاورقی p(
رنگ: #fff;
ارتفاع خط: 1;
تبدیل متن: بزرگ;
اندازه فونت: 0.7em
حاشیه بالا: 0.5em;
}

به دکمه فوتر کلاس بوت استرپ داخلی btn-default اختصاص داده شده است.

ما قالب را احیا می کنیم. ما پیمایش صاف و دکمه ها را برای بخش ها و همچنین انیمیشن متن را در صفحه اول اجرا خواهیم کرد.

برای اینکه انتقال ها کار کنند، بخشی از کلاس های بخش را با id - برای مزایا و تعرفه ها جایگزین می کنیم. و پیوندهایی به id روی دکمه ها می نویسیم. صفحه - چیزی که به چیزی که با یک نشانگر زرد برجسته شده است وصل شده است.

تورفتگی را برای دکمه ها تنظیم کنید - jbutton. پیمایش روی کلیک کار می کند، اما بسیار ناگهانی.

انتقال های صاف با استفاده از جاوا اسکریپت یا جی کوئری ایجاد می شوند. دومی به طور پیش فرض به قالب های بوت استرپ متصل است.

اکنون پیمایش صاف است.

افزودن انیمیشن به متن با استفاده از Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). آماده است متن باز، می توان از آن در هر وب سایتی استفاده کرد. فایل را از github در پوشه css قرار می دهیم و مسیر را می نویسیم.

ما افکت‌ها را در اینجا انتخاب می‌کنیم: https://daneden.github.io/animate.css/. ما fadeInDown را انتخاب کرده ایم. با کد زیر نوشته شده است:

اکنون، هنگامی که صفحه بارگذاری یا رفرش می شود، متن متحرک می شود. آماده.

هرچه فیلدهای فرم بیشتری به بازدیدکننده ارائه شود، احتمال پر کردن آنها کمتر است. فقط حداقل اطلاعات مورد نیاز را بخواهید.

جمع آوری شده بر اساس قیاس پس زمینه و رنگ را تغییر خواهیم داد. و البته یک فرم اضافه می کنیم.

بیایید با اختلاف منظر شروع کنیم.

پس زمینه jumbotron را به شفاف تغییر دهید:

پس زمینه: شفاف

اسکریپت را داخل هد قرار دهید:

$(window).scroll(function(e)(
اختلاف منظر ();
});
اختلاف منظر()(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

اولین خط در بدن ظرف اختلاف منظر است:

و در CSS رفتار آن به این صورت است:

bgparallax(
پس زمینه: url(/../img/fon.jpg) repeat;
موقعیت: ثابت؛
عرض: 100%
ارتفاع: 300%;
top:0;
چپ: 0;
z-index: -1;
}

Parallax آماده است. اما ایجاد تغییرات در کد و پس زمینه جدیدنیاز به تخصیص مجدد طرح رنگ دارد.

تاریک کردن منو:

navbar-default(
پس زمینه رنگ: #333;
حاشیه رنگ: #444;
رنگ: خاکستری تیره؛
شعاع مرزی: 0
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
رنگ: خاکستری تیره؛
رنگ پس زمینه: rgba (0، 0، 0، 0.5)؛
}

ما جمله را در jumbotron با یک جمله جدید جایگزین می کنیم - با کد فرم:

صفحه فرود بازدیدکنندگان را به مشتری تبدیل می کند
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy.

  
  

و ظاهر را تجویز کنید

/* فرم */
.headform-list(
list-style-type: هیچکدام;
ارتفاع خط: 26 پیکسل.
وزن فونت: 400
padding: 0px
حاشیه پایین: 40 پیکسل
}
.فرم سر(
سرریز: پنهان;
موقعیت: نسبی;
پس زمینه رنگ: rgba(0,0,0,.4);
بالشتک: 35px 40px;
شعاع حاشیه: 8 پیکسل
}
ورودی، دکمه، انتخاب، ناحیه متنی (
عرض: 100%
margin-bottom: 10px;
}
.headform-list li .fa (
موقعیت: مطلق;
بالا: 0px;
سمت چپ: 0px;
عرض: 42 پیکسل
اندازه فونت: 24px;
text-align: center;
}
.headform-list li (
موقعیت: نسبی;
حداقل ارتفاع: 38 پیکسل؛
padding-left: 62px;
حاشیه پایین: 20 پیکسل
}
.jumbotronp(
رنگ: #fff;
اندازه فونت: 16px;
سبک فونت: مورب;
}

متن جامبوترون هم اومد اینجا چون نیاز به تغییرات داشت.

ما در حال تغییر نرخ ها هستیم.

/* نمای کلی تعرفه */
.pricing_item(
پس زمینه رنگ: rgba(0,0,0,.4); /* خط تغییر کرد */
شعاع حاشیه: 4 پیکسل /* خط تغییر کرد */
موقعیت: نسبی;
نمایش: -webkit-flex.
نمایش: فلکس;
-webkit-flex-direction: ستون.
flex-direction: ستون;
-webkit-align-items: stretch;
align-اقلام: کشش;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
بالشتک: 2em 3em;
حاشیه: 1 دقیقه
رنگ: #f2f2f2; /* خط تغییر کرد */
مکان نما: پیش فرض;
سرریز: پنهان;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* تغییر پس زمینه با کلیک */
.pricing_item:hover (
رنگ: #444;
پس زمینه: #ddd; /* خط تغییر کرد */
}

حالا آنها به این شکل هستند - پس زمینه شفافو گوشه های گرد

قالب آماده است.

دوباره پر کردن جامبوترون را تغییر می‌دهیم و الگو را برای یک پس‌زمینه جدید با قیاس با الگوی قبلی دوباره رنگ می‌کنیم. ما اسکریپت شمارنده را وصل می کنیم:

HTML





زمان منتظر نمی ماند
Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam، quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat، vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum fazril delenit.

• 
  

  Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy.