Webleb - HTML UI Elements - Reaktionsfähiges Portfolio

HTML

CSS

<!DOCTYPE html>

<head>

<title>Responsive Portfolio</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Segoe UI', sans-serif;

line-height: 1.6;

color: #333;

background-color: #f4f4f4;

}

header {

background: #111;

color: #fff;

padding: 1rem;

text-align: center;

}

header h1 {

margin-bottom: 0.5rem;

}

nav {

display: flex;

justify-content: center;

gap: 2rem;

background: #222;

padding: 0.5rem;

}

nav a {

color: #fff;

text-decoration: none;

}

section {

padding: 2rem;

max-width: 1000px;

margin: auto;

}

.projects {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 1.5rem;

}

.card {

background: #fff;

padding: 1rem;

border-radius: 8px;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

transition: transform 0.2s ease;

}

.card:hover {

transform: scale(1.03);

}

.card h3 {

margin-bottom: 0.5rem;

}

footer {

text-align: center;

padding: 1rem;

background: #111;

color: #fff;

}

@media (max-width: 600px) {

header h1 {

font-size: 1.5rem;

}

nav {

flex-direction: column;

gap: 0.5rem;

align-items: center;

}

section {

padding: 1rem;

}

.projects {

grid-template-columns: 1fr;

}

</style>

</head>

<body>

<h1>Kevakibhack</h1>

<p>Web Developer & Designer</p>

</header>

<nav>

<a href="#about">About</a>

<a href="#projects">Projects</a>

<a href="#contact">Contact</a>

</nav>

<h2>About Me</h2>

<p>I'm a passionate web developer with expertise in HTML, CSS, and JavaScript. I create responsive and user-friendly websites that deliver great experiences across all devices.</p>

</section>

<h2>My Projects</h2>

<h3>E-commerce Site</h3>

<p>A fully responsive online store with product filtering and cart functionality.</p>

</div>

<h3>Portfolio Template</h3>

<p>A customizable portfolio template for creative professionals.</p>

</div>

<h3>Weather App</h3>

<p>Real-time weather application with location detection.</p>

</div>

</section>

<h2>Contact Me</h2>

<p>Email: umur9871@gmail.com</p>

<p>Phone: (123) 456-7890</p>

</section>

</footer>

</body>

</html>

Validating your code, please wait...

HTML

CSS

<!DOCTYPE html>

<head>

<title>Responsive Portfolio</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Segoe UI', sans-serif;

line-height: 1.6;

color: #333;

background-color: #f4f4f4;

}

header {

background: #111;

color: #fff;

padding: 1rem;

text-align: center;

}

header h1 {

margin-bottom: 0.5rem;

}

nav {

display: flex;

justify-content: center;

gap: 2rem;

background: #222;

padding: 0.5rem;

}

nav a {

color: #fff;

text-decoration: none;

}

section {

padding: 2rem;

max-width: 1000px;

margin: auto;

}

.projects {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 1.5rem;

}

.card {

background: #fff;

padding: 1rem;

border-radius: 8px;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

transition: transform 0.2s ease;

}

.card:hover {

transform: scale(1.03);

}

.card h3 {

margin-bottom: 0.5rem;

}

footer {

text-align: center;

padding: 1rem;

background: #111;

color: #fff;

}

@media (max-width: 600px) {

header h1 {

font-size: 1.5rem;

}

nav {

flex-direction: column;

gap: 0.5rem;

align-items: center;

}

section {

padding: 1rem;

}

.projects {

grid-template-columns: 1fr;

}

</style>

</head>

<body>

<h1>Kevakibhack</h1>

<p>Web Developer & Designer</p>

</header>

<nav>

<a href="#about">About</a>

<a href="#projects">Projects</a>

<a href="#contact">Contact</a>

</nav>

<h2>About Me</h2>

<p>I'm a passionate web developer with expertise in HTML, CSS, and JavaScript. I create responsive and user-friendly websites that deliver great experiences across all devices.</p>

</section>

<h2>My Projects</h2>

<h3>E-commerce Site</h3>

<p>A fully responsive online store with product filtering and cart functionality.</p>

</div>

<h3>Portfolio Template</h3>

<p>A customizable portfolio template for creative professionals.</p>

</div>

<h3>Weather App</h3>

<p>Real-time weather application with location detection.</p>

</div>

</section>

<h2>Contact Me</h2>

<p>Email: umur9871@gmail.com</p>

<p>Phone: (123) 456-7890</p>

</section>

</footer>

</body>

</html>