av/homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add media query

Browse Source
This commit is contained in:
Anton Vakhrushev 2016-08-25 21:30:36 +03:00
parent ca365d096a
commit 60d7ac35df
2 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=PT+Serif&subset=cyrillic" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=PT+Serif&subset=cyrillic" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/style.css"> <link rel="stylesheet" type="text/css" href="/style.css">
<title>Здравствуйте</title> <title>Здравствуйте</title>
@ -9,6 +10,9 @@
<main class="content"> <main class="content">
<h1 class="greeting">Здравствуйте,</h1> <h1 class="greeting">Здравствуйте,</h1>
<h1 class="hello">Привет,</h1>
<p class="text"> <p class="text">
меня зовут Антон Вахрушев, и это моя домашняя страница.<br> меня зовут Антон Вахрушев, и это моя домашняя страница.<br>
Здесь вы можете. Здесь вы можете.

43
style.css
View File

@ -8,7 +8,8 @@ body {
margin: 0 auto; margin: 0 auto;
} }
.greeting { .greeting,
.hello {
margin-top: 1.8em; margin-top: 1.8em;
font-size: 3.4em; font-size: 3.4em;
margin-bottom: 0.6em; margin-bottom: 0.6em;
@ -22,6 +23,46 @@ body {
font-weight: normal; font-weight: normal;
} }
.hello {
display: none;
}
.text { .text {
margin-bottom: 0.8em; margin-bottom: 0.8em;
} }
@media (max-width: 839px) {
body {
font-size: 16px;
}
.content {
margin: 20px 0;
width: auto;
}
.greeting,
.hello {
margin-top: 0.8em;
}
.greeting {
display: none;
}
.hello {
display: block;
}
}
@media (max-width: 480px) {
.content {
margin: 10px 0;
width: auto;
}
}