Kezdőoldal » Számítástechnika » Weblapkészítés » Telefonon miért nem marad...

Telefonon miért nem marad fent a header a képernyő tetején?

Figyelt kérdés
kód hsz-ben!

2022. júl. 24. 23:45
 1/5 A kérdező kommentje:

<!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>

2022. júl. 24. 23:46
 2/5 A kérdező kommentje:

@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;

}

}

2022. júl. 24. 23:48
 3/5 anonim ***** válasza:
Az szép barátom, javascript, css 80% :D
2022. júl. 25. 17:17
Hasznos számodra ez a válasz?
 4/5 anonim ***** válasza:
Ezt a hányadékot senki sem fogja neked elolvasni. Tanulj meg debugolni.
2022. júl. 31. 17:44
Hasznos számodra ez a válasz?
 5/5 anonim ***** válasza:
Ide [link] vagy legalább ide [link] töltsd fel a kódot.
2022. szept. 2. 06:42
Hasznos számodra ez a válasz?

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

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!