-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathqualifications.html
151 lines (135 loc) · 7.16 KB
/
qualifications.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
<!DOCTYPE html>
<head>
<title>Meshach's Portfolio</title>
<meta name="viewport" content="width=device-width" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/74ae88ea8d.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/styles-mobile.css">
<link rel="stylesheet" href="styles/styles-large-mobile.css">
<link rel="stylesheet" href="styles/styles-tablet.css">
<link rel="stylesheet" href="styles/styles-laptop.css">
<link rel="stylesheet" href="styles/styles-desktop.css">
</head>
<body>
<div class="blur-zone"></div>
<header>
<nav>
<div class="left-header fade-2-5">
<a href="indexccsframework.html"><img src="img/mlogo.jpeg" alt="meshach" id="logo"></a>
</div>
<div class="hamburger-parent">
<div></div>
<div></div>
<div></div>
</div>
<input type="checkbox" class="menu-switch">
<div class="header_links">
<ul class="nav-header fade-2-5">
<li><a href="about.html" class="burger-font-size">about</a></li>
<li><a href="FAQs.html" class="burger-font-size">questions</a></li>
<li><a href="qualifications.html" class="burger-font-size">qualifications</a></li>
<li><a href="contactinfo.html" class="burger-font-size">contact</a></li>
<li><a href="hobbies.html" class="burger-font-size">hobbies</a></li>
</ul>
</div>
</nav>
</header>
<main id="skills">
<div class="skills container">
<div class="skills-top">
<h1>Skills</h1>
</div>
<div class="skills-bottom">
<div class="skils-container">
<div class="skils-left">
<div class="skils-item skills-background font-medium" style="--bg-image: url(../img/html.jpg)">
<i class="fa-brands fa-html5 fa-4x"></i>
<h2>HTML</h2>
<p>HTML, in full hypertext markup language, a formatting system for displaying material
retrieved
over the Internet. Each retrieval unit is known as a Web page (from World Wide Web), and
such
pages frequently contain hypertext links that allow related pages to be retrieved.</p>
</div>
</div>
<div class="skils-right block-md skills-html"></div>
</div>
<div class="skils-container">
<div class="skils-left">
<div class="skils-item skills-background font-medium" style="--bg-image: url(../img/css.jpg)">
<i class="fa-brands fa-css3-alt fa-4x"></i>
<h2>CSS</h2>
<p>CSS is the language for describing the presentation of Web pages, including colors,
layout, and
fonts. It allows one to adapt the presentation to different types of devices, such as
large
screens, small screens, or printers. CSS is independent of HTML and can be used with any
XML-based markup language.</p>
</div>
</div>
<div class="skils-right block-md skills-css"></div>
</div>
<div class="skils-container">
<div class="skils-left">
<div class="skils-item skills-background font-medium"
style="--bg-image: url(../img/javascript.jpg)">
<i class="fa-brands fa-js fa-4x"></i>
<h2>Java Script</h2>
<p>JavaScript is a dynamic computer programming language. It is lightweight and most
commonly used
as a part of web pages, whose implementations allow client-side script to interact with
the user
and make dynamic pages. It is an interpreted programming language with object-oriented
capabilities.</p>
</div>
</div>
<div class="skils-right block-md skills-js"></div>
</div>
<div class="skils-container">
<div class="skils-left">
<div class="skils-item skills-background font-medium"
style="--bg-image: url(../img/wed-design.jpg)">
<i class="fa-solid fa-desktop fa-4x"></i>
<h2>Web Design</h2>
<p>Web designers plan, create and code internet sites and web pages, many of which combine
text with
sounds, pictures, graphics and video clips. A web designer is responsible for creating
the
design and layout of a website or web pages. It and can mean working on a brand new
website or
updating an already existing site.</p>
</div>
</div>
<div class="skils-right block-md skills-wd"></div>
</div>
</div>
</div>
</main>
<footer>
<ul class="nav-footer fade-2-5">
<li> <a href="copyright.html">copyright</a></li>
<li><a href="privacy_notice.html">privacy notice</a></li>
<li><a href="terms_and_conditions.html">terms and conditions</a></li>
</ul>
</footer>
<script src="js/index.js"></script>
<script>
[...(document.querySelectorAll(".skils-right"))].forEach(function (e) {
e.addEventListener("click", function () {
this.classList.toggle("z-index-1000")
if(this.classList.contains("z-index-1000"))
this.classList.remove("transition-1")
else this.classList.add("transition-1")
})
})
</script>
</body>