Skip to content

Elijah kim day2 #2

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
elijahk247 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Elijah kim day2 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3667da3
Added basic semantic HTML
Jul 13, 2020
227ad18
Finishing most of the HTML and going through formatting the projects …
Jul 13, 2020
e231336
Finished HTML, almost done styling with CSS; starting footer
Jul 13, 2020
dd7b8e2
Finished Product
Jul 13, 2020
0d34693
Finished adding the Responsive Design layout for both 500px and 800px
Jul 14, 2020
366dd90
Finished adding accessibility features
Jul 14, 2020
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
52 changes: 51 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,59 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Sample Portfolio</title>
<link href='./style/index.css' rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<header>
<h1>Elijah Kim</h1>
<nav>
<a href='#Home'>Home</a>
<a href='./about.html'>About</a>
<a href='./contact.html'>Contact</a>
<a href='./projects.html'>Projects</a>
</nav>

<img src='https://images.unsplash.com/photo-1594293185787-c6705bb6eccf?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60' alt="Canyons overcast" />
</header>

<section class="projects section">
<div class='first'>
<img src='https://images.unsplash.com/photo-1594240094495-1b9177b5fefc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60' alt="Beach waves" />
<h2>Project 1</h2>
</div>

<div class='second'>
<img src='https://images.unsplash.com/photo-1593450296875-823f96a36295?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60' alt="Mountain peaks with little snow" />
<h2>Project 2</h2>
</div>

<div class='third'>
<img src='https://images.unsplash.com/photo-1593477580199-a958636d0607?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60'alt='The coast' />
<h2>Project 3</h2>
</div>

<div class='fourth'>
<img src='https://images.unsplash.com/photo-1592894170688-caa8ebee5e9d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60' alt="A white flower" />
<h2>Project 4</h2>
</div>

<div class='fifth'>
<img src='https://images.unsplash.com/photo-1592976299610-2e2c90d9807d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60' alt="night sky with trees and starts around" />
<h2>Project 5</h2>
</div>

<div class='sixth'>
<img src='https://images.unsplash.com/photo-1592929159284-caca1d515ab0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60' alt="bird flying near waterfall" />
<h2>Project 6</h2>
</div>
</section>

<footer class='close'>
<button onclick="location.href='./contact.html'">Contact Me</button>
</footer>

</body>
</html>
194 changes: 193 additions & 1 deletion style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,193 @@
/* Add CSS styling here */
/* Add CSS styling here */

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

* {
box-sizing: border-box;
}

html {
font-size: 62.5%;
}

header {
display: flex;
flex-direction: row;
/*border: solid 1px grey; */
justify-content: center;
flex-wrap: wrap;
margin-bottom: 5%;
}

header h1 {
font-size: 3rem;
width: 40%;
}

header nav {
font-size: 1.6rem;
}

header nav a {
text-decoration: none;

border: 1px solid black;
padding: 2%;
margin-bottom: 5%;
}

header nav {
width: 45%;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 2%;

vertical-align: top;
}

header img {
width: 60%;
margin-left: 0 auto;
}

.projects {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;

width: 80%
margin: 0 auto;
text-align: center;

font-size: 2rem;
}

.projects img {
width: 80%;
height: 80%;
/*border: 5px solid grey; */
}

.first, .second, .third, .fourth, .fifth, .sixth {
width: 30%;
}

footer {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;

width: 100%;
height: 10rem;
/*border: 1px solid white; */
margin-bottom: 5%;

background-color: salmon;
font-size: 2rem;

}

footer button {
margin: 3% 0;
padding: 2%;

text-decoration: none;
color: black;
}



@media (max-width: 800px) {
header {
display: flex;
flex-direction: column;
justify-content: center;
}

h1 {
margin-left: 40%;
}

header nav {
margin-left: 28%;
}

header img {
width: 60%;
margin: 0 auto;
}

.first, .second, .third, .fourth, .fifth, .sixth {
width: 40%;
}

.projects img {
width: 80%;
height: 80%;
/*border: 5px solid grey; */
}

}

@media (max-width: 500px) {
.first, .second, .third, .fourth, .fifth, .sixth {
width: 60%;
}

header img {
width: 60%;
margin: 0 auto;
}

}