Website for ENSF 381 project, it was really fun to do
This commit is contained in:
commit
64bb7e5008
10
PAGE-ADDRESS.md
Normal file
10
PAGE-ADDRESS.md
Normal file
@ -0,0 +1,10 @@
|
||||
Put the address to your website here. Use this markdown format:
|
||||
|
||||
```bash
|
||||
[display-name](link)
|
||||
```
|
||||
|
||||
example:
|
||||
```bash
|
||||
[my website](https://rick-astley.github.io)
|
||||
```
|
||||
51
README.md
Normal file
51
README.md
Normal file
@ -0,0 +1,51 @@
|
||||
# CSS
|
||||
In this assignment, you will add styling to the webpages you created in the HTML assignment, and will **publish** the website using GitHub pages.
|
||||
|
||||
---
|
||||
|
||||
## :foot: Steps
|
||||
1. Add the HTML you wrote for the About page to the `index.html` file
|
||||
1. Add the HTML you wrote for the Skills page to the `skills.html` file
|
||||
1. Add the HTML you wrote for the Experience page to the `experience.html` file
|
||||
1. Add the HTML you wrote for the Education page to the `education.html` file
|
||||
1. Add the HTML you wrote for the Interests page to the `interests.html` file
|
||||
1. Use Flexbox and other CSS properties to the `style.css` file so that your pages look like these:
|
||||
|
||||
`index.html`
|
||||
|
||||
|
||||
`skills.html`
|
||||
|
||||
|
||||
`education.html`
|
||||
|
||||
|
||||
`experience.html`
|
||||
|
||||
|
||||
`interests.html`
|
||||
|
||||
|
||||
1. Change the content so they represent you (your picture, your education, your experince, etc.)
|
||||
1. Make sure all the links are working if applicable (for instance, you don't have to add a Pinterest page if you don't have one, but the link to your resume should work)
|
||||
1. Make sure the website is responsive at least on Desktop and Tablet devices (use `@media` queries for this). Here's an example of how it should react to screen size changes:
|
||||
|
||||
|
||||
1. It doesn't matter what threshold you're using for the `@media` query (`800px`, `600px`, etc.)
|
||||
1. Commit all the changes to the `main` branch and push to the remote repo (here)
|
||||
1. Create a **public** repo under your **personal** GitHub account with this name: `<your-github-username>.github.io`
|
||||
1. Clone the repo to your local system; add all the files you have here to the project; commit to the `main` branch and push to the remote repo (your repo under your GitHub username)
|
||||
1. Open up a browser and go to `https://<your-github-username>.github.io`. You should be able to see the website (it may take a few minutes)
|
||||
1. Add the address to your webpage to the [`PAGE-ADDRESS.md`](./PAGE-ADDRESS.md) file
|
||||
1. Commit to the `main` branch and push to the remote repo (here)
|
||||
|
||||
---
|
||||
|
||||
### :page_with_curl: Notes
|
||||
- Make sure you save what you had for the About page in the `index.html` page. That's the default page that the browser shows when someone visits your website
|
||||
- Make sure you alter the data on the examples so that the website represents you, not Rick
|
||||
- Don't use any CSS frameworks for this assignment. You need to write all the CSS yourself
|
||||
- Use Flexbox for the layout
|
||||
- Feel free to make minor changes, such as changing colors and font-sizes
|
||||
- Feel free to add new elements, data, etc.
|
||||
- You may need to change some of the HTML elements you used in the HTML assignment. One example is the navigation menu. You probably choose a paragraph to do that. For this assignment, it makes more sense to use `<nav>`, `<ul>`, and `<li>` for the navigation (hint: I created a similar one in the class). So, feel free to use new HTML elements if they make more sense now
|
||||
33
contact.html
Normal file
33
contact.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="description" content="Student grades and complain form">
|
||||
<title>Rick Astley</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<p><a href="index.html"> About</a></p>
|
||||
<p><a href="skills.html">Skills</a></p>
|
||||
<p><a href="education.html">Education</a></p>
|
||||
<p><a href="experience.html"">Experience</a></p>
|
||||
<p><a href="interests.html">Inertests</a></p>
|
||||
<p><a id="CurrentPage">Contact</a></p>
|
||||
</nav>
|
||||
<div>
|
||||
<figure>
|
||||
<img src="https://static.wikia.nocookie.net/agk/images/1/18/21499dba0eec71730fdaa0534a82e163.jpg/revision/latest?cb=20210511185219" alt="Rick Asley">
|
||||
<figcaption><h1>Rick Astley</h1></figcaption>
|
||||
<figcaption><h3>Singer, Songwriter</h3></figcaption>
|
||||
<figcaption><h5><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">rick.astley@meme.com</a></h5></figcaption>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<footer>
|
||||
<p>© Rick Astley</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
54
education.html
Normal file
54
education.html
Normal file
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="description" content="Student grades and complain form">
|
||||
<title>Rick Astley</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<p><a href="index.html"> About</a></p>
|
||||
<p><a href="skills.html">Skills</a></p>
|
||||
<p><a id="CurrentPage">Education</a></p>
|
||||
<p><a href="experience.html">Experience</a></p>
|
||||
<p><a href="interests.html">Inertests</a></p>
|
||||
<p><a href="contact.html">Contact</a></p>
|
||||
</nav>
|
||||
<div>
|
||||
<figure>
|
||||
<img src="https://static.wikia.nocookie.net/agk/images/1/18/21499dba0eec71730fdaa0534a82e163.jpg/revision/latest?cb=20210511185219" alt="Rick Asley">
|
||||
<figcaption><h1>Rick Astley</h1></figcaption>
|
||||
<figcaption><h3>Singer, Songwriter</h3></figcaption>
|
||||
<figcaption><h5><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">rick.astley@meme.com</a></h5></figcaption>
|
||||
</figure>
|
||||
<article>
|
||||
<h1>Education</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td><strong>PhD in Computer Engineering </strong></td>
|
||||
<td class="Align-Right"> 2014-2018</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>University of Calgary</td>
|
||||
<td class="Align-Right">Calgary, Canada</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-top: 5%;"><strong>MSc in Computer Engineering </strong></td>
|
||||
<td class="Align-Right" style="padding-top: 5%;"> 2012-2014</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>University of Calgary</td>
|
||||
<td class="Align-Right">Calgary, Canada</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="MorePadding" style="color: grey;">Credentials are available upon request.</p>
|
||||
</article>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© Rick Astley</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
55
experience.html
Normal file
55
experience.html
Normal file
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="description" content="Student grades and complain form">
|
||||
<title>Rick Astley</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<p><a href="index.html"> About</a></p>
|
||||
<p><a href="skills.html">Skills</a></p>
|
||||
<p><a href="education.html">Education</a></p>
|
||||
<p><a id="CurrentPage">Experience</a></p>
|
||||
<p><a href="interests.html">Inertests</a></p>
|
||||
<p><a href="contact.html">Contact</a></p>
|
||||
</nav>
|
||||
<div>
|
||||
<figure>
|
||||
<img src="https://static.wikia.nocookie.net/agk/images/1/18/21499dba0eec71730fdaa0534a82e163.jpg/revision/latest?cb=20210511185219" alt="Rick Asley">
|
||||
<figcaption><h1>Rick Astley</h1></figcaption>
|
||||
<figcaption><h3>Singer, Songwriter</h3></figcaption>
|
||||
<figcaption><h5><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">rick.astley@meme.com</a></h5></figcaption>
|
||||
</figure>
|
||||
<article>
|
||||
<h1>Experience</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td><strong>Software Developer</strong></td>
|
||||
<td class="Align-Right"> 2018-Present</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Facebook</td>
|
||||
<td class="Align-Right">Menlo Park, CA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-top: 5%;"><strong>Web Developer</strong></td>
|
||||
<td class="Align-Right" style="padding-top: 5%;"> 2016-2018</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Amazon</td>
|
||||
<td class="Align-Right">Vancouver, BC</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="MorePadding">Download my full resume <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">here.</a></p>
|
||||
|
||||
</article>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© Rick Astley</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
55
index.html
Normal file
55
index.html
Normal file
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="description" content="Student grades and complain form">
|
||||
<title>Rick Astley</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<p><a id="CurrentPage">About</a></p>
|
||||
<p><a href="skills.html">Skills</a></p>
|
||||
<p><a href="education.html">Education</a></p>
|
||||
<p><a href="experience.html">Experience</a></p>
|
||||
<p><a href="interests.html">Inertests</a></p>
|
||||
<p><a href="contact.html">Contact</a></p>
|
||||
</nav>
|
||||
<div>
|
||||
<figure>
|
||||
<img src="https://static.wikia.nocookie.net/agk/images/1/18/21499dba0eec71730fdaa0534a82e163.jpg/revision/latest?cb=20210511185219" alt="Rick Asley">
|
||||
<figcaption><h1>Rick Astley</h1></figcaption>
|
||||
<figcaption><h3>Singer, Songwriter</h3></figcaption>
|
||||
<figcaption><h5><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">rick.astley@meme.com</a></h5></figcaption>
|
||||
</figure>
|
||||
<article>
|
||||
<h1>About</h1>
|
||||
<p>I'm an English singer, songwriter and radio personality, who has been active in music for several decades. You've probably already seen my video by clicking on random links on the Internet!</p>
|
||||
<p>A few points about me: I will never</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked>Give You Up</td>
|
||||
<td><input type="checkbox" checked>Make You Cry</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked>Let You Down</td>
|
||||
<td><input type="checkbox" checked>Say Goodbye</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked>Tell A Lie</td>
|
||||
<td><input type="checkbox" checked>Run Around</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked>Desert You</td>
|
||||
<td><input type="checkbox" checked>Hurt You</td>
|
||||
</tr>
|
||||
</table>
|
||||
</article>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© Rick Astley</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
42
interests.html
Normal file
42
interests.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="description" content="Student grades and complain form">
|
||||
<title>Rick Astley</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<p><a href="index.html"> About</a></p>
|
||||
<p><a href="skills.html">Skills</a></p>
|
||||
<p><a href="education.html">Education</a></p>
|
||||
<p><a href="experience.html">Experience</a></p>
|
||||
<p><a id="CurrentPage">Inertests</a></p>
|
||||
<p><a href="contact.html">Contact</a></p>
|
||||
</nav>
|
||||
<div>
|
||||
<figure>
|
||||
<img src="https://static.wikia.nocookie.net/agk/images/1/18/21499dba0eec71730fdaa0534a82e163.jpg/revision/latest?cb=20210511185219" alt="Rick Asley">
|
||||
<figcaption><h1>Rick Astley</h1></figcaption>
|
||||
<figcaption><h3>Singer, Songwriter</h3></figcaption>
|
||||
<figcaption><h5><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">rick.astley@meme.com</a></h5></figcaption>
|
||||
</figure>
|
||||
<article>
|
||||
<h1>Interests</h1>
|
||||
<ul>
|
||||
<li>Reading</li>
|
||||
<li>Programming</li>
|
||||
<li>Playing the violin</li>
|
||||
<li>Running</li>
|
||||
<li>Photography (see my work on <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">Pinterest</a>)</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© Rick Astley</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
58
skills.html
Normal file
58
skills.html
Normal file
@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="description" content="Student grades and complain form">
|
||||
<title>Rick Astley</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<p><a href="index.html"> About</a></p>
|
||||
<p><a id="CurrentPage">Skills</a></p>
|
||||
<p><a href="education.html">Education</a></p>
|
||||
<p><a href="experience.html">Experience</a></p>
|
||||
<p><a href="interests.html">Inertests</a></p>
|
||||
<p><a href="contact.html">Contact</a></p>
|
||||
</nav>
|
||||
<div>
|
||||
<figure>
|
||||
<img src="https://static.wikia.nocookie.net/agk/images/1/18/21499dba0eec71730fdaa0534a82e163.jpg/revision/latest?cb=20210511185219" alt="Rick Asley">
|
||||
<figcaption><h1>Rick Astley</h1></figcaption>
|
||||
<figcaption><h3>Singer, Songwriter</h3></figcaption>
|
||||
<figcaption><h5><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">rick.astley@meme.com</a></h5></figcaption>
|
||||
</figure>
|
||||
<article>
|
||||
<h1>Skills</h1>
|
||||
<p>
|
||||
<strong>Golang</strong>
|
||||
<progress value="100" max="100"></progress>
|
||||
</p>
|
||||
<p>
|
||||
<strong>HTML</strong>
|
||||
<progress value="100" max="100"></progress>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Terraform</strong>
|
||||
<progress value="90" max="100"></progress>
|
||||
</p>
|
||||
<p>
|
||||
<strong>CSS</strong>
|
||||
<progress value="70" max="100"></progress>
|
||||
</p>
|
||||
<p>
|
||||
<strong>JavaScript</strong>
|
||||
<progress value="65" max="100"></progress>
|
||||
</p>
|
||||
<p>
|
||||
<strong>AWS</strong>
|
||||
<progress value="60" max="100"></progress>
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© Rick Astley</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
201
style.css
Normal file
201
style.css
Normal file
@ -0,0 +1,201 @@
|
||||
body {
|
||||
margin: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
nav{
|
||||
background-color: #fcfcfc;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
padding-top: 5px;
|
||||
border-top: solid purple;
|
||||
margin-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: thin solid rgb(231, 231, 231);
|
||||
font-weight: lighter;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
|
||||
nav p a{
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: rgb(110, 121, 130);
|
||||
margin: 10px;
|
||||
padding: 15px;
|
||||
flex: 1;
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
flex-direction: row;
|
||||
}
|
||||
figure {
|
||||
margin: 10px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 20%;
|
||||
|
||||
}
|
||||
|
||||
article {
|
||||
padding-left: 15px;
|
||||
border-left: thin solid rgb(244, 244, 244);;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: purple;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 0px;
|
||||
border-radius: 60%;
|
||||
height: 40%;
|
||||
border: solid grey;
|
||||
}
|
||||
|
||||
footer p {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 15px;
|
||||
border-top: thin solid rgb(244, 244, 244);
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
progress {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
border-color: whitesmoke;
|
||||
}
|
||||
|
||||
table {
|
||||
padding-top: 5%;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
article strong {
|
||||
font-weight: bolder;
|
||||
font-size: larger;
|
||||
display: block;
|
||||
}
|
||||
article {
|
||||
color: black;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: lighter;
|
||||
color: gray;
|
||||
margin-bottom: 0px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: lighter;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: lighter;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: '-';
|
||||
padding-top: 2%;
|
||||
}
|
||||
|
||||
ul li {
|
||||
font-size: large;
|
||||
padding-top: 2%;
|
||||
}
|
||||
|
||||
#CurrentPage {
|
||||
color: purple ;
|
||||
}
|
||||
|
||||
.MorePadding {
|
||||
padding-top: 5%;
|
||||
}
|
||||
|
||||
.Align-Right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
body {
|
||||
justify-content: center;
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
nav{
|
||||
background-color: #fcfcfc;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
padding-top: 5px;
|
||||
border-top: solid purple;
|
||||
margin-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: thin solid rgb(231, 231, 231);
|
||||
font-weight: lighter;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
nav p a{
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: rgb(110, 121, 130);
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 5px;
|
||||
margin-bottom: 0px;
|
||||
border-bottom: 0px;
|
||||
padding-bottom: 0px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
article {
|
||||
justify-content: center;
|
||||
padding-left: 0px;
|
||||
border-left: none;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
article table {
|
||||
width: 100%;
|
||||
padding-right: 0px;
|
||||
margin-right: 0px;
|
||||
border-right: 0px;
|
||||
padding-left: 15%;
|
||||
}
|
||||
|
||||
|
||||
.MorePadding {
|
||||
padding-top: 5%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user