JS Praca domowa 2
#javascript
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style2.css">
<title>Wizytówka</title>
</head>
<body class="background-examples">
<section>
<header class="header">Agnieszka Seweryn - projektant wnętrz</header>
<br>
<h1>Zaprojektujemy Twoje wnętrze!</h1>
</section>
<section>
<ul class="ul">
<li><a href="#about">O mnie</a></li>
<li><a href="#services">Oferta</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</section>
<section id="about" class="two-columns">
<h2>O mnie</h2>
<p>Jestem specjalistą z wieloletnim doświadczeniem. Pomagam klientom osiągać sukces dzięki kreatywnym i skutecznym rozwiązaniom.</p>
</section>
<section id="services">
<h2>Usługi</h2>
<ol class="services">
<li class="card">Projekt 2D - rysunek techniczny z planem przestrzeni.</li>
<li class="card">Wizualizacja 3D całej przestrzeni.</li>
</ol>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<div>
<div>Projekt 1</div>
<div>Projekt 2</div>
<div>Projekt 3</div>
<div>Projekt 4</div>
</div>
</section>
<section>
<p class="content-box-example">Tania i szybka realizacja - wystarczy, że się z Nami skontaktujesz w formularzu poniżej</p>
<p class="color-examples">Na każdą wiadomość odpowiadamy maksymalnie do 2 dni roboczych. Jeśli zależy Ci na szybszej informacji zwrotnej, zapraszamy do kontaktu poprzez numer telefonu: 121 929 373.</p>
</section>
<section id="contact">
<h2>Kontakt</h2>
<fieldset style="width:500px">
<legend>Formularz kontaktowy</legend>
<br>
<div><label for="name">Imię:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="text" id="email" name="email">
</div> <br>
<div> <textarea id="message" name="message" rows="5" cols="50" placeholder="Wiadomość">
</textarea>
</div>
<p>Akceptuję politykę prywatności
<input type="checkbox" id="subscribe" name="subscribe" checked>
</p>
<input type="submit" value="Wyślij">
<input type="reset" value="Resetuj">
</fieldset>
</section>
<footer class="display-block">
<p>© 2025 Wizytówka - Agnieszka. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
</html>
___________________________________________________
p {
color: rgb(0, 0, 0);
text-align: left;
}
h1 {
color: rgb(132, 0, 168);
font-style: italic;
font-weight: bold;
font-size: 20px;
text-align: center;
}
h2 {
color: rgb(76, 0, 168);
font-weight: bold;
font-size: 15px;
text-align: left;
font-family: 'Courier New', sans-serif;
}
h3 {
color: rgb(101, 64, 132);
font-weight: bold;
font-size: 13px;
text-align: left;
font-family: 'Arial', sans-serif;
}
.services {
display: flex;
flex-wrap: wrap; /* Pozwala zawijać do kolejnej linii */
gap: 20px;
}
.card {
background: #f1cfff;
padding: 20px;
flex: 1 1 200px; /* Minimalna szerokość 200px, reszta elastyczna */
border-radius: 8px;
text-align: center;
}
.highlight {
background-color: rgb(202, 21, 187);
}
.header {
height: 70px;
font-size: 30px;
letter-spacing: 2px;
color: rgb(255, 255, 255);
font-family: 'Courier New', sans-serif;
font-weight: bold;
text-align: center;
background: rgb(255, 0, 132);
}
div p {
margin-left: 20px;
}
ul {
color: rgb(128, 0, 98);
position: relative;
background: rgb(217, 181, 255)
}
footer {
color: #949494;
text-align: left;
font-size: 10px;
padding: 2rem;
}
.background-examples {
background: linear-gradient(to right, rgb(252, 252, 252), rgb(247, 156, 213));
}
.content-box-example {
box-sizing: content-box;
width: 50%;
padding: 20px;
border: 2px solid rgb(211, 7, 157);
}
