Created
July 21, 2017 17:30
-
-
Save teethnclaws/7ab85c845e2a7f944871484cbd7d77e2 to your computer and use it in GitHub Desktop.
Responsive projects
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
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Zayn Designs</title> | |
| </head> | |
| <body> | |
| <div id="con"> | |
| <div class="zayn_1 shadow"> | |
| <span class="new">New</span> | |
| <span class="date-1">July 2017</span> | |
| <div class="overlay"></div> | |
| <h4>Coding is fun with CODEPEN | so do the code its free and fun</h4> | |
| </div> | |
| </div> | |
| <div id="con2"> | |
| <div class="zayn_2 shadow"> | |
| <span class="pop">Popular</span> | |
| <span class="date">July 2017</span> | |
| <div class="overlay"></div> | |
| <h4>He is not a lover who does not love forever.</h4> | |
| </div> | |
| <div class="zayn_3 shadow"> | |
| <span class="lat">latest</span> | |
| <span class="date">July 2017</span> | |
| <div class="overlay"></div> | |
| <h4>Show me your garden and I shall tell you what you are.</h4> | |
| </div> | |
| </div> | |
| <div id="con3"> | |
| <div class="zayn_4 shadow"> | |
| <span class="free">Free</span> | |
| <span class="date-1">July 2017</span> | |
| <div class="overlay"></div> | |
| <h4>All theory, dear friend, is gray, but the golden tree of life springs ever green.</h4> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <h1>Created by Zayn Inc 2017.</h1> | |
| </div> | |
| </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
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Comfortaa', cursive; | |
| background-color: #fff; | |
| } | |
| #con { | |
| width: 75%; | |
| margin: 0 auto; | |
| margin-top: 200px; | |
| height: auto; | |
| } | |
| #con2 { | |
| width: 75%; | |
| margin: 0 auto; | |
| margin-top: 30px; | |
| height: auto; | |
| } | |
| #con3 { | |
| width: 75%; | |
| margin: 0 auto; | |
| margin-top: 30px; | |
| height: auto; | |
| } | |
| h4 { | |
| width: 90%; | |
| position: absolute; | |
| font-size: 30px; | |
| padding: 20px; | |
| margin-top: 120px; | |
| color: #fff; | |
| } | |
| .zayn_1 { | |
| position: relative; | |
| margin-top: -150px; | |
| background: url(http://i.huffpost.com/gen/1960925/images/o-COOLEST-CITIES-IN-AMERICA-facebook.jpg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| border-bottom: 3px solid rgba(255,162,52,0.8); | |
| width: 100%; | |
| height: 280px; | |
| border-radius: 6px; | |
| box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9); | |
| transition: all 0.3s ease; | |
| } | |
| .zayn_2 { | |
| position: relative; | |
| margin-top: 1px; | |
| background: url(https://i.ytimg.com/vi/fwoDwajwqdo/maxresdefault.jpg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| border-bottom: 3px solid rgba(2,204,186,0.8); | |
| width: 49%; | |
| height: 300px; | |
| border-radius: 6px; | |
| box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9); | |
| transition: all 0.3s ease; | |
| } | |
| .zayn_3 { | |
| position: relative; | |
| float: right; | |
| margin-top: -304px; | |
| background: url(https://i.ytimg.com/vi/kD0jh_S975M/maxresdefault.jpg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| border-bottom: 3px solid rgba(169,81,237,0.8); | |
| width: 49%; | |
| height: 300px; | |
| border-radius: 6px; | |
| box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9); | |
| transition: all 0.3s ease; | |
| } | |
| .zayn_4 { | |
| position: relative; | |
| margin-top: 1px; | |
| background: url(http://www.lolwot.com/wp-content/uploads/2015/02/top-16-coolest-buildings-in-the-world.jpg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| border-bottom: 3px solid rgba(255,84,131,0.8); | |
| width: 100%; | |
| height: 280px; | |
| border-radius: 6px; | |
| box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9); | |
| transition: all 0.3s ease; | |
| } | |
| .new { | |
| color: #fff; | |
| z-index: 1; | |
| position: relative; | |
| left: 2%; | |
| top: 8%; | |
| padding: 15px; | |
| background: linear-gradient(to right, #02b3e4 0%, #02ccba 100%); | |
| border-radius: 50px 120px 120px; | |
| } | |
| .date-1 { | |
| color: #fff; | |
| z-index: 1; | |
| background: #b24592; | |
| /* fallback for old browsers */ | |
| background: -webkit-linear-gradient(to right, #b24592, #f15f79); | |
| /* Chrome 10-25, Safari 5.1-6 */ | |
| background: linear-gradient(to right, #b24592, #f15f79); | |
| /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ | |
| position: absolute; | |
| left: 80%; | |
| top: 3%; | |
| padding: 9px; | |
| border-radius: 50px 120px 120px; | |
| } | |
| .date { | |
| color: #fff; | |
| z-index: 1; | |
| background: #b24592; | |
| /* fallback for old browsers */ | |
| background: -webkit-linear-gradient(to right, #b24592, #f15f79); | |
| /* Chrome 10-25, Safari 5.1-6 */ | |
| background: linear-gradient(to right, #b24592, #f15f79); | |
| /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ | |
| position: absolute; | |
| left: 71%; | |
| top: 3%; | |
| padding: 9px; | |
| border-radius: 50px 120px 120px; | |
| } | |
| .pop { | |
| color: #fff; | |
| z-index: 1; | |
| position: absolute; | |
| left: 2%; | |
| top: 3%; | |
| padding: 15px; | |
| background: linear-gradient(to right, #fa3350 0%, #fa3380 100%); | |
| border-radius: 50px 120px 120px; | |
| } | |
| .lat { | |
| color: #fff; | |
| z-index: 1; | |
| position: absolute; | |
| left: 2%; | |
| top: 3%; | |
| padding: 15px; | |
| background: linear-gradient(to right, deeppink 0%, #fa3380 100%); | |
| border-radius: 50px 120px 120px; | |
| } | |
| .free { | |
| color: #fff; | |
| z-index: 1; | |
| position: absolute; | |
| left: 2%; | |
| top: 3%; | |
| padding: 15px; | |
| background: linear-gradient(to right, deepskyblue 0%, skyblue 100%); | |
| border-radius: 50px 120px 120px; | |
| } | |
| .overlay { | |
| position: absolute; | |
| z-index: 0; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background-color: rgba(000,000,000, 0.6); | |
| border-radius: 6px; | |
| } | |
| .shadow:hover { | |
| box-shadow: 5px 1px 10px 0px rgba(46,61,73,0.1); | |
| transition: all 0.3s ease; | |
| } | |
| @media only screen and (max-width: 840px) { | |
| h4 { | |
| font-size: 24px; | |
| } | |
| .zayn_2 { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .zayn_3 { | |
| position: relative; | |
| width: 100%; | |
| margin-top: 30px; | |
| } | |
| .zayn_4 { | |
| position: relative; | |
| width: 100%; | |
| margin-top: 360px; | |
| } | |
| .date { | |
| left: 70%; | |
| } | |
| .date-1 { | |
| left: 70%; | |
| } | |
| } | |
| .footer { | |
| margin-top: 50px; | |
| position: absolute; | |
| background: #b24592; | |
| /* fallback for old browsers */ | |
| background: -webkit-linear-gradient(to right, #b24592, #f15f79); | |
| /* Chrome 10-25, Safari 5.1-6 */ | |
| background: linear-gradient(to right, #b24592, #f15f79); | |
| /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ | |
| padding: 15px; | |
| width: 100%; | |
| border-radius: 4px; | |
| } | |
| .footer h1 { | |
| color: #fff; | |
| font-size: 20px; | |
| text-align: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment