|
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8"> |
5 | | - <meta name="viewport" content="width=device-width"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1"> |
6 | 6 | <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> |
7 | 7 | <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet"> |
8 | 8 | <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded" rel="stylesheet"> |
|
35 | 35 | </a> |
36 | 36 | </div> |
37 | 37 | </nav> |
38 | | -<!--Title image will be set to display:none and used as a background image--> |
| 38 | +<!--Title image will be set to display:none and used as a background image on the div below--> |
39 | 39 | <div class="navigation__content container-fluid" data-image-type="responsive"> |
40 | | - <img class="responsive" src="static/images/title_photo/title_glass_building_960x540.jpg" |
41 | | - srcset="static/images/title_photo/title_glass_building_480x270.jpg 480w, |
42 | | - static/images/title_photo/title_glass_building_750x1334.jpg 750w, |
| 40 | + <picture> |
| 41 | + <source srcset="static/images/title_photo/title_glass_building_480x270.jpg 480w, |
43 | 42 | static/images/title_photo/title_glass_building_960x540.jpg 960w, |
44 | | - static/images/title_photo/title_glass_building_1080x1920.jpg 1080w, |
45 | | - static/images/title_photo/title_glass_building_1125x2436.jpg 1125w, |
46 | | - static/images/title_photo/title_glass_building_1242x2436.jpg 1242w, |
47 | 43 | static/images/title_photo/title_glass_building_1334x750.jpg 1334w, |
48 | | - static/images/title_photo/title_glass_building_1442x2562.jpg 1442w, |
49 | 44 | static/images/title_photo/title_glass_building_1920x1080.jpg 1920w, |
50 | 45 | static/images/title_photo/title_glass_building_2562x1442.jpg 2562w, |
51 | 46 | static/images/title_photo/title_glass_building_3840x2160.jpg 3840w" |
52 | | - sizes="(max-width: 480px) and (orientation: landscape) 100vw, |
53 | | - (max-width: 750px) and (orientation: portrait) 100vw, |
54 | | - (max-width: 960px) and (orientation: landscape) 100vw, |
55 | | - (max-width: 1080px) and (orientation: portrait) 100vw, |
56 | | - (max-width: 1125px) and (orientation: portrait) 100vw, |
57 | | - (max-width: 1242px) and (orientation: portrait) 100vw, |
58 | | - (max-width: 1334px) and (orientation: landscape) 100vw, |
59 | | - (max-width: 1442px) and (orientation: portrait) 100vw, |
60 | | - (max-width: 1920px) and (orientation: landscape) 100vw, |
61 | | - (max-width: 2562px) and (orientation: landscape) 100vw, |
62 | | - (min-width: 2563px) and (orientation: landscape) 100vw" |
63 | | - alt="Python Sprints Title Image"> |
| 47 | + media="(orientation: landscape)" |
| 48 | + sizes="100vw"> |
| 49 | + <source srcset="static/images/title_photo/title_glass_building_750x1334.jpg 750w, |
| 50 | + static/images/title_photo/title_glass_building_1080x1920.jpg 1080w, |
| 51 | + static/images/title_photo/title_glass_building_1125x2436.jpg 1125w, |
| 52 | + static/images/title_photo/title_glass_building_1242x2436.jpg 1242w, |
| 53 | + static/images/title_photo/title_glass_building_1442x2562.jpg 1442w, |
| 54 | + " |
| 55 | + media="(orientation: portrait)" |
| 56 | + sizes="100vw"> |
| 57 | + <img class="responsive" src="static/images/title_photo/title_glass_building_960x540.jpg" alt="Python Sprints Title Image"> |
| 58 | + </picture> |
| 59 | + |
64 | 60 | <div class="row"> |
65 | 61 | <div class="col-md-12"> |
66 | 62 | <h1 class="navigation__title">Python Sprints</h1> |
|
0 commit comments