سيرة ذاتية من صفحة واحدة للويب بالعربية والإنجليزية

لقد انتهيت من عمل النسخة العربية للسيرة الذاتية والذي يعتمد على النسخة الإنجليزية من مدونة CSS-TRICKS وهذا رابط تحميل النسخة الإنجليزية وأخر للمعاينة.

بالنسبة للنسخة العربية فتستطيع معاينتها من هنا. وهذا هو رابط التحميل.

كل ما قمت به في النسخة العربية هو تعديل كود CSS وذلك بتغير اتجاه النصوص وتغير بعض القيم لكي تعرض المحتويات بالشكل المطلوب.

كود CSS للنسخة الإنجليزية.

 * { margin: 0; padding: 0; }
        body { font: 16px Helvetica, Sans-Serif; line-height: 24px; background: url(images/noise.jpg); }
        .clear { clear: both; }
        #page-wrap { width: 800px; margin: 40px auto 60px; }
        #pic { float: right; margin: -30px 0 0 0; }
        h1 { margin: 0 0 16px 0; padding: 0 0 16px 0; font-size: 42px; font-weight: bold; letter-spacing: -2px; border-bottom: 1px solid #999; }
        h2 { font-size: 20px; margin: 0 0 6px 0; position: relative; }
        h2 span { position: absolute; bottom: 0; right: 0; font-style: italic; font-family: Georgia, Serif; font-size: 16px; color: #999; font-weight: normal; }
        p { margin: 0 0 16px 0; }
        a { color: #999; text-decoration: none; border-bottom: 1px dotted #999; }
        a:hover { border-bottom-style: solid; color: black; }
        ul { margin: 0 0 32px 17px; }
        #objective { width: 500px; float: left; }
        #objective p { font-family: Georgia, Serif; font-style: italic; color: #666; }
        dt { font-style: italic; font-weight: bold; font-size: 18px; text-align: right; padding: 0 26px 0 0; width: 150px; float: left; height: 100px; border-right: 1px solid #999;  }
        dd { width: 600px; float: right; }
        dd.clear { float: none; margin: 0; height: 15px; }

كود CSS للنسخة العربية.

* { margin: 0; padding: 0; }
        body { font: 16px Verdana, Helvetica, Arial, sans-serif; line-height: 24px; background: url(noise.jpg);text-align: right; direction: rtl; }
        .clear { clear: both; }
        #page-wrap { width: 800px; margin: 40px auto 60px;  }
        #pic { float: left; margin: -30px 0 0 0; }
        h1 { margin: 0 0 16px 0; padding: 0 0 16px 0; font-size: 42px; font-weight: bold; border-bottom: 1px solid #999;  }
        h2 { font-size: 20px; margin: 0 0 6px 0; position: ; }
        h2 span { position: relative; bottom: 0; right: 10px; font-style: italic; font-family: Georgia, Serif; font-size: 16px; color: #999; font-weight: normal; }
        p { margin: 0 0 16px 0; }
        a { color: #999; text-decoration: none; border-bottom: 1px dotted #999; }
        a:hover { border-bottom-style: solid; color: black; }
        ul { margin: 0 17px 32px 0; }
        #objective { width: 500px; float: left; }
        #objective p { font-family: Verdana, Helvetica, Arial, sans-serif; font-style: italic; color: #666; }
        dt { font-style: italic; font-weight: bold; font-size: 18px; text-align: left; padding: 0 0 0 20px; width: 100px; float: right; height: 100px; border-left: 1px solid #999;  }
        dd { width: 600px; float: right; padding: 0 20px 0 0; }
        dd.clear { float: none; margin: 0; height: 15px; }

كود HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar-sa" lang="ar-sa">

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>سيرة ذاتية من صفحة واحدة</title>

     <style type="text/css">
        * { margin: 0; padding: 0; }
        body { font: 16px Verdana, Helvetica, Arial, sans-serif; line-height: 24px; background: url(noise.jpg);text-align: right; direction: rtl; }
        .clear { clear: both; }
        #page-wrap { width: 800px; margin: 40px auto 60px;  }
        #pic { float: left; margin: -30px 0 0 0; }
        h1 { margin: 0 0 16px 0; padding: 0 0 16px 0; font-size: 42px; font-weight: bold; border-bottom: 1px solid #999;  }
        h2 { font-size: 20px; margin: 0 0 6px 0; position: ; }
        h2 span { position: relative; bottom: 0; right: 10px; font-style: italic; font-family: Georgia, Serif; font-size: 16px; color: #999; font-weight: normal; }
        p { margin: 0 0 16px 0; }
        a { color: #999; text-decoration: none; border-bottom: 1px dotted #999; }
        a:hover { border-bottom-style: solid; color: black; }
        ul { margin: 0 17px 32px 0; }
        #objective { width: 500px; float: left; }
        #objective p { font-family: Verdana, Helvetica, Arial, sans-serif; font-style: italic; color: #666; }
        dt { font-style: italic; font-weight: bold; font-size: 18px; text-align: left; padding: 0 0 0 20px; width: 100px; float: right; height: 100px; border-left: 1px solid #999;  }
        dd { width: 600px; float: right; padding: 0 20px 0 0; }
        dd.clear { float: none; margin: 0; height: 15px; }
     </style>
</head>

<body>

    <div id="page-wrap">

        <img src="cthulu.png" alt="Photo of Cthulu" id="pic" />

        <div id="contact-info" class="vcard">

            <!-- Microformats! -->

            <h1 class="fn">اسمك هنا!</h1>

            <p>
                جوال: <span class="tel">0561234567</span><br />
                البريد الإلكتروني: <a class="email" href="mailto:someone@somewhere.com">someone@somewhere.com</a>

            </p>
        </div>

        <div id="objective">
            <p>
                هذا نموذج لسيرة ذاتية. تقوم هنا بكتابة بعض الجمل التي تعبر عنك! لم يخطر ببالي شئ
				استطيع الكتابة عنه هنا لكن تستطيع الإجتهاد وكتابة ماتريد مع مراعاة أنك تقوم بكتابة سيرة ذاتية
				وليست قصة حياتك! هذا نموذج لسيرة ذاتية. تقوم هنا بكتابة بعض الجمل التي تعبر عنك! لم يخطر ببالي شئ
				استطيع الكتابة عنه هنا لكن تستطيع الإجتهاد وكتابة ماتريد مع مراعاة أنك تقوم بكتابة سيرة ذاتية
				وليست قصة حياتك!
            </p>
        </div>

        <div class="clear"></div>

        <dl>

            <dd class="clear"></dd>

            <dt>التعليم</dt>
            <dd>
                <h2>جامعة الملك فهد للبترول والمعادن</h2>
                <p><strong>التخصص:</strong> هندسة برمجيات<br />
                   <strong>المعدل:</strong> 4.0/4.0</p>

            </dd>

            <dd class="clear"></dd>

            <dt>المهارات</dt>
            <dd>
                <h2>المهارات المكتبية</h2>
                <p>مدير مكتب، منسق أحداث، منسق سفر، ترتيب وتصنيف الملفات</p>

                <h2>برامج الحاسوب</h2>

                <p>حزمة برامج مايكروسوفت المكتبية، حزمة برامج أبل المكتبية، مجموعة أدوبي للتصميم</p>
            </dd>

            <dd class="clear"></dd>

            <dt>الخبرات</dt>
            <dd>
                <h2>الجامعة المحلية <span>مساعد إداري، السعودية من 2007 إلى 2009	</span></h2>
                <ul>

                    <li>الوصف الأول للعمل الجيد الذي كنت فيه</li>
                    <li>الوصف الثاني للعمل الجيد الذي كنت فيه</li>
                    <li>الوصف الثالث للعمل الجيد الذي كنت فيه</li>
                </ul>

                <h2>الجامعة الخارجية <span>مدير مكتب، الإمارات من 2005 إلى 2007</span></h2>
                <ul>

                    <li>الوصف الأول للعمل الجيد الذي كنت فيه</li>
                    <li>الوصف الثاني للعمل الجيد الذي كنت فيه</li>
                    <li>الوصف الثالث للعمل الجيد الذي كنت فيه</li>
                </ul>
            </dd>

            <dd class="clear"></dd>

            <dt>الهوايات</dt>

            <dd>الغوص، القفز من الجسور، تسلق الجبال</dd>

            <dd class="clear"></dd>

            <dt>مراجع</dt>
            <dd>منوفرة عند الطلب</dd>

            <dd class="clear"></dd>
        </dl>

        <div class="clear"></div>

    </div>

</body>

</html>
2 يناير, 2010 | Filed Under Code, Codes, Project, Projects, سيرة ذاتية, مجاني, نموذج, ويب | Comments Off 

سيرة ذاتية من صفحة واحدة للويب

قام Chris Coyier  الكاتب في مدونة CSS-TRICKS بعمل سيرة ذاتية رائعة على هيئة صفحة ويب. أعجبتني وأحببت مشاركتكم. سأقوم بعمل نسخة عربية غداً وسأضعها هنا بإذن الله. هذه رابط للمعاينة وآخر للتحميل.

1 يناير, 2010 | Filed Under Code, Codes, سيرة ذاتية, مجاني, نموذج, ويب | Comments Off