ماژول کناری نمونه

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

صفحه نخست

صفحات

ویژگی ها

افزونه ها

آموزش ها

ماژول کناری نمونه

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

تایپوگرافی

توضیحات
دسته: Demo Info
بازدید: 1247

Drop Caps

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

مانند این عمل کنید: <span class="firstcharacter">ل</span>ورم ایپسوم

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

مانند این عمل کنید: <span class="firstcharacter2">ل</span>ورم ایپسوم


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

مانند این عمل کنید: <p class="drop_class">لورم ایپسوم</a>

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

مانند این عمل کنید: <p class="drop_class2">لورمایپسوم</a>


پوشش ویدئویی

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

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
<div class="video_overlay_wrap" style="max-height:700px;min-height:300px;width:1500px;background: url('/images/video_preload.jpg');">
<video muted autoplay="autoplay" loop="loop" src="/images/video.mp4"></video>
<div class="video_overlay_text_wrap">
<div class="video_overlay_text_wrap_inner">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
<div style="clear:both;height:0px;"></div>
</div>
</div>
</div>


آیکن های اجتماعی



برای استفاده از این آیکن ها باید ion آیکن فعال باشد.
<a href="/" class="social_icon ion-social-facebook"></a>
<a href="/" class="social_icon ion-social-twitter"></a>
<a href="/" class="social_icon ion-social-googleplus"></a>
<a href="/" class="social_icon ion-social-rss"></a>
<a href="/" class="social_icon ion-social-pinterest"></a>


اطلاع رسانی

این یک جعبه سبک دار است. از این استفاده کنید. <div class="black_box">متن شما اینجا قرار می گیرد</div>

این یک جعبه سبک دار است. از این استفاده کنید. <div class="gray_box">متن شما اینجا قرار می گیرد</div>

این یک جعبه سبک دار است. از این استفاده کنید. <div class="red_box">متن شما اینجا قرار می گیرد</div>

این یک جعبه سبک دار است. از این استفاده کنید. <div class="blue_box">متن شما اینجا قرار می گیرد</div>

این یک جعبه سبک دار است. از این استفاده کنید. <div class="green_box">متن شما اینجا قرار می گیرد</div>

این یک جعبه سبک دار است. از این استفاده کنید. <div class="yellow_box"> متن شما اینجا قرار می گیرد</div>

این یک جعبه سبک دار است. از این استفاده کنید. <div class="orange_box"> متن شما اینجا قرار می گیرد</div>


تصاویر

این یک تصویر است با کلاس "boxed" که روی آن اعمال شده:



این یک تصویر است با کلاس "boxed_white" که روی آن اعمال شده:



این یک تصویر است با کلاس "boxed_black" که روی آن اعمال شده:



این یک تصویر است با کلاس "padded" که روی آن اعمال شده:



این یک تصویر است با کلاس "full_width" که روی آن اعمال شده. این کار به طور اتئماتیک در پیکربندی قالب انجام می شود. حتما آموزشهای ورتکس را مطالعه کنید اینجاتا سایر کلاس های تصاویر را ببینید



سرتیتر

سرتیتر 1

سرتیتر 2

سرتیتر 3

سرتیتر 4

سرتیتر 5


Ion Icons

<div class="icon_outer_wrap">
<div class="icon_hover">
<a href="/" class="ion-link icon_element"></a>
</div>
<div class="icon_non_hover">
<span class="ion-headphone icon_element"></span>
</div>
</div>

اینجا را کلیک کنید تا نمونه های بیشتری از آیکن را ببینید.

تاریخ

آگوست
22
متن نمونه بالا زمان: آگوست 22, 2014 در 7:00عصر

<div class="date_outer_wrap">
<div class="date_wrapper">
<div class="date_top">
AUG
</div>
<div class="date_bottom">
22
</div>
</div>
<div class="date_text_wrap">
<span class="date_text1"><a href="/">Top Sample Text</a></span>
<span class="date_text2">When: August 22, 2014 at 7:00pm</span>
</div>
<div style="clear:both"></div>
</div>


پوشش

team3

Michelle Wright
مدیر برنامه نویسی

متن ساختگی
team3

Photos credits by Daniele Zedda, JohnONolan, Daniele Zedda, Daniele Zedda, AllansBrain, rolands.lakis
نمونه ای از کدی که در بالا استفاده شده. به اولین div که عدد "چهار" نوشته شده توجه کنید.شما می توانید از اعداد یک و دو و سه و چهار و پنج و شش استفاده کنید بستگی به تعداد اعضایی دارد که میخواهید در یک ردیف نشان دهید :

<div class="overlay_outer four">
<div class="overlay_inner">
<div class="overlay_hover_outer">
<div class="overlay_hover_inner">
<div class="overlay_socialicons">
<a class="overlay_facebook" href="https://www.facebook.com/shape5.templates" target="_blank"></a>
<a class="overlay_twitter" href="https://twitter.com/shape_5" target="_blank"></a>
</div>
</div>
<img src="http://www.shape5.com/demo/images/general/team/team1.jpg" alt="team1"/>
</div>
<br>
Mike Summerfield
<br>
<span style="color:#a8a8a8;">CEO/Owner</span>
<br> </div>
</div>


پوشش پخش ویدئو


بالا: Carl و Ellie
iphone vid


<div class="overlay_outer">
<div class="overlay_hover_outer">
<div class="overlay_hover_video">
<div class="overlay_centered">
<a href="http://www.youtube.com/v/VGiGHQeOqII" id="youtube" class="s5mb" title="Youtube.com Video">
<span class="ion-play ion-play-size"></span>
</a>
<div class="s5_multibox youtube">UP: Carl and Ellie </div>
</div>
</div>
<img src="http://www.shape5.com/demo/images/general/typography_vidplay.jpg" alt="iphone vid" />
</div>
</div>


زوم تصویر با موس اور


متن رویی


<div class="img_hover_zoom">
<div class="image_hover_zoom_text">
Overlay Text
</div>
<img src="http://www.shape5.com/demo/images/general/typography_vidplay.jpg" alt="" />
</div>


متفرقه

<a> با کلاس readon که اعمال شده

ادامه مطلب

<span> با کلاس uppercase که اعمال شده

uppercase

این یک نمونه نقل قول است. از این استفاده کنید: <blockquote><p>متن شما اینجا قرار می گیرد!</p></blockquote> برای ایجاد نقل قول.

این یک نمونه dive کد است. از این کد <div class="code">متن شما اینجا قرار می گیرد!</div>برای ساختن div کد استفاده کنید.

#s5_code { width: 30px; color: #fff; line-height: 45px; }

  1. این یک فهرست مرتب شده است
  2. لورم ایپسوم متن ساختگی با تولید سادگی
  3. لورم ایپسوم متن ساختگی با تولید سادگی
  4. لورم ایپسوم متن ساختگی با تولید سادگی

  • این یک فهرست نامرتب است
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی

  • این یک فهرست نامرتب با کلاس ul_arrow است.
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی

  • این یک فهرست نامرتب با کلاس ul_star است.
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی

  • این یکفهرست نامرتب با کلاس ul_bullet است.
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی


لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. , کلاس="ul_circle_content":

  • 01لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
  • 02لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
  • 03لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
  • لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.

<li><span class="circle_item">01</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.</li>

<li><span class="circle_item"><i class="ion-star"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.</li>


لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. کلاس="ul_numbers":

  • لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. <li class="li_number1">محتوای شما اینجا قرار می گیرد.</li>
  • لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. <li class="li_number2">محتوای شما اینجا قرار می گیرد.</li>
  • لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. <li class="li_number3">محتوای شما اینجا قرار می گیرد.</li>
  • لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. <li class="li_number4">محتوای شما اینجا قرار می گیرد.</li>


جدول قیمت

پایه
دلار49/در ماه
فضا و ترافیک نامحدود
99.9% آپتایم سرور
24/7 پشتیبانی مشتریان
30 روز گارانتی بازگشت وجه
انتخاب
استاندارد
دلار79/در ماه
فضا و ترافیک نامحدود
99.9% آپتایم سرور
24/7 پشتیبانی مشتریان
30 روز گارانتی بازگشت وجه
دامنه رایگان
پشتیبانی اختصاصی
انتخاب
حرفه ای
دلار99/در ماه
فضا و ترافیک نامحدود
99.9% آپتایم سرور
24/7 پشتیبانی مشتریان
30 روز گارانتی بازگشت وجه
انتخاب

برای استفاده از جدول قیمت می توانید از کلاس های "s5_pricetable_1" تا"s5_pricetable_7" استفاده کنید.



<div class="s5_pricetable_3">

<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Basic</div>
<div class="s5_price_wrap">
<span class="dollarsign">$</span><span class="price">49</span><span class="month">/per month</span>
</div>
<div class="s5_options">
<div class="s5_option">
Unlimited Space &amp; Traffic
</div>
<div class="s5_option">
99.9% Server Uptime
</div>
<div class="s5_option">
24/7 Customer Care
</div>
<div class="s5_option">
30 Days Money Back
</div>
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column recommended">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Standard</div>
<div class="s5_price_wrap">
<span class="dollarsign">$</span><span class="price">79</span><span class="month">/per month</span>
</div>
<div class="s5_options">
<div class="s5_option">
Unlimited Space &amp; Traffic
</div>
<div class="s5_option">
99.9% Server Uptime
</div>
<div class="s5_option">
24/7 Customer Care
</div>
<div class="s5_option">
30 Days Money Back
</div>
<div class="s5_option">
FREE Domain Name
</div>
<div class="s5_option">
Personal Concierge
</div>
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Premium</div>
<div class="s5_price_wrap">
<span class="dollarsign">$</span><span class="price">99</span><span class="month">/per month</span>
</div>
<div class="s5_options">
<div class="s5_option">
Unlimited Space &amp; Traffic
</div>
<div class="s5_option">
99.9% Server Uptime
</div>
<div class="s5_option">
24/7 Customer Care
</div>
<div class="s5_option">
30 Days Money Back
</div>
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>


</div>
</div>

<div style="clear:both;"></div>
</div>


ویدئوهای واکنشگرای YouTube و Vimeo

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

  • fa-IR
  • English (UK)
  • شما اینجا هستید:  
  • Home .
  • ویژگی ها .
  • ادامه ویژگی های ورتکس .
  • تایپوگرافی