-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adjust website design to use bootstrap grid module and better design …
…having created an initial design with figma.
- Loading branch information
claire-fletcher
committed
Jul 28, 2024
1 parent
20db1e5
commit fa5d45a
Showing
14 changed files
with
473 additions
and
163 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# Graveyard | ||
|
||
This folder will temporarily hold old pages as the website is iterated on using new techniques learnt from the web development course. |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
<!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" /> | ||
<link rel="stylesheet" href="/styles/main.css" /> | ||
<link | ||
rel="stylesheet" | ||
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap" | ||
/> | ||
<title>Claire FH</title> | ||
</head> | ||
|
||
<body> | ||
<header> | ||
<h1>Claire Fletcher</h1> | ||
<nav> | ||
<ul> | ||
<li><a class="active" href="index.html">Home</a></li> | ||
<li> | ||
<a href="./pages/sustainability.html" | ||
>Environmental Sustainability</a | ||
> | ||
</li> | ||
<li><a href="./pages/edi.html">Accessibility</a></li> | ||
<li> | ||
<a href="https://github.com/claire-fletcher/claire-fh">GitHub</a> | ||
</li> | ||
<li><a href="https://www.linkedin.com/in/clair3-f/">LinkedIn</a></li> | ||
</ul> | ||
</nav> | ||
</header> | ||
|
||
<main> | ||
<div> | ||
<h2>About Me</h2> | ||
<p>Hi, I'm Claire 👋</p> | ||
<p> | ||
I'm a Software Engineer working in the Site Reliability Engineering | ||
team at Pexip. I'm passionate about building reliable and | ||
well-instrumented systems which follow best practices. Well-documented | ||
code and systems is a must for me! | ||
</p> | ||
<p> | ||
My background started with environmental sustainability so I am | ||
currently combining my expertise and passion by contributing to the | ||
"CNCF Technical Advisory Group for Environmental Sustainability" as a | ||
lead! | ||
</p> | ||
<img | ||
src="assets/whale.webp" | ||
alt="CNCF TAG logo. A light green whale sitting on top of a light green image of the earth." | ||
title="CNCF TAG Environmental Sustainability logo" | ||
style="display: block; margin: 0 auto; max-width: 15%; height: auto" | ||
/> | ||
</div> | ||
|
||
<div> | ||
<h2>Isn't this a bit basic?</h2> | ||
<p> | ||
<strong>Yes, it is!</strong> I am a firm believer in continuous | ||
learning and front-end web development is one area of software that I | ||
don't have much experience with. I am currently completing the | ||
codefirstgirls | ||
<a href="https://codefirstgirls.com/courses/coding-kickstarter" | ||
>Introduction to Web Development</a | ||
> | ||
course learning the basics of HTML, CSS, and combining this with | ||
JavaScript. | ||
</p> | ||
<p>One benefit of this simplicity is the reduced carbon impact!</p> | ||
<div id="wcb" class="carbonbadge"></div> | ||
<script | ||
src="https://unpkg.com/[email protected]/b.min.js" | ||
defer | ||
></script> | ||
</div> | ||
</main> | ||
|
||
<footer> | ||
<p class="copyright">© 2024 Claire Fletcher</p> | ||
</footer> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
/*Dev!!!*/ | ||
/* * { | ||
outline: 1px solid orange; | ||
} */ | ||
|
||
|
||
body { | ||
background-color: #f1f2ec; | ||
color: #010101; | ||
font-family: "Fraunces", sans-serif; | ||
min-height: 100vh; | ||
} | ||
|
||
footer { | ||
min-height: 50px; | ||
} | ||
|
||
|
||
/*FlexBoxes*/ | ||
/*NOTE: removed due to use of bootstrap which uses flexboxes and a grid*/ | ||
/* body { | ||
display: flex; | ||
flex-direction: column; | ||
} | ||
main { | ||
flex: 1; | ||
} */ | ||
|
||
/*Example styling for the box concept*/ | ||
.container { | ||
padding: 1%; | ||
border: #010101 solid 1px; | ||
background-color: #c8bea0; | ||
margin: 1%; | ||
} | ||
|
||
/*All for the navigation bar*/ | ||
|
||
nav ul { | ||
list-style-type: none; | ||
margin: 0; | ||
padding: 0; | ||
overflow: hidden; | ||
background-color: #28511c; | ||
} | ||
|
||
nav li { | ||
float: left; | ||
} | ||
|
||
nav li a { | ||
display: block; | ||
color: white; | ||
text-align: center; | ||
padding: 14px 16px; | ||
text-decoration: none; | ||
} | ||
|
||
nav li a:hover { | ||
background-color: #466d1d; | ||
} | ||
|
||
nav .active { | ||
background-color: #466d1d; | ||
} | ||
|
||
nav li { | ||
border-right: 1px solid #bbb; | ||
} | ||
|
||
nav li:last-child { | ||
border-right: none; | ||
} | ||
|
||
nav a:visited { | ||
color: white; | ||
} | ||
|
||
nav a:link { | ||
color: white; | ||
} | ||
|
||
/*Styling for all of the links*/ | ||
a:link { | ||
color: #28511c; | ||
background-color: transparent; | ||
text-decoration: none; | ||
} | ||
|
||
a:visited { | ||
color: #28511c; | ||
background-color: transparent; | ||
text-decoration: none; | ||
} | ||
|
||
/*Styling for the footer*/ | ||
footer { | ||
position: relative; | ||
bottom: 0; | ||
width: 100%; | ||
background-color: #f8f9fa; | ||
padding-top: 1em; | ||
padding-bottom: 1em; | ||
margin-top: 1%; | ||
text-align: center; | ||
} |
File renamed without changes.
Oops, something went wrong.