JSFiddle - React, Tailwind, and code Playground
HTML
<div class="inline_meny">
<ul>
<li><a href="addd">MAC</a></li>
<li><a href="addd">iPhone</a></li>
<li><a href="addd">iPad</a></li>
<li><a href="addd">Watch</a></li>
<li><a href="addd">TV</a></li>
<li><a href="addd">Аксессуары</a></li>
<li><a href="addd">Ремонт</a></li>
</ul>
</div>
<!-- fixed_bar_end-->
<!-- a_cap_start-->
<div class="qwe">
<div class="chield" >
<h1 class="text">Вас приветствует<br>iHome</h1>
<div class="text_box">
<p>Компания iHome специализируется на оптовой и розничной торговле оригинальной продукции Apple. С нами вы будуте уверены в том, что покупаете по-настоящему качественный товар- предоставляем гарантию, сертификаты и сервисное обслеживание.</p>
<p>Мы не просто продаём технику, мы всегда готовы помочь вам с выбором, дать подробности по каждому товару. Не знаете, какой гаджет подойдет ли вам лучше всего? Обращайтесь - подберем для вас устройство, которое будет на все 100% отвечать вашим запросам. </p>
</div>
</div>
</div>
<!-- a_cap_end-->
CSS
html {
//overflow-x: hidden;
}
body{
margin: 0px;
}
/*fixed_bar_start*/
.inline_meny{
text-align: center;
padding: 10px 0px;
position: fixed;
z-index: 101;
width: 100%;
background: grey;
}
.inline_meny li{
margin: 10px;
}
/*fixed_bar_end*/
/*a_cap_start*/
.qwe{
background-size: 100% 100%;
background-image: url(cap.jpg);
background-repeat: no-repeat;
}
.chield{
word-wrap: break-word;
padding-top: 40px;
margin: 0px 0px 20px 15%;
width: 40%;
max-width: 500px;
opacity: 0.7;
filter: alpha(opacity=70);
background: black;
}
.chield p{
padding: 20px;
color: white;
}
.chield h1{
font-size: 50px;
color: white;
text-align:left;
padding:15px 0 15px 2%;
}
.text_box{
line-height: 25px;
font-size: 20px;
}
/*a_cap_end*/
@media (max-width: 600px) {
.chield {
width: 90%;
margin: 0 auto 20px;
background: #333;
}
}