Last active
January 23, 2019 11:06
-
-
Save ValchanOficial/e541fe320b7cfc220e0e770d13936135 to your computer and use it in GitHub Desktop.
HTML + CSS RESPONSIVO
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 ------------------------ ** | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> | |
| </head> | |
| <body style="font-family:Verdana;"> | |
| <div style="overflow:auto"> | |
| <div class="esquerdo"> | |
| <img class="imgR" src="Valchan.jpg" alt="Valchan"><br><br> | |
| About<br> | |
| Valéria Padilha de Vargas<br><br> | |
| <p>Student of Systems Analysis and Development. Passionate about technology, continuously seeking knowledge.</p> | |
| <p class="footer"> | |
| <i class="fas fa-envelope-square fa-lg"></i> | |
| <i class="fab fa-facebook-square fa-lg"></i> | |
| <i class="fab fa-github fa-lg"></i> | |
| <i class="fab fa-instagram fa-lg"></i> | |
| <i class="fab fa-linkedin fa-lg"></i> | |
| <i class="fab fa-twitter fa-lg"></i> | |
| <br><i class="far fa-copyright"></i> 2019 Valchan | |
| </p> | |
| </div> | |
| <div class="direito"> | |
| <!-- POSTS --> | |
| <div class="posts"> | |
| <h2 class="h2">Lorum Ipsum</h2> | |
| <div class="search"> | |
| <form action="/valchan/search.html" method="get"> | |
| <input class="form-control" type="text" placeholder="Pesquise.."> | |
| </form> | |
| </div><br> | |
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> | |
| Lorem Ipsum | |
| "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." | |
| "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan, neque mattis aliquet ultrices, elit felis gravida nibh, et dictum purus tellus at dolor. Cras et nibh ac orci imperdiet condimentum. Donec massa risus, porta eu ante et, interdum porta elit. Mauris et quam at erat auctor vestibulum. Duis vitae varius augue. Cras faucibus ac metus et porta. Aliquam erat volutpat. | |
| Donec purus orci, vehicula eu metus sed, lobortis dictum est. Nullam eu est erat. | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| ** ------------------------ CSS ------------------------ ** | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .direito { | |
| position: absolute; | |
| width:75%; | |
| height: 100%; | |
| left: 50%; | |
| margin-left: -25%; | |
| top: 0; | |
| padding:0 20px; | |
| text-align:center; | |
| background-color: #340707; | |
| overflow-y: scroll; | |
| color: black; | |
| } | |
| .posts{ | |
| position: relative; | |
| background-color: white; | |
| width: 80%; | |
| height: 100%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-bottom: 25px; | |
| padding-left: 25px; | |
| padding-right: 25px; | |
| padding-bottom: 25px; | |
| } | |
| .esquerdo { | |
| position: fixed; | |
| width: 25%; | |
| height: 100%; | |
| padding:15px; | |
| top: 0; | |
| left: 0; | |
| text-align:center; | |
| color: white; | |
| background-color: black; | |
| } | |
| .imgR { | |
| margin-top: 20px; | |
| border-radius: 50%; | |
| width: 50%; | |
| } | |
| .footer{ | |
| margin-top: 90%; | |
| } | |
| .search{ | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| padding-bottom: 10px; | |
| } | |
| .h2{ | |
| margin-top: 20px; | |
| padding-top: 15px; | |
| padding-bottom: 10px; | |
| } | |
| @media only screen and (max-width:768px) { | |
| .menu, .direito, .esquerdo { | |
| width:100%; | |
| position: relative; | |
| } | |
| .direito { | |
| left: 25%; | |
| overflow-y: hidden; | |
| } | |
| .imgR{ | |
| width: 30% | |
| } | |
| .footer{ | |
| margin-top: 10%; | |
| } | |
| } |
<details>
<summary>About</summary>
<p>Student of Systems Analysis and Development. Passionate about technology, continuously seeking knowledge.</p>
</details>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons