-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathraportti.html
175 lines (159 loc) · 8.16 KB
/
raportti.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="fi" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Harjoitustyön raportti | Tuire Viita-aho</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Kanit:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i" rel="stylesheet">
<!-- Own styles -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/raportti.css">
</head>
<body>
<!-- Header -->
<header>
<nav id="mainNavbar" class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Tuire Viita-aho</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Etusivu</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="raportti.html">Raportti<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="lomake.html">Lomake</a>
</li>
<li class="nav-item">
<a class="nav-link" href="otayhteytta.html">Ota yhteyttä</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<!-- Main image -->
<div class="yla">
<img class="ylakuva" src="img/kahvi.jpg" alt="kahvikuppi">
<div class="centered">
<div class="ylatekstit alasivu">
<h1>Oops, I did it!</h1>
<h2>Harjoitustyön raporttiosuus</h2>
</div>
</div>
</div>
<!-- Two columns -->
<div class="container alue1">
<div class="row">
<div class="col-md-6 eka">
<h2>Mitä tein?</h2>
<p>Tein tämän harjoitustyön oppimisen vuoksi yksin ja siitäkin huolimatta, että olisin voinut kirjoittaa pelkän
raportin jo aiemmin tekemästäni. On kuitenkin hiukan eri asia tehdä kotisivut ihan alusta alkaen ilman
julkaisujärjestelmää tai aloituspohjaa. Lisäksi käytän työssäni Lessiä enkä puhdasta CSS:ää,
joten siitäkin syystä tämä oli opettavaista.
</p>
</div>
<div class="col-md-6 toka">
<h2>Pari muokkaamaani sivustoa</h2>
<p>Olen muokannut mm. alla olevia Concrete5-julkaisujärjestelmällä tehtyjä sivustoja työkaverini tekemästä
<a href="http://dev.davia.fi/tuirenpohja/" target="_blank">sivustopohjasta</a> eteenpäin.
Koodin osalta olen koskenut CSS-tiedostoihin (tarkemmin sanottuna Less-tiedostoihin) ja jonkin verran myös
PHP-tiedostoihin. Myös responsiivisuuden testaaminen ja tarvittavien muutosten tekeminen responsiivisuuden
varmistamiseksi on ollut minun osuuttani. Monet asiat olen tehnyt suoraan Concrete5:ssä.</p>
<ul>
<li><a href="https://www.korkkitrio.fi/" target="_blank">korkkitrio.fi</a></li>
<li><a href="https://www.gli.fi/" target="_blank">gli.fi</a> (Ei koulutuskalentereita)</li>
</ul>
</div>
</div>
</div>
<!-- Parallax -->
<div id="taustakuva1">
<div class="d-flex justify-content-center nostoteksti">
<h3>Komea parallax, eikö?</h3><br>
</div>
</div>
<!-- Numbering -->
<div class="harmaa">
<div class="container pallot">
<h2>Kolmansien osapuolien kirjastot ja muut aineistot</h2>
<p>Tässä on pseudoelementtien avulla listattuna ne kolmansien osapuolten kirjastot ja muut materiaalit, joita olen sivustolla hyödyntänyt. Pallot ja niiden sisällä olevat luvut päivittyvät automaattisesti, jos sisältöä lisätään tai poistetaan. Tähän olen hyödyntänyt CSS:n countersia.</p>
<div class="row" id="counters">
<div class="yksi">
<h3 class="section">Bootstrap 4</h3>
<p>Sivuston tyylittelyyn ja joihinkin toiminnallisuuksiin on hyödynnetty uusinta Bootstrapia eli <a href="https://getbootstrap.com/" target="_blank">Bootstrap 4:ää. </a>Bootstrapin mukana tulee sen tarvitsema määrä jQuerya ja Popper.js:ää.</p>
</div>
<div class="kaksi">
<h3 class="section">Google Fonts</h3>
<p>Sivustolla käytetyt fontit ovat <a href="https://fonts.google.com/" target="_blank">Google Fontseista. </a>Otsikoissa on käytössä "Kanit" ja leipätekstissä "Source Sans Pro".</p>
</div>
<div class="kolme">
<h3 class="section">Font Awesome</h3>
<p>Sivustolla olevat ikonit on saatu <a href="https://fontawesome.com/" target="_blank">Font Awesomesta. </a>Niitä on hiukan tyylitelty CSS:llä.</p>
</div>
<div class="nelja">
<h3 class="section">Unsplash</h3>
<p>Kaikki sivustolla olevat kuvat ovat peräisin <a href="https://unsplash.com/" target="_blank">Unsplashista.</a></p>
</div>
<div class="viisi">
<h3 class="section">Google Maps</h3>
<p>Sivuston <a href="otayhteytta.html">Ota yhteyttä -sivulla</a> on iframe-upotuksena <a href="https://www.google.com/maps" target="_blank">Google Mapsista</a> saatu kartta. Kartan kohteena on HAMKin Visamäen toimipiste.</p>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h4>Ota yhteyttä</h4>
<p>Tuire Viita-aho<br>
<a href="tel:+358404871441">040 487 1441</a><br>
<a href="mailto:tuirevii@gmail.com">tuirevii@gmail.com</a><br>
<a href="https://linkedin.com/in/tuirevii" target="_blank"><i class="fab fa-linkedin"></i></a>
</p>
</div>
</div>
</div>
</footer>
<!-- Copyright -->
<footer id="copyright">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-12">
<p><span class="pull-right">© Tuire Viita-aho 2018</span></p>
</div>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!--Own scripts -->
<script src="js/scripts.js"></script>
</body>
</html>