framework-example/index.html at main · jo-joanna/framework-example · GitHub

76 lines (70 loc) · 2.99 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

64

65

66

67

68

69

70

71

72

73

74

75

76

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="style.css" />

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<title>Carousel for page mountanairs</title>

</head>

<body>

<nav class="navbar navbar-expand-sm bg-light">

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link" href="#">Link 1</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link 2</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link 3</a>

</li>

</ul>

</nav>

<header>

<h1>Carousel for travelling in the mountains</h1>

</header>

<div class="container-fluid">

<div class="row">

<main>

<h2>New pictures from the tours.</h2>

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">

<div class="carousel-inner">

<div class="carousel-item active">

<img src="img/mohammad-alizade-zcRgHZF0q1A-unsplash.jpg" class="d-block w-100 h-100" alt="Mohammad">

</div>

<div class="carousel-item">

<img src="img/simon-english-48nerZQCHgo-unsplash.jpg" class="d-block w-100 h-100" alt="Simon English">

</div>

<div class="carousel-item">

<img src="img/lucas-wesney-ZNz5UPRb2N8-unsplash.jpg" class="d-block w-100 h-100" alt="Lucas Wesney">

</div>

</div>

</div>

</main>

</div>

<div class="row">

<div class="col-4">

<h2>Tours date</h2>

<ul>

<li>2019 - Pireneis</li>

<li>2020 - Alps</li>

<li>2021 - Kilimandzaro</li>

</ul>

</div>

<div class="col-8">

<h2>Video from the Alps tour</h2>

<iframe fluid src="https://www.youtube.com/embed/-hTVNidxg2s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>

</div>

</div>

</div>

<footer>

<p>© 2020</p>

</footer>

</body>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

</html>