تنسيق القسم main زر المزيد

كود مقارب لما فى التصميم

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>STORE</title>
        <link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
        <style>
            body{
                margin: 0;
            }
            header{
                height: 80px;
                border-bottom: 1px dotted #ccc;
            }
            header h1{
                text-align: center;
                font-family: 'Domine', serif;
                font-size: 24px;
                letter-spacing: 6px;
                line-height: 80px;
                margin: 0;
            }
            main {
                width: 960px;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                margin-top: 90px;
                font-family: 'Questrial', sans-serif;
            }
            main h2{
                font-size: 30px;
                font-weight: normal;
                margin: 0;
            }
            main p{
                color: #999;
                font-size: 18px;
            }
            main div{
                margin-top: 50px;
                margin-bottom: 50px;
            } 
            main div img{
                margin: 10px;
                width: 290px;
                height: 335px;
            }
            main a{
                background-color: white;
                color: gray;
                width: 160px;
                height: 35px;
                font-weight: 500;
                font-size: 15px;
                line-height: 35px;
                padding: 10px;
                border: 2px solid gray;
                text-decoration: none;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }    
        </style>
    </head>
    <body>
        <header>
            <h1>STORE</h1>
        </header>
        <main>
            <h2>Featured Products</h2>
            <p>Refresh your look with pieces of our collection</p>
            <div>
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
            </div>
            <a href="#">More Products</a>
        </main>
        <footer>
            <p>&copy; 2018 All Rights Reserved</p>
        </footer>
    </body>
</html>

2 Likes

رائع :muscle:

أقترح تكبير حجم الخط في الرابط حبتين :sunglasses:

2 Likes

حاضر:grinning:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>STORE</title>
        <link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
        <style>
            body{
                margin: 0;
            }
            header{
                height: 80px;
                border-bottom: 1px dotted #ccc;
            }
            header h1{
                text-align: center;
                font-family: 'Domine', serif;
                font-size: 24px;
                letter-spacing: 6px;
                line-height: 80px;
                margin: 0;
            }
            main {
                width: 960px;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                margin-top: 90px;
                font-family: 'Questrial', sans-serif;
            }
            main h2{
                font-size: 30px;
                font-weight: normal;
                margin: 0;
            }
            main p{
                color: #999;
                font-size: 18px;
            }
            main div{
                margin-top: 50px;
                margin-bottom: 50px;
            } 
            main div img{
                margin: 10px;
                width: 290px;
                height: 335px;
            }
            main a{
                background-color: white;
                color: gray;
                width: 160px;
                height: 35px;
                font-weight: 500;
                font-size: 20px;
                line-height: 35px;
                padding: 10px;
                border: 2px solid gray;
                text-decoration: none;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }    
        </style>
    </head>
    <body>
        <header>
            <h1>STORE</h1>
        </header>
        <main>
            <h2>Featured Products</h2>
            <p>Refresh your look with pieces of our collection</p>
            <div>
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
            </div>
            <a href="#">More Products</a>
        </main>
        <footer>
            <p>&copy; 2018 All Rights Reserved</p>
        </footer>
    </body>
</html>

تمام يا باش مهندس

2 Likes

رائع :100:

2 Likes

صراحة حضرتك شياكة فى الصبر على التعليم
صراحة خليت فونت سيز 35 ولقيت حيحتاج محاذاة وشوية تظبيط
ريحت دماغى لان المفروض انام ودماغى من يوم ما المسابقة تم الاعلان عنها مش عارف انام
وتوتر
الله المستعان:neutral_face:

3 Likes

صراحة حضرتك شياكة فى الصبر على التعليم

ههههههه شكراً لك

صراحة خليت فونت سيز 35 ولقيت حيحتاج محاذاة وشوية تظبيط

لا مشكلة تتسهل الامور مع الوقت

ريحت دماغى لان المفروض انام ودماغى من يوم ما المسابقة تم الاعلان عنها مش عارف انام
وتوتر

لا تقلق بخصوصها ستكون ممتعة وستتجاوزها بنجاح :muscle:

2 Likes

انشاء الله اكمل بعد الفجر
بعد اذن حضرتك
رمضان كريم
:rainbow:

2 Likes