-
-
Save FosterSamuel/894385ebdc323855cdb2eb49942187cf to your computer and use it in GitHub Desktop.
Code sample from Web Portfolio workshop. Needs to be filled in!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| 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