Last active
January 17, 2021 00:39
-
-
Save b3n10/c12fb4649606abcd52d4683e52d8cdf4 to your computer and use it in GitHub Desktop.
center vertical & horizontal
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
<div class="nav"> | |
<div class="logo"> | |
<a href="#">randomQuotes</a> | |
</div> | |
<a href="#">about</a> | |
<a href="#">submit quote</a> | |
</div> | |
<div class="container"> | |
<div class="div_mainbody"> | |
<div class="div_text"> | |
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Ev</p> | |
<p>J. R. R. Tolkien</p> | |
</div> | |
<div class="div_button"> | |
<a class="next">next</a> | |
<a class="sharefb">sharefb</a> | |
<a class="sharetw">sharetw</a> | |
</div> | |
</div> | |
</div> |
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
/* | |
https://stackoverflow.com/questions/9120539/facebook-share-link-no-javascript | |
*/ |
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
* { | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
font-family: helvetica neue, Helvetica, Arial, sans-serif; | |
} | |
.container { | |
position: relative; | |
/* | |
media-query | |
width: 620px; | |
margin: 0 auto; | |
*/ | |
} | |
.div_mainbody { | |
max-height: 640px; | |
width: 320px; | |
margin: 0 auto; | |
background: #fff; | |
color: #111; | |
border: 1px solid #ccc; | |
border-radius: 5px; | |
border-color: #f0f0f0 #ececec #dfdfdf; | |
box-shadow: 0 1px 3px #ccc; | |
} | |
.div_text { | |
height: 80%; | |
padding: 15px; | |
} | |
.div_text p { | |
} | |
.div_text p:first-child { | |
line-height: 1.4; | |
font-size: 20px; | |
font-weight: 300 !important; | |
} | |
.div_text p:last-child { | |
color: #00a; | |
padding-top: 10px; | |
text-align: right; | |
font-size: 16px; | |
font-weight: 700 !important; | |
} | |
.div_text p:last-child:before { | |
content: "- "; | |
} | |
.div_button { | |
background-color: #f9f9f9; | |
text-align: center; | |
border-top: 1px solid #e0e0e0; | |
padding: 5px 10px; | |
overflow: hidden; | |
} | |
.div_button a:hover { | |
background-color: #fff; | |
color: #111; | |
cursor: pointer; | |
} | |
.div_button a.next { | |
background-color: #2f7fca; | |
color: #fff; | |
float: left; | |
border: 1px solid #ccc; | |
border-radius: 4px; | |
padding: 5px 10px; | |
} | |
.div_button a.sharefb, | |
.div_button a.sharetw { | |
float: right; | |
margin-left: 5px; | |
border: 1px solid #ccc; | |
border-radius: 4px; | |
padding: 5px 10px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment