Skip to content

Adding elements to webpage #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RamotalaKarabo wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Adding elements to webpage #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ad7d9ea
Creating CodeSpace Cat Potfolio webpage structure.
RamotalaKarabo Jul 7, 2024
4915370
Styling the layout of the web page
RamotalaKarabo Jul 7, 2024
58407ce
style the navigation links for more aesthetic feel.
RamotalaKarabo Jul 9, 2024
ad185aa
adding missing emojies to the page
RamotalaKarabo Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions css-docs/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
body{
background:rgba(234, 143, 30, 0.5)
}
/*Properly aigning the headings and styling it*/
h1,h3{
text-align:center;
background-color:rgba(234, 143, 30, 0.9);
padding:20px;
margin:70px 0px 70px 0px;
}
h1{
margin-top:0px;
}
p{
line-height:1.5em;
}

/*setting dimensions around navigation section*/
nav{
margin:30px 0px 30px 0px;
}

/*styling the links behaviour and state when hovered over*/
a:link,a:visited{
text-decoration:none;
letter-spacing:8px;
color:black;
border-style:solid;
border-color:rgba(234, 143, 30, 0.9);
border-width:0px 0px 0px 4px;
padding-left:6px;
}
a:hover{
padding:10px;
opacity:0.7;
transition:opacity 0.5s;
transition:border-width 0.5s;
text-decoration:none;
border-width:0px 0px 4px 0px;
}

.nav-section>ul>li{
list-style-type:none;
margin-top:30px;
}

/*Adding styling to the table for better naviagtion of the table*/
.catfolio-table{
border-style:solid;
border-color:rgba(234, 143, 30, 0.9);
margin:30px 0px 30px 0px;
}
tr:hover{
background-color:rgba(234, 143, 30, 0.4);
}
th{
background-color:rgba(234, 143, 30, 0.4);
}

131 changes: 131 additions & 0 deletions html-docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html>
<head lang="en">
<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>CodeSpace Cat Portfolio</title>
<link rel="stylesheet" type="text/css" href="/css-docs/index.css">

</head>
<body>
<!-- Header and Navigation section-->
<header>
<h1>CodeSpace Cat's Portfolio<span>🎨</span>
</h1>

<nav class="nav-section">
<ul>
<li><a href="#about-me-section">About Me</a>
<span>👋</span>
</li>
<li><a href="#skills-section">Skills</a>
<span>🛠️</span>
</li>
<li><a href="#portfolio-section">Portfolio</a>
<span>📸</span>
</li>
<li><a href="#contact-section">Contact</a>
<span>👍</span>
</li>
</ul>
</nav>

</header>

<!--About Me Section-->
<section id="about-me-section">
<h3>About Me
<span>😺</span>
</h3>
<div>
<img src="/images/cat-codespace.png" alt="A CodeSpace Cat picture">
</div>

<p>Hello! I'm <strong>CodeSpace Cat.</strong> I'm purr-passionate about web development and design. I've been pawing at the web industry for just one catnap (that's less than a day in human terms), and I adore crafting pawsitively intuitive, whisker-twitching, and fur-tastic web experiences. Whoa that's a lot of puns.</p><span>🐾</span>
</section>

<!--The skills section-->
<section id="skills-section">
<h3>My Skills
<span>🤹</span>
</h3>
<ul>
<li>Web Development
<span>🕸</span>
</li>
<li>UI/UX Design
<span>🎨</span>
</li>
<li>Backend Development
<span>🧱</span>
</li>
<li>Database Management
<span>💻</span>
</li>
<li>SEO Optimization
<span>🔎</span>
</li>
<li>Lying in the Sun
<span>🌞</span>
</li>
</ul>

</section>

<!-- Portfolio Section-->
<section id="portfolio-section">

<table class="catfolio-table" style="width:100%">
<h3>Catfolio</h3>
<tr>
<th>Project Name</th>
<th>Date</th>
<th>Description</th>
<th>Thumbnail</th>
</tr>
<tr>
<td>Purrfect Landing Page</td>
<td>January 2024</td>
<td>A delightful landing page for a luxury cat condo</td>
<td>
<img src="/images/1.png" alt="An image showing a landing page for cats.">
</td>
</tr>
<tr>
<td>Kitty Commerce</td>
<td>February 2024</td>
<td>An online store selling the fanciest catnip toys</td>
<td>
<img src="/images/2.png" alt="An image showing the ">
</td>
</tr>
<tr>
<td>CatChat</td>
<td>June 2024</td>
<td>A social media site for cats to meow and hiss!</td>
<td>
<img src="/images/3.png" alt="An image showcasing a CatChat app">
</td>
</tr>
</table>
</section>

<!--Contact/Connect With Us Section-->
<footer>
<form id="contact-section">
<label for="client-name">Name : </label>
<input type="text" name="client-name">
<label for="client-email">Email : </label>
<input type="email" name="client-email">
<label for="client-feedback-message">Message : </label>
<textarea name="client-feedback-message"></textarea>
<input type="submit">

<p>&copy; 2024 CodeSpace Cat. All rights reserved.</p>

</form>
</footer>
</body>
</html>