Skip to content

Instantly share code, notes, and snippets.

@baghayi

baghayi/html5-css3

Created April 27, 2012 15:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save baghayi/2510243 to your computer and use it in GitHub Desktop.
Save baghayi/2510243 to your computer and use it in GitHub Desktop.
Download ZIP
An Edited Page! :)
Raw
html5-css3
<!doctype html>
<!--[if lt IE 7]> <html dir="rtl" class="no-js lt-ie9 lt-ie8 lt-ie7" lang="fa"> <![endif]-->
<!--[if IE 7]> <html dir="rtl" class="no-js lt-ie9 lt-ie8" lang="fa"> <![endif]-->
<!--[if IE 8]> <html dir="rtl" class="no-js lt-ie9" lang="fa"> <![endif]-->
<!--[if gt IE 8]><!--> <html dir="rtl" class="no-js" lang="fa"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="description" content="با خرید کتاب آموزش HTML5 و CSS در قالب پروژه می توانید طراحی سایت را بر اساس آخرین استانداردها فرا بگیرید و سایت هایی زیبا خلق کنید." />
<meta name="keywords" content="آموزش طراحی, HTML5, CSS3, کتاب HTML5, کتاب CSS3, امیرعباس عبدالعلی" />
<title>آموزش HTML5 و CSS3 در قالب پروژه - کتاب آموزشی طراحی سایت</title>
<meta name="description" content="">
<link rel="stylesheet" href="http://books.wedesign.ir/css/style.css">
<script src="http://books.wedesign.ir/js/libs/modernizr-2.5.3.min.js"></script>
<script>
window.onload = function()
{
var intro = document.getElementById('book-introduction'),
bookContent = document.getElementById('book-content'),
scrollY = window.scrollY;
/**
* set the hight of the `book-introduction` to be equal to the size of the availabel hight
*/
// intro.style.height = '900px';
if(scrollY === 0)
{
bookContent.style.display = 'none';
}
document.getElementById('goDown').onclick = showDownSection;
function showDownSection()
{
var bookContent = document.getElementById('book-content');
bookContent.style.display = '';
document.getElementById('goDown').style.display = 'none';
}
document.onkeydown = function (e)
{
if(e.keyCode === 40)
{
document.getElementById('book-content').style.display = '';
document.getElementById('goDown').style.display = 'none';
}
}
}
</script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<header class="header">
<div class="header-inner">
<h1><a href="http://www.wedesign.ir">وی دیزاین</a></h1>
</div>
</header>
<div role="main" class="main">
<section class="book-introduction" id="book-introduction">
<figure><img alt="HTML5-css3-book-cover" src="http://books.wedesign.ir/img/book-cover.png" width="450" height="383" /></figure>
<h1>آموزش <span>HTML5</span> و <span>CSS3</span> در قالب پروژه</h1>
<div class="meta-info">
<p>نویسندگان: الکسیس گلدستین، لوییس لازاریس، استلا ویل</p>
<p>مترجم: امیرعباس عبدالعلی</p>
<a href="#" class="download-book">دانلود 90 صفحه از کتاب با فرمت PDF</a><br />
<a href="#" class="buy-book">خرید پستی کتاب چاپی در 360 صفحه</a>
<br /><a style="position: absolute; bottom: 0; left: auto; margin-bottom: 20px;" href="#goDownPage" class="buy-book" id="goDown">بیشتر بدانید!</a>
</section>
<div id="book-content">
<a name="goDownPage"></a>
<section class="book-content">
<h1>در این کتاب می آموزید</h1>
<p>در این کتاب یک پروژه کامل از آغاز تا پایان با استفاده از HTML5 و CSS3 پیاده سازی می شود. درصورت تمایل می توانید با مراجعه به آدرس <a href="http://html5herald.com/">www.html5herald.com</a> نمونه ی کامل شده طرح را ببینید.
<div class="book-highlights">
<ul>
<li class="first-point"><figure><img class="video" alt="html5-embed-video" src="http://books.wedesign.ir/img/video.jpg" width="120" height="120" /></figure><h2>1. پشتیبانی پیش فرض از فیلم</h2><p>حال به راحتی می توانید فرمت فلش را کنار بگذارید و از فرمت های تصویری استاندارد و باکیفیت در صفحات خود استفاده کنید</p></li>
<li class="second-point"><figure><img class="font-embed" alt="html5-font-embed" src="http://books.wedesign.ir/img/fonts.jpg" width="120" height="120" /></figure><h2>2. پیوست فونت به صفحه ی وب</h2><p>اکنون می توانید از هر فونتی که با طرحتان همخوانی دارد در وب استفاده کنید و دیگر به فونت های موجود بر روی سیستم کاربر متکی نیستید.</p></li>
<li class="third-point"><figure><img class="css3" alt="css3" src="http://books.wedesign.ir/img/css3.jpg" width="120" height="120" /></figure><h2>3. استفاده از تمامی قدرت CSS3</h2><p>با کمک گرفتن از قدرت CSS3 قادر خواهید بود جلوه های بسیار زیبا و حرفه ای خلق کنید. این جلوه ها بسیار سبک و سریع اند و به سیستم کاربر فشار نمی آورند.</p></li>
<li class="forth-point"><figure><img class="map" alt="html5-map" src="http://books.wedesign.ir/img/map.jpg" width="120" height="120" /></figure><h2>4. تعیین موقعیت مکانی و ذخیره سازی محلی</h2><p>با کمک API تعیین موقعیت مکانی می توانید موقعیت کاربر را شناسایی کنید و با ذخیره سازی محلی می توانید سایت را در زمانی که دسترسی به اینترنت وجود ندارد، همچنان در اختیار کاربر قرار دهید.</p></li>
<li class="fifth-point"><figure><img class="forms" alt="html5-forms" src="http://books.wedesign.ir/img/forms.jpg" width="120" height="120" /></figure><h2>5. ساخت فرم های بهتر با HTML5</h2><p>با HTML5 می توانید فرم های هوشمندی طراحی کنید که داده وارد شده توسط کاربر را کنترل می کنند و در صورتی که داده معتبر نباشد، این مورد را به کاربر اطلاع می دهند.</p></li>
</ul>
</div>
<figure class="site-preview"><img alt="site-preview" src="http://books.wedesign.ir/img/html5herald.jpg" width="300" height="763" /></figure>
</section>
<section class="authors-translator">
<h1>معرفی مترجم و نویسندگان کتاب</h1>
<div class="wrapper">
<div class="translator">
<figure><img src="http://books.wedesign.ir/img/louis.jpg" width="100" height="89" /></figure>
<h2>امیرعباس عبدالعلی</h2>
<p>او از سال 1383 فعالیت خود را در وب شروع کرده و از سال 1385 نیز به طور جدی طراحی وب سایت را دنبال می کند. در سال 1386 اولین کتاب او با نام <a href="http://www.naghoospress.ir/bookview.aspx?bookid=1485997">101 نکته و ترفند برای استفاده از CSS در طراحی وب</a> توسط انتشارات ناقوس به چاپ رسید که تاکنون این کتاب 3 بار تجدید چاپ شده است. در او زمانی که به طراحی مشغول نیست، در شبکه های اجتماعی تویتر، فیس بوک و گوگل پلاس، اخبار و ترفند های طراحی وب را به اشتراک می گذارد. </p><p>در صورت تمایل می توانید از طریق این شبکه های اجتماعی با مترجم کتاب در تماس باشید.</p>
<ul>
<li class="twitter"><a href="http://twitter.com/amir_abbas"><img src="http://books.wedesign.ir/img/twitter.png" /></a></li>
<li class="gplus"><a href="https://plus.google.com/103026222158064715137"><img src="http://books.wedesign.ir/img/gplus.png" /></a></li>
<li class="facebook"><a href="http://www.facebook.com/abdolali"><img src="http://books.wedesign.ir/img/facebook.png" /></a></li>
<li class="linkedin"><a href="http://www.linkedin.com/pub/amir-abbas-abdolali/37/196/337"><img src="http://books.wedesign.ir/img/linkedin.png" /></a></li>
</ul>
</div>
<div class="authors">
<ul>
<li><figure><img alt="alexis " src="http://books.wedesign.ir/img/alexis.jpg" width="100" height="89" /></figure><h2>الکسیس گلدستین</h2><p>او در دوران دبیرستان در دهه نود HTML را فرا گرفت و اکنون مدرس و سازمان دهنده Girl Develop it است. این سازمان کلاسهای برنامه نویسی ارزان قیمت برای بانوان فراهم می کند</p></li>
<li><figure class="even"><img alt="html5-map" src="http://books.wedesign.ir/img/louis.jpg" width="100" height="89" /></figure><h2>لوییس لازاریس</h2><p>او طراح است و در تورنتوی کانادا زندگی می کند. او طراحی را از روزهای آغازین وب شروع کرده مقالات زیادی برای وب سایت ها. او همچنین در Impressive Webs نیز می نویسد.</p></li>
<li><figure><img alt="html5-forms" src="http://books.wedesign.ir/img/estelle.jpg" width="100" height="89" /></figure><h2>استلا ویل</h2><p>او از سال 1999 به طراحی اینترفیس وب اشتغال دارد و دو وبلاگ را داره می کند که میلیون ها بازدید کننده دارند. او درباره HTML5, CSS3, JS در سراسر آمریکا سمینار برگزار می کند.</p></li>
</ul>
</div>
</div>
</section>
<section class="testimonials">
<h1>نظر طراحان و برنامه نویسان</h1>
<div class="row">
<article>
<figure><img src="http://placehold.it/80/" width="80" height="80" /></figure>
<h3>آقای طراح</h3>
<span><a href="http://www.wedesign.ir/">example.com</a></span>
<p>او طراح است و در تورنتوی کانادا زندگی می کند. او طراحی را از روزهای آغازین وب شروع کرده مقالات زیادی برای وب سایت ها. او همچنین در Impressive Webs نیز می نویسد</p>
</article>
<article>
<figure><img src="http://placehold.it/80/" width="80" height="80" /></figure>
<h3>آقای طراح</h3>
<span><a href="http://www.wedesign.ir/">example.com</a></span>
<p>او طراح است و در تورنتوی کانادا زندگی می کند. او طراحی را از روزهای آغازین وب شروع کرده مقالات زیادی برای وب سایت ها. او همچنین در Impressive Webs نیز می نویسد</p>
</article>
<article>
<figure><img src="http://placehold.it/80/" width="80" height="80" /></figure>
<h3>آقای طراح</h3>
<span><a href="http://www.wedesign.ir/">example.com</a></span>
<p>او طراح است و در تورنتوی کانادا زندگی می کند. او طراحی را از روزهای آغازین وب شروع کرده مقالات زیادی برای وب سایت ها. او همچنین در Impressive Webs نیز می نویسد</p>
</article>
<article class="last">
<figure><img src="http://placehold.it/80/" width="80" height="80" /></figure>
<h3>آقای طراح</h3>
<span><a href="http://www.wedesign.ir/">example.com</a></span>
<p>او طراح است و در تورنتوی کانادا زندگی می کند. او طراحی را از روزهای آغازین وب شروع کرده مقالات زیادی برای وب سایت ها. او همچنین در Impressive Webs نیز می نویسد</p>
</article>
</div>
<div class="row">
<article>
<figure><img src="http://placehold.it/80/" width="80" height="80" /></figure>
<h3>آقای طراح</h3>
<span><a href="http://www.wedesign.ir/">example.com</a></span>
<p>او طراح است و در تورنتوی کانادا زندگی می کند. او طراحی را از روزهای آغازین وب شروع کرده مقالات زیادی برای وب سایت ها. او همچنین در Impressive Webs نیز می نویسد</p>
</article>
<article>
<figure><img src="http://placehold.it/80/" width="80" height="80" /></figure>
<h3>آقای طراح</h3>
<span><a href="http://www.wedesign.ir/">example.com</a></span>
<p>او طراح است و در تورنتوی کانادا زندگی می کند. او طراحی را از روزهای آغازین وب شروع کرده مقالات زیادی برای وب سایت ها. او همچنین در Impressive Webs نیز می نویسد</p>
</article>
<article>
<figure><img src="http://placehold.it/80/" width="80" height="80" /></figure>
<h3>آقای طراح</h3>
<span><a href="http://www.wedesign.ir/">example.com</a></span>
<p>او طراح است و در تورنتوی کانادا زندگی می کند. او طراحی را از روزهای آغازین وب شروع کرده مقالات زیادی برای وب سایت ها. او همچنین در Impressive Webs نیز می نویسد</p>
</article>
<article class="last">
<figure><img src="http://placehold.it/80/" width="80" height="80" /></figure>
<h3>آقای طراح</h3>
<span><a href="http://www.wedesign.ir/">example.com</a></span>
<p>او طراح است و در تورنتوی کانادا زندگی می کند. او طراحی را از روزهای آغازین وب شروع کرده مقالات زیادی برای وب سایت ها. او همچنین در Impressive Webs نیز می نویسد</p>
</article>
</div>
</section>
</div>
</div>
<footer class="footer">
</footer>
</div> <!-- book introduction -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://books.wedesign.ir/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<script src="http://books.wedesign.ir/js/plugins.js"></script>
<script src="http://books.wedesign.ir/js/script.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment