Cześć zrobiłem sobie stronkę ale nie wiem jak przerobić ją na responsywną chodzę od poradnika do poradnika i nic nie działa. Robię wszystko tak jak oni tam piszą nawet poradnik Pana Mirosława nie pomaga.
o to kod (i wiem, że wszystko wydaje się takie nie jasne ale dopiero zaczynam :P)
TU CSS
body
{
bbackground-color: #fff;
background-image: url("white_wall_@2X.png");
color: #000;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
margin: 0;
}
#bg
{
opacity: 0.5;
background-image: url("white_wall_@2X.png");
}
#top
{
height: 135px;
width: auto;
background-color: #f4f7f6;
}
#top1
{
background-color: #f4f7f6;
height: 50px;
color: #747474;
width: 100%;
text-align: center;
position: fixed;
}
#top1 a
{
text-decoration: none;
color: #747474;
}
#top1text1
{
font-size: 12px;
color: #747474;
display: inline-block;
padding-top: 17px;
padding-left: 150px;
display: inline-block;
width: 40%;
}
#top1text2
{
font-size: 12px;
color: #747474;
display: inline-block;
margin: 0;
padding-right: 150px;
width: 40%;
display: inline-block;
}
#top2
{
height: 90px;
width: 100%;
box-shadow:0 9px 6px -6px #666;
background-color: #f4f7f6;
border-top: 1px solid #cdcbcb;
top: 1.3229166667cm;
position: fixed;
text-align: center;
}
p.icons
{
text-align: center-right;
font-size: 12px;
}
#toplogo
{
display: inline-block;
height: 90px;
color: #006622;
font-family: 'Merriweather', serif;
padding-left: 150px;
}
h2
{
font-size: 55px;
line-height: 90px;
margin: 0;
}
#topnav
{
text-align: right;
height: 90px;
display: inline-block;
padding-left: 170px;
}
.menu
{
list-style-type: none;
margin: 0;
font-size: 18px;
line-height: 200%;
}
.menu > li
{
display: inline-block;
padding-left: 20px;
padding-right: 20px;
}
.menu a
{
color: #000;
text-decoration: none;
}
.menu a:hover
{
color: #006622;
border-bottom: 3px solid #006622;
}
.link
{
text-decoration: none;
color: black;
}
#container
{
text-align: center;
}
#clear
{
height: 135px;
background-color: #f4f7f6;
}
h3
{
text-align: center;
font-size: 45px;
color: #804200;
}
.text2
{
text-align: center;
font-size: 25px;
}
.text1
{
font-size: 15px;
text-align: justify;
margin-left: 300px;
}
#formula
{
border-top: 2px solid #4d2800;
width: 1500px;
margin-left: 200px;
}
#basic
{
width: 905px;
background-color: #efefef;
color: #666;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 20px;
padding: 10px;
box-sizing: border-box;
outline: none;
margin-top: 10px;
}
#basic:focus
{
-webkit-box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
-moz-box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
border: 2px solid #a5cda5;
background-color: #e9f3e9;
color: #428c42;
}
input[type=text],
input[type=tel],
input[type=email]
{
width: 450px;
background-color: #efefef;
color: #666;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 20px;
padding: 10px;
box-sizing: border-box;
outline: none;
margin-top: 10px;
}
input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus
{
-webkit-box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
-moz-box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
box-shadow: 0px 0px 10px 2px rgba(204,204,204,0.9);
border: 2px solid #a5cda5;
background-color: #e9f3e9;
color: #428c42;
}
input[type=submit]
{
width: 300px;
background-color: #36b03c;
font-size:20px;
color: white;
padding: 15px 10px;
margin-top: 20px;
border: none;
border-radius: 5px;
cursor: pointer;
letter-spacing: 2px;
outline: none;
}
input[type=submit]:focus
{
-webkit-box-shadow: 0px 0px 15px 5px rgba(204,204,204,0.9);
-moz-box-shadow: 0px 0px 15px 5px rgba(204,204,204,0.9);
box-shadow: 0px 0px 15px 5px rgba(204,204,204,0.9);
}
input[type=submit]:hover
{
background-color: rgba(0, 102, 34, 1);
}
footer
{
background-color: #f4f7f6;
high: 250px;
font-size: 18px;
text-align: center;
box-shadow:0 -9px 6px -6px #666;
}
.socials
{
margin: 0;
}
.mail
{
display: inline-block;
}
.phone
{
display: inline-block;
padding-left: 40px;
}
.home
{
display: inline-block;
padding-left: 40px;
}
.akapit
{
}
p.rodo
{
text-align: center;
font-size: 19px;
margin: 250px;
margin-top: 0;
margin-bottom: 93px;
}
TU HTML
<body>
<div id="top">
<div id="top1">
<div id="top1text1">
Masz pytanie? Napisz do nas: | <a href="mailto:kontakt@email.com">kontakt@email.com</a>
</div>
<div id="top1text2">
<p class="icons"><a href="login">Logowanie</a></p>
</div>
</div>
<div id="top2">
<div id="toplogo"><h2>Invest KZP</h2></div>
<div id="topnav">
<ul class="menu">
<li><a href="Strona-Glowna">Start</a></li>
<li><a href="Lista-Ofert">Lista ofert</a></li>
<li><a href="Dla-Wlasciciela">Dla Właściciela</a></li>
<li><a href="Najemca">Najemca</a></li>
<li><a href="Rozporządzenie-o-Ochronie-Danych-Osobowych">RODO</a></li>
<li><a href="Kontakt">Kontakt</a></li>
</ul>
</div>
</div>
</div>
<div id="container">
<div id="text">
<h3 style="line-height: 0.1cm;">text1</h3>
<h3 style="line-height: 0.1cm;">text2</h3>
<h3 style="line-height: 0.1cm;">text3</h3>
<p class="text2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<br>
Pellentesque tempor, orci sit amet lacinia laoreet, lectus metus tristique velit, sit amet aliquet dui mauris at tortor
<br>
<br>
Morbi non ipsum sit amet metus euismod fermentum
<br>
<br>
Nulla rutrum, lectus vitae tempor aliquam, nisi neque vulputate ligula, .
<br>
<br>
sed iaculis ipsum tortor in nisi..</p>
</div>
<div id="formula">
<h3>Wypełnij poniższy formularz, a skontaktujemy się z Tobą
<br>
w ciągu najbliższego dnia roboczego:</h3>
<form action="mailto:kontakt@investkzp.pl" method="post" enctype="text/plain">
<div id="formula1"><input type="text" placeholder="text" name="cos" />
<input type="text" placeholder="text" name="cos" /></div>
<div id="formula2"><input type="tel" placeholder="text" name="cos" />
<input type="email" placeholder="E-mail" name="E-mail" /></div>
<textarea id="basic" name="pytanie" cols="40" rows="5" placeholder="Wiadomość"></textarea><br />
<input type="submit" value="Wyślij" />
</form>
<p class="text1">
Przesyłając dobrowolnie moje dane oświadczam, że zostałem/am poinformowany/a, iż:
<br>
a) administratorem danych osobowych w zakresie objętym powyższym formularzem jest firma NAZWA ul.Wkrótce! ,
<br>
b) moje dane osobowe będą przetwarzane w celach związanych z przedstawieniem oferty,
<br>
c) mogę żądać od administratora danych osobowych informacji o treści dotyczących mnie danych oraz żądać ich poprawiania,
<br>
d) na warunkach określonych w przepisach regulujących zasady przetwarzania danych osobowych mogę żądać zaprzestania przetwarzania
<br>
moich danych osobowych oraz zgłosić sprzeciw wobec ich przetwarzania.
<br>
</p>
</div>
<footer>
<div class="socials">
<div class="mail">
<a href="mailto:kontakt@investkzp.pl" class="link"><i class="icon-mail">kontakt@mail.com</i></a>
</div>
<div class="phone">
<i class="icon-phone">000 000 000</i>
</div>
<div class="homme">
<i class="icon-homme"></i>
</div>
</div>
<div class="info">
Wszelkie Prawa Zastrzeżone © 2018
</div>
</footer>
</div>
</body>
