Layout changes and required content added
This commit is contained in:
parent
1a35b91ac8
commit
f4633d6dca
|
|
@ -0,0 +1,90 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>PHP Documentation</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<nav id="navbar"><header>PHP Documentation</header>
|
||||||
|
<div><a class="nav-link" href="#PHP_Introduction">PHP Introduction</a></div>
|
||||||
|
<div><a class="nav-link" href="#Basic_PHP_Syntax">Basic PHP Syntax</a></div>
|
||||||
|
<div><a class="nav-link" href="#PHP_Variables">PHP Variables</a></div>
|
||||||
|
<div><a class="nav-link" href="#PHP_Conditional_Statements">PHP Conditional Statements</a></div>
|
||||||
|
<div><a class="nav-link" href="#PHP_Loops">PHP Loops</a></div>
|
||||||
|
</nav>
|
||||||
|
<main id="main-doc">
|
||||||
|
<section id="PHP_Introduction" class="main-section">
|
||||||
|
<header>PHP Introduction</header>
|
||||||
|
<p>PHP is an acronym for PHP Hypertext Processor. PHP files can contain HTML, CSS, and Javascript, which are run on a web server and sent to the browser as HTML.</p>
|
||||||
|
|
||||||
|
<p>PHP files end in the <code>.php</code> file extension.
|
||||||
|
|
||||||
|
<p>What is PHP?</p>
|
||||||
|
<ul>
|
||||||
|
<li>PHP is an acronym for "PHP: Hypertext Preprocessor"</li>
|
||||||
|
<li>PHP is a widely-used, open source scripting language</li>
|
||||||
|
<li>PHP scripts are executed on the server</li>
|
||||||
|
<li>PHP is free to download and use</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section id="Basic_PHP_Syntax" class="main-section">
|
||||||
|
<header>Basic PHP Syntax</header>
|
||||||
|
<p>A PHP script can be placed anywhere in the document.</p>
|
||||||
|
|
||||||
|
<p>A PHP script starts with <code><?php</code> and ends with <code>?></code></p>
|
||||||
|
|
||||||
|
<p>A simple PHP script</p>
|
||||||
|
<code><?php
|
||||||
|
echo "Hello World!";
|
||||||
|
?></code>
|
||||||
|
</section>
|
||||||
|
<section id="PHP_Variables" class="main-section">
|
||||||
|
<header>PHP Variables</header>
|
||||||
|
<p>A variable starts with the <code>$</code> followed by the name of the variable</p>
|
||||||
|
|
||||||
|
<p>Example</p>
|
||||||
|
<code>$firtName = "Baxter";</code>
|
||||||
|
|
||||||
|
<p>Rules for PHP Variables:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>A variable starts with the $ sign, followed by the name of the variable</li>
|
||||||
|
<li>A variable name must start with a letter or the underscore character</li>
|
||||||
|
<li>A variable name cannot start with a number</li>
|
||||||
|
<li>A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ )</li>
|
||||||
|
<li>Variable names are case-sensitive ($age and $AGE are two different variables)</li>
|
||||||
|
</section>
|
||||||
|
<section id="PHP_Conditional_Statements" class="main-section">
|
||||||
|
<header >PHP Conditional Statements</header>
|
||||||
|
<p>In PHP we have the following conditional statements.
|
||||||
|
<ul>
|
||||||
|
<li><code>if</code> statement - executes some code if one condition is true</li>
|
||||||
|
<li><code>if...else</code> statement - executes some code if a condition is true and another code if that condition is false</li>
|
||||||
|
<li><code>if...elseif...else</code> statement - executes different codes for more than two conditions</li>
|
||||||
|
<li><code>switch</code> statement - selects one of many blocks of code to be executed</li>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section id="PHP_Loops" class="main-section">
|
||||||
|
<header >PHP Loops</header>
|
||||||
|
<p>In PHP we have the following loop types</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>while</code> - loops through a block of code as long as the specified condition is true</li>
|
||||||
|
<li><code>do...while</code> - loops through a block of code once, and then repeats the loop as long as the specified condition is true</li>
|
||||||
|
<li><code>for</code> - loops through a block of code a specified number of times</li>
|
||||||
|
<li><code>foreach</code> - loops through a block of code for each element in an array</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section class="reference">
|
||||||
|
<header>Reference</header>
|
||||||
|
<ul>
|
||||||
|
<li>The content from this page is from the w3schools <a href="https://www.w3schools.com/PHP/default.asp">PHP Tutorial</a>
|
||||||
|
</i>
|
||||||
|
<ul>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
<html>
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-left: 24px;
|
||||||
|
position: relative;
|
||||||
|
width: 80%;
|
||||||
|
top: 12px;
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding-bottom: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-bottom: 1px solid #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
|
section:last-of-type {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
section:last-of-type header {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar {
|
||||||
|
height: 100%;
|
||||||
|
margin-right: 8px;
|
||||||
|
border-right: 1px solid #000;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: auto;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar header {
|
||||||
|
padding: 12px;
|
||||||
|
border-bottom: 1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar div {
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: 1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background-color: #ddd;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: 1024px) {
|
||||||
|
#navbar {
|
||||||
|
position: relative;
|
||||||
|
width: auto;
|
||||||
|
height: 175px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<title>Portfolio Page</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<p id="site-name">My Portfolio</p>
|
||||||
|
<navbar id="navbar">
|
||||||
|
<a href="#welcome-section">Welcome</a>
|
||||||
|
<a href="#projects">Projects</a>
|
||||||
|
<a href="#contact">Contact Me</a>
|
||||||
|
</navbar>
|
||||||
|
</header>
|
||||||
|
<section id="welcome-section">
|
||||||
|
<h1>Welcome to my online portfolio</h1>
|
||||||
|
<p>I am an aspiring web developer looking to solve puzzles and express my creativity through writing code. I hope to help others learn as I continue to learn as well, so that we can grow together.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Please feel free to take a look at my projects below to get a better understanding of my work</p>
|
||||||
|
<p>Feel free to get in touch if you have a question about anything I've worked on, I've listed two contact methods below</p>
|
||||||
|
<p>👋 have a great day!</p>
|
||||||
|
</section>
|
||||||
|
<section id="projects">
|
||||||
|
<h2>Projects</h2>
|
||||||
|
<div class="project-tile">
|
||||||
|
<img src="https://raw.githubusercontent.com/rainydayemma/qr-code-component/refs/heads/main/screenshot.jpg" alt="A screenshot of the completed QR code component project from front end mentor">
|
||||||
|
<p>QR Code Component - Frontend Mentor</p>
|
||||||
|
<a href="https://github.com/rainydayemma/qr-code-component/tree/main">github repo</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="contact">
|
||||||
|
<h2>Let's get in touch!</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a id="profile-link" href="https://www.freecodecamp.org/rainydayemma" target="_blank">freeCodeCamp profile</a></li>
|
||||||
|
<li><a id="profile-link" href="https://github.com/rainydayemma" target="_blank">github account</a></li>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
:root {
|
||||||
|
--black: #222831;
|
||||||
|
--grey: #393e46;
|
||||||
|
--blue: #0092ca;
|
||||||
|
--white: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
*, ::before, ::after {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
background-color: var(--black);
|
||||||
|
}
|
||||||
|
header p {
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
navbar {
|
||||||
|
padding-right:1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
navbar a {
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#welcome-section {
|
||||||
|
padding: 3rem;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#welcome-section p {
|
||||||
|
line-height: 1.25rem;
|
||||||
|
padding: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects {
|
||||||
|
height: 75vh;
|
||||||
|
padding: 1rem;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
background-color: var(--grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects h2 {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-tile {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 45vw;
|
||||||
|
height: auto;
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px solid var(--blue);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-tile img {
|
||||||
|
max-height: 100%;
|
||||||
|
width: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-tile p {
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact {
|
||||||
|
height: 30vh;
|
||||||
|
padding: 1rem;padding-top: 0.5rem;background-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact h2 {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact li {
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
|
||||||
|
#welcome-section {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<title>Cat Debugging</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<header id="header">
|
||||||
|
<img id="header-img" src="https://brokelyn.com/app/uploads/2014/07/cat-computer.jpg" alt="A cat diagnosing a programming problem on a computer">
|
||||||
|
<p>Cat Debugging Inc.</p>
|
||||||
|
<nav id="nav-bar">
|
||||||
|
<ul>
|
||||||
|
<li><a class="nav-link" href="#product-info">Product Info</a></li>
|
||||||
|
<li><a class="nav-link" href="#advert">Watch a cat</a></li>
|
||||||
|
<li><a class="nav-link" href="#form">Contact Us</a></li>
|
||||||
|
<ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<section id="product-info">
|
||||||
|
<h1>Our helpful cats help you debug any code problem!</h1>
|
||||||
|
<h3>Our promise</h3>
|
||||||
|
<ul class="selling-points-list">
|
||||||
|
<li>Attention to detail makes a cat perfect for describing code problems to.</li>
|
||||||
|
<li>Cuddle time with an expert cat debugging specialist can allow you to solve problems in the background.</li>
|
||||||
|
<li>Soothing purrs from all our debugging specialists can help you tune out the noise of the work day.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section id="advert">
|
||||||
|
<h3>Watch an expert at work</h3>
|
||||||
|
<iframe id="video" width="344" height="611" src="https://www.youtube.com/embed/eW6G9g4--os" title="Cat debugging 🖥️ #shorts #funny #cat #coding" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||||
|
</section>
|
||||||
|
<form id="form" method="POST" action="https://www.freecodecamp.com/email-submit">
|
||||||
|
<label for="email">Contact us today to find out more! <input id="email" type="email" name="email" placeholder="Enter your email to contact us" required></label>
|
||||||
|
<input id="submit" type="submit" value="Contact Us">
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,147 @@
|
||||||
|
:root {
|
||||||
|
--page-color: #393e46;
|
||||||
|
--accent-color: #f96d00;
|
||||||
|
--text-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
*, ::before, ::after {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
width: auto;
|
||||||
|
background-color: var(--page-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
font-family: "Quicksand", sans-serif;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background-color: var(--page-color);
|
||||||
|
padding: 1rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 5rem;
|
||||||
|
max-height: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header p {
|
||||||
|
font-family: "Rubik", sans-serif;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#header-img {
|
||||||
|
height: 100%;
|
||||||
|
width: auto;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar ul {
|
||||||
|
display: flex;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar li {
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#product-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-info h1 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selling-points-list {
|
||||||
|
list-style-type: none;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selling-points-list li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selling-points-list li:last-of-type {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#advert {
|
||||||
|
margin-top: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#form {
|
||||||
|
margin-top: 1rem;
|
||||||
|
height: 20%;
|
||||||
|
width: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label[for="email"] {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[id="email"] {
|
||||||
|
width: 18rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[id="submit"] {
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
border: 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 8px;
|
||||||
|
width: 8rem;
|
||||||
|
max-width: 8rem;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1000px) {
|
||||||
|
#nav-bar ul {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 400px) {
|
||||||
|
#header {
|
||||||
|
margin-bottom: 1rem
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>A tribute to cats</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main id="main">
|
||||||
|
<h1 id="title">A tribute to the domestic cat</h1>
|
||||||
|
<figure id="img-div">
|
||||||
|
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg" alt="A male tabby cat - By Alvesgaspar - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=11390283">
|
||||||
|
<figcaption id="img-caption">
|
||||||
|
A male tabby cat By <a href="//commons.wikimedia.org/wiki/User:Alvesgaspar" title="User:Alvesgaspar">Alvesgaspar</a> - <span class="int-own-work" lang="en">Own work</span>, <a href="https://creativecommons.org/licenses/by-sa/3.0" title="Creative Commons Attribution-Share Alike 3.0">CC BY-SA 3.0</a>, <a href="https://commons.wikimedia.org/w/index.php?curid=11390283">Link</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<section id="tribute-info">
|
||||||
|
<h2>Interesting facts about cats</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Domestication of the cat occurred in the Far East around 7500 BC</li>
|
||||||
|
<li>Female domestic cats often have litters of 2 to 5 kittens</li>
|
||||||
|
<li>Cats have a wide range of social communication including meows, purrs, trills, and body language</li>
|
||||||
|
<li>A cat is capable of landing on all four paws from heights of 90cm to 3m</li>
|
||||||
|
<li>Feral cats may form social colonies, but they are purely solitary hunters</li>
|
||||||
|
<li>The domestic cat was the second most popular pet in the United States in 2017</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<footer><p>You can find more information about cats at this <a id="tribute-link" href="https://en.wikipedia.org/wiki/Cat" target="_blank">Wikipedia</a> article</p>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: verdana, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #555758;
|
||||||
|
}
|
||||||
|
|
||||||
|
li, p, #img-caption {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#img-div, #tribute-info, footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#img-div {
|
||||||
|
background-color:#445c7c;
|
||||||
|
margin: auto;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#image {
|
||||||
|
display: block;
|
||||||
|
margin-top: 36px;
|
||||||
|
width: 75%;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#img-caption {
|
||||||
|
padding-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title, #img-caption, a, p, h2, li{
|
||||||
|
color: #c6ccca;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #9ea0a3;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding-bottom: 12px;
|
||||||
|
}
|
||||||
23
index.html
23
index.html
|
|
@ -20,7 +20,7 @@
|
||||||
and are practical and technical in nature, encouraging growth through completing challenging projects</p>
|
and are practical and technical in nature, encouraging growth through completing challenging projects</p>
|
||||||
<h4 class="section-links">Front End Mentor</h4>
|
<h4 class="section-links">Front End Mentor</h4>
|
||||||
<ul class="links">
|
<ul class="links">
|
||||||
<li></li>
|
<li>QR Code Component using flexbox <a href="https://github.com/rainydayemma/qr-code-component" target="_blank">github repo</a> - <a href="https://rainydayemma.github.io/qr-code-component/" target="_blank">live site</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section class="course-projects">
|
<section class="course-projects">
|
||||||
|
|
@ -29,11 +29,11 @@
|
||||||
<p class="section-description">Projects here are those completed from online courses like freeCodeCamp or The Odin Project</p>
|
<p class="section-description">Projects here are those completed from online courses like freeCodeCamp or The Odin Project</p>
|
||||||
<h4 class="section-links">freeCodeCamp Responsive Web Design course</h4>
|
<h4 class="section-links">freeCodeCamp Responsive Web Design course</h4>
|
||||||
<ul class="links">
|
<ul class="links">
|
||||||
<li></li>
|
<li><a href="./freecodcamp/build-a-survey-form/index.html" target="_blank">Build a survey form</a></li>
|
||||||
<li></li>
|
<li><a href="./freecodcamp/build-a-tribute-page/index.html" target="_blank">Build a tribute page</a></li>
|
||||||
<li></li>
|
<li><a href="./freecodcamp/build-a-doc-page/index.html" target="_blank">Build a technical documentation page</a></li>
|
||||||
<li></li>
|
<li><a href="./freecodcamp/build-a-product-landing-page/index.html" target="_blank">Build a product landing page</a></li>
|
||||||
<li></li>
|
<li><a href="./freecodcamp/build-a-portfolio-page/index.html" target="_blank">Build a portfolio page</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section class="small-web-projects">
|
<section class="small-web-projects">
|
||||||
|
|
@ -44,17 +44,18 @@
|
||||||
</p>
|
</p>
|
||||||
<h4 class="section-links">Personal small web projects</h4>
|
<h4 class="section-links">Personal small web projects</h4>
|
||||||
<ul class="links">
|
<ul class="links">
|
||||||
<li></li>
|
<li><a href="https://thiscat.rocks" target="_blank">This cat rocks!</a></li>
|
||||||
<li></li>
|
<li><a href="https://alternate.thiscat.rocks" target="_blank">This cat rocks! - Nostaligic photo gallery</a></li>
|
||||||
<li></li>
|
<li><a href="https://onecatper.day" target="_blank">One Cat Per Day!</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section class="links">
|
<section class="links">
|
||||||
<!-- contains links to things like github, freeCodeCamp profile, etc -->
|
<!-- contains links to things like github, freeCodeCamp profile, etc -->
|
||||||
<h3 class="section-header">Places you can find what I'm working on</h3>
|
<h3 class="section-header">Places you can find what I'm working on</h3>
|
||||||
<ul class="links">
|
<ul class="links">
|
||||||
<li></li>
|
<li><a href="https://www.freecodecamp.org/rainydayemma" target="_blank">freeCodeCamp - rainydayemma</a></li>
|
||||||
<li></li>
|
<li><a href="https://github.com/rainydayemma" target="_blank">rainydayemma - github</a></li>
|
||||||
|
<li><a href="https://blog.rainyday.dev" target="_blank">rainydaydev blog</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -50,4 +50,8 @@ section {
|
||||||
|
|
||||||
.links {
|
.links {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 0.5rem;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue