Portefeuille réactif

1,392 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 May 2025

Site Web 3D

12 December 2025

FNAF Sister Location

24 February 2025

La radio est tellement lunatique ✅

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