-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathreferences.html
160 lines (141 loc) · 6.66 KB
/
references.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
<!--
Griffith College - Computing Science
Client Side Web Development - Assignment 03
Deborah Rimei - 3015579
10/02/2020
-->
<!DOCTYPE html>
<!--here I used the "lang" attribute inside the <html> tag to declare the language of the Webpage-->
<html lang="en">
<!--I am using the <head> element to contain information about my page.-->
<head>
<meta charset="utf-8">
<!--the <title> element contain the information that will be shown on the tab of the browser, making easier to navigate between different webpages-->
<title>MyHero - references</title>
<!--the meta viewport element gives the browser instruction on how to control the dimensions and scaling of the page. Instructions are given using the method media queries. See the mediaQuery.css to see at which size of the screen the elements change-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--I used the link element to link different document to my HTML. For this assignment I used two stylesheets (one for css layout and the other to manage the responsiveness) and I imported some google fonts. I also used a library for the social media buttons-->
<link rel="stylesheet" type="text/css" href="CSS/Style.css">
<link rel="stylesheet" type="text/css" href="CSS/Media_query.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link
href="https://fonts.googleapis.com/css?family=Niconne%7CUbuntu%7CMartel+Sans%7CRoboto:300%7CMontserrat&display=swap"
rel="stylesheet">
</head>
<!--The <body> element contains all information about the website that will be visualised in the main page-->
<body>
<div id="page_ref">
<!--I am using the header element to display the most important heading of my page.-->
<header>
<!--the nav bar contains the main navigation bar on top of the page. It includes an unordered list of elements -->
<nav class="container_nav">
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger"/>
<ul>
<li><a href="index.html" data-hover="Home">Home</a></li>
<!--the <li> element class="dropdown" contain a nested unordered list of elements. This, with the help of cs, creates the dropdown effect-->
<li class="dropdown">
<a href="life.html" data-hover="My father's ">My father's ⯆</a>
<ul class="dropdown_content">
<li><a href="life.html">Life</a></li>
<li><a href="hobbies.html">Hobbies</a></li>
<li><a href="job.html">Job</a></li>
</ul>
</li>
<li class="dropdown">
<a href="aboutMe.html" data-hover="About ">About ⯆</a>
<ul class="dropdown_content">
<li><a href="aboutMe.html">About me</a></li>
<li><a href="references.html">References</a></li>
<li><a href="contact.html">Contact me</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="ackn_ref">
<div><img src="Images/doggy.jpg" alt="Photo by Howard Riminton on Unsplash"></div>
<div>
<h3> Acknoweledgments</h3>
<p>I would like to thank my mother Antonella and my brother Lorenzo for helping me with the development
of
this website. They found some spare time to look into the old photo albums and scan few pictures for
me.
A special thanks also to my boyfriend Severins that had a look at the webpage and gave me very
useful
advises.</p>
</div>
</div>
<div class="ref_container">
<div class="reference">
<h2>References</h2>
<p>This is my second webpage and to create it I took inspiration from different websites.<br>Here below
I listed the ones that I visited and used.</p>
<section>
<h3>Websites HTML/CSS</h3>
<ul>
<!--All the <a> elements have as an attribute targer="blank" so the link will be open in another page-->
<li><a href="https://css-tricks.com/" target="_blank">css-tricks.com</a></li>
<li><a href="https://w3schools.com" target="_blank">w3schools.com</a></li>
<li><a href="https://geeksforgeeks.org" target="_blank">geeksforgeeks.org</a></li>
<li><a href="https://stackoverflow.com" target="_blank">stackoverflow.com</a></li>
<li><a href="https://1stwebdesigner.com" target="_blank">1stwebdesigner.com</a></li>
<li><a href="https://freefrontend.com" target="_blank">freefrontend.com</a></li>
<li><a href="https://codetea.com" target="_blank">codetea.com</a></li>
<li><a href="https://littlesnippets.net" target="_blank">littlesnippets.net</a></li>
</ul>
</section>
<section>
<h3>Resources for pictures</h3>
<ul>
<li><a href="https://unsplash.com" target="_blank">unsplash.com</a></li>
<li><a href="https://pixabay.com" target="_blank">pixabay.com</a></li>
</ul>
</section>
<section>
<h3>Inspirational website design templates</h3>
<ul>
<li><a href=https://www.templatemonster.com/” target="_blank">templatemonster.com </a></li>
<li><a href="https://webdesign-inspiration.com" target="_blank">webdesign-inspiration.com</a>
</li>
</ul>
</section>
</div>
</div>
</div>
<!--At the end I am using a footer to display authorship and copyrights information, to link the main pages and give some contact info.-->
<footer class="main_footer">
<div class="footer_name">
<p> Deborah Rimei</p>
<p>Computing Science</p>
<p>Student number: 3015579</p>
<a href="https://www.griffith.ie/"><img
src="https://www.griffith.ie/sites/all/themes/griffith/images/xgriffith-logo-white-trans.png.pagespeed.ic.Txm3d4VeuK.webp"
alt="Griffith College logo" title="Visit griffith.ie"></a>
</div>
<div class="footer_links">
<h6>About</h6>
<ul>
<li><a href="life.html">My father</a></li>
<li><a href="aboutMe.html">About me</a></li>
<li><a href="references.html">References</a></li>
</ul>
<a href="#page_job">Back to the top ⮥</a>
</div>
<div class=footer_icon>
<p>Stay in touch!</p>
<a href="https://www.facebook.com/Deborah.Rimei" target="_blank" class="fa fa-facebook"></a>
<a href="https://twitter.com/deborahrimei" target="_blank" class="fa fa-twitter"></a>
<a href="https://www.linkedin.com/in/deborah-rimei?originalSubdomain=ie" target="_blank"
class="fa fa-linkedin"></a>
<a href="https://www.instagram.com/deborah_rimei/?hl=en" target="_blank" class="fa fa-instagram"></a>
<div class="footer_email">
<a href="contact.html"><img src="Images/letter_email.png" alt="image of a letter">Send me an email</a>
</div>
</div>
<div class="footer_bottom">
<p>© Copyrights Deborah Rimei</p>
</div>
</footer>
</body>
</html>