Portfólio do desenvolvedor HTML V2

Abrir no Editor Publique Seu Código

Recomendado

23 November 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Developer Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">DevPortfolio</div>
            <ul class="nav-links">
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

<section id="hero">
        <div class="hero-content">
            <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
            <p>Web Developer | Designer | Problem Solver</p>
            <a href="#contact" class="cta-btn">Get In Touch</a>
        </div>
    </section>

<section id="about" class="section-padding">
        <h2>About Me</h2>
        <p>I'm a full-stack developer with a passion for designing and building dynamic, user-friendly web applications. With experience in a range of modern technologies, I aim to deliver efficient and scalable solutions for my clients.</p>
    </section>

<section id="services" class="section-padding bg-light">
        <h2>Services</h2>
        <div class="services-grid">
            <div class="service-card">
                <h3>Web Development</h3>
                <p>Building responsive and interactive websites using modern technologies.</p>
            </div>
            <div class="service-card">
                <h3>UI/UX Design</h3>
                <p>Designing user interfaces with an emphasis on usability and accessibility.</p>
            </div>
            <div class="service-card">
                <h3>Consulting</h3>
                <p>Helping you define and refine your web development strategies.</p>
            </div>
        </div>
    </section>

<section id="skills" class="section-padding">
        <h2>Skills</h2>
        <div class="skills-grid">
            <div class="skill-card">HTML</div>
            <div class="skill-card">CSS</div>
            <div class="skill-card">JavaScript</div>
            <div class="skill-card">React</div>
            <div class="skill-card">Node.js</div>
            <div class="skill-card">Python</div>
            <div class="skill-card">Git</div>
            <div class="skill-card">SQL</div>
        </div>
    </section>

<section id="projects" class="section-padding bg-light">
        <h2>Projects</h2>
        <div class="projects-grid">
            <div class="project-card">
                <h3>Project 1</h3>
                <p>A brief description of this project and the technologies used.</p>
            </div>
            <div class="project-card">
                <h3>Project 2</h3>
                <p>A brief description of this project and the technologies used.</p>
            </div>
            <div class="project-card">
                <h3>Project 3</h3>
                <p>A brief description of this project and the technologies used.</p>
            </div>
        </div>
    </section>

<section id="testimonials" class="section-padding">
        <h2>Testimonials</h2>
        <div class="testimonials-grid">
            <div class="testimonial-card">
                <p>"Amazing work! The website was delivered on time and exceeded expectations!"</p>
                <p class="client-name">- Client Name</p>
            </div>
            <div class="testimonial-card">
                <p>"Incredible skills and attention to detail. Will definitely hire again!"</p>
                <p class="client-name">- Client Name</p>
            </div>
        </div>
    </section>

<section id="blog" class="section-padding bg-light">
        <h2>Blog</h2>
        <div class="blog-grid">
            <div class="blog-card">
                <h3>Blog Post 1</h3>
                <p>A short summary of the blog post.</p>
            </div>
            <div class="blog-card">
                <h3>Blog Post 2</h3>
                <p>A short summary of the blog post.</p>
            </div>
        </div>
    </section>

<section id="contact" class="section-padding">
        <h2>Contact Me</h2>
        <form action="#">
            <input type="text" name="name" placeholder="Your Name" required>
            <input type="email" name="email" placeholder="Your Email" required>
            <input name="message" placeholder="Your Message" required />
            <button type="submit">Send Message</button>
        </form>
    </section>

<footer>
        <p>© 2024 Your Name. All Rights Reserved.</p>
    </footer>

CSS

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and Font Styles */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f4f8;
    color: #333;
}

header {
    background-color: #2c3e50;
    padding: 1rem;
    text-align: center;
}

.logo {
    font-size: 1.8rem;
    color: #ecf0f1;
    font-weight: bold;
}

.nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.nav-links a {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 1rem;
}

.nav-links a:hover {
    color: #1abc9c;
}

/* Hero Section */
#hero {
    background-color: #1abc9c;
    color: white;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.hero-content h1 {
    font-size: 3rem;
}

.hero-content .highlight {
    color: #f1c40f;
}

.hero-content p {
    margin: 1rem 0;
    font-size: 1.25rem;
}

.cta-btn {
    background-color: #f1c40f;
    color: #2c3e50;
    padding: 0.75rem 2rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.cta-btn:hover {
    background-color: #f39c12;
}

/* Sections */
.section-padding {
    padding: 4rem 2rem;
}

.bg-light {
    background-color: #ecf0f1;
}

h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}

/* Services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.service-card {
    background-color: #3498db;
    color: white;
    padding: 2rem;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
}

/* Skills */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.skill-card {
    background-color: #34495e;
    color: white;
    padding: 2rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.skill-card:hover {
    background-color: #1abc9c;
}

/* Projects */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card {
    background-color: white;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Testimonials */
.testimonials-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.testimonial-card {
    background-color: #ecf0f1;
    padding: 2rem;
    border-radius: 5px;
    border-left: 5px solid #1abc9c;
}

.client-name {
    margin-top: 1rem;
    font-weight: bold;
}

/* Blog */
.blog-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.blog-card {
    background-color: white;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Contact Section */
#contact form {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#contact input,
#contact textarea {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 5px;
}

#contact button {
    background-color: #f1c40f;
    color: #2c3e50;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
}

#contact button:hover {
    background-color: #f39c12;
}

/* Footer */
footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 1rem;
}

Portfólio do desenvolvedor HTML V2

Recomendado

Efeito de pairar no ícone

Livro da Bruxa

HTML

CSS

JS

Recomendado

Efeito de pairar no ícone

Livro da Bruxa

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS