1
This commit is contained in:
Flatlogic Bot
parent
d4afebca3e
commit
e8af15796b
@ -1,12 +1,11 @@
|
|||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--primary-color: #2563EB;
|
--primary-color: #000000;
|
||||||
--secondary-color: #475569;
|
--secondary-color: #475569;
|
||||||
--background-color: #F8FAFC;
|
--background-color: #F8FAFC;
|
||||||
--surface-color: #FFFFFF;
|
--surface-color: #FFFFFF;
|
||||||
--text-color: #1E293B;
|
--text-color: #000000;
|
||||||
--border-radius: 0.5rem;
|
--border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -21,15 +20,23 @@ body {
|
|||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero {
|
.navbar-brand, .nav-link {
|
||||||
background: linear-gradient(45deg, rgba(37, 99, 235, 0.9), rgba(96, 165, 250, 0.9)), url('https://picsum.photos/seed/hero/1600/900') no-repeat center center;
|
color: var(--text-color);
|
||||||
background-size: cover;
|
|
||||||
color: white;
|
|
||||||
padding: 6rem 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero h1 {
|
.hero {
|
||||||
font-weight: 700;
|
background-color: var(--surface-color);
|
||||||
|
padding: 6rem 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 80vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
@ -38,7 +45,7 @@ body {
|
|||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--primary-color);
|
color: var(--text-color);
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -70,3 +77,56 @@ body {
|
|||||||
padding: 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
border-top: 1px solid #e2e8f0;
|
border-top: 1px solid #e2e8f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#portfolio .section-title, #contact .section-title {
|
||||||
|
color: #000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-card {
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
margin-bottom: 5rem; /* Increased margin for more space */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-card-body {
|
||||||
|
padding: 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-card-title {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-card-text {
|
||||||
|
color: var(--text-color);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark {
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark:hover {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-secondary {
|
||||||
|
border-color: #000;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-secondary:hover {
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-card:not(:last-child) {
|
||||||
|
border-bottom: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
BIN
assets/pasted-20250917-104344-f4d265de.png
Normal file
BIN
assets/pasted-20250917-104344-f4d265de.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
assets/pasted-20250917-104638-bcdb7a3e.png
Normal file
BIN
assets/pasted-20250917-104638-bcdb7a3e.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
BIN
assets/pasted-20250917-130502-48058169.png
Normal file
BIN
assets/pasted-20250917-130502-48058169.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 MiB |
97
index.php
97
index.php
@ -3,8 +3,8 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>John Doe - Personal Portfolio</title>
|
<title>Jane Doe - Architect Portfolio</title>
|
||||||
<meta name="description" content="A personal portfolio website for John Doe, showcasing work and skills.">
|
<meta name="description" content="A personal portfolio website for Jane Doe, showcasing architectural projects and skills.">
|
||||||
|
|
||||||
<!-- Bootstrap CSS -->
|
<!-- Bootstrap CSS -->
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
@ -13,9 +13,9 @@
|
|||||||
<link rel="stylesheet" href="assets/css/custom.css">
|
<link rel="stylesheet" href="assets/css/custom.css">
|
||||||
|
|
||||||
<!-- Open Graph Meta Tags -->
|
<!-- Open Graph Meta Tags -->
|
||||||
<meta property="og:title" content="John Doe - Personal Portfolio">
|
<meta property="og:title" content="Jane Doe - Architect Portfolio">
|
||||||
<meta property="og:description" content="A personal portfolio website for John Doe, showcasing work and skills.">
|
<meta property="og:description" content="A personal portfolio website for Jane Doe, showcasing architectural projects and skills.">
|
||||||
<meta property="og:image" content="https://picsum.photos/seed/hero/1200/630">
|
<meta property="og:image" content="https://picsum.photos/seed/architecture-og/1200/630">
|
||||||
<meta property="og:url" content="">
|
<meta property="og:url" content="">
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:type" content="website">
|
||||||
|
|
||||||
@ -23,41 +23,26 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<header>
|
<header class="hero text-center">
|
||||||
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a class="navbar-brand fw-bold" href="#">John Doe</a>
|
<div class="row">
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
<div class="col-md-8 mx-auto">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<h1 class="display-1 fw-bold">Jane Doe</h1>
|
||||||
</button>
|
<p class="lead">Architect</p>
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
<a href="#portfolio" class="btn btn-dark btn-lg">See my work</a>
|
||||||
<ul class="navbar-nav ms-auto">
|
<a href="#contact" class="btn btn-outline-secondary btn-lg">Get in touch</a>
|
||||||
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
</div>
|
||||||
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
|
||||||
<!-- Hero Section -->
|
|
||||||
<section class="hero text-center">
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="display-4">Creative Developer & Designer</h1>
|
|
||||||
<p class="lead my-4">I build beautiful and functional websites for the modern web.</p>
|
|
||||||
<a href="#portfolio" class="btn btn-primary btn-lg">View My Work</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- About Section -->
|
<!-- About Section -->
|
||||||
<section id="about" class="section">
|
<section id="about" class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="section-title text-center">About Me</h2>
|
<h2 class="section-title text-center">About Me</h2>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-8 mx-auto text-center">
|
<div class="col-md-8 mx-auto text-center">
|
||||||
<p>Hello! I'm John, a passionate web developer with a knack for creating elegant solutions in the least amount of time. I specialize in front-end development and love bringing ideas to life in the browser. When I'm not coding, you can find me exploring new technologies or enjoying a good cup of coffee.</p>
|
<p>Hello! I'm Jane, an architect with a passion for creating sustainable and innovative buildings. I believe great design can improve lives and strive to create spaces that are both beautiful and functional. When I'm not designing, you can find me exploring new cities or sketching in my notebook.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -66,26 +51,48 @@
|
|||||||
<!-- Portfolio Section -->
|
<!-- Portfolio Section -->
|
||||||
<section id="portfolio" class="section bg-light">
|
<section id="portfolio" class="section bg-light">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="section-title text-center">Portfolio</h2>
|
<h2 class="section-title text-center">Latest Work</h2>
|
||||||
<div class="row g-4">
|
<div class="portfolio-card">
|
||||||
|
<div class="row g-0">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div class="card">
|
<div class="portfolio-card-body">
|
||||||
<img src="https://picsum.photos/seed/portfolio1/800/600" class="card-img-top" alt="Placeholder for portfolio project one.">
|
<h3 class="portfolio-card-title">Modern Villa</h3>
|
||||||
<div class="card-body">
|
<p class="portfolio-card-text">A stunning architectural villa with a minimalist design, focusing on open spaces and natural light.</p>
|
||||||
<h5 class="card-title">Project One</h5>
|
<a href="#" class="btn btn-dark">More</a>
|
||||||
<p class="card-text">A brief description of the project, highlighting the technologies used and the problems solved.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div class="card">
|
<img src="https://picsum.photos/seed/architecture-1/800/600" class="img-fluid" alt="Modern Architectural Villa">
|
||||||
<img src="https://picsum.photos/seed/portfolio2/800/600" class="card-img-top" alt="Placeholder for portfolio project two.">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">Project Two</h5>
|
|
||||||
<p class="card-text">Another project description, focusing on the creative process and the final outcome.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="portfolio-card">
|
||||||
|
<div class="row g-0">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="portfolio-card-body">
|
||||||
|
<h3 class="portfolio-card-title">City Museum</h3>
|
||||||
|
<p class="portfolio-card-text">A contemporary museum design that blends with the urban landscape, featuring a unique facade.</p>
|
||||||
|
<a href="#" class="btn btn-dark">More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<img src="https://picsum.photos/seed/architecture-2/800/600" class="img-fluid" alt="Contemporary City Museum">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio-card">
|
||||||
|
<div class="row g-0">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="portfolio-card-body">
|
||||||
|
<h3 class="portfolio-card-title">Residential Tower</h3>
|
||||||
|
<p class="portfolio-card-text">A high-rise residential tower with a focus on sustainable living and community spaces.</p>
|
||||||
|
<a href="#" class="btn btn-dark">More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<img src="https://picsum.photos/seed/architecture-3/800/600" class="img-fluid" alt="Sustainable Residential Tower">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -108,19 +115,19 @@
|
|||||||
<textarea class="form-control" rows="5" placeholder="Your Message" required></textarea>
|
<textarea class="form-control" rows="5" placeholder="Your Message" required></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<button type="submit" class="btn btn-primary">Send Message</button>
|
<button type="submit" class="btn btn-dark">Send Message</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer class="footer text-center">
|
<footer class="footer text-center">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<p class="mb-0">© 2025 John Doe. All Rights Reserved.</p>
|
<p class="mb-0">© 2025 Jane Doe. All Rights Reserved.</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user