Created
July 27, 2018 15:49
-
-
Save GKephart/b3d8c993bb68c6b391235f98ee25b210 to your computer and use it in GitHub Desktop.
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
| /***************************************************** | |
| * CSS Mockup Activity - Custom CSS Stylesheet | |
| * @author rlewis37 | |
| * | |
| * Some rules have been included here to give you a head start. | |
| * Create your own custom CSS rules below. Have fun! | |
| ******************************************************/ | |
| html, body { | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| .container { | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| .clearfix { | |
| clear:both; | |
| } | |
| /* create a responsive container */ | |
| @media only screen and (min-width: 1200px) { | |
| .container { width: 1170px; } | |
| } | |
| @media only screen and (min-width: 992px) and (max-width: 1199px) { | |
| .container { width: 970px; } | |
| } | |
| @media only screen and (min-width: 768px) and (max-width: 991px) { | |
| .container { width: 750px; } | |
| } | |
| /***************************************************** | |
| * Flexbox Sticky Footer | |
| * http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ | |
| ******************************************************/ | |
| /*corrects IE min-height bug*/ | |
| html { display: flex;} | |
| body { width: 100%;} | |
| .sfooter { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| .sfooter-content { | |
| flex: 1 0 auto; | |
| } | |
| /***************************************************** | |
| * ADD YOUR OWN CSS BELOW! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ | |
| * | |
| * HINT: You might want to be conversant with the following: | |
| * * Shorthand syntax for padding, margin, and borders | |
| * * Display property and values... and the differences between them. | |
| * * The Box Model | |
| * * Pseudo Classes | |
| * * Attribute Selectors | |
| ******************************************************/ | |
| /***************************************************** | |
| * Global rules | |
| ******************************************************/ | |
| body { | |
| font-family: monospace,"Courier New"; | |
| } | |
| section { | |
| padding: 2.5rem 0; | |
| } | |
| /***************************************************** | |
| * Header Rules | |
| ******************************************************/ | |
| header { | |
| background-color: #333; | |
| color: lime; | |
| } | |
| header h1 { | |
| display: inline-block; | |
| margin-right: 1.5rem; | |
| font-size: 2.5rem; | |
| } | |
| /***************************************************** | |
| * Welcome Styles | |
| ******************************************************/ | |
| img[alt="welcome to my homepage"] { | |
| display:block; | |
| margin: 0 auto 2rem; | |
| } | |
| .instructions-wrapper { | |
| display: flex; | |
| align-items: flex-start; | |
| border : 3px solid black; | |
| padding: 20px; | |
| } | |
| .instructions-wrapper img{ | |
| width: 250px; | |
| } | |
| .instructions-content { | |
| flex: 1; | |
| padding-right: 2rem; | |
| } | |
| .instructions-content h2{ | |
| margin-top: 0 | |
| } | |
| /*************************** | |
| about me | |
| ****************************/ | |
| section.about-me{ | |
| background-color: blue; | |
| color: #fff; | |
| } | |
| .about-me img { | |
| width: 300px; | |
| float: left; | |
| margin-right: 2rem; | |
| border: 3px solid white; | |
| } | |
| .about-me p span { | |
| color: yellow; | |
| font-style: italic; | |
| } | |
| /**************************** | |
| SKILLZ | |
| *****************************/ | |
| section:nth-child(4) h2 { | |
| text-align: right; | |
| margin-top: 0; | |
| } | |
| section:nth-child(4) table { | |
| width:100%; | |
| color: lime; | |
| } | |
| section:nth-child(4) table td, | |
| section:nth-child(4) table tr | |
| { | |
| background-color: #333; | |
| padding: 10px; | |
| } | |
| /***************************************************** | |
| * contact styles | |
| ******************************************************/ | |
| div.sfooter-content section:last-child { | |
| background-color: #333; | |
| } | |
| .form-wrapper { | |
| background-color: darkgreen; | |
| color:lime; | |
| padding: 20px; | |
| } | |
| label { | |
| display: flex; | |
| margin: 15px 0 5px 0; | |
| } | |
| input, textarea { | |
| width: 30%; | |
| padding: 8px; | |
| } | |
| button { | |
| background-color: lime; | |
| padding: 18px 31px; | |
| font-weight: bold; | |
| font-size: 1rem; | |
| border: none; | |
| } | |
| form div:nth-child(4) { | |
| margin-bottom: 15px; | |
| } | |
| .form-wrapper h2 { | |
| margin-top : 0; | |
| } | |
| /* | |
| Footer | |
| */ | |
| footer { | |
| background-color : black; | |
| color: white; | |
| text-align: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment