Rapturate/Web_Dev_Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gitea migration

Browse Source
This commit is contained in:
Lewis Price
2026-02-23 15:03:43 +00:00
commit 2da5b97221
21 changed files with 908 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

420
css/indexStyle.css Executable file
View File

@@ -0,0 +1,420 @@
/* Quick Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Variables*/
:root {
--clr-name-plate: #1c3610;
--clr-text-color: rgb(41, 39, 39);
--clr-One:#F2D7C0;
--clr-Two:#B8C2C5;
--clr-Three:#43665f;
--clr-hero: #E19479;
--clr-Four:#A68B78 ;
--clr-Five:#4A5052;
--clr-Six: #5D3A28;
--fs-h1: 2.5rem;
--fs-h2: 1.8rem;
--fs-h3: 1.2rem;
--fs-text: 1rem;
--fs-small: 0.9rem;
}
html {
height: 100%;
}
body {
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.5;
background-color: var(--clr-One);
color: var(--clr-text-color);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Header */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--clr-Three);
z-index: 10;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
div.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
}
.nav-logo {
background-color: var(--clr-One);
border-radius: 20px;
padding: 5px;
}
nav ul.nav-links {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
list-style: none;
}
nav ul.nav-links a {
color: var(--clr-Six);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 10px;
background-color: var(--clr-One);
font-weight: 500;
transition: background-color 0.3s ease;
}
nav ul.nav-links a:hover,
nav ul.nav-links a:focus {
background-color: var(--clr-Four);
outline: none;
}
/* Main content */
main {
flex: 1;
/* padding-top: 120px; Added a gap between nav and hero which apparently is a faux*/
}
/* Hero */
#hero {
display: flex;
flex-direction: column;
min-height: 30rem;
background: var(--clr-hero);
background-size: cover;
background-position: center;
padding-top: 8rem;
padding-bottom: 3rem;
align-content: center;
align-items: center;
justify-content: center;
}
div.hero-text {
display: flex;
flex-direction: column;
text-align: center;
max-width: 300px;
gap: 1rem;
}
div.hero-text h1 {
color: var(--clr-name-plate);
font-size: var(--fs-h1);
font-weight: 700;
}
div.hero-text p {
color: var(--clr-text-color);
font-size: var(--fs-text);
max-width: 60ch;
}
.cta-button {
display: inline-block;
background-color: var(--clr-Three);
color: var(--clr-One);
padding: 1rem 2rem;
text-decoration: none;
border-radius: 10px;
font-weight: 600;
transition: background-color 0.3s ease;
margin-top: 1rem;
align-self: center;
}
.cta-button:hover,
.cta-button:focus {
background-color: var(--clr-Six);
outline: none;
}
img.hero-img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
}
/* About Section */
.about-section {
padding: 4rem 2rem;
max-width: 800px;
margin: 0 auto;
text-align: justify;
}
.about-section h2 {
font-size: var(--fs-h2);
color: var(--clr-name-plate);
margin-bottom: 2rem;
text-align: center;
}
.about-section p {
font-size: var(--fs-text);
line-height: 1.6;
max-width: 75ch;
}
/* Projects Containers */
.list-all-projects {
background-color: var(--clr-Four);
padding: 4rem 2rem;
min-height: 400px;
}
.list-all-projects h2 {
text-align: center;
color: var(--clr-text-color);
font-size: var(--fs-h2);
margin-bottom: 3rem;
}
#projects {
display: grid;
gap: 2rem;
grid-template-columns: 1fr;
max-width: 1200px;
margin: 0 auto;
}
.project-box {
background-color: var(--clr-Two);
border-radius: 15px;
display: flex;
align-items: flex-start;
color: var(--clr-text-color);
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.project-box:hover {
transform: translateY(-2px);
}
.project-box img {
width: 150px;
height: 120px;
object-fit: cover;
flex-shrink: 0;
}
.proj-text {
padding: 1rem;
flex: 1;
}
.proj-text h3 {
font-size: var(--fs-h3);
margin-bottom: 0.5rem;
color: var(--clr-name-plate);
}
.proj-text p {
font-size: var(--fs-small);
line-height: 1.4;
}
/* Contact Section */
#contact {
padding: 4rem 2rem;
background-color: var(--clr-One);
}
#contact h2 {
text-align: center;
font-size: var(--fs-h2);
color: var(--clr-name-plate);
margin-bottom: 2rem;
}
#socials {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 3rem;
}
#socials a img {
width: 3rem;
height: 3rem;
transition: transform 0.3s ease;
}
#socials a:hover img {
transform: scale(1.1);
}
form {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
max-width: 500px;
margin: 0 auto;
}
form label {
align-self: flex-start;
font-weight: 600;
color: var(--clr-name-plate);
}
form input,
form textarea {
width: 100%;
padding: 1rem;
font-size: var(--fs-text);
border: 3px solid var(--clr-Five);
border-radius: 10px;
background-color: white;
color: var(--clr-text-color);
}
form input:focus,
form textarea:focus {
outline: none;
border-color: var(--clr-Three);
}
form textarea {
min-height: 120px;
resize: vertical;
}
form button {
background-color: var(--clr-Three);
color: var(--clr-One);
border: none;
padding: 1rem 2rem;
font-size: var(--fs-text);
border-radius: 10px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.3s ease;
}
form button:hover,
form button:focus {
background-color: var(--clr-Six);
outline: none;
}
/* Footer */
footer {
background-color: var(--clr-Five);
color: var(--clr-One);
padding: 2rem;
text-align: center;
width: 100%;
margin-top: auto;
}
footer p {
margin-bottom: 1rem;
}
.social-links {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.social-links a img {
width: 2rem;
height: 2rem;
filter: brightness(0) invert(1);
transition: transform 0.3s ease;
}
.social-links a:hover img {
transform: scale(1.1);
}
/* Responsive Design - Mobile First */
@media (min-width: 600px) {
nav ul.nav-links {
flex-direction: row;
}
#hero {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 3rem;
/* padding: 4rem 2rem; */
}
div.hero-text {
text-align: left;
order: 2;
}
div.hero-text h1 {
text-align: left;
}
div.hero-text p {
text-align: left;
}
.cta-button {
align-self: flex-start;
}
img.hero-img {
order: 1;
justify-self: center;
}
#projects {
grid-template-columns: repeat(2, 1fr);
}
.project-box img {
width: 120px;
height: 100px;
}
}
@media (min-width: 900px) {
#projects {
grid-template-columns: repeat(3, 1fr);
}
.project-box {
flex-direction: column;
text-align: center;
}
.project-box img {
width: 100%;
height: 200px;
}
.proj-text {
text-align: left;
}
}

219
css/projectStyle.css Executable file
View File

@@ -0,0 +1,219 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Variables*/
:root {
--clr-primary: #009DF0;
--clr-accent-light: #F09B00;
--clr-accent-dark: #F04E00;
--clr-card-background: #E3F0FB;
--clr-page-background: #fffcf6;
--clr-text-light: #263f4a;
--clr-text-main: #1B0A14;
--clr-header-bg: #43665f;
--clr-nav-bg: #F2D7C0;
--fs-h1: 2.5rem;
--fs-h2: 1.5rem;
--fs-text: 1rem;
}
html {
height: 100%;
}
body {
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.5;
background-color: var(--clr-page-background);
color: var(--clr-text-main);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Header */
header {
width: 100%;
background-color: var(--clr-header-bg);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
}
.nav-logo {
background-color: var(--clr-nav-bg);
border-radius: 20px;
padding: 5px;
}
nav ul.nav-links {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
list-style: none;
}
nav ul.nav-links a {
color: #5D3A28;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 10px;
background-color: var(--clr-nav-bg);
font-weight: 500;
transition: background-color 0.3s ease;
}
nav ul.nav-links a:hover,
nav ul.nav-links a:focus {
background-color: #A68B78;
outline: none;
}
.header-content {
text-align: center;
padding: 2rem;
background-color: var(--clr-page-background);
}
.header-content h1 {
font-size: var(--fs-h1);
color: var(--clr-text-main);
font-weight: 700;
}
/* Main content */
main {
flex: 1;
padding: 3rem 2rem;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
#projects {
display: grid;
grid-template-columns: 1fr; /* Single column for mobile */
gap: 2rem;
}
#projects h2 {
font-size: var(--fs-h2);
color: var(--clr-text-main);
margin-bottom: 1rem;
}
#projects p {
color: var(--clr-text-light);
font-size: var(--fs-text);
line-height: 1.6;
max-width: 65ch;
}
.project-card {
display: flex;
flex-direction: column;
background-color: var(--clr-card-background);
border-radius: 16px;
box-shadow: 0 4px 12px rgba(91, 127, 161, 0.3);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(91, 127, 161, 0.4);
}
.project-image {
width: 100%;
height: 250px;
overflow: hidden;
}
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.project-card:hover .project-image img {
transform: scale(1.05);
}
.project-description {
padding: 1.5rem;
flex: 1;
}
.project-description h2 {
margin-bottom: 1rem;
}
/* Footer */
footer {
background-color: #4A5052;
color: #F2D7C0;
padding: 2rem;
text-align: center;
width: 100%;
margin-top: auto;
}
footer p {
margin-bottom: 1rem;
}
.social-links {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.social-links a img {
width: 2rem;
height: 2rem;
filter: brightness(0) invert(1);
transition: transform 0.3s ease;
}
.social-links a:hover img {
transform: scale(1.1);
}
/* Responsive Design - Mobile First */
@media (min-width: 600px) {
nav ul.nav-links {
flex-direction: row;
}
#projects {
grid-template-columns: repeat(2, 1fr);
}
.project-image {
height: 200px;
}
}
@media (min-width: 900px) {
#projects {
grid-template-columns: repeat(3, 1fr);
}
.project-image {
height: 250px;
}
}