Created
June 23, 2020 16:31
-
-
Save matthieua/2aac25102611c35353b49bbddd39c354 to your computer and use it in GitHub Desktop.
This file contains hidden or 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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>SheCodes</title> | |
| <style> | |
| body { | |
| background: #f6f2fe; | |
| } | |
| h1 { | |
| text-decoration: underline; | |
| color: #885df1; | |
| text-align: center; | |
| } | |
| h2 { | |
| color: #272044; | |
| font-weight: normal; | |
| text-align: center; | |
| } | |
| button { | |
| border: 1px solid #885df1; | |
| border-radius: 30px; | |
| box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.2); | |
| margin: 20px auto; | |
| display: block; | |
| color: #885df1; | |
| font-size: 16px; | |
| background: transparent; | |
| padding: 15px 20px; | |
| transition: all 200ms ease; | |
| } | |
| button:hover { | |
| color: #fff; | |
| background: #885df1; | |
| } | |
| ul { | |
| list-style: none; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| li { | |
| display: inline; | |
| margin: 0 15px; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| .courses { | |
| color: red; | |
| } | |
| .coders { | |
| color: blue; | |
| } | |
| .stories { | |
| color: green; | |
| } | |
| p { | |
| text-align: center; | |
| } | |
| img { | |
| display: block; | |
| margin: 30px auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1> | |
| SheCodes | |
| </h1> | |
| <h2> | |
| Coding Workshop | |
| </h2> | |
| <button> | |
| Apply now | |
| </button> | |
| <ul> | |
| <li> | |
| <a | |
| href="https://www.shecodes.io/students" | |
| target="_blank" | |
| class="coders" | |
| > | |
| Coders | |
| </a> | |
| </li> | |
| <li> | |
| <a | |
| href="https://www.shecodes.io/courses" | |
| target="_blank" | |
| class="courses" | |
| > | |
| Courses | |
| </a> | |
| </li> | |
| <li> | |
| <a | |
| href="https://www.shecodes.io/stories" | |
| target="_blank" | |
| class="stories" | |
| > | |
| Stories | |
| </a> | |
| </li> | |
| </ul> | |
| <hr /> | |
| <p> | |
| <strong> | |
| More info | |
| </strong> | |
| </p> | |
| <img | |
| src="https://edge.alluremedia.com.au/m/g/2017/10/woman-coding.jpg" | |
| width="300" | |
| /> | |
| </body> | |
| </html> |
very helpful
wish i could do this, every time i change something i mess up
Hi Matt,
I am actually following your classes, and I would like to know if I put padding for the horizontal listed items instead of margin it still correct? Like this:
` ul {
list-style: none;
display: block;
text-align: center;
padding: 0;
}
li {
display: inline-block;
padding: 20px;
font-size: 20px;`
Thank you
This is just so good, I hope to be good like you someday.
Cool! It's a super solution!
Thank you Matt for such excellent learning!
Thanks Matt!
thank you
Thanks Matt
Thank you
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I thought this was so neat! Thought I found something special. Was going to say thank you for this program. It took me several seconds, and then realized it was you! My SheCodes instructor. I wrote you a personal note in SLACK regarding my future. Hope you respond. It is very important to me. Good training. Rose Brians