Skip to content

Instantly share code, notes, and snippets.


FosterSamuel/Styles.css Secret

Last active Dec 1, 2018
What would you like to do?
Code sample from Web Portfolio workshop. Needs to be filled in!
<!DOCTYPE html>
<title>Your Name Portfolio</title>
<link href="Styles.css" rel="stylesheet">
<section class="intro">
<section class="intro-text">
<p>Hello, I am Samuel Foster.</p>
<section class="work">
<section class="project">
<h2>Project A</h2>
<a target="_blank" href="">View this work</a>
</section><section class="project">
<h2>Project B</h2>
<a target="_blank" href="">View this work</a>
<section class="contact">
<!-- Use for this part -->
<form action=""
<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">
* {
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.