Cartera adaptable

838 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

24 March 2025

Un código de smartarray391

30 September 2024

Tarjeta flexible

16 January 2025

Pilotos de F1 2024 - galería circular con miniaturas

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>

Recomendado

Un código de smartarray391

Tarjeta flexible

Pilotos de F1 2024 - galería circular con miniaturas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS