Skip to content
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

Pipes - Angela - Static Site #38

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Pipes - Angela - Static Site #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
38 changes: 38 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Who Am I?</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Code-Journal.html">Code Jounal</a></li>
<li><a href="About.html">About </a></li>
</ul>
</nav>
</header>

<article class="text-align-center">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably surround these two article tags within a main tag:

<main>
  <article class="text-align-center">
    ...
  </article>
  <article class="grey-background text-align-center">
    ...
  </article>
  <article>
    ...
  </article>
</main>


<h1>Discover who I am aside from a Student Full-Stack Developer</h1>
<h2>My passions and personality</h2>
</article>

<article class="grey-background text-align-center">
<h1>A few fun facts about myself</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>

<img src="" alt="">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do not need this img tag as it has no reference to a source image.


</article>

<article class="">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do not need the class attribute on this element as it has not been set to any value.

<h1>Understand who I am as a person</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</article>
</html>
20 changes: 20 additions & 0 deletions code-journal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Code-Jounal</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Code-Journal.html">Code Jounal</a></li>
<li><a href="About.html">About </a></li>
</ul>
</nav>
</header>
</body>
</html>
62 changes: 62 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!-- Primary Requirements

Add pages to your static site. The requirement is a minimum of four pages. These pages should be:
index.html
portfolio.html: information about the projects you've completed at Ada (or elsewhere) with links (to github repo), descriptions, images, etc.
code-journal.html or hobby-blog.html: article or blog style posts about either your journey/observations about programming or a hobby you enjoy.
about.html: some information about you, your interests, background or similar. Whatever you're comfortable sharing.
The site should follow best practices including:
All markup should be semantic, with consideration of hierarchy and accessibility.
CSS should be concise and well formatted
Images and stylesheets should be kept in their own folders, called images and stylesheets, respectively.

-->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angela Wilson Homepage</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="Portfolio.html">Portfolio</a>
</li>
<li>
<a href="Code-Journal.html">Code Jounal</a>
</li>
<li>
<a href="About.html">About</a>
</li>
</ul>
</nav>
</header>

<video autoplay loop>
<source src="video/632332824.mp4" type="video/mp4">
</video>


<article class="text-align-center">
<h1>
Student Full-Stack Developer at Ada Developers Academy
</h1>
<h2>
Let's transform tech by effecting one mind at a time
</h2>
</article>

<!-- Footer -->
<footer>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should have this footer section on every page, similarly to the header tag. This will help maintain a consistent styling and layout throughout the site.

<h4>&copy; 2017</h4>
</footer>

</body>
</html>
42 changes: 42 additions & 0 deletions portfolio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Code-Journal.html">Code Jounal</a></li>
<li><a href="About.html">About </a></li>
</ul>
</nav>
</header>

<article class="text-align-center">
<h1>My work as a Student Full-Stack Developer</h1>
<h2>My portfoloio</h2>
</article>


<div class="portfolio-links text-align-center">
<a href="https://github.com/awilson2017/Solar-System/blob/master/Pipes%20-%20Angela%20-%20Solar_system_UPDATE.rb">Solar System</a>

<a href="https://github.com/awilson2017/BinaryAndDecimal/blob/master/binary_and_decimal.rb">Binary Decimals</a>

<a href="https://github.com/Ada-C8/meowspace/pull/44">MeowSpace</a>


<a href="https://github.com/awilson2017/hotel">Hotel</a>

<a href="https://github.com/awilson2017/Restricted-Arrays-Part1/blob/master/using_restricted_array.rb">Restricted Arrays</a>

<a href="https://github.com/awilson2017/grocery-store">Grocery Store</a>
</div>

</body>
</html>
150 changes: 150 additions & 0 deletions styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
/*html * > * {background: rgba(255, 0, 0, .2); outline: 1px solid red;}*/

@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i');

html {
font-size: 62.5%; /* 1rem = 10px */
}

body {
font-size: 1.6rem;
/*background-color: rgba(240, 203, 115, 1);*/
font-family: 'Cormorant Garamond', Garamond, serif;
padding-top: 5.5rem;
margin: 0 0;
background-color: rgb(230, 230, 230);
color: rgb(50, 50, 50);
}


/* Header */

header {
height: 5.5rem;
/*background-color: #FFCDD3;*/
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.9);
}

header h1 {
margin-bottom: .5rem;
font-size: 2rem;
}


nav {
text-align: center;
font-size: 1.5rem;

}

nav ul {
margin: 0;
padding: 0;
transition: .3s all;
}

nav ul a {
color: gainsboro;
}

nav ul:hover a {
color: dimgrey;
transition: .3s all;
}

nav ul a:hover {
color: gainsboro;
transition: .3s all;
}

nav li {
display: inline-block;
text-transform: uppercase;
padding-top: 1rem;
}

nav li a {
padding: 1rem;
}



/* Article styles */

article {
padding: 2rem 4rem 4.5rem 4rem;

}


article h1 {
font-style: italic;
font-size: 5rem;

}

article h2 {
font-size: 2rem;
max-width: 50%;
margin: 0 auto;
text-transform: uppercase;

}


/*#about-photo {
background-image: url("../video/home-office.jpg");
opacity: 0.5;
z-index: -1;
}*/

.grey-background {
background: rgba(0, 0, 0, 0.1)

}

.text-align-center {
text-align: center;
}




video {
width: 100%;
height: auto;
}





/* Portfolio page styles */

.portfolio-links a {
width: 15rem;
padding: 5rem 0 8rem 0;
display: inline-block;
border: .2rem solid rgb(50, 50, 50);
margin: 1.5rem;
text-decoration: none;
transition: .3s all;

}

.portfolio-links a:hover{
background: rgb(50, 50, 50);
color: white;
transition: .3s all;
}



footer {

}
Binary file added video/632332824.mp4
View file
Open in desktop
Binary file not shown.
595 changes: 595 additions & 0 deletions video/black and white computer.htm
View file
Open in desktop

Large diffs are not rendered by default.

Loading