كيفاش تزيد blockquote وتزيدلو ال style css


فهاد الدرس الجديد من سلسلة html و css للمبتدئين غادي نشوفوا كيفاش نزيدو blockquote ونزيدولو style css.
فل blockquote هو لي كيمكن من إضافة مقولات أو شهادات للزوار ديال موقع معين. 


1- إضافة الملفات الأساسية

أول حاجة زيد dossier جديد فيه زيد جوج ديال الملفات index.html و style.css منبعد ف index.html غادي نزيدو الكود html لي فيه :
- 3 ديال ل blockquotes وفيهم p لي فيها texte و cite لي فيها شكون لي قال المقولة الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Quote style</title>
</head>
<body>
    <div class="container">
        <blockquote class="blockquote">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur voluptatum, dolor, qui eum tempore cupiditate accusantium omnis commodi corporis dolorem adipisci dignissi reprehenderit.</p>
            <cite>DCoding</cite>
        </blockquote>
        <blockquote class="blockquote">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur voluptatum, dolor, qui eum tempore cupiditate accusantium omnis commodi corporis dolorem adipisci dignissimos reprehenderit.</p>
            <cite>DCoding</cite>
        </blockquote>
        <blockquote class="blockquote">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur voluptatum, dolor, qui eum tempore cupiditate accusantium omnis commodi corporis dolorem adipisci dignissimos reprehenderit.</p>
            <cite>DCoding</cite>
        </blockquote>
    </div>
</body>
</html>
                            

2- إضافة LES STYLES CSS

غادي نزيدو الكود css لي غادي يمكن باش نعرضوا les quotes ديالنا فسطر واحد وغادي نزيدو بعض الإضافات على ل paragraphe و cite الكود لي زدنا هو : 


                                /***part 1***/
html{
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 80%;
    margin: 0 auto;
}
.blockquote{
    width: 23.33%;
    display: inline-block;
    padding: 5px;
}
blockquote p {
    font-size: 1.1em;
    margin: 5px;
}
blockquote  cite {
    color: #AAA;
    display: block;
    font-size: 1.2em;
    text-align: right;
}
                            

3- إضافة LES quotes

فباش نزيد الرموز لي كيرمزو لل quotes كيف كنشوف فالصورة :

كندير تعديل على الكود فالكود بعد التعديل هو :

                                /***part 1***/
html{
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 80%;
    margin: 0 auto;
}
.blockquote{
    width: 23.33%;
    display: inline-block;
    padding: 5px;
    position: relative;
}
blockquote p {
    font-size: 1.1em;
    margin: 5px;
    z-index: 10;
    position: relative;
}
blockquote  cite {
    color: #AAA;
    display: block;
    font-size: 1.2em;
    text-align: right;
}
blockquote:after, blockquote:before {
    position: absolute;
    z-index: 1;
    font-size: 6em;
    color: rgb(11, 55, 122);
    text-shadow: 2px 2px 0 #DDD;
    font-family: serif;
    height: 0;
}
blockquote:before {
    content: "\201C";
    top: -35px;
    left: -50px;
}
blockquote:after {
    content: "\201D";
    bottom: 40px;
    right: -70px;
}
                            

4- تغيير لون خلفية les blockquotes

فباش نغير لون خلفية ل blockquotes غادي نزيد الكود لي كيمكن من الحصول على النتيجة لي فالصورة :



كندير تعديل على الكود فالكود بعد التعديل هو :

                                    /***part 1***/
html{
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 80%;
    margin: 0 auto;
}
.blockquote{
    width: 23.33%;
    display: inline-block;
    padding: 10px;
    position: relative;
    background-color: rgb(11, 55, 122,0.6);
    background-image: -webkit-linear-gradient(top, rgb(11, 55, 122) 20%, rgb(11, 55, 122,0.5) 100%);
    background-image: linear-gradient(rgb(11, 55, 122) 20%, rgb(11, 55, 122,0.5) 100%);
    border-radius: 20px;
    color: aliceblue;
}
blockquote p {
    font-size: 1.1em;
    margin: 5px;
    z-index: 10;
    position: relative;
}
blockquote  cite {
    color: #AAA;
    display: block;
    font-size: 1.2em;
    text-align: right;
}
blockquote:after, blockquote:before {
    position: absolute;
    z-index: 1;
    font-size: 6em;
    color: rgb(11, 55, 122);
    text-shadow: 2px 2px 0 #DDD;
    font-family: serif;
    height: 0;
}
blockquote:before {
    content: "\201C";
    top: -35px;
    left: -50px;
}
blockquote:after {
    content: "\201D";
    bottom: 40px;
    right: -70px;
}
                                

5- إضافة رمز الفقاعة لل blockquote

فباش نزيد الفقاعة لل blockquote كيف كنشوف فالصورة :



كندير تعديل على الكود فالكود بعد التعديل هو :

                                    /***part 1***/
html{
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 80%;
    margin: 0 auto;
}
.blockquote{
    width: 23.33%;
    display: inline-block;
    padding: 10px;
    position: relative;
    background-color: rgb(11, 55, 122,0.6);
    background-image: -webkit-linear-gradient(top, rgb(11, 55, 122) 20%, rgb(11, 55, 122,0.5) 100%);
    background-image: linear-gradient(rgb(11, 55, 122) 20%, rgb(11, 55, 122,0.5) 100%);
    border-radius: 20px;
    color: aliceblue;
}
blockquote p {
    font-size: 1.1em;
    margin: 5px;
    z-index: 10;
    position: relative;
}
blockquote  cite {
    color: #AAA;
    display: block;
    font-size: 1.2em;
    text-align: right;
}
blockquote:after {
    border-color: transparent rgb(11, 55, 122,0.8);
    border-style: solid;
    border-width: 0 15px 50px 0px;
    content: "";
    display: block;
    bottom: -50px;
    left: 40px;
    position: absolute;
    width: 0;
    z-index: 1;
}