mikeconrad/jennaconradphotography
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Mike Conrad
2024-11-06 20:36:07 -05:00
commit 4aa1785b43
51 changed files with 16786 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
test.html Normal file
View File

@ -0,0 +1,160 @@
<!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>Photography Portfolio</title>
<style>
/* Basic reset */
body, h1, h2, h3, p, a {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
color: #333;
}
body {
background-color: #faf4e9; /* Light Cream */
color: #4A4A4A;
line-height: 1.6;
display: flex;
min-height: 100vh;
justify-content: space-between;
}
/* Container for left sidebar and right content */
.container {
display: flex;
width: 100%;
min-height: 100vh;
}
/* Left sidebar with blurred background */
.sidebar {
position: relative;
width: 300px;
height: 100vh;
background-image: url('your-image.jpg'); /* Add your image here */
background-size: cover;
background-position: center;
filter: blur(8px); /* Blur the image */
z-index: 1;
}
/* Overlay to darken the sidebar for readability */
.sidebar-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4); /* Dark transparent overlay */
z-index: 2;
}
/* Right content area */
.content {
flex: 1;
padding: 20px;
background-color: #faf4e9; /* Same color as body background */
z-index: 3;
position: relative;
}
/* Header */
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
font-size: 3rem;
color: #333;
font-weight: bold;
}
.header p {
font-size: 1.2rem;
color: #4A4A4A;
}
/* Buttons and links */
.btn-primary {
display: inline-block;
background-color: #FF6F61; /* Accent color */
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.btn-primary:hover {
background-color: #E65C53;
}
/* Main content */
.main-content {
text-align: left;
margin-top: 30px;
}
.main-content h2 {
color: #2A9D8F; /* Accent color (Emerald Green) */
font-size: 2rem;
margin-bottom: 20px;
}
.main-content p {
font-size: 1rem;
color: #4A4A4A;
line-height: 1.6;
}
.main-content img {
max-width: 100%;
margin-top: 20px;
border-radius: 8px;
}
/* Footer */
.footer {
text-align: center;
margin-top: 40px;
padding: 20px 0;
background-color: #333;
color: white;
}
</style>
</head>
<body>
<div class="container">
<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar-overlay"></div>
</div>
<!-- Content Area -->
<div class="content">
<div class="header">
<h1>Photography Portfolio</h1>
<p>Capturing moments, telling stories.</p>
<a href="#contact" class="btn-primary">Contact Me</a>
</div>
<div class="main-content">
<h2>Latest Work</h2>
<p>Check out some of my latest photography projects.</p>
<img src="example-image.jpg" alt="Example Photography">
<p>Feel free to browse more of my work on the website, or contact me for collaborations.</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<p>&copy; 2024 Your Name. All rights reserved.</p>
</div>
</body>
</html>