-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
44aec7e
commit 92c69b5
Showing
3 changed files
with
105 additions
and
0 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| @charset "UTF-8"; | ||
| /*todas as demais midias*/ | ||
|
|
||
|
|
||
| /*Typical Device Breakpoints | ||
| Pequenas Telas:ate 600px | ||
| Celular:de 320px até 768px | ||
| Tablet:769px ate 992px | ||
| Desktop:992px ate 1200px | ||
| Grandes telas:acima de 1200px | ||
| */ | ||
|
|
||
| @media print{ | ||
|
|
||
| } | ||
|
|
||
| @media screen and (min-widht:769px) and (max-widht:992px) { | ||
| body{ | ||
| background-image: url(../imagens/back-tablet.jpg); | ||
| } | ||
| } | ||
| @media screen and (min-widht:992px) and (max-widht:1200px) { | ||
|
|
||
| } | ||
| @media screen and (min-widht:1200px) { | ||
|
|
||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| @charset "UTF-8"; | ||
|
|
||
| /*Versão Mobile First */ | ||
|
|
||
| *{ | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| font-size: 1.3em; | ||
| margin: 0px; | ||
| padding: 0px; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| html{ | ||
|
|
||
| height: 100vh; | ||
|
|
||
| } | ||
| body{ | ||
| background: black url(../imagens/back-phone.jpg) no-repeat; | ||
| background-size: cover; | ||
| background-position: center center; | ||
|
|
||
| } | ||
| main{ | ||
| background-color: rgba(255, 255, 255, 0.678); | ||
| width: 400px; | ||
| margin: auto; | ||
| margin-top: 20px; | ||
| border-radius: 10px; | ||
| padding: 10px; | ||
| } | ||
| h1{ | ||
| text-align: center; | ||
| color: white; | ||
| text-shadow: 10px 10px 15px black; | ||
| font-size: 2em; | ||
| } | ||
| img{ | ||
| display: block; | ||
| margin: auto; | ||
| } | ||
| img#phone{ | ||
| display: block; | ||
| } | ||
| img#tablet{ | ||
| display: none; | ||
| } | ||
| img#print{ | ||
| display: none; | ||
| } | ||
| img#pc{ | ||
| display: none; | ||
| } | ||
| img#tv{ | ||
| display: none; | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="pt-br"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Media Query</title> | ||
| <link rel="stylesheet" href="estilo/style.css" media="all"> | ||
| <link rel="stylesheet" href="estilo/media-query.css"> | ||
|
|
||
|
|
||
| </head> | ||
| <body> | ||
| <main> | ||
| <h1>Testando Media Queries</h1> | ||
| <img id="phone" src="imagens/icon-phone.png" alt="acessando via smartfone"> | ||
| <img id="tablet" src="imagens/icon-tablet.png" alt="acessando via tablet"> | ||
| <img id="print" src="imagens/icon-print.png" alt="versão impressão"> | ||
| <img id="pc" src="imagens/icon-pc.png" alt="versão para desktop"> | ||
| <img id="tv" src="imagens/icon-tv.png" alt="versão para tv"> | ||
| </main> | ||
| </body> | ||
| </html> |