Portefeuille réactif

145 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 March 2025

Un code par ytr3d3

19 April 2024

Modèle de formulaire de connexion HTML V2

15 September 2024

Formulaire de connexion animé

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>

Recommandé

Un code par ytr3d3

Modèle de formulaire de connexion HTML V2

Formulaire de connexion animé

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS