Emiel_DK
/
frontend
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

16-media-querries

16-media_queries
emieldkr 4 years ago
parent
4e4f06d4db
commit
02069318f1
6 changed files with 262 additions and 0 deletions
Split View Show Diff Stats
  1. 6
    0
      16-media_queries/.prettierrc
  2. 72
    0
      16-media_queries/debug.log
  3. BIN
      16-media_queries/images/beautiful-logo.png
  4. 50
    0
      16-media_queries/index.html
  5. 0
    0
      16-media_queries/scripts/main.js
  6. 134
    0
      16-media_queries/styles/main.css

+ 6
- 0
16-media_queries/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 72
- 0
16-media_queries/debug.log View File

@@ -0,0 +1,72 @@
[1105/125502.914:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1105/125502.914:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1105/125502.914:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1117/220412.648:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1117/220412.650:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1117/220412.650:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1202/094041.690:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1202/094041.690:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1202/094041.690:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/093923.244:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/093923.244:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/093923.244:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/094923.256:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/094923.256:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/094923.256:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/094923.256:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/094923.256:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/094923.256:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/095423.245:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/095423.245:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/095423.245:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/100923.246:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/100923.246:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/100923.246:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/102423.255:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/102423.255:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/102423.255:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/103923.265:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/103923.265:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/103923.265:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/105423.274:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/105423.274:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/105423.274:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/110923.275:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/110923.275:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/110923.275:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/112423.276:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/112423.276:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/112423.276:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/113923.278:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/113923.278:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/113923.278:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/115423.279:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/115423.279:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/115423.279:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/120923.292:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/120923.292:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/120923.292:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/125315.528:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/125315.528:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/125315.528:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/130815.529:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/130815.529:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/130815.529:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/132315.531:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/132315.531:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/132315.531:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/133815.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/133815.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/133815.538:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/135315.541:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/135315.541:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/135315.541:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/140815.543:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/140815.543:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/140815.543:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/142315.544:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/142315.544:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/142315.544:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/143815.546:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/143815.546:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1209/143815.546:ERROR:crash_report_database_win.cc(469)] failed to stat report

BIN
16-media_queries/images/beautiful-logo.png View File


+ 50
- 0
16-media_queries/index.html View File

@@ -0,0 +1,50 @@
<!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" />
<title>16-media_queries</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<header>
<a href="#">
<img src="images/beautiful-logo.png" alt="beautiful-logo">
</a>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<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>
</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>

<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>

+ 0
- 0
16-media_queries/scripts/main.js View File


+ 134
- 0
16-media_queries/styles/main.css View File

@@ -0,0 +1,134 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

header {
background-color: indianred;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
padding: 0.5rem 2rem;
}

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

nav {
display: flex;
align-items: center;
}

nav a {
padding: 0.5rem 1rem;
}

.hamburger {
display: none;
}

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

@media screen and (max-width: 600px) {
nav {
display: none;
}
.hamburger {
display: flex;
flex-direction: column;
justify-content: center;
}
}

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

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

#list-grid {
list-style: none;
margin-top: 2rem;
padding: 1rem;
display: grid;
font-size: 2rem;
gap: 1rem;
}

#list li {
padding: 1rem 2rem;
}

#test1 {
background-color: aquamarine;
}

#test2 {
background-color: blanchedalmond;
}

#test3 {
background-color: cornflowerblue;
}

#test4 {
background-color: darkgoldenrod;
}

#test5 {
background-color: firebrick;
}

#test6 {
background-color: greenyellow;
}

#test7 {
background-color: hotpink;
}

@media screen and (min-width: 400px) {
#list {
flex-wrap: wrap;
flex-direction: row;
}

#list li {
width: 50%;
}

#list li:first-child {
width: 100%;
}

#list-grid {
grid-template-columns: 1fr 1fr;
}

#list-grid li:first-child {
grid-column: 1 / -1;
}
}

@media screen and (min-width: 800px) {
#list li {
width: calc(100% / 3);
}
#list-grid {
grid-template-columns: 1fr 1fr 1fr;
}
}

Write Preview
Loading…
Cancel
Save