senneDM
/
Frontend
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

r

master
senne 4 years ago
parent
fd1153c3e7
commit
814d5d15cf
2 changed files with 116 additions and 121 deletions
Split View Show Diff Stats
  1. 48
    48
      16-media_queries/index.html
  2. 68
    73
      16-media_queries/styles/main.css

+ 48
- 48
16-media_queries/index.html View File

@@ -1,52 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles/main.css">
<title>media_queries</title>
</head>
<body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles/main.css">
<title>media_queries</title>
</head>
<body>

<header>
<a href="#">
<img src="images/images.png" alt="beautiful-logo">
</a>
<nav>
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">link 4</a>
<a href="#">link 5</a>
</nav>
<nav class = "hamburger">
<span></span>
<span></span>
<span></span>
</nav>
</header>
<ul id = 'list' >
<li id="test1">test1</li>
<li id="test2">test2</li>
<li id="test3">test3</li>
<li id="test4">test4</li>
<li id="test5">test5</li>
<li id="test6">test6</li>
<li id="test7">test7</li>
</ul>
<header>
<a href="#">
<img src="images/images.png" alt="beautiful-logo">
</a>
<nav>
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">link 4</a>
<a href="#">link 5</a>
</nav>
<nav class="hamburger">
<span></span>
<span></span>
<span></span>
</nav>
</header>

<ul id = 'list-grid' >
<li id="test1">test1</li>
<li id="test2">test2</li>
<li id="test3">test3</li>
<li id="test4">test4</li>
<li id="test5">test5</li>
<li id="test6">test6</li>
<li id="test7">test7</li>
</ul>
<script src="scripts/main.js"></script>
</body>
</html>
<ul id='list'>
<li id="test1">test1</li>
<li id="test2">test2</li>
<li id="test3">test3</li>
<li id="test4">test4</li>
<li id="test5">test5</li>
<li id="test6">test6</li>
<li id="test7">test7</li>
</ul>

<ul id='list-grid'>
<li id="test1">test1</li>
<li id="test2">test2</li>
<li id="test3">test3</li>
<li id="test4">test4</li>
<li id="test5">test5</li>
<li id="test6">test6</li>
<li id="test7">test7</li>
</ul>

<script src="scripts/main.js"></script>
</body>
</html>

+ 68
- 73
16-media_queries/styles/main.css View File

@@ -4,126 +4,121 @@
box-sizing: border-box;
}

ul{
ul {
list-style: none;
padding: 0;
font-family: sans-serif;
font-size: 2rem;
}

#list{
#list {
display: flex;
flex-direction: column;
}

ul li{
ul li {
padding: 1rem 2rem;
}

#test1{
background-color: rgb(199, 144, 43);
#test1 {
background-color: rgb(199, 144, 43);
}

#test2{
background-color: rgb(180, 45, 180);
#test2 {
background-color: rgb(180, 45, 180);
}

#test3{
background-color: rgb(128, 1, 1);
#test3 {
background-color: rgb(128, 1, 1);
}

#test4{
#test4 {
background-color: rgb(90, 82, 82);

}

#test5{
background-color: rgb(16, 82, 16);
#test5 {
background-color: rgb(16, 82, 16);
}
#test6{
background-color: rgb(211, 211, 36);
#test6 {
background-color: rgb(211, 211, 36);
}
#test7{
background-color: rgb(78, 176, 209);
#test7 {
background-color: rgb(78, 176, 209);
}
@media screen and (min-width: 400px){
#list{
flex-flow: row wrap;
}
#list li{
@media screen and (min-width: 400px) {
#list {
flex-flow: row wrap;
}
#list li {
width: 50%;
}
#list li:first-child{
#list li:first-child {
width: 100%;
}
#list-grid{
#list-grid {
grid-template-columns: 1fr 1fr;
}
#list-grid li:first-child {
grid-column: 1 / -1;
}
}
@media screen and (min-width: 800px){
#list{
@media screen and (min-width: 800px) {
#list {
flex-flow: row wrap;
}
#list li{
width: calc(100%/3);
}
#list li:first-child{
width: 100%;
}
}
#list-grid{
#list li {
width: calc(100% / 3);
}
#list li:first-child {
width: 100%;
}
}
#list-grid {
font-size: 1rem;
font-family: sans-serif;
margin-top: 2rem;
display: grid;
gap: 1rem;
padding: 1rem;
}

header{
display: flex;
justify-content: space-between;
background-color: rosybrown;
padding: 0.5rem 2rem;
}


header a img{
height: 3rem;
mix-blend-mode: multiply;
}

nav > a{
padding: 0.5rem 1rem;
}

.hamburger{
display: none;
}

.hamburger span{
display: block;
width: 2rem;
height: 0.3rem;
background-color: #fff;
margin: 0.2rem 0;
}

@media screen and (max-width: 600px){
nav{
}

header {
display: flex;
justify-content: space-between;
background-color: rosybrown;
padding: 0.5rem 2rem;
}

header a img {
height: 3rem;
mix-blend-mode: multiply;
}

nav > a {
padding: 0.5rem 1rem;
}

.hamburger {
display: none;
}

.hamburger span {
display: block;
width: 2rem;
height: 0.3rem;
background-color: #fff;
margin: 0.2rem 0;
}

@media screen and (max-width: 600px) {
nav {
display: none;
}

.hamburger{
.hamburger {
display: flex;
flex-direction: column;
justify-content: center;
}
}
}

Write Preview
Loading…
Cancel
Save