Proponuję wykonanie samego skryptu do zadania z 2024. Gotowy kod HTML i CSS jest poniżej.
Treść zadania: INF.03-08-24.06-SG
Przydatna linijka do skryptu (2 warianty)
document.getElementById("bla_bla").style.display = "none";
document.getElementById("ble_ble").style.display = "block";rejestracja.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title> Sklep - rejestracja </title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<section id="left">
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<tr><th>co?</th><th> ile taniej?</th></tr>
<tr><td> ubrania</td><td>15%</td></tr>
<tr><td> buty</td><td>25%</td></tr>
</table>
</section>
<section id="baner">
<h1>Zarejestruj się w sklepie</h1>
</section>
<section id="main">
<button id="but_klient" onclick="blok1()">Klient</button>
<button id="but_adres" onclick="blok2()">Adres</button>
<button id="but_kontakt" onclick="blok3()">Kontakt</button>
<div id="klient_div" onload="postep()">
<p>Imię</p>
<input type="text" id="imie" placeholder="Wpisz dane...">
<p>nazwisko</p>
<input type="text" id="nazwisko">
<p>Data urodzenia</p>
<input type="date" id="data">
</div>
<div id="adres_div">
<p>Ulica</p>
<input type="text" id="ulica">
<p>Numer</p>
<input type="number" id="numer">
<p>Miasto</p>
<input type="text" id="miasto">
</div>
<div id="kontakt_div">
<p>Numer komórkowy</p>
<input type="number" id="tel">
<input type="checkbox" id="akceptuje">Akceptuje RODO <br>
<button id="zatwierdz" onclick="zatwierdz()">Zatwierdź dane</button>
</div>
</section>
<section id="progressbar">
<section id="empty" onresize="postep()"></section>
</section>
<footer id="footer">
<h4>Rejestrację do sklepu wykonał: 0000000000</h4>
</footer>
<script>
</script>
</body>
</html>styl.css
*{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
body{
background-color: linen;
}
#left, #baner, #footer{
background-color: steelblue;
color: white;
text-align: center;
}
#left{
width: 25%;
height: 510px;
margin-top: 0;
margin-bottom: 0;
margin-left: 1%;
margin-right: 1%;
box-shadow: 4px blur dimgray;
float: left;
clear: both;
}
#baner{
width: 73%;
height: 80px;
float: left;
}
#main{
width: 73%;
height: 400px;
float: left;
}
#footer{
clear: both;
}
button{
background-color: steelblue;
color: white;
width: 20%;
padding: 15px;
margin-top: 30px;
font-size: 130%;
border: none;
}
button:hover{
background-color: navy;
}
#klient_div, #adres_div, #kontakt_div{
background-color: lightblue;
margin-right: 80px;
padding: 10px;
}
#adres_div, #kontakt_div{
display:none;
}
#progressbar{
background-color: lightgrey;
width: 73%;
margin-bottom: 10px;
float: left;
}
#empty{
background-color: navy;
width: 4%;
height: 30px;
}
table{
width: 100%;
border: dotted 1px navy;
float: left;
}
Twój komentarz