Telefonon miért nem marad fent a header a képernyő tetején?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Norbeat Webdesigner</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
</div>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href="#">Norbeat<span>.hu</span></a></div>
<ul class="menu">
<li><a href="#home" class="menu-btn">Főoldal</a></li>
<li><a href="#about" class="menu-btn">Rólam</a></li>
<li><a href="#services" class="menu-btn">Ennyit tudok!</a></li>
<li><a href="#refer" class="menu-btn">Referencia</a></li>
<li><a href="#skills" class="menu-btn">Én az ÁSZ!</a></li>
<li><a href="#teams" class="menu-btn">Portfolió</a></li>
<li><a href="#contact" class="menu-btn">Kapcsolat</a></li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, Engem még mindig</div>
<div class="text-2">Norbeat17-nek</div>
<div class="text-3">hívnak és én vagyok a <br><span class="typing"></span></div>
<a href="#" class="searchme">Keress meg!</a>
</div>
</div>
</section>
<section class="about" id="about">
<div class="max-width">
<h2 class="title">Rólam pár sor!</h2>
<div class="about-content">
<div class="column left">
<img src="images/profile-1.jpg" alt="">
</div>
<div class="column right">
<div class="text">Soós Norbert vagyok és én vagyok a <br><span class="typing-2"></span></div>
<p>1993-ban láttam meg a napvilágot. Régen sokminden érdekelt, a villanyászkodástól kezdve az állatokig. 2007 körül kostoltam bele először a weboldalszerkesztés világába a G-Poprtal-on.
Később, 2010 körül kezdtem el nézegetni először Cyrex videóit VideoSmart-on. Az első weboldalaim még G-portalon voltak, majd ezek után kezdtem szépen-lassan beletanulni a weboldalszerkesztésbe.
</p>
<a href="downloads/cv.docx">Önéletrajz Letöltése</a>
<a href="blog/index.html">Tovább a Blogra!</a>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<div class="max-width">
<h2 class="title">Ennyit Tudok Segíteni!</h2>
<div class="serv-content">
<div class="card">
<div class="box">
<i class="fas fa-paint-brush"></i>
<div class="text">WebDesign</div>
<p>Helyelközel 2007 óta foglalkozok Webdesign-nal. Tudok ezt-azt amazt!</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-chart-line"></i>
<div class="text">Social Media</div>
<p>Facebook, Twitter, Instagram meg a többi! Csak hogy ne nézz ki úgy mint aki benéz.</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-code"></i>
<div class="text">Grafika</div>
<p>Weboldalak grafikai tervezése</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-code"></i>
<div class="text">Szövegírás</div>
<p>Kéne valami ütős duma?</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-code"></i>
<div class="text">Animáció</div>
<p>2d-s Animációk készítése.</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-code"></i>
<div class="text">SEO</div>
<p>A 256325. oldalon hoz a google? Sebaj! Segítek!</p>
</div>
</div>
</div>
</div>
</section>
<section class="refer" id="refer">
<div class="max-width">
<h2 class="title">Referencia vagy mi!</h2>
<div class="carousel owl-carousel">
<div class="card">
<div class="box">
<img src="images/folio-1.jpg" alt="">
<div class="text"><a href="#">HL Konvergál</a></div>
<p>Bisztosítási Alkusz oldala</p>
</div>
</div>
<div class="card">
<div class="box">
<a href="http://vasmedia.hu"><img src="images/logos/logo3.png"></a>
<div class="text"><a href="#">Vas Média</a></div>
<p>Híroldal Vas Megyéből</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/folio-1.jpg" alt="">
<div class="text"><a href="#">Urfi Nails</a></div>
<p>Egy ismerősöm körmös weboldala</p>
</div>
</div>
</div>
</div>
</section>
<section class="skills" id="skills">
<div class="max-width">
<h2 class="title">Én az ász!</h2>
<div class="skills-content">
<div class="column left">
<div class="text">Ennyi féle nyelvet "beszélek"!</div>
<p>Az évek során ennyi minden ragadt rám a koszon kívül! A százalékok ne zavarjanak, csupán tájékoztató jellegú megközelítő érték! Attól én még mindent is tudok!</p>
<a href="#">Olvass Tovább!</a>
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>HTML</span>
<span>90%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>CSS</span>
<span>80%</span>
</div>
<div class="line css"></div>
</div>
<div class="bars">
<div class="info">
<span>JavaScript</span>
<span>80%</span>
</div>
<div class="line js"></div>
</div>
<div class="bars">
<div class="info">
<span>PHP</span>
<span>50%</span>
</div>
<div class="line php"></div>
</div>
<div class="bars">
<div class="info">
<span>MySQL</span>
<span>60%</span>
</div>
<div class="line mysql"></div>
</div>
</div>
</div>
</div>
</section>
<section class="teams" id="teams">
<div class="max-width">
<h2 class="title">Portfolio</h2>
<div class="carousel owl-carousel">
<div class="card">
<div class="box">
<img src="images/folio-1.jpg" alt="">
<div class="text"><a href="#">Magyar F4</a></div>
<p>Sajnos ilyen nincs! De mi lenne ha lenne?</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/folio-2.jpeg" alt="">
<div class="text"><a href="#">Norbeat Racing</a></div>
<p>Egy saját versenycsapat oldala!</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/folio-3.jpeg" alt="">
<div class="text"><a href="#">Norbeat Webshop</a></div>
<p>Saját Webshop motor</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/folio-4.jpeg" alt="">
<div class="text"><a href="#">Érdi 24h Project</a></div>
<p>Az Érdi 24 órás verseny csapatokkal, pilótákkal, mindennel.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/profile-5.jpeg" alt="">
<div class="text"><a href="#">Masked Ltd.</a></div>
<p>Egészségügyi szolgáltató weboldala</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/profile-5.jpeg" alt="">
<div class="text"><a href="#">Paszulyfalva</a></div>
<p>Egy elképzelt város weboldala mindennel is.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/folio-4.jpeg" alt="">
<div class="text"><a href="#">Érdi 24h Project</a></div>
<p>Az Érdi 24 órás verseny csapatokkal, pilótákkal, mindennel.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/profile-5.jpeg" alt="">
<div class="text"><a href="#">Norzurro kft</a></div>
<p>Na ez lenne abból ha én meg a haverom... összefognánk! :D</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/profile-5.jpeg" alt="">
<div class="text"><a href="#">Sarki kisbót</a></div>
<p>Egy kisbolt weboldala.... az egyszerűség kedvéjért.</p>
</div>
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="max-width">
<h2 class="title">Kapcsolat!</h2>
<div class="contact-content">
<div class="column left">
<div class="text">Vedd fel velem a kapcsolatot!</div>
<p>Ha bármiben tudok segíteni, vagy csak akarsz beszélni róla, keress bizalommal.</p>
<div class="icons">
<div class="row">
<i class="fas fa-user"></i>
<div class="info">
<div class="head">Nevem:</div>
<div class="sub-title">Soós Norbert</div>
</div>
</div>
<div class="row">
<i class="fas fa-map-marker-alt"></i>
<div class="info">
<div class="head">Cím:</div>
<div class="sub-title">2030 Érd Bikszádi utca 5.</div>
</div>
</div>
<div class="row">
<i class="fas fa-envelope"></i>
<div class="info">
<div class="head">E-mail</div>
<div class="sub-title">norbeat17@gmail.com</div>
</div>
</div>
</div>
</div>
<div class="column right">
<div class="text">Üzenj!</div>
<form action="includes/send.php">
<div class="fields">
<div class="field name">
<input type="text" placeholder="Neved" required>
</div>
<div class="field email">
<input type="email" placeholder="Email-ed" required>
</div>
</div>
<div class="field">
<input type="text" placeholder="Tárgy" required>
</div>
<div class="field textarea">
<textarea cols="30" rows="10" placeholder="Üzeneted..." required></textarea>
</div>
<div class="button-area">
<button type="submit">Küldjed!</button>
</div>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Minden más!</h4>
<ul>
<li><a href="#">Felhasználási Feltételek</a></li>
<li><a href="#">ASZF</a></li>
<li><a href="#">Impresszum</a></li>
<li><a href="#">Oldaltérkép</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Social Media</h4>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
<div class="footer-col">
<a href="#"><img src="./images/logo.png" class="footer-logo"></a>
</div>
</div>
</div>
<span>Készítette: <a href="https://www.norbeat.com">Norbeat17</a> | <span class="far fa-copyright"></span> 2022 Minden jog fenntartva!</span>
</footer>
<script src="js/script.js"></script>
<script src="js/scrollreveal.js"></script>
<script src="js/cookies.js"></script>
<div class="cookies">
<div class="container">
<div class="subcontainer">
<div class="cookies">
<p>Ez a weboldal Cookie-kat használ! <a href="#">Egyéb Infó!</a></p>
<button id="cookies-btn">Elfogadom!</button>
</div>
</div>
</div>
</div>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementsByClassName(".logo").style.fontSize = "25px";
} else {
document.getElementsByClassName(".logo").style.fontSize = "35px";
}
}
</script>
</body>
</html>
@media (max-width: 1104px) {
.about .about-content .left img{
height: 350px;
width: 350px;
}
}
@media (max-width: 1081px) {
.navbar{
position: fixed;
top: 0;
left: 0;
}
.navbar.sticky{
position: fixed;
top: 10px;
left: 0;
}
}
@media (max-width: 991px) {
.max-width{
padding: 0 50px;
}
}
@media (max-width: 947px){
.menu-btn{
display: block;
z-index: 999;
}
.menu-btn i.active:before{
content: "\f00d";
}
.navbar .menu{
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: #111;
text-align: center;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active{
left: 0;
}
.navbar .menu li{
display: block;
}
.navbar .menu li a{
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
.home .home-content .text-2{
font-size: 70px;
}
.home .home-content .text-3{
font-size: 35px;
}
.home .home-content a{
font-size: 23px;
padding: 10px 30px;
}
.max-width{
max-width: 930px;
}
.about .about-content .column{
width: 100%;
}
.about .about-content .left{
display: flex;
justify-content: center;
margin: 0 auto 60px;
}
.about .about-content .right{
flex: 100%;
}
.services .serv-content .card{
width: calc(50% - 10px);
margin-bottom: 20px;
}
.skills .skills-content .column,
.contact .contact-content .column{
width: 100%;
margin-bottom: 35px;
}
}
@media (max-width: 767px){
footer .container .row .footer-col{
width:50%;
margin-bottom:30px;
}
}
@media (max-width: 690px) {
.max-width{
padding: 0 23px;
}
.home .home-content .text-2{
font-size: 60px;
}
.home .home-content .text-3{
font-size: 32px;
}
.home .home-content a{
font-size: 20px;
}
.services .serv-content .card{
width: 100%;
}
}
@media (max-width: 574px) {
.footer-col{
width:100%;
}
}
@media (max-width: 500px) {
.home .home-content .text-2{
font-size: 50px;
}
.home .home-content .text-3{
font-size: 27px;
}
.about .about-content .right .text,
.skills .skills-content .left .text{
font-size: 19px;
}
.contact .right form .fields{
flex-direction: column;
}
.contact .right form .name,
.contact .right form .email{
margin: 0;
}
.right form .error-box{
width: 150px;
}
.scroll-up-btn{
right: 15px;
bottom: 15px;
height: 38px;
width: 35px;
font-size: 23px;
line-height: 38px;
}
}
@media (max-width: 1600px){
.container{
width:100%;
}
}
@media (max-width: 1024px){
.cookies{
padding:10px 0;
position: absolute;
bottom:10px;
}
}
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!