-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathquotegenerator.html
128 lines (123 loc) · 6.33 KB
/
quotegenerator.html
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--gibt zugriff auf sämtliche-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote Generator</title>
<link rel="stylesheet" href="style-subpage.css">
<link rel="stylesheet" href="sub-media-queries.css">
<link rel="icon" href="./assets/img/favicon-32x32.png" type="img">
<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css">
</head>
<body>
<header>
<nav id="nav">
<a href="index.html">go back</a>
</nav>
</header>
<main>
<section class="about-project">
<h1>Quote Generator</h1>
<div class="link-area">
<a href="https://blanc1a.github.io/quote-generator/" target="_blank">live</a>
<a href="https://github.com/blanc1a/quote-generator" target="_blank">github</a>
</div>
<div class="explanation-area">
<div class="build-with">
<span>build with: </span>
<i class="devicon-vscode-plain"> VS Code</i>
<i class="devicon-html5-plain"> HTML</i>
<i class="devicon-css3-plain"> CSS</i>
<i class="devicon-git-plain"> JavaScript</i>
</div>
<div class="flex-container">
<div class="left-explanation">
<p>This project is a Quote Generator built using HTML, CSS, and Vanilla JavaScript. It includes
functionality to fetch quotes from a public API or from a local Mock API. The
project is an assignment from the "Zero to Mastery" course, and the styling has been
customized to suit personal preferences. The images used are free to use and from the sites
Unsplash and wallpapers.com - but are used only for personal reasons and for learning
purposes.</p>
</div>
<div class="right-explanation">
<p>
<ul>
<li><span>API:</span> Can fetch random quotes from a public API or from a local Mock API
</li>
<li><span>Display Quotes:</span> Display the quotes on the web page
</li>
<li><span>Styling:</span> Styling to enhance the user experience</li>
<li><span>Own feature:</span> Background images adjust to the quotes from the movies
</li>
</ul>
</p>
</div>
</div>
</div>
</section>
<section class="project-content">
<div class="slide-show">
<div class="slide">
<img src="./assets/img/content/quote-1.jpg" alt="" class="slide-pic">
</div>
<div class="slide">
<img src="./assets/img/content/quote-2.jpg" alt="" class="slide-pic">
</div>
<div class="slide">
<img src="./assets/img/content/quote-3.jpg" alt="" class="slide-pic">
</div>
<div class="slide">
<img src="./assets/img/content/quote-4.jpg" alt="" class="slide-pic">
</div>
<div class="slide">
<img src="./assets/img/content/quote-5.jpg" alt="" class="slide-pic">
</div>
<div class="slide">
<img src="./assets/img/content/quote-6.jpg" alt="" class="slide-pic">
</div>
<div class="slide">
<img src="./assets/img/content/quote-7.jpg" alt="" class="slide-pic">
</div>
<div class="slide">
<img src="./assets/img/content/quote-8.jpg" alt="" class="slide-pic">
</div>
<div class="slide">
<img src="./assets/img/content/quote-9.jpg" alt="" class="slide-pic">
</div>
<div class="slide">
<img src="./assets/img/content/quote-10.jpg" alt="" class="slide-pic">
</div>
<!--onclick attribut sorgt dafür dass die funktion switchSlider bei einem Klick aufgerufen wird-->
<!--1 für folie weiter und -1 für folie zurück-->
<!--href entfernen, sonst greift onclick nicht-->
<a class="arrow arrow-left" onclick="switchSlider(-1)"><span>❮</span></a>
<a class="arrow arrow-right" onclick="switchSlider(1)"><span>❯</span></a>
<ol class="indicator-list">
<!--onclick um funktion aufzurufen => übergeben index-->
<li class="indicator" onclick="moveToSlide(0)">•</li>
<li class="indicator" onclick="moveToSlide(1)">•</li>
<li class="indicator" onclick="moveToSlide(2)">•</li>
<li class="indicator" onclick="moveToSlide(3)">•</li>
<li class="indicator" onclick="moveToSlide(4)">•</li>
<li class="indicator" onclick="moveToSlide(5)">•</li>
<li class="indicator" onclick="moveToSlide(6)">•</li>
<li class="indicator" onclick="moveToSlide(7)">•</li>
<li class="indicator" onclick="moveToSlide(8)">•</li>
<li class="indicator" onclick="moveToSlide(9)">•</li>
</ol>
</div>
</section>
</main>
<section id="contact">
<h2>Contact</h2>
<div class="contact-wrapper">
<a class="link" href="https://github.com/blanc1a" target="_blank"><i class="bi bi-github"></i></a>
<a class="link" href="https://www.linkedin.com/in/blanca-ziems-9778bb24a/" target="_blank"><i
class="bi bi-linkedin"></i></a>
</div>
</section>
<script src="script-subpage.js"></script>
</body>
</html>