Skip to content

Instantly share code, notes, and snippets.

@FosterSamuel FosterSamuel/Styles.css Secret
Last active Dec 1, 2018

Embed
What would you like to do?
Code sample from Web Portfolio workshop. Needs to be filled in!
<!DOCTYPE html>
<html>
<head>
<title>Your Name Portfolio</title>
<link href="Styles.css" rel="stylesheet">
</head>
<body>
<section class="intro">
<section class="intro-text">
<h1>Welcome!</h1>
<p>Hello, I am Samuel Foster.</p>
</section>
</section>
<section class="work">
<section class="project">
<h2>Project A</h2>
<a target="_blank" href="https://example.com/">View this work</a>
</section><section class="project">
<h2>Project B</h2>
<a target="_blank" href="https://example.com">View this work</a>
</section>
</section>
<section class="contact">
<h1>Contact</h1>
<!-- Use formspree.io for this part -->
<form action="https://formspree.io/yourname@cpp.edu"
method="POST">
<input type="text" name="name" placeholder="Name">
<input type="email" name="_replyto" placeholder="Email Address">
<textarea type="text" cols="30" rows="6" name="message" placeholder="Message"></textarea>
<input type="submit" value="send message">
</form>
</section>
</body>
</html>
* {
padding:0;
margin: 0;
box-sizing: border-box;
}
.intro {
width: 100%;
height: 60vh;
background-image: url("banner.jpeg");
background-size: cover;
background-position: bottom;
}
.intro-text {
padding-top: 5rem;
color: #efefef;
font-size: 2rem;
font-weight: bold;
margin: 0 auto;
width: 55ch;
text-align: center;
}
.work {
width: 100%;
}
.project {
width: 50%;
padding: 4rem 1rem;
display: inline-block;
font-weight: bold;
color: #efefef;
background-color: #770087;
background-color: orangered;
}
.contact {
padding: 2rem 0;
margin: 0 auto;
width: 50%;
display: block;
}
input {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.