A Pen by Scott Perry on CodePen.
Created
January 27, 2023 22:36
-
-
Save ScottPerry2021/5acfcd7a6a035c01c0d37810e59c6584 to your computer and use it in GitHub Desktop.
CSS: landing page
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 class="no-js" lang=""> | |
| <body> | |
| <header> | |
| <h1>Scott Perry: Software Engineer</h1> | |
| <ul> | |
| <li class = "social"><a href="#"><img src="https://ga-instruction.s3.amazonaws.com/assets/myga-html-css/facebook.png" alt="Facebook"/></a></li> | |
| <li class = "social"><a href="#"><img src="https://ga-instruction.s3.amazonaws.com/assets/myga-html-css/twitter.png" alt="Twitter"/></a></li> | |
| <li class = "social" id = "insta"><a href="#"><img src="https://ga-instruction.s3.amazonaws.com/assets/myga-html-css/instagram.png" alt="Instagram"/></a></li> | |
| </ul> | |
| </header> | |
| <nav> | |
| <ul> | |
| <li class = "nav"><a href="#">About Me</a></li> | |
| <li class = "nav"><a href="#">Portfolio</a></li> | |
| <li class = "nav"><a href="#">My Blog</a></li> | |
| <li class = "nav"><a href="#">Contact Me</a></li> | |
| </ul> | |
| <img src="https://images.unsplash.com/photo-1615581161689-8307c11486c4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt = "artwork"/> | |
| </nav> | |
| <h2>Welcome to my portfolio!</h2> | |
| <p class = "top">Hi, I'm Scott. I'm a Software Engineer <span>San Francsisco, CA</span>. I love playing with code snippets, new software updates, and gardening. Check out my work!</p> | |
| <div id = "image-grid"> | |
| <img src="https://images.unsplash.com/photo-1455218873509-8097305ee378?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" alt = "artwork"/> | |
| <img src="https://images.unsplash.com/photo-1439853949127-fa647821eba0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" alt = "artwork"/> | |
| <img src="https://images.unsplash.com/photo-1508669232496-137b159c1cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" alt = "artwork"/> | |
| <img src="https://images.unsplash.com/photo-1536431311719-398b6704d4cc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" alt = "artwork"/> | |
| <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2048&q=80" alt = "artwork"/> | |
| <img src="https://images.unsplash.com/photo-1510797215324-95aa89f43c33?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt = "artwork"/> | |
| <img src="https://images.unsplash.com/photo-1455218873509-8097305ee378?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" alt = "artwork"/> | |
| <img src="https://images.unsplash.com/photo-1515420043797-69a1bc7ee7a0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" alt = "artwork"/> | |
| <img src="https://images.unsplash.com/photo-1531386450450-969f935bd522?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt = "artwork"/> | |
| </div> | |
| <footer> | |
| <p class = "footer">Blk_swan 2020: Scott Perry</p> | |
| </footer> | |
| Landing Page | |
| </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
| @import url('https://fonts.googleapis.com/css?family=Poiret+One'); | |
| body { | |
| font-family: 'Poiret One', sans-serif; | |
| } | |
| h1 { | |
| text-align: center; | |
| color: black; | |
| font-size: 36px; | |
| } | |
| h2 { | |
| text-align: center; | |
| color: black; | |
| } | |
| p { | |
| text-align: center; | |
| color: grey; | |
| } | |
| span { | |
| color: #b22222; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: #9932cc; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| p.footer { | |
| font-size: 14px; | |
| color: #000000; | |
| font-style: italic; | |
| } | |
| li.nav { | |
| display: inline; | |
| padding: 15px; | |
| } | |
| nav ul { | |
| text-align: center; | |
| font-size: 18px; | |
| margin: 25px; | |
| } | |
| .social img { | |
| width: 30px; | |
| } | |
| #image-grid img { | |
| width: 250px; | |
| } | |
| header ul { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
landing_page