-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (131 loc) · 4.81 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
rel="stylesheet"
/>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/footer.css" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
crossorigin="anonymous"
/>
<!-- <script
defer
src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"
></script> -->
<!-- Favi icon -->
<link rel="shortcut icon" type="image/png" href="/logo2.png" />
<title>ICS 20033</title>
</head>
<body>
<header id="header">
<img
class="logo"
src="logos/logo2.png"
alt="logo"
onclick="location.href='index.html'"
/>
<ul class="nav-bar">
<li><a class="nav-link" href="#build">Build</a></li>
<li><a class="nav-link" href="#about">About</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</header>
<section id="banner">
<div class="banner-container">
<h1 class="title">Build your own Desktop</h1>
<img class="banner-img" src="logos/banner-img.png" alt="banner image" />
</div>
</section>
<section id="features">
<div class="features-container">
<div class="feature">
<i class="icon fas fa-check-circle fa-4x"></i>
<h3 class="feature-title">Easy to use.</h3>
<p>Very simple and easy experience.</p>
</div>
<div class="feature">
<i class="icon fas fa-bullseye fa-4x"></i>
<h3 class="feature-title">Variety of options</h3>
<p>We provide a variety of hardware to use in your build.</p>
</div>
<div class="feature">
<i class="icon fas fa-heart fa-4x"></i>
<h3 class="feature-title">Guaranteed to work.</h3>
<p>We check the pieces to match with each other.</p>
</div>
</div>
</section>
<section id="build">
<div class="card">
<img class="card-img" src="logos/amd.png" alt="pc-image" />
<div class="card-details">
<h2 class="card-title">Amd Base Setup</h2>
<p class="card-description">
Build your new desktop with ryzen cpu for its core
</p>
</div>
<button name="amd" class="card-btn">Build it now</button>
</div>
<div class="card">
<img class="card-img" src="logos/intel.png" alt="pc-image" />
<div class="card-details">
<h2 class="card-title">Intel Base Setup</h2>
<p class="card-description">
Build your new desktop with new intel cpus for its core
</p>
</div>
<button name="intel" class="card-btn">Build it now</button>
</div>
</section>
<section id="about">
<div class="logo-uni-container">
<img
class="uni-logo"
src="logos/uni-logo.png"
alt="logo of the university"
/>
</div>
<p class="about-text">
This Website is an online shop to customize your own desktop. It's developed for my course named Web Programming in University Of Macedonia lectured by instructor Kaskalis Theodoros, in the first half of my 4th semester.
Technologies used for the implemantation: html, css, javaScript, no frameworks, no backend.
The photos and data for each product were found in online websites,
the icons from fontawesome.com and the university icon from the website of the unversity.
</p>
</section>
<section id="contact">
<footer>
<div class="icon-container">
<a
href="https://www.linkedin.com/in/leonard-pepa-bb74371b9/"
target="_blank"
><i class="icon fab fa-linkedin fa-2x"></i
></a>
<a href="https://github.com/Leonardpepa" target="_blank">
<i class="icon fab fa-github fa-2x"></i>
</a>
<a href="https://twitter.com/LeonarntP" target="_blank">
<i class="icon fab fa-twitter-square fa-2x"></i>
</a>
</div>
<p>© Copyright 2021 ICS20033</p>
</footer>
</section>
<script src="data.js"></script>
<script src="app.js"></script>
</body>
</html>