السلام عليكم
كنت اتدرب عل تصميم صفحه ولكن تظهر معي مشاكل حاولت حلها باكثر من طريقه ولمن ينتج مشكله اخري
قمت بارقاق صوره النموذج الاصليه ضمن الصور
1-المشكله هو نص الفقره قمت بزياده العرض له ولكن عند تصغير حجم الاشه تحدث مشكله حيث تظهر كانها تاكل النص .
2- اللوجو في اليسار اريده ان يظهر بجانب الكتابه
3- ايضا" اللون المائل الذي له شفافيه كيف اقوم به.
تركيبة الـ HTML :
<section class="phara">
<div class="container">
<div class="row ">
<div class="col-md-12 ml-auto">
<h5>
Diagoona HTML Template
</h5>
<p class="aa">
Diagoona is provided by TemplateMo website. You are allowed to use this template for your
websites.
You are NOT allowed to redistribute this template ZIP file for a
download purpose on any
template
collection website.
</p>
<p class="bb">
Diagoona is Bootstrap v4.4.1 layout. This BG is 50% transparent. You can set the background
images auto play settings (true or false in line number 33) in templatemo-script.js file in js
folder.
</p>
<button type="button" name="button"> Continue... </button>
</div>
</div>
</div>
</section>
التنسيقات الخاصة بالعنصر :
section.phara .container {
width: auto;
padding: 0 0px;
margin: 0 0px;
}
section.phara .container .row {
margin-left: 72%;
color: #fff;
}
section.phara .container .row h5 {
padding-bottom: 40px;
font-size: 25px;
line-height: 30px;
font-weight: 400;
}
section.phara .container .row p.aa {
font-size: 18px;
font-weight: 300;
line-height: 35px;
padding-bottom: 50px;
border-bottom: 1px solid #fff;
width: auto;
}
section.phara .container .row p.bb {
font-size: 18px;
font-weight: 300;
line-height: 35px;
padding-top: 50px;
width: auto;
}
section.phara .container .row button {
background-color: #fff;
outline-style: none;
border-radius: 5px;
border: none;
width: 110px;
height: 45px;
margin-top: 35px;
}
section.phara .container .row button:hover {
background-color: rgb(50, 204, 255);
transition: all 1.5s ease;
}
مرفق ملف المشروع : templete 1.zip .
بعض الصور الموضحة للمشاكل :
مثال عن الطبقة السوداء المطلوبة :