Cześć,
Chciałbym was prosić o kod html, który sprawi, że np. na jednej stronie index.html będę mógł umieścić kilka stron z tym, że np. każda strona będzie się automatycznie rozciągała u usera na całą stronę. I mozliwosc stworzenia odnosnikow np. na kazdej sronie do nastepnej i strona się automatycznie przescrolluje lub po prostu przewijanie w dol myszka. i np. chcialbym zeby na kazdej stronie dalo sie zrobic inne tlo i np. podwojne ze do polowy jeden kolor potem inny. Bylbym wdzieczny.
1
1
<!DOCTYPE html>
<html lang="pl">
<head>
<style>
/* Ogólne style */
body, html {
margin: 0;
padding: 0;
scroll-behavior: smooth; /* Płynne przewijanie */
}
.section {
height: 100vh; /* Cała wysokość okna przeglądarki */
display: flex;
align-items: center;
justify-content: center;
position: relative;
text-align: center;
color: white;
font-family: Arial, sans-serif;
}
/* Tła dla poszczególnych sekcji */
#section1 {
background: linear-gradient(to bottom, #ff7e5f, #feb47b); /* Gradient */
}
#section2 {
background: linear-gradient(to bottom, #6a11cb, #2575fc);
}
#section3 {
background: linear-gradient(to bottom, #43cea2, #185a9d);
}
/* Styl dla treści */
.content {
max-width: 800px;
margin: 0 auto;
}
h1 {
font-size: 3em;
margin-bottom: 20px;
}
/* Styl przycisków */
.button {
display: inline-block;
padding: 15px 30px;
background-color: rgba(255, 255, 255, 0.8);
color: #333;
text-decoration: none;
border-radius: 5px;
font-size: 1em;
font-weight: bold;
transition: background-color 0.3s ease, color 0.3s ease;
}
.button:hover {
background-color: #333;
color: white;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pełnoekranowe sekcje</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="section" id="section1">
<div class="content">
<h1>Strona 1</h1>
<a href="#section2" class="button">Przejdź do Strony 2</a>
</div>
</div>
<div class="section" id="section2">
<div class="content">
<h1>Strona 2</h1>
<a href="#section3" class="button">Przejdź do Strony 3</a>
</div>
</div>
<div class="section" id="section3">
<div class="content">
<h1>Strona 3</h1>
<a href="#section1" class="button">Wróć do Strony 1</a>
</div>
</div>
</body>
</html>
Dziwne
Takie coś mi skompilowało jak klikłem
1
Wladyslaw Rojs napisał(a):
Cześć,
Chciałbym was prosić o kod html, który sprawi, że np. na jednej stronie index.html będę mógł umieścić kilka stron z tym, że np. każda strona będzie się automatycznie rozciągała u usera na całą stronę. I mozliwosc stworzenia odnosnikow np. na kazdej sronie do nastepnej i strona się automatycznie przescrolluje lub po prostu przewijanie w dol myszka. i np. chcialbym zeby na kazdej stronie dalo sie zrobic inne tlo i np. podwojne ze do polowy jeden kolor potem inny. Bylbym wdzieczny.
czy jesteś programistą i jesteś w stanie korzystać z programistycznych rozwiązań, czy szukasz czegoś, co ci sam połączy ten HTML?
bo programistyczne rozwiązania to np. Next.js (framework opakowujący Reacta).
możesz też wziąć jakiś język programowania + system szablonów + i samemu zczytać pliki z dysku (minimalistyczne rozwiązanie na partyzanta).
możesz też użyć generatora stron statycznych jak Gatsby, Jekyll czy Hyde. Tutaj powinno być mniej technikaliów, a więcej szablonów (chyba nawet nie programista mógłby tego użyć).
Możesz też użyć jakiegoś języka backendowego i frameworka (np. Python i Django), ale wtedy musisz mieć na serwerze Pythona.
Albo Wordpress, wtedy potrzebny serwer z PHP.
każda strona będzie się automatycznie rozciągała u usera na całą stronę. (...) strona się automatycznie przescrolluje lub po prostu przewijanie w dol myszka.
To są rzeczy, które są związane już z CSS i interakcjami na stronie.
0
nie jestem programista nie znam sie zbytnio. chodzi glownie o to, ze teoretycznie chcialbym przedstawic koncept mojej inicjatywy dla pewnej grupy osob. Znam sie bardziej na grafice :D
Mówisz o tych rzeczach na samym końcu jednak kod wyżej odpowiada w stu procentach to o co prosiłem i działa :P
Chciałbym też was prosić o przyklad kodu jak zrobic np. na tej stronie zeby na samym srodku od gory i dolu w centrum byl obrazek od ktorego wokol np. moglbym dodac napisy i notatki. np.
0
johnny_Be_good napisał(a):
Jest jaki chciałem. A czy oprócz prośby wyżej, dałbyś mi też kod na to by obrazek był nieruchomy w rogu strony jednej i pod nim jakis tekst na jednej stronie.
1
<!DOCTYPE html>
<html lang="pl">
<head>
<style>
/* Ogólne style */
body, html {
margin: 0;
padding: 0;
scroll-behavior: smooth; /* Płynne przewijanie */
}
.section {
height: 100vh; /* Cała wysokość okna przeglądarki */
display: flex;
align-items: center;
justify-content: center;
position: relative;
text-align: center;
color: white;
font-family: Arial, sans-serif;
}
/* Tła dla poszczególnych sekcji */
#section1 {
background: linear-gradient(to bottom, #ff7e5f, #feb47b); /* Gradient */
}
#section2 {
background: linear-gradient(to bottom, #6a11cb, #2575fc);
}
#section3 {
background: linear-gradient(to bottom, #43cea2, #185a9d);
}
/* Styl dla treści */
.content {
max-width: 800px;
margin: 0 auto;
}
h1 {
font-size: 3em;
margin-bottom: 20px;
}
/* Styl przycisków */
.button {
display: inline-block;
padding: 15px 30px;
background-color: rgba(255, 255, 255, 0.8);
color: #333;
text-decoration: none;
border-radius: 5px;
font-size: 1em;
font-weight: bold;
transition: background-color 0.3s ease, color 0.3s ease;
}
.button:hover {
background-color: #333;
color: white;
}
/* Styl dla div w rogu */
.fixed-div {
position: fixed;
top: 10px;
left: 10px;
width: 150px;
background-color: rgba(255, 255, 255, 0.9);
border: 2px solid #ccc;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 10px;
font-family: Arial, sans-serif;
z-index: 1000; /* Zawsze na wierzchu */
}
.fixed-div img {
max-width: 100%;
border-radius: 4px;
}
.fixed-div p {
margin: 5px 0 0;
font-size: 0.9em;
color: #333;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pełnoekranowe sekcje</title>
</head>
<body>
<!-- Div w rogu -->
<div class="fixed-div">
<img src="https://via.placeholder.com/150" alt="Przykładowy obrazek">
<p>Przykładowy tekst</p>
</div>
<div class="section" id="section1">
<div class="content">
<h1>Strona 1</h1>
<a href="#section2" class="button">Przejdź do Strony 2</a>
</div>
</div>
<div class="section" id="section2">
<div class="content">
<h1>Strona 2</h1>
<a href="#section3" class="button">Przejdź do Strony 3</a>
</div>
</div>
<div class="section" id="section3">
<div class="content">
<h1>Strona 3</h1>
<a href="#section1" class="button">Wróć do Strony 1</a>
</div>
</div>
</body>
</html>
https : //via.placeholder.com/150 - zamień na adres obrazka
0
johnny_Be_good napisał(a):
Ekstra dziekuje. A w czym wszystkim czy da sie jeszcze na jednej stronie abys dal mi kod na takie cos: https://imgur.com/a/Xrijx6R
jesli chodzi o to logo, to czy da sie tak by bylo tylko na jednej stronie?
1
Sprawdź to [ kod on-line ]:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,
body {
margin: 0;
padding: 0;
}
body {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 0px 0px;
grid-template-areas:
"something-1 something-1 something-1"
"something-2 middle something-3"
"something-4 something-4 something-4";
background-image: linear-gradient(to bottom, #ff7e5f, #feb47b);
height: 100dvh;
}
.something-1 { grid-area: something-1; }
.something-2 { grid-area: something-2; }
.something-3 { grid-area: something-3; }
.something-4 { grid-area: something-4; }
.middle { grid-area: middle; }
div {
display: flex;
justify-content: center;
align-items: center;
font: 400 2rem/1 system-ui, monospace, sans-serif;
}
.middle {
background-image: url('https://picsum.photos/1900/1200?random=1');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: .5rem;
color: white;
text-shadow: 0 0 1px black, 0 0 2px black, 0 0 3px black;
}
</style>
</head>
<body>
<div class="something-1">Coś tam 1</div>
<div class="something-2">Coś tam 2</div>
<div class="middle">Środek</div>
<div class="something-3">Coś tam 3</div>
<div class="something-4">Coś tam 4</div>
</body>
</html>