Custom HTML & CSS

<!– Custom HTML & CSS, Website Heading

Welcome to my

Portfolio

–>

<!– Custom HTML & CSS, Website Heading

<div style=”padding:50px;position: relative”>

<p class=”section-title primary-border” style=”float:left;position: absolute;top: 20px;left: 20px;z-index: 1;color:white;font-size:30px;background-color:#5c7bad;font-family:Georgia;letter-spacing:5px;padding:5px 280px 15px 15px”>
Welcome to my</p>

<h1 class=”section-title primary-border” style=”color:#223047;position: absolute;top: 50px;font-family:Georgia;left: 255px;z-index: 2;letter-spacing:6px;font-size: 74px”>
Portfolio</h1>

</div>

<!–

<!– Custom HTML & CSS, Website Body
“projects” section
<section id=”my-projects” style=”width: 100%”>
<div class=”projects flex-container” style=”display: flex;flex-wrap:wrap;font-family:Gill Sans;justify-content:space-between;gap: 20px;padding: 20px”>
INTRO
<article class=”project” style=”flex: 1 1 calc(28% – 20px);padding: 20px 10px 10px 10px;margin: 0″>
<div class=”project-info” style=”text-align: center;color:#223047;font-size:22px”>
<p>This WordPress portfolio site was created using custom HTML and CSS.<br><br>Please click on the buttons
to view the deployed projects.</p>
</div>
</article>
PORTFOLIO
<article class=”project” style=”flex: 1 1 calc(28% – 20px);padding: 15px;margin: 0;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)”>
<img src=”https://brown684408.com/wp-content/uploads/2024/08/coding-quiz.image_.jpg&#8221; style=”width: 100%;height: auto;display: block” />
<div class=”project-info” style=”text-align: center”>
<h3 class=”project name” style=”font-size:30px;color:#223047″>This Portfolio</h3>
<h4 class=”software-used” style=”font-size:18px;color:#223047″>WordPress with Custom HTML & CSS</h4>
<a target=”_blank” class=”url-btn” style=”background-color: #223047;color:white;padding:10px 20px;text-decoration:none;border-radius:8px” href=”https://brown684408.com/custom-html-css/”>Custom HTML &amp; CSS</a>
<p>
Click the button to view some of the custom HTML & CSS used in this portfolio.
</p>
</div>
</article>
PROJECT 1
<article class=”project” style=”flex: 1 1 calc(28% – 20px);padding:15px;margin:0;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)”>
<img src=”https://brown684408.com/wp-content/uploads/2024/08/sats.image_.jpg&#8221; style=”width:100%;height: auto;display: block;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)” />
<div class=”project-info” style=”text-align: center”>
<h3 class=”project-name” style=”font-size:30px;color:#223047″>Group Project</h3>
<h4 class=”software-used” style=”font-size:18px;color:#223047″>HTML | CSS | JavaScript | Moment.js |
Bulma</h4>
<a target=”_blank” class=”url-btn” style=”background-color: #223047;color:white;padding:10px 20px;text-decoration:none;border-radius:8px” href=”https://sub-gh.github.io/group-4/”>S.A.T.S.</a&gt;
<p style=”font-size:16px”>
This was a group project I did while in my coding bootcamp.
</p>
</div>
</article>
PROJECT 2
<article class=”project” style=”flex: 1 1 calc(28% – 20px);padding: 15px;margin: 0;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)”>
<img src=”https://brown684408.com/wp-content/uploads/2024/08/coding-quiz.jpg&#8221; style=”width: 100%;height: auto;display: block;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)” />
<div class=”project-info” style=”text-align: center”>
<h3 class=”project-name” style=”font-size:30px”>Coding Quiz</h3>
<h4 class=”software-used” style=”font-size:18px”>HTML, CSS, Javascript</h4>
<a target=”_blank” class=”url-btn” style=”background-color: #223047;color: white;padding: 10px 20px;text-decoration: none;border-radius: 8px” href=”https://sub-gh.github.io/coding-quiz/”>Coding Quiz</a>
<p style=”font-size:16px”>
This was an individual project I completed while at coding bootcamp.
</p>
</div>
</article>
PROJECT 3
<article class=”project” style=”flex: 1 1 calc(28% – 20px);padding: 15px;margin: 0;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)”>
<img src=”https://brown684408.com/wp-content/uploads/2024/08/run-buddy.image_.jpg&#8221; style=”width: 100%;height: auto;display: block;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)” />
<div class=”project-info” style=”text-align: center”>
<h3 class=”project-name” style=”font-size:30px”>Run Buddy</h3>
<h4 class=”software-used” style=”font-size:18px”>HTML, CSS</h4>
<a target=”_blank” class=”url-btn” style=”background-color: #223047;color: white;padding: 10px 20px;text-decoration: none;border-radius: 8px” href=”https://sub-gh.github.io/run-buddy/”>Run Buddy</a>
<p style=”font-size:16px”>Here’s another individual project I did while at bootcamp. Using HTML and
CSS.</p>
</div>
</article>
PROJECT 4
<article class=”project” style=”flex: 1 1 calc(28% – 20px);padding: 15px;margin: 0;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)”>
<img src=”https://brown684408.com/wp-content/uploads/2024/08/kenner.jpg&#8221; style=”width: 100%;height: auto;display: block” />
<div class=”project-info” style=”text-align: center”>
<h3 class=”project-name” style=”font-size:30px”>Kenner Construction &amp; Remodeling</h3>
<h4 class=”software-used” style=”font-size:18px”>WordPress</h4>
<a target=”_blank” class=”url-btn” style=”background-color: #223047;color: white;padding: 10px 20px;text-decoration: none;border-radius: 8px” href=””>Kenner Construction</a>
<p style=”font-size:16px”>
This is a website I’m working on currently, created in WordPress.
</p>
</div>
</article>
</div>
</section>
–>
— >