Skip to content

T
task-1-html-css-rwd.
Commit e2369fa6 authored by s8_vaitku_e's avatar s8_vaitku_e
Browse files
Options

Update styles.css 

added font, picture, div, etc. size changes based on window size
parent 2559b8bf
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 30 deletions
styles.css
View file @ e2369fa6
......@@ -4,18 +4,6 @@
box-sizing: border-box;
}
a {
background-color: purple;
color: white;
padding: 1px 3px;
text-decoration: none;
text-transform: uppercase;
}
h1 {
text-align:center;
}
#div1 {
height:50px;
padding: 3px;
......@@ -46,12 +34,7 @@ h1 {
text-align:right;
}
#div2 {
height:350px;
padding: 3px;
margin: 3px;
display: flex;
}
#img2 {
width:60%;
......@@ -63,19 +46,8 @@ h1 {
height:100%;
}
#div3 {
height:350px;
display:flex;
padding:3px;
margin:3px;
}
#div3_1 {
width:30%;
}
#img3 {
width:80%;
width:100%;
height:100%;
}
......@@ -117,4 +89,160 @@ h1 {
#div9_2 {
height:50px;
display: flex;
}
@media only screen and (min-width: 1025px) {
a {
background-color: purple;
color: white;
padding: 1px 3px;
text-decoration: none;
text-transform: uppercase;
font-size: 80%;
}
p {
font-family: courier;
font-size: 100%;
}
h1 {
font-family: courier;
text-align:center;
}
h2 {
font-family: courier;
text-align:center;
}
h3 {
font-family: courier;
text-align:center;
}
#div2 {
height:450px;
padding: 3px;
margin: 3px;
display: flex;
}
#div3 {
height:450px;
display:flex;
padding:3px;
margin:3px;
}
#div3_1 {
width:70%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
a {
background-color: purple;
color: white;
padding: 1px 3px;
text-decoration: none;
text-transform: uppercase;
font-size: 60%;
}
p {
font-family: courier;
font-size: 90%;
}
h1 {
font-family: courier;
text-align:center;
font-size: 150%;
}
h2 {
font-family: courier;
text-align:center;
font-size: 120%;
}
h3 {
font-family: courier;
text-align:center;
font-size: 90%;
}
#div2 {
height:450px;
padding: 3px;
margin: 3px;
display: flex;
}
#div3 {
height:450px;
display:flex;
padding:3px;
margin:3px;
}
#div3_1 {
width:70%;
}
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
a {
background-color: purple;
color: white;
padding: 1px 3px;
text-decoration: none;
text-transform: uppercase;
font-size: 45%;
}
p {
font-family: courier;
font-size: 55%;
}
h1 {
font-family: courier;
text-align:center;
font-size: 120%;
}
h2 {
font-family: courier;
text-align:center;
font-size: 90%;
}
h3 {
font-family: courier;
text-align:center;
font-size: 60%;
}
#div2 {
height:300px;
padding: 3px;
margin: 3px;
display: flex;
}
#div3 {
height:200px;
display:flex;
padding:3px;
margin:3px;
}
#div3_1 {
width:150%;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment