<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Moja Wizytówka</title>
<link rel="stylesheet" href="css/style.css">
</head>
<header id="hero">
<nav>
<ul>
<li><a href="#hero">Start</a></li>
<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>
</nav>
<div class="hero-text">
<h1>Witaj, jestem Julia</h1>
<p>Jestem full-stack developerką a to moja strona internetowa</p>
</div>
</header>
<main>
<section id="about">
<h2>O mnie</h2>
<p>Zapraszam do kontaktu!</p>
</section>
<section id="services">
<h2>Oferuję:</h2>
<div class="services-grid">
<div class="service-card">
<h3>Strony WWW</h3>
<p>Tworzenie stron wizytówek i firmowych zgodnych z nowymi standardami.</p>
</div>
<div class="service-card">
<h3>Aplikacje Webowe</h3>
<p>Budowa aplikacji internetowych .net.</p>
</div>
<div class="service-card">
<h3>Optymalizacja SEO</h3>
<p>Poprawa widoczności stron w wyszukiwarkach i przyjazny UX.</p>
</div>
</div>
</section>
<section id="portfolio-item">
<h2>Oto moje projekty</h2>
<div class="portfolio-grid">
<div class="portfolio-item">Projekt 1</div>
<div class="portfolio-item">Projekt 2</div>
<div class="portfolio-item">Projekt 3</div>
<div class="portfolio-item">Projekt 4</div>
</div>
</section>
<section id="contact">
<h2>Kontakt</h2>
<form action="#" method="post">
<label for="name">Imię:</label>
<input type="text" id="name" name="name" required>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
<label for="message">Wiadomość:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Wyślij</button>
</form>
</section>
</main>
<footer>
<p>© 2025 Julia</p>
</footer>
</body>
</html>
/* GLOBALNE */
*, *::before, *::after {
box-sizing: inherit;
}
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'VT323', monospace;
overflow-x: hidden;
width: 100vw;
min-height: 100vh;
}
body {
line-height: 1.0;
background-color: rgb(0, 0, 0);
color: lawngreen;
font-size: 2rem;
}
/* treść */
header {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(to right,darkblue, lawngreen);
color: lawngreen;
padding: 1.2rem 1rem;
text-align: center;
}
nav {
position: sticky;
top: 0;
z-index: 1000;
background-color: darkblue;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
gap: 5rem;
margin: 0;
padding: 1rem 0;
background-color: darkblue;
background-size: cover;
}
nav a {
color: lawngreen;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
.hero-text h1 {
font-size: clamp(1.5rem, 4vw, 1.8rem);
margin-bottom: 0.5rem;
}
.hero-text p {
font-size: clamp(0.9rem, 3vw, 1.2rem);
}
section {
padding: 2rem 1rem;
max-width: 1200px;
margin: auto;
text-align: center;
margin-bottom: 0;
}
section:first-of-type {
margin-top: 2rem;
}
section h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
text-align: center;
}
.services-grid {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
.service-card {
background: white;
border-radius: 8px;
padding: 1rem;
flex: 1 1 200px;
box-shadow: 0 4px 6px red;
transition: transform 0.3s;
}
.service-card:hover {
transform: translateY(-3px);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.8rem;
}
.portfolio-item {
background-color: dodgerblue;
color: white;
padding: 1rem;
border-radius: 8px;
text-align: center;
font-size: 0.9rem;
box-shadow: 0 8px 20px red;
}
form {
max-width: 500px;
margin: auto;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
input, textarea {
padding: 0.6rem;
border-radius: 4px;
border: 1px solid black;
font-size: 0.9rem;
}
input:focus-visible, textarea:focus-visible {
outline: 2px solid dodgerblue;
}
button {
padding: 0.8rem;
border: none;
background-color: dodgerblue;
color: white;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
}
button:hover {
background-color: red;
}
footer {
text-align: center;
padding: 1.2rem 1rem;
background-color: gray;
color: white;
margin-top: 1.5rem;
font-size: 0.8rem;
}
@media(max-width: 768px) {
nav {
position: sticky;
top: 0;
}
nav ul {
flex-direction: column;
gap: 1rem;
padding: 0.5rem 0;
}
.services-grid {
flex-direction: column;
}
.hero-text h1 {
font-size: 1.5rem;
}
.hero-text p {
font-size: 0.9rem;
}
section h2 {
font-size: 1.2rem;
}
}
