|
-
- <head><title>Microsoft Learning Site</title></head>
- <style>
- body {
- font-family: 'Segoe UI', Arial;
- background-color: #aaa;
- padding: 0;
- margin: 0;
- }
- .bg0 {
- background-image: url("../_tools/background.png")
- }
- .bg1 {
- background-color: #333;
- }
- .bg2 {
- background-color: #fff;
- }
- .imgbox img {
- width: 10.5rem;
- height: 10.5rem;
- object-fit: contain;
- cursor: pointer;
- }
- .imgbox {
- margin: 0.6rem;
- padding: 0.5rem;
- text-align: center;
- width: 12rem;
- height: 12rem;
- background-color: #e0e0e0;
- }
- h1 {
- font-size: 2.6rem;
- }
- .find, .find input {
- font-size: 1.5rem;
- }
- .top {
- position: -webkit-sticky;
- position: sticky;
- top: 0;
- background-color: #aaa;
- padding: 1rem;
- padding-top: 0;
- box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);
- }
- .top button {
- float: right;
- position: relative;
- top: -2rem;
- font-size: 1.5rem;
- }
- .label {
- height: 2.5em;
- line-height: 1em;
- overflow: hidden;
- font-size: 0.9rem;
- }
- .grid {
- display: flex;
- flex-wrap: wrap;
- width: 100%;
- }
- </style>
- <body>
- <div class="top">
- <h1>Microsoft Learning Site</h1>
- <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span>
- <button onclick="toggleBg()">Change Background</button>
- </div>
- <div class="grid">
- <div id="svg (1).svg" class="imgbox"><a href="svg (1).svg" download><img src="svg (1).svg" class="bg0"/></a><div class="label">svg (1).svg</div></div>
- <div id="svg (10).svg" class="imgbox"><a href="svg (10).svg" download><img src="svg (10).svg" class="bg0"/></a><div class="label">svg (10).svg</div></div>
- <div id="svg (100).svg" class="imgbox"><a href="svg (100).svg" download><img src="svg (100).svg" class="bg0"/></a><div class="label">svg (100).svg</div></div>
- <div id="svg (101).svg" class="imgbox"><a href="svg (101).svg" download><img src="svg (101).svg" class="bg0"/></a><div class="label">svg (101).svg</div></div>
- <div id="svg (102).svg" class="imgbox"><a href="svg (102).svg" download><img src="svg (102).svg" class="bg0"/></a><div class="label">svg (102).svg</div></div>
- <div id="svg (103).svg" class="imgbox"><a href="svg (103).svg" download><img src="svg (103).svg" class="bg0"/></a><div class="label">svg (103).svg</div></div>
- <div id="svg (104).svg" class="imgbox"><a href="svg (104).svg" download><img src="svg (104).svg" class="bg0"/></a><div class="label">svg (104).svg</div></div>
- <div id="svg (105).svg" class="imgbox"><a href="svg (105).svg" download><img src="svg (105).svg" class="bg0"/></a><div class="label">svg (105).svg</div></div>
- <div id="svg (106).svg" class="imgbox"><a href="svg (106).svg" download><img src="svg (106).svg" class="bg0"/></a><div class="label">svg (106).svg</div></div>
- <div id="svg (107).svg" class="imgbox"><a href="svg (107).svg" download><img src="svg (107).svg" class="bg0"/></a><div class="label">svg (107).svg</div></div>
- <div id="svg (108).svg" class="imgbox"><a href="svg (108).svg" download><img src="svg (108).svg" class="bg0"/></a><div class="label">svg (108).svg</div></div>
- <div id="svg (109).svg" class="imgbox"><a href="svg (109).svg" download><img src="svg (109).svg" class="bg0"/></a><div class="label">svg (109).svg</div></div>
- <div id="svg (11).svg" class="imgbox"><a href="svg (11).svg" download><img src="svg (11).svg" class="bg0"/></a><div class="label">svg (11).svg</div></div>
- <div id="svg (110).svg" class="imgbox"><a href="svg (110).svg" download><img src="svg (110).svg" class="bg0"/></a><div class="label">svg (110).svg</div></div>
- <div id="svg (111).svg" class="imgbox"><a href="svg (111).svg" download><img src="svg (111).svg" class="bg0"/></a><div class="label">svg (111).svg</div></div>
- <div id="svg (112).svg" class="imgbox"><a href="svg (112).svg" download><img src="svg (112).svg" class="bg0"/></a><div class="label">svg (112).svg</div></div>
- <div id="svg (113).svg" class="imgbox"><a href="svg (113).svg" download><img src="svg (113).svg" class="bg0"/></a><div class="label">svg (113).svg</div></div>
- <div id="svg (114).svg" class="imgbox"><a href="svg (114).svg" download><img src="svg (114).svg" class="bg0"/></a><div class="label">svg (114).svg</div></div>
- <div id="svg (115).svg" class="imgbox"><a href="svg (115).svg" download><img src="svg (115).svg" class="bg0"/></a><div class="label">svg (115).svg</div></div>
- <div id="svg (116).svg" class="imgbox"><a href="svg (116).svg" download><img src="svg (116).svg" class="bg0"/></a><div class="label">svg (116).svg</div></div>
- <div id="svg (117).svg" class="imgbox"><a href="svg (117).svg" download><img src="svg (117).svg" class="bg0"/></a><div class="label">svg (117).svg</div></div>
- <div id="svg (118).svg" class="imgbox"><a href="svg (118).svg" download><img src="svg (118).svg" class="bg0"/></a><div class="label">svg (118).svg</div></div>
- <div id="svg (119).svg" class="imgbox"><a href="svg (119).svg" download><img src="svg (119).svg" class="bg0"/></a><div class="label">svg (119).svg</div></div>
- <div id="svg (12).svg" class="imgbox"><a href="svg (12).svg" download><img src="svg (12).svg" class="bg0"/></a><div class="label">svg (12).svg</div></div>
- <div id="svg (120).svg" class="imgbox"><a href="svg (120).svg" download><img src="svg (120).svg" class="bg0"/></a><div class="label">svg (120).svg</div></div>
- <div id="svg (121).svg" class="imgbox"><a href="svg (121).svg" download><img src="svg (121).svg" class="bg0"/></a><div class="label">svg (121).svg</div></div>
- <div id="svg (122).svg" class="imgbox"><a href="svg (122).svg" download><img src="svg (122).svg" class="bg0"/></a><div class="label">svg (122).svg</div></div>
- <div id="svg (123).svg" class="imgbox"><a href="svg (123).svg" download><img src="svg (123).svg" class="bg0"/></a><div class="label">svg (123).svg</div></div>
- <div id="svg (124).svg" class="imgbox"><a href="svg (124).svg" download><img src="svg (124).svg" class="bg0"/></a><div class="label">svg (124).svg</div></div>
- <div id="svg (125).svg" class="imgbox"><a href="svg (125).svg" download><img src="svg (125).svg" class="bg0"/></a><div class="label">svg (125).svg</div></div>
- <div id="svg (126).svg" class="imgbox"><a href="svg (126).svg" download><img src="svg (126).svg" class="bg0"/></a><div class="label">svg (126).svg</div></div>
- <div id="svg (13).svg" class="imgbox"><a href="svg (13).svg" download><img src="svg (13).svg" class="bg0"/></a><div class="label">svg (13).svg</div></div>
- <div id="svg (14).svg" class="imgbox"><a href="svg (14).svg" download><img src="svg (14).svg" class="bg0"/></a><div class="label">svg (14).svg</div></div>
- <div id="svg (15).svg" class="imgbox"><a href="svg (15).svg" download><img src="svg (15).svg" class="bg0"/></a><div class="label">svg (15).svg</div></div>
- <div id="svg (16).svg" class="imgbox"><a href="svg (16).svg" download><img src="svg (16).svg" class="bg0"/></a><div class="label">svg (16).svg</div></div>
- <div id="svg (17).svg" class="imgbox"><a href="svg (17).svg" download><img src="svg (17).svg" class="bg0"/></a><div class="label">svg (17).svg</div></div>
- <div id="svg (18).svg" class="imgbox"><a href="svg (18).svg" download><img src="svg (18).svg" class="bg0"/></a><div class="label">svg (18).svg</div></div>
- <div id="svg (19).svg" class="imgbox"><a href="svg (19).svg" download><img src="svg (19).svg" class="bg0"/></a><div class="label">svg (19).svg</div></div>
- <div id="svg (2).svg" class="imgbox"><a href="svg (2).svg" download><img src="svg (2).svg" class="bg0"/></a><div class="label">svg (2).svg</div></div>
- <div id="svg (20).svg" class="imgbox"><a href="svg (20).svg" download><img src="svg (20).svg" class="bg0"/></a><div class="label">svg (20).svg</div></div>
- <div id="svg (21).svg" class="imgbox"><a href="svg (21).svg" download><img src="svg (21).svg" class="bg0"/></a><div class="label">svg (21).svg</div></div>
- <div id="svg (22).svg" class="imgbox"><a href="svg (22).svg" download><img src="svg (22).svg" class="bg0"/></a><div class="label">svg (22).svg</div></div>
- <div id="svg (23).svg" class="imgbox"><a href="svg (23).svg" download><img src="svg (23).svg" class="bg0"/></a><div class="label">svg (23).svg</div></div>
- <div id="svg (24).svg" class="imgbox"><a href="svg (24).svg" download><img src="svg (24).svg" class="bg0"/></a><div class="label">svg (24).svg</div></div>
- <div id="svg (25).svg" class="imgbox"><a href="svg (25).svg" download><img src="svg (25).svg" class="bg0"/></a><div class="label">svg (25).svg</div></div>
- <div id="svg (26).svg" class="imgbox"><a href="svg (26).svg" download><img src="svg (26).svg" class="bg0"/></a><div class="label">svg (26).svg</div></div>
- <div id="svg (27).svg" class="imgbox"><a href="svg (27).svg" download><img src="svg (27).svg" class="bg0"/></a><div class="label">svg (27).svg</div></div>
- <div id="svg (28).svg" class="imgbox"><a href="svg (28).svg" download><img src="svg (28).svg" class="bg0"/></a><div class="label">svg (28).svg</div></div>
- <div id="svg (29).svg" class="imgbox"><a href="svg (29).svg" download><img src="svg (29).svg" class="bg0"/></a><div class="label">svg (29).svg</div></div>
- <div id="svg (3).svg" class="imgbox"><a href="svg (3).svg" download><img src="svg (3).svg" class="bg0"/></a><div class="label">svg (3).svg</div></div>
- <div id="svg (30).svg" class="imgbox"><a href="svg (30).svg" download><img src="svg (30).svg" class="bg0"/></a><div class="label">svg (30).svg</div></div>
- <div id="svg (31).svg" class="imgbox"><a href="svg (31).svg" download><img src="svg (31).svg" class="bg0"/></a><div class="label">svg (31).svg</div></div>
- <div id="svg (32).svg" class="imgbox"><a href="svg (32).svg" download><img src="svg (32).svg" class="bg0"/></a><div class="label">svg (32).svg</div></div>
- <div id="svg (33).svg" class="imgbox"><a href="svg (33).svg" download><img src="svg (33).svg" class="bg0"/></a><div class="label">svg (33).svg</div></div>
- <div id="svg (34).svg" class="imgbox"><a href="svg (34).svg" download><img src="svg (34).svg" class="bg0"/></a><div class="label">svg (34).svg</div></div>
- <div id="svg (35).svg" class="imgbox"><a href="svg (35).svg" download><img src="svg (35).svg" class="bg0"/></a><div class="label">svg (35).svg</div></div>
- <div id="svg (36).svg" class="imgbox"><a href="svg (36).svg" download><img src="svg (36).svg" class="bg0"/></a><div class="label">svg (36).svg</div></div>
- <div id="svg (37).svg" class="imgbox"><a href="svg (37).svg" download><img src="svg (37).svg" class="bg0"/></a><div class="label">svg (37).svg</div></div>
- <div id="svg (38).svg" class="imgbox"><a href="svg (38).svg" download><img src="svg (38).svg" class="bg0"/></a><div class="label">svg (38).svg</div></div>
- <div id="svg (39).svg" class="imgbox"><a href="svg (39).svg" download><img src="svg (39).svg" class="bg0"/></a><div class="label">svg (39).svg</div></div>
- <div id="svg (4).svg" class="imgbox"><a href="svg (4).svg" download><img src="svg (4).svg" class="bg0"/></a><div class="label">svg (4).svg</div></div>
- <div id="svg (40).svg" class="imgbox"><a href="svg (40).svg" download><img src="svg (40).svg" class="bg0"/></a><div class="label">svg (40).svg</div></div>
- <div id="svg (41).svg" class="imgbox"><a href="svg (41).svg" download><img src="svg (41).svg" class="bg0"/></a><div class="label">svg (41).svg</div></div>
- <div id="svg (42).svg" class="imgbox"><a href="svg (42).svg" download><img src="svg (42).svg" class="bg0"/></a><div class="label">svg (42).svg</div></div>
- <div id="svg (43).svg" class="imgbox"><a href="svg (43).svg" download><img src="svg (43).svg" class="bg0"/></a><div class="label">svg (43).svg</div></div>
- <div id="svg (44).svg" class="imgbox"><a href="svg (44).svg" download><img src="svg (44).svg" class="bg0"/></a><div class="label">svg (44).svg</div></div>
- <div id="svg (45).svg" class="imgbox"><a href="svg (45).svg" download><img src="svg (45).svg" class="bg0"/></a><div class="label">svg (45).svg</div></div>
- <div id="svg (46).svg" class="imgbox"><a href="svg (46).svg" download><img src="svg (46).svg" class="bg0"/></a><div class="label">svg (46).svg</div></div>
- <div id="svg (47).svg" class="imgbox"><a href="svg (47).svg" download><img src="svg (47).svg" class="bg0"/></a><div class="label">svg (47).svg</div></div>
- <div id="svg (48).svg" class="imgbox"><a href="svg (48).svg" download><img src="svg (48).svg" class="bg0"/></a><div class="label">svg (48).svg</div></div>
- <div id="svg (49).svg" class="imgbox"><a href="svg (49).svg" download><img src="svg (49).svg" class="bg0"/></a><div class="label">svg (49).svg</div></div>
- <div id="svg (5).svg" class="imgbox"><a href="svg (5).svg" download><img src="svg (5).svg" class="bg0"/></a><div class="label">svg (5).svg</div></div>
- <div id="svg (50).svg" class="imgbox"><a href="svg (50).svg" download><img src="svg (50).svg" class="bg0"/></a><div class="label">svg (50).svg</div></div>
- <div id="svg (51).svg" class="imgbox"><a href="svg (51).svg" download><img src="svg (51).svg" class="bg0"/></a><div class="label">svg (51).svg</div></div>
- <div id="svg (52).svg" class="imgbox"><a href="svg (52).svg" download><img src="svg (52).svg" class="bg0"/></a><div class="label">svg (52).svg</div></div>
- <div id="svg (53).svg" class="imgbox"><a href="svg (53).svg" download><img src="svg (53).svg" class="bg0"/></a><div class="label">svg (53).svg</div></div>
- <div id="svg (54).svg" class="imgbox"><a href="svg (54).svg" download><img src="svg (54).svg" class="bg0"/></a><div class="label">svg (54).svg</div></div>
- <div id="svg (55).svg" class="imgbox"><a href="svg (55).svg" download><img src="svg (55).svg" class="bg0"/></a><div class="label">svg (55).svg</div></div>
- <div id="svg (56).svg" class="imgbox"><a href="svg (56).svg" download><img src="svg (56).svg" class="bg0"/></a><div class="label">svg (56).svg</div></div>
- <div id="svg (57).svg" class="imgbox"><a href="svg (57).svg" download><img src="svg (57).svg" class="bg0"/></a><div class="label">svg (57).svg</div></div>
- <div id="svg (58).svg" class="imgbox"><a href="svg (58).svg" download><img src="svg (58).svg" class="bg0"/></a><div class="label">svg (58).svg</div></div>
- <div id="svg (59).svg" class="imgbox"><a href="svg (59).svg" download><img src="svg (59).svg" class="bg0"/></a><div class="label">svg (59).svg</div></div>
- <div id="svg (6).svg" class="imgbox"><a href="svg (6).svg" download><img src="svg (6).svg" class="bg0"/></a><div class="label">svg (6).svg</div></div>
- <div id="svg (60).svg" class="imgbox"><a href="svg (60).svg" download><img src="svg (60).svg" class="bg0"/></a><div class="label">svg (60).svg</div></div>
- <div id="svg (61).svg" class="imgbox"><a href="svg (61).svg" download><img src="svg (61).svg" class="bg0"/></a><div class="label">svg (61).svg</div></div>
- <div id="svg (62).svg" class="imgbox"><a href="svg (62).svg" download><img src="svg (62).svg" class="bg0"/></a><div class="label">svg (62).svg</div></div>
- <div id="svg (63).svg" class="imgbox"><a href="svg (63).svg" download><img src="svg (63).svg" class="bg0"/></a><div class="label">svg (63).svg</div></div>
- <div id="svg (64).svg" class="imgbox"><a href="svg (64).svg" download><img src="svg (64).svg" class="bg0"/></a><div class="label">svg (64).svg</div></div>
- <div id="svg (65).svg" class="imgbox"><a href="svg (65).svg" download><img src="svg (65).svg" class="bg0"/></a><div class="label">svg (65).svg</div></div>
- <div id="svg (66).svg" class="imgbox"><a href="svg (66).svg" download><img src="svg (66).svg" class="bg0"/></a><div class="label">svg (66).svg</div></div>
- <div id="svg (67).svg" class="imgbox"><a href="svg (67).svg" download><img src="svg (67).svg" class="bg0"/></a><div class="label">svg (67).svg</div></div>
- <div id="svg (68).svg" class="imgbox"><a href="svg (68).svg" download><img src="svg (68).svg" class="bg0"/></a><div class="label">svg (68).svg</div></div>
- <div id="svg (69).svg" class="imgbox"><a href="svg (69).svg" download><img src="svg (69).svg" class="bg0"/></a><div class="label">svg (69).svg</div></div>
- <div id="svg (7).svg" class="imgbox"><a href="svg (7).svg" download><img src="svg (7).svg" class="bg0"/></a><div class="label">svg (7).svg</div></div>
- <div id="svg (70).svg" class="imgbox"><a href="svg (70).svg" download><img src="svg (70).svg" class="bg0"/></a><div class="label">svg (70).svg</div></div>
- <div id="svg (71).svg" class="imgbox"><a href="svg (71).svg" download><img src="svg (71).svg" class="bg0"/></a><div class="label">svg (71).svg</div></div>
- <div id="svg (72).svg" class="imgbox"><a href="svg (72).svg" download><img src="svg (72).svg" class="bg0"/></a><div class="label">svg (72).svg</div></div>
- <div id="svg (73).svg" class="imgbox"><a href="svg (73).svg" download><img src="svg (73).svg" class="bg0"/></a><div class="label">svg (73).svg</div></div>
- <div id="svg (74).svg" class="imgbox"><a href="svg (74).svg" download><img src="svg (74).svg" class="bg0"/></a><div class="label">svg (74).svg</div></div>
- <div id="svg (75).svg" class="imgbox"><a href="svg (75).svg" download><img src="svg (75).svg" class="bg0"/></a><div class="label">svg (75).svg</div></div>
- <div id="svg (76).svg" class="imgbox"><a href="svg (76).svg" download><img src="svg (76).svg" class="bg0"/></a><div class="label">svg (76).svg</div></div>
- <div id="svg (77).svg" class="imgbox"><a href="svg (77).svg" download><img src="svg (77).svg" class="bg0"/></a><div class="label">svg (77).svg</div></div>
- <div id="svg (78).svg" class="imgbox"><a href="svg (78).svg" download><img src="svg (78).svg" class="bg0"/></a><div class="label">svg (78).svg</div></div>
- <div id="svg (79).svg" class="imgbox"><a href="svg (79).svg" download><img src="svg (79).svg" class="bg0"/></a><div class="label">svg (79).svg</div></div>
- <div id="svg (8).svg" class="imgbox"><a href="svg (8).svg" download><img src="svg (8).svg" class="bg0"/></a><div class="label">svg (8).svg</div></div>
- <div id="svg (80).svg" class="imgbox"><a href="svg (80).svg" download><img src="svg (80).svg" class="bg0"/></a><div class="label">svg (80).svg</div></div>
- <div id="svg (81).svg" class="imgbox"><a href="svg (81).svg" download><img src="svg (81).svg" class="bg0"/></a><div class="label">svg (81).svg</div></div>
- <div id="svg (82).svg" class="imgbox"><a href="svg (82).svg" download><img src="svg (82).svg" class="bg0"/></a><div class="label">svg (82).svg</div></div>
- <div id="svg (83).svg" class="imgbox"><a href="svg (83).svg" download><img src="svg (83).svg" class="bg0"/></a><div class="label">svg (83).svg</div></div>
- <div id="svg (84).svg" class="imgbox"><a href="svg (84).svg" download><img src="svg (84).svg" class="bg0"/></a><div class="label">svg (84).svg</div></div>
- <div id="svg (85).svg" class="imgbox"><a href="svg (85).svg" download><img src="svg (85).svg" class="bg0"/></a><div class="label">svg (85).svg</div></div>
- <div id="svg (86).svg" class="imgbox"><a href="svg (86).svg" download><img src="svg (86).svg" class="bg0"/></a><div class="label">svg (86).svg</div></div>
- <div id="svg (87).svg" class="imgbox"><a href="svg (87).svg" download><img src="svg (87).svg" class="bg0"/></a><div class="label">svg (87).svg</div></div>
- <div id="svg (88).svg" class="imgbox"><a href="svg (88).svg" download><img src="svg (88).svg" class="bg0"/></a><div class="label">svg (88).svg</div></div>
- <div id="svg (89).svg" class="imgbox"><a href="svg (89).svg" download><img src="svg (89).svg" class="bg0"/></a><div class="label">svg (89).svg</div></div>
- <div id="svg (9).svg" class="imgbox"><a href="svg (9).svg" download><img src="svg (9).svg" class="bg0"/></a><div class="label">svg (9).svg</div></div>
- <div id="svg (90).svg" class="imgbox"><a href="svg (90).svg" download><img src="svg (90).svg" class="bg0"/></a><div class="label">svg (90).svg</div></div>
- <div id="svg (91).svg" class="imgbox"><a href="svg (91).svg" download><img src="svg (91).svg" class="bg0"/></a><div class="label">svg (91).svg</div></div>
- <div id="svg (92).svg" class="imgbox"><a href="svg (92).svg" download><img src="svg (92).svg" class="bg0"/></a><div class="label">svg (92).svg</div></div>
- <div id="svg (93).svg" class="imgbox"><a href="svg (93).svg" download><img src="svg (93).svg" class="bg0"/></a><div class="label">svg (93).svg</div></div>
- <div id="svg (94).svg" class="imgbox"><a href="svg (94).svg" download><img src="svg (94).svg" class="bg0"/></a><div class="label">svg (94).svg</div></div>
- <div id="svg (95).svg" class="imgbox"><a href="svg (95).svg" download><img src="svg (95).svg" class="bg0"/></a><div class="label">svg (95).svg</div></div>
- <div id="svg (96).svg" class="imgbox"><a href="svg (96).svg" download><img src="svg (96).svg" class="bg0"/></a><div class="label">svg (96).svg</div></div>
- <div id="svg (97).svg" class="imgbox"><a href="svg (97).svg" download><img src="svg (97).svg" class="bg0"/></a><div class="label">svg (97).svg</div></div>
- <div id="svg (98).svg" class="imgbox"><a href="svg (98).svg" download><img src="svg (98).svg" class="bg0"/></a><div class="label">svg (98).svg</div></div>
- <div id="svg (99).svg" class="imgbox"><a href="svg (99).svg" download><img src="svg (99).svg" class="bg0"/></a><div class="label">svg (99).svg</div></div>
-
- </div>
- <script>
- var bg = 0;
- function toggleBg() {
- bg++
- if(bg > 2) bg = 0;
- for(let img of document.getElementsByTagName("img")) {
- img.className = `bg${bg}`;
- }
- }
-
- function search() {
- let q = document.getElementById('finder').value.trim().toLowerCase()
- if(q.length <= 0) {
- for(let imgbox of document.getElementsByClassName("imgbox")) {
- imgbox.style.display = "inline-block"
- }
- }
- for(let imgbox of document.getElementsByClassName("imgbox")) {
- imgbox.style.display = "inline-block"
- if(!imgbox.id.includes(q)) {
- imgbox.style.display = "none"
- }
- }
- }
-
- function download(f) {
- let a = document.createElement('a')
- a.href = f
- a.download = f
- console.log(a)
- a.click()
- }
- </script>
- </body></html>
|