السلام عليكم مدربينى الاعزاء
@yasserzhn
@Alhakem
الطلبة الاعزاء ولا اقول المطورين المحترفين
والله بحبكم جميعا ونفسى اخدكم فى حضنى
المهم تحية لكل الاكاديمية
عندى سؤال
عايز اظبط المحتوى فى المنتصف كما فى ال سكرين
سكرين للموقع المطلوب تكويده
الموقع المطلوب
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PSD2Html[1]</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--Start Header-->
<div class="Header">
<div class="Slider">
<div class="Container">
<div class="intro">
<h2>Web & Graphic Designer</h2>
<button>Learn More</button>
</div>
</div>
</div>
<div class="Navbar">
<div class="Container">
<h2>EL<span>TAREK</span></h2>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Test emonials</a></li>
<li><a href="#">Portofolio</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
</div>
<!--End Header-->
<!--Start Features-->
<div class="features">
<div class="container">
<div class="feat">
<h2>Values</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias porro illo quidem, quae fugiat at autem eum. Qui, fugit natus placeat suscipit atque est ea?</p>
</div>
<div class="feat">
<h2>Goals</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias porro illo quidem, quae fugiat at autem eum. Qui, fugit natus placeat suscipit atque est ea?</p>
</div>
<div class="feat">
<h2>Hobbies</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias porro illo quidem, quae fugiat at autem eum. Qui, fugit natus placeat suscipit atque est ea?</p>
</div>
</div>
</div>
<!--End Features-->
<!--start about me-->
<div class="about-me">
<div class="container">
<div class="image">
<img src="about.jfif" alt="test">
</div>
<div class="info">
<h2>About me</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat exercitationem neque beatae repellat assumenda eligendi reprehenderit totam odit labore quia. Omnis fugit sapiente facilis expedita sunt tempore, doloremque cupiditate velit? Quisquam temporibus et enim eos!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora corrupti quidem quas ea optio veniam nulla pariatur tenetur dolorem voluptatibus?</p>
<div class="hobbies">
<!--start about box content-->
<div class="content">
<!--start icon div-->
<div class="icon">
<img src="home.png">
</div>
<!--end icon div-->
<!--start text div-->
<div class="text">
<h3>Web Design</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, magnam sint?</p>
</div>
<!--end text div-->
</div>
<!--end about box content-->
<!--start about box content-->
<div class="content">
<!--start icon div-->
<div class="icon">
<img src="pen.png">
</div>
<!--end icon div-->
<!--start text div-->
<div class="text">
<h3>Graphic Design</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, magnam sint?</p>
</div>
<!--end text div-->
</div>
<!--end about box content-->
<!--start about box content-->
<div class="content">
<!--start icon div-->
<div class="icon">
<img src="bag.png">
</div>
<!--end icon div-->
<!--start text div-->
<div class="text">
<h3>Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, magnam sint?</p>
</div>
<!--end text div-->
</div>
<!--end about box content-->
<!--start about box content-->
<div class="content">
<!--start icon div-->
<div class="icon">
<img src="earth.jfif">
</div>
<!--end icon div-->
<!--start text div-->
<div class="text">
<h3>SEO</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, magnam sint?</p>
</div>
<!--end text div-->
</div>
<!--end about box content-->
</div>
</div>
</div>
</div>
<!--end about me-->
<!--start my skills-->
<div class="my-skills">
<div class="container">
<div class="skills">
<h2>My Skills</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora corrupti quidem quas ea optio veniam nulla pariatur tenetur dolorem voluptatibus?dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora corrupti quidem quas ea optio veniam nulla pariatur tenetur dolorem voluptatibus?dolor sit amet .</p>
<button class="my-button">Contact My</button>
</div>
<div class="progress">
<div class="technique">
<h3>Html/Css</h3>
<div>
<span style="width: 83%">83% </span>
</div>
</div>
<div class="technique">
<h3>Php/MySQL</h3>
<div>
<span style="width: 88%">88% </span>
</div>
</div>
<div class="technique">
<h3>Wordpress</h3>
<div>
<span style="width: 90%">90% </span>
</div>
</div>
<div class="technique">
<h3>Graphic Design</h3>
<div>
<span style="width: 70%">70% </span>
</div>
</div>
</div>
</div>
</div>
<!--end my skills-->
<!--start resume-->
<div class="resume">
<div class="container">
<h2>Resume</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid, facere quidem! Reiciendis optio libero facilis molestias repudiandae fugiat, provident velit officiis, modi, ut sit cupiditate.</p>
<button class="my-button">Download Resume</button>
</div>
</div>
<!--end resume-->
<!--start my Education-->
<div class="my-education">
<div class="container">
<div class="main">
<h2>My Education</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora corrupti quidem quas ea optio veniam nulla pariatur tenetur dolorem voluptatibus?dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora corrupti quidem quas ea optio veniam nulla pariatur tenetur dolorem voluptatibus?dolor sit amet .</p>
</div>
<div class="exp">
<div class="certificate">
<h3>Graphic Design Diploma</h3>
<span><strong>Reeves College</strong>/ June 2008 / May 2010</span>
<span>4.0 GPA</span>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quos minus facilis rerum in commodi sed quisquam sapiente sequi ipsam. Rerum odit ex excepturi vitae et sunt. Eius molestias vitae doloribus adipisci assumenda vero optio.</p>
</div>
<div class="certificate">
<h3>CIT Diploma</h3>
<span><strong>Lithbridge College</strong>/ June 2006 / May 2008</span>
<span>1 Year</span>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quos minus facilis rerum in commodi sed quisquam sapiente sequi ipsam. Rerum odit ex excepturi vitae et sunt. Eius molestias vitae doloribus adipisci assumenda vero optio.</p>
</div>
</div>
<div class="clearfix"></div>
<hr>
<div class="main">
<h2>Work Experience</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora corrupti quidem quas ea optio veniam nulla pariatur tenetur dolorem voluptatibus?dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora corrupti quidem quas ea optio veniam nulla pariatur tenetur dolorem voluptatibus?dolor sit amet .</p>
</div>
<div class="exp">
<div class="certificate">
<h3>Lead Web Designer</h3>
<span><strong>ABC Company Egypt</strong>/ June 2008</span>
<span>1 Year</span>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quos minus facilis rerum in commodi sed quisquam sapiente sequi ipsam. Rerum odit ex excepturi vitae et sunt. Eius molestias vitae doloribus adipisci assumenda vero optio.</p>
</div>
<div class="certificate">
<h3>Junior Designer</h3>
<span><strong>CDE Company</strong>May 2010</span>
<span>1 Year</span>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quos minus facilis rerum in commodi sed quisquam sapiente sequi ipsam. Rerum odit ex excepturi vitae et sunt. Eius molestias vitae doloribus adipisci assumenda vero optio.</p>
</div>
<div class="certificate">
<h3>Web Developer</h3>
<span><strong>My Company</strong>May 2013</span>
<span>2 Year</span>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quos minus facilis rerum in commodi sed quisquam sapiente sequi ipsam. Rerum odit ex excepturi vitae et sunt. Eius molestias vitae doloribus adipisci assumenda vero optio.</p>
</div>
</div>
</div>
</div>
<!--end my Education-->
<!--start testimonials-->
<div class="testimonials">
<div class="container">
<q>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus dignissimos fuga necessitatibus dolorum eligendi quas dolores optio rerum id facilis in, eveniet repellat sapiente odio obcaecati ipsum dolor. Tempora voluptatibus, veritatis incidunt voluptatem dignissimos assumenda et veniam amet ad quia! Aut necessitatibus omnis qui eligendi Aut necessitatibus omnis qui eligendiAut necessitatibus omnis qui eligendi </q>
<h3>Hassan Zohdy</h3>
<ul>
<li></li>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!--end testimonials-->
<!--start portfolio-->
<div class="portfolio">
<div class="container">
<h2>Portfolio</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla incidunt quas neque quo quasi, numquam alias magni dolor non molestiae? Officiis accusantium consequuntur vero mollitia distinctio beatae nisi dolores minima? Nihil ipsam mollitia quibusdam reprehenderit!</p>
<div class="our-work">
<div><img src="ima 1.jpg" alt=""></div>
<div><img src="ima 2.jpg" alt=""></div>
<div><img src="ima 3.jpg" alt=""></div>
<div><img src="ima 4.jpg" alt=""></div>
<div><img src="ima 5.jpg" alt=""></div>
<div><img src="ima 6.jpg" alt=""></div>
<div><img src="ima 7.jpg" alt=""></div>
<div><img src="ima 8.jpg" alt=""></div>
<div><img src="ima 9.jpg" alt=""></div>
</div>
</div>
</div>
<!--end portfolio-->
<!--start contact me-->
<div class="contact me">
<div class="container">
<div class="info">
<h2>Contact Me</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum, alias. Ipsa explicabo, sequi possimus consequuntur eveniet, atque incidunt sint fugiat aliquam nulla ullam veniam optio?</p>
<p>
123 street<br>
cairo<br>
SkSk Area
</p>
<p>
<strong>Email:</strong>[email protected]<br>
<strong>Phone:</strong>012546566466
</p>
</div>
<form class="form">
<label>Name *</label>
<input type="text">
<label>Email Address *</label>
<input type="text">
<label>Phone *</label>
<input type="text">
<label>Message *</label>
<textarea></textarea>>
<input type="submit" value="Contact Me">
</form>
</div>
</div>
<!--end contact me-->
<!--start footer-->
<div class="footer">
<div class="container">
Copyright © 2014 focal
</div>
</div>
<!--end footer-->
</body>
</html>
CSS
/*start main rules*/
body{height: 4000px;}
.Container{width: 1170px;margin: auto;}.clearfix{clear:both}
/*end main rules*/
/*Start Header*/
.Header .Slider{ background-image: url(images.jfif);-webkit-background-size: cover;/*CSS3*/-moz-background-size: cover;/*CSS3*/ -o-background-size: cover;/*CSS3*/ background-size: cover;/*CSS3*/height: 600px;}
.Header .Slider .intro{padding-top: 200px;text-align: center;color: #fff;}
.Header .Slider .intro h2{margin: 0 auto;font-size: 50px;width: 600px;border-top: 4px solid #fff;border-bottom: 4px solid #fff;padding: 5px 0;}
.Header .Slider .intro button{background: none;margin-top: 30px;font-size: 20px;color: #fff;border: 2px solid #fff;font-weight: bold;padding: 10px 30px;}
.Header .Navbar{background-color: #252F31;color: #fff;overflow: hidden;}
.Header .Navbar h2{float: left;}
.Header .Navbar h2 span{color:#2ecc71;}
.Header .Navbar ul{list-style: none;padding-left: 0;overflow: hidden;float: right;}
.Header .Navbar ul li{float: left;padding: 10px;}
.Header .Navbar ul li a{color: #fff;text-decoration: none;}
.Header .Navbar ul li.active a,
.Header .Navbar ul li a:hover{color: #30b576;}
/*End Header*/
/*start features*/
.features{overflow: hidden;padding-top: 40px;padding-bottom: 50px;}
.features .feat{float: left;width: 33.33333%;height: 150px;}
.features .feat h2{color: #555;}
.features .feat p{line-height: 1.6;color: #888;padding: 0 20px 0 0;}
/*end features*/
/*start about me*/
.about-me{background-color: #f2f2f2;overflow: hidden;}
.about-me .image{float: left;width: 40%;}
.about-me .image img{width: 100%}
.about-me .info{float: left;width: 60%;}
.about-me .info h2{margin: 25px 0 20px 40px;color: #555;}
.about-me .info > p{margin: 0 0 10px 40px;}
.about-me .info > p:last-of-type{margin-top: 25px;}
.about-me .info p{line-height: 1.6;color: #666;}
.about-me .info .hobbies{overflow: hidden;margin: 15px 0 0 40px;}
.about-me .info .hobbies .content{float: left;width: 50%;min-height: 100px;overflow: hidden;}
.about-me .info .hobbies .content h3{color: #555;}
.about-me .info .hobbies .content .icon{float: left;width: 12%;margin-right: 5%;}
.about-me .info .hobbies .content .icon img{max-width: 100%;margin: 40px 10px 0 0;}
.about-me .info .hobbies .content .text{float: left;width: 83%;}
.about-me .info .hobbies .content .text p{margin-top: 0;}
.about-me .info .hobbies .content .text h3{margin-bottom: 5px;}
/*end about me*/
/*start my skills*/
.my-skills{padding-top: 30px;padding-bottom: 50px;overflow: hidden;}
.my-skills .skills,
.my-skills .progress{width: 50%;float: left;}
.my-skills .skills h2{margin: 25px 0 20px 40px;color: #555;}
.my-skills .skills p{margin: 0 0 10px 40px;line-height: 1.6;color: #666;}
.my-skills .skills p:last-of-type{margin-top: 25px;}
.my-skills .skills button{margin-top: 20px;margin-left: 40px;}
.my-skills .progress .technique{margin-left: 50px;}
.my-skills .progress .technique h3{color: #555;}
.my-skills .progress .technique div{background-color: #f2f2f2;height: 25px;}
.my-skills .progress .technique div span{background-color: #2DCC70;height: 25px;display: block;line-height: 25px;text-align: right;color: #fff;font-weight: bold;}
/*end my skills*/
/*start resume*/
.resume{background-color: #f2f2f2;padding-top: 50px;padding-bottom: 70px;text-align: center; }
.resume h2{font-weight: bold;color: #666;}
.resume p{line-height: 1.7;color: #666;padding: 0 40px;}
.resume button{margin-top: 15px;}
/*end resume*/
/*start my education*/
.my-education{padding-top: 30px;padding-bottom: 30px;overflow: hidden;}
.my-education hr{margin: 20px 0;background-color: #999;height: 1px;border: 0;}
.my-education .main{width: 50%;margin-right: 5%;float: left;}
.my-education .main h2{margin: 25px 0 20px 40px;color: #555;}
.my-education .main p{margin: 0 0 10px 40px;line-height: 1.6;color: #666;}
.my-education .main p:last-of-type{margin-top: 25px;}
.my-education .exp{width: 45%;float: left;}
.my-education .exp h3{margin-top: 80px;margin-bottom: 10px;}
.my-education .exp span{display: block;margin-bottom: 10px;}
.my-education .exp span:first-of-type{color: #999;}
.my-education .exp span:last-of-type{background-color: #2DCC70;color: #fff;display: inline-block;padding: 4px 10px;}
.my-education .exp p{line-height: 1.7;color: #777;}
/*end my education*/
/*start testimonials*/
.testimonials{background-color: #f2f2f2;padding-top: 50px;padding-bottom: 50px;text-align: center; }
.testimonials q{color: #888;font: italic bold 18px/1.8 arial,tahoma;}
.testimonials h3{color: #666;margin-bottom: 30px;}
.testimonials ul{list-style: none;padding-left: 0;text-align: center;}
.testimonials ul li{width: 15px;height: 15px;border: 2px solid #2DCC70;display: inline-block;cursor: pointer;}
.testimonials ul li.active,
.testimonials ul li:hover
{background-color: #2DCC70;}
/*end testimonials*/
.portfolio{padding-top: 50px;padding-bottom: 70px;text-align: center;}
.portfolio h2{color: #777;}
.portfolio p{line-height: 1.7;color: #666;margin-bottom: 30px;}
.portfolio .our-work{overflow: hidden;}
.portfolio .our-work > div{float: left;width: 33.333333%;margin-bottom: 10px;}
.portfolio .our-work > div img{width: 92%;margin: 10px;padding: 3px;background-color: #fff;border: 1px solid #ccc; }
/*end portfolio*/
/*start contact me*/
.contact{background-color: #252f31;overflow: hidden;padding-top: 50px;padding-bottom: 70px;}
.acontct .info{width: 50%;margin-right: 5%;float: left;}
.contact h2{color: #fff;margin-left: 40px;}
.contact p{color: #6a6e71;margin-left: 40px;line-height: 1.7;}
.contact p strong{color: #d1d6da;}
.contact .form{width: 45%;float: left;}
.contact .form label{display: block;color: #d1d6da;margin: 10px 0;}
.contact .form input[type="text"] {background-color: #4b5557;color: #fff;padding: 10px;border: 0;width: 80%;margin-bottom: 10px;}
.contact .form textarea{background-color: #4b5557;color: #fff;padding: 10px;border: 0;width: 80%;margin-bottom: 10px;height: 300px;}
.contact .form input[type="supmit"] {background-color: #191e22;color: #fff;padding: 10px 20px;border: 0;margin-top: 10px;}
/*end contact me*/
/*start footer*/
.footer{background-color: #191e22;color: #6a6e71;padding: 20px 0;text-align: center;}
/*end footer*/
/*Start My Framwork*/
.my-button{background: none;border: 3px solid #2DCC70;padding: 10px 30px;color: #2DCC70;font-weight: bold;}
/*End My Framwork*/
مرحلة التكويد لم تنتهى
فى انتظارتعليقاتكم
اليوم الحمد لله تم اطلاق التطبيق 21/8/2019
My Web
جدير بالذكر
انه تم انشاء الموقع ب CSS2 وHTML4
ارحب بالمشاركات والانتقادات والتعديلات
جدير بالذكر ايضا
لم استطع التعامل مع منصة git hub جيدا
يعنى عندى على جهازى فى مكتبات تضاف على ملف CSS
مثل: normalize و font-awesome.
ولم استطع اضافتها على جيت
ملفات المشروع علي جيت
ملفات المشروع على GITHUB
سكرين شوت
الشكل على جيت
ملفات المشروع على جهازى باضافة المكتبات السابق ذكرها
سكرين شوت
شكل الموقع مع اضافة المكتبات وبعض التأثيرات
ملفات المشروع مع اضافة المكتبات
html:313 line
css:196 line
