diff --git a/images/bg.jpg b/images/bg.jpg new file mode 100644 index 0000000..45648b0 Binary files /dev/null and b/images/bg.jpg differ diff --git a/images/bg2.jpg b/images/bg2.jpg new file mode 100644 index 0000000..0fc4fbd Binary files /dev/null and b/images/bg2.jpg differ diff --git a/images/fares.jpg b/images/fares.jpg new file mode 100644 index 0000000..a5d89d2 Binary files /dev/null and b/images/fares.jpg differ diff --git a/images/image1.jpeg b/images/image1.jpeg new file mode 100644 index 0000000..f552a04 Binary files /dev/null and b/images/image1.jpeg differ diff --git a/images/image2.jpg b/images/image2.jpg new file mode 100644 index 0000000..6a98549 Binary files /dev/null and b/images/image2.jpg differ diff --git a/images/image3.jpg b/images/image3.jpg new file mode 100644 index 0000000..f95b0a7 Binary files /dev/null and b/images/image3.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b781603 --- /dev/null +++ b/index.html @@ -0,0 +1,156 @@ + + + + + About Me + + + + + + + + + + + + + + + + + + + + + + +
+ Fares arnous + +
+

About Me

+

+ My name is Fares Arnous, I am from Syria and i am in Canada since August 2017. + I have some experience in HTML and CSS, I have learned it by my self through online courses. + I spend a lot of time in video games :) + +

+ +

My dream is being a professional web developer and then find a work with this field.

+
+ +
+
+ +
+
+
+ + + +
+

My interest

+ + +
+
+ +
+
+
+ + + +
+

Learning

+

I am currently a student at HackYourFuture learning HTML, CSS, JavaScript, NodeJS, React and MySQL

+ +
+
+ +

Hypertext Markup Language (HTML) is the standard language defining the structure of a webpages and web applications

+
+
+ +

Cascading Style Sheet (CSS) describes how HTML elements are to be displayed on a screen. In other words, it specifies the styling and design charactaristics.

+
+
+ +

Javascript is a programming language which enabled interactive web pages All the behaviour of a webpage is written in Javascript.

+
+
+ +

NodeJS is a Javascript server enviroment.It is primarily used for developing server-side and network applications

+
+
+ +

React is a Javascript library which is used for building user interfaces and single page applications.

+
+
+ +

MySQL is a relational database management system (RDBMS). It's used for storing big data sets and organizing that data in tables.

+
+
+ + +
+ + + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..b6af407 --- /dev/null +++ b/style.css @@ -0,0 +1,213 @@ + + +body{ + padding: 0px; + margin: 0px; + background: url(images/bg.jpg) no-repeat fixed; + background-size: cover; + + font-family: 'Open Sans', sans-serif; +} + +h1, h2{ + font-family: 'Poppins', sans-serif; + font-size: 45px; +} + + + +/* Navigation */ +nav{ + background-color: rgba(0, 0, 0, 1); + color: white; + width: 100%; + height: 70px; + z-index: +100; + display: flex; + justify-content: center; +} + +nav ul{ + margin: 0px; + list-style: none; +} + +nav li{ + float: left; + padding: 15px 20px 15px 20px; + margin-top: 5px; +} + +nav a{ + color: gray; + text-decoration: none; +} +nav a:hover{ + color: white; +} +nav a:active{ + color: white; +} + +/* Header */ +header{ + background-color: rgba(255, 255, 255, .95); + flex-direction: column; + +} +header i{ + color: #4d9cd7; +} + + + + +/* About me */ +#about-me{ + background: linear-gradient(to bottom, #4d9cd7, #4e9dd8); + color: white; +} +#about-me div{ + max-width: 500px; +} +#about-me i{ + color: #b3e051; +} + +#about-me img{ + margin-right: 50px; + border-radius: 15px; +} + + +/* My interest */ +#my-interest{ + background: linear-gradient(to bottom, #b3e051, #aedb4d); + color: white; +} +#my-interest h2{ + margin-right: 100px; + font-size: 50px; + +} + +#my-interest ul{ + list-style: square; + font-size: 30px; + +} + +#my-interest i{ + color: #c35352; +} + +/* learning */ +#learning{ + background: linear-gradient(to bottom, #c35352, #c35151); + color: white; + flex-direction: column; +} +#learning a{ + color: white; + font-weight: bold; +} + +.classes{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: row; + width: 100%; + flex-wrap:wrap; +} + +.classes div{ + width: 25vw; min-height: 150px; + margin: 0 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + +} + + + + + + +.circle{ + position: absolute; + bottom: -100px; + border-radius: 50%; + border: 10px solid rgba(255, 255, 255, 0.3); + z-index: +1; + +} +.circle div{ + width: 180px; + height: 180px; + background-color: #ffffff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + + + +header, #about-me, #my-interest, #learning, footer{ + height: 100vh; + position: relative; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); +} + +/* footer */ +footer{ + background-color: black; + color: white; + height: 250px; + flex-direction: column; + align-items: flex-start; + padding: 50px; + color: gray; + align-items: center; + font-size: 16px; +} + +footer a{ + color: lightgray; + text-decoration: none; +} +footer i{ + margin-right: 20px; +} + + +@media(max-width: 768px){ + nav{ + height: auto; + } + #about-me img{ + margin: 0px; + } + + section, header{ + height: auto !important; + min-height: 100vh !important; + padding: 120px 10px; + flex-direction: column; + align-items: center; + justify-content: center; + align-content: center; + text-align: center; + } + + section h2{ + margin: 20px 0 !important; + } +}