Cartera adaptable

1,169 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

10 August 2024

Código HTML del formulario de inicio de sesión

22 June 2025

Plantilla de blog Tailwind CSS: modo oscuro, adaptable

5 May 2025

Calculadora de impuestos de Robux HTML CSS

HTML

<!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>

CSS