Skip to content

Trevor lecroy2 #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
TrevorLeCroy wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Trevor lecroy2 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f048142
Made HTML, started work on styling.
TrevorLeCroy Apr 15, 2021
9a727e0
Working on Flexbox layouts for project images
TrevorLeCroy Apr 15, 2021
b12e12b
Worked on styling
TrevorLeCroy Apr 15, 2021
6052af8
Added more styling, began work on responsiveness.
TrevorLeCroy Apr 15, 2021
6da5636
Added some responsiveness
TrevorLeCroy Apr 15, 2021
7f73288
Added some more polish to the main project display
TrevorLeCroy Apr 15, 2021
d8b7d7d
Finished up
TrevorLeCroy Apr 15, 2021
5bba213
Added Max-width media query for 800px, which also works at 500px
TrevorLeCroy Apr 22, 2021
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
Binary file added .ReadMe.md.swp
View file
Open in desktop
Binary file not shown.
Binary file modified Wireframe Options/Option 1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/me.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/me_2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 98 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,105 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Trevor LeCroy</title>
<link rel="stylesheet" href="style/reset.css"/>
<link rel="stylesheet" href="style/index.css"/>
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>

<header>
<h1>Trevor</h1>
<h1 id="last">LeCroy</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About Me</a>
<a href="contact.html">Contact</a>
<a href="projects.html">Projects</a>
</nav>
</header>

<section id="top-content">
<img id="top-content-img" src="assets/me_2.jpg"/>
<div id="top-content-text">
<h2>Trevor LeCroy</h2>
<a href="projects.html">My projects</a>
<p>I'm a game developer, and future web developer. I dabble in many fields, I'm very <b>flexible</b> in everything I do, including life (I'm double jointed). I'm a <b>Lambda School</b> Part time student who's eagar to work on anything thrown my direction. I love problem solving, design patterns, and writing code. <b>Python</b> and <b>C#</b> are my favorite tools for the job.</p>
</div>
</section>

<div id="main-img-container">
<section id="main-img-content">
<div class=container>
<img class="main-img" src="https://picsum.photos/200"/>
<div class="overlay">
<h3>Project One</h3>
<p> Lorem Ipsum project description goes here, please read more about it</p>
<a href="#"> Github </a>
</div>
</div>
<div class=container>
<img class="main-img" src="https://picsum.photos/200"/>
<div class="overlay">
<h3>Project Two</h3>
<p> Lorem Ipsum project description goes here, please read more about it</p>
<a href="#"> Github </a>
</div>
</div>
<div class=container>
<img class="main-img" src="https://picsum.photos/200"/>
<div class="overlay">
<h3>Project Three</h3>
<p> Lorem Ipsum project description goes here, please read more about it</p>
<a href="#"> Github </a>
</div>
</div>
<div class=container>
<img class="main-img" src="https://picsum.photos/200"/>
<div class="overlay">
<h3>Project Four</h3>
<p> Lorem Ipsum project description goes here, please read more about it</p>
<a href="#"> Github </a>
</div>
</div>
<div class=container>
<img class="main-img" src="https://picsum.photos/200"/>
<div class="overlay">
<h3>Project Five</h3>
<p> Lorem Ipsum project description goes here, please read more about it</p>
<a href="#"> Github </a>
</div>
</div>
<div class=container>
<img class="main-img" src="https://picsum.photos/200"/>
<div class="overlay">
<h3>Project Six</h3>
<p> Lorem Ipsum project description goes here, please read more about it</p>
<a href="#"> Github </a>
</div>
</div>
<div class=container>
<img class="main-img" src="https://picsum.photos/200"/>
<div class="overlay">
<h3>Project Seven</h3>
<p> Lorem Ipsum project description goes here, please read more about it</p>
<a href="#"> Github </a>
</div>
</div>
<div class=container>
<img class="main-img" src="https://picsum.photos/200"/>
<div class="overlay">
<h3>Project Eight</h3>
<p> Lorem Ipsum project description goes here, please read more about it</p>
<a href="#"> Github </a>
</div>
</div>
</section>
</div>
<footer>
<section id="footer-content">
<p>Like what you see?</p>
<a id="footer-contact" href="Contact.html">Contact Me</a>
</section>
</footer>
</body>
</html>
260 changes: 259 additions & 1 deletion style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,259 @@
/* Add CSS styling here */
html {
background: #6ddccf;
font-family: "Open Sans", sans-serif;
}

body {
margin: 0px auto;
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
}

header {
z-index: 1;
margin: 0px auto;
background: #ffefa1;
padding: 20px;
width: 100%;
box-shadow: 0px 2px black;
}

h1 {
display: inline;
font-family: "Dela Gothic One", sans-serif;
color: #94ebcd;
text-shadow: 1px 1px black;
margin-bottom: 80px;
font-size: xx-large;
}

#last {
text-decoration: underline;
}

nav {
display: flex;
flex: column, nowrap;
justify-content: flex-start;
margin-left: 4rem;
margin-top: 20px;
}

a {
padding: 5px;
padding-right: 20px;
padding-left: 20px;
text-decoration: none;
color: white;
background: #94ebcd;
border: 4px solid white;
box-shadow: 2px 2px 2px 1px black;
transform: rotate(0deg);
z-index: 0;
transition: box-shadow .5s, transform .5s, z-index .5s;
}

a:hover {
box-shadow: 6px 6px 4px 2px black;
transform: rotate(5deg);
z-index: 4;
transition: box-shadow .5s, transform .5s, z-index .5s;
}

#top-content {
margin-top: 200px;
}

h2 {
margin-bottom: 20px;
text-shadow: 2px 2px black;
color: #ffcb91;
}

#top-content-text a {
margin-bottom: 50px;
}

#top-content-text p {
margin-top: 20px;
color: white;
text-shadow: 2px 2px black;
}

b {
color: #ffefa1;
}

b:hover {
text-decoration: underline;
}

#top-content-img {
display: inline-block;
position: relative;
bottom: 50px;
margin-top: 10px;
margin-left: 30px;
width: 40vw;
border: 2px solid #ffefa1;
box-shadow: 4px 4px 2px 2px black;
filter: saturate(40%) hue-rotate(-20deg);
z-index: 0;
}

#top-content-text {
display: inline-block;
position:relative;
width: 40vw;
/* width: 55%; */
left: 200px;
bottom: 100px;
margin-bottom: -50px;
font-size: x-large;
}

#top-content-text p {
width: 50%;
}

#main-img-container {
width: 100%;
background: #2adEcF;
border: 2px solid #ffefa1;
border-radius: 10px;
}

#main-img-content {
margin: 0px auto;
margin-bottom: 30px;
width: 100%;
height: 50rem;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: center;
}

.container {
display: block;
width: 20vw;
height: auto;
margin-left: 10px;
margin-right: 10px;
margin-top: 20px;
border: 2px solid #ffefa1;
box-shadow: 4px 4px 2px 1px black;
filter: blur(3px) opacity(90%) saturate(50%);
transition: box-shadow .5s, blur .5s;
}

.container:hover {
box-shadow: 8px 8px 4px 5px black;
filter: blur(0px);
transition: box-shadow .5s, blur .5s;
}

.container:hover .overlay {
opacity: 95%;
}

.main-img {
width: 100%;
height: 100%;
}

.overlay {
position: absolute;
top: 50%;
bottom: 0;
right: 0;
left: 0;
height: 50%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #ffefa1;
text-align: center;
}

.overlay h3 {
color: black;
text-shadow: -2px -2px white;
font-size: large;
text-decoration: underline;
}

.overlay p {
color: black;
text-shadow: -2px -2px white;
margin-bottom: 20px;
}

footer {
width: 100%;
background: #ffefa1;
margin-top: 20px;
box-shadow: 0px -2px black;
}

#footer-content {
position: relative;
left: 50vw;
margin: 0px auto;
margin-bottom: 15px;
}

#footer-content p {
color: white;
text-shadow: 2px 2px black;
margin-top: 20px;
margin-bottom: 20px;
}

@media (max-width: 800px) {
header {
margin-bottom: 5rem;
}
h1 {
margin: 0px auto;
}
nav {
display: flex;
flex-flow: column nowrap;
align-items: center;
}

nav a {
width: 5rem;
}

#top-content {
margin: 0px auto;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: space-around;
}

#top-content-text {
margin: 0px;
margin-top: 75px;
width: 100%;
}

#top-content img {
width: 50%;
}

#main-img-container {
}

#main-img-content .container {
width: 25%;
}
}

/* Styles from 800px are "acceptable" at 500px*/
@media (max-width: 500px) {
}
Loading