-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
63 lines (57 loc) · 7.71 KB
/
index.html
File metadata and controls
63 lines (57 loc) · 7.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Solution for Technigo Coding Challenge</title>
<link href="https://fonts.googleapis.com/css?family=Mrs+Sheppards|Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="jumbotron ">
<h1>Breakpoints</h1>
<h2>Because screen size shouldn't matter!</h2>
</div>
<div class="container">
<div class="row">
<h3>What brakpoints are?</h3>
</div>
<div class="row">
<div class="col-lg-12">
<p>In old times there was only computers screens where we could surf on the Internet. But that times are long gone and we have great variety of devices we can use now. No matter if it is small smartphone, or big tv screen, content of web sites should presents perfectly!</p>
<p>To achive this we have to redesign some page elements like font size or section layout, depends on screen size. Breakpoints are hardcoded display widths in our stylesheet which are compared to user screen width and then we can serve best site version for each user device.</p>
<ul class="list-group"><h4>Some nice materials about Breakpoints, and how to use them:</h4>
<li class="list-group-item"><a href="https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862">freeCodeCamp-The 100% correct way to do CSS breakpoints</a></li>
<li class="list-group-item"><a href="https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/">getflywheel.com-How to use CSS breakpoints to create responsive designs</a></li>
<li class="list-group-item"><a href="https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp">w3school.com-How TO - Typical Device Breakpoints</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h3>Test it! Resize the browser window and look how cats fits on it (because cats always fits!)</h3>
</div>
<div class="row">
<div class="col-lg-3 col-md-6"><img class="cat" src="./img/tomas-tuma-1164653-unsplash.jpg" alt="cat1"></div>
<div class="col-lg-3 col-md-6"><img class="cat" src="./img/jari-hytonen-538885-unsplash.jpg" alt="cat2"></div>
<div class="col-lg-3 col-md-6"><img class="cat" src="./img/hang-niu-1542682-unsplash.jpg" alt="cat3"></div>
<div class="col-lg-3 col-md-6"><img class="cat" src="./img/alex-pavlou-720-unsplash.jpg" alt="cat4"></div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12"><p>Site created as part of application to Technigo Bootcamp by Karol Cislowski</p>
<p>Love photos you seen on page? Check out this artists:
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@madebyvadim?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Vadim Sherbakov"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Vadim Sherbakov</span></a>
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@jarispics?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Jari Hytönen"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Jari Hytönen</span></a>
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@joeldevriend?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Joël de Vriend"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Joël de Vriend</span></a>
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@alexpavlou?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Alex Pavlou"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Alex Pavlou</span></a>
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@niuhang?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from hang niu"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">hang niu</span></a>
</p></div>
</div>
</div>
</footer>
</body>
</html>