diff --git a/README.md b/README.md new file mode 100644 index 0000000..db6d55d --- /dev/null +++ b/README.md @@ -0,0 +1,10 @@ +# Portfolio example +a little preview of how I design websites + +![](images/websiteA.png) + +![](images/website.png) + +![](images/website2.png) + +![](images/website3.png) diff --git a/font/LANENAR_-webfont.woff b/font/LANENAR_-webfont.woff new file mode 100644 index 0000000..e737e91 Binary files /dev/null and b/font/LANENAR_-webfont.woff differ diff --git a/images/pc.jpg b/images/pc.jpg new file mode 100644 index 0000000..0bb055c Binary files /dev/null and b/images/pc.jpg differ diff --git a/images/portfol.png b/images/portfol.png new file mode 100644 index 0000000..e96b939 Binary files /dev/null and b/images/portfol.png differ diff --git a/images/website.png b/images/website.png new file mode 100644 index 0000000..a6a997c Binary files /dev/null and b/images/website.png differ diff --git a/images/website2.png b/images/website2.png new file mode 100644 index 0000000..6e43241 Binary files /dev/null and b/images/website2.png differ diff --git a/images/website3.png b/images/website3.png new file mode 100644 index 0000000..aa0651d Binary files /dev/null and b/images/website3.png differ diff --git a/images/websiteA.png b/images/websiteA.png new file mode 100644 index 0000000..220e486 Binary files /dev/null and b/images/websiteA.png differ diff --git a/images/zlatan.jpg b/images/zlatan.jpg new file mode 100644 index 0000000..0f99af8 Binary files /dev/null and b/images/zlatan.jpg differ diff --git a/index.html b/index.html deleted file mode 100644 index d4bd85c..0000000 --- a/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - Document - - - - - - - - - - - - \ No newline at end of file diff --git a/index.js b/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/porto.css b/porto.css new file mode 100644 index 0000000..d021cfd --- /dev/null +++ b/porto.css @@ -0,0 +1,482 @@ +@import url('https://fonts.googleapis.com/css2?family=Rajdhani&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Changa:wght@200&display=swap'); + + +@font-face { + font-family: 'aaargh'; + src: url('./font/Aaargh-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'rajdhani'; + src: url('./font/rajdhani-regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'helsinki'; + src: url('./font/helsinki-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'lane'; + src: url('./font/LANENAR_-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Rajdhani'; +} + +a { + list-style: none; + text-decoration: none; + color: #000000; +} + +body { + min-height: 1800px; + margin: auto; + width: 95%; + /* border: 4px solid #fff; */ + box-shadow: 0 0 30px 1px rgb(223, 223, 223), 0 0 30px 1px rgb(212, 212, 212); +} +#navBar { + display: flex; + justify-content: space-around; + align-items: center; + width: 100%; + min-height: 90px; + background: linear-gradient( whitesmoke, rgb(231, 205, 253)); + border-bottom: 4px solid #fff; + box-shadow: 0 0 30px 1px rgb(233, 232, 232), 0 0 30px 1px rgb(228, 227, 227); +} +#list li a:hover { + color: dodgerblue; + transition: 0.1s; +} + +#list li a:not(:hover) { + transition: 0.1s; +} + +img { + width: 200px; + height: 100%; + overflow: hidden; + object-fit: cover; +} +#slika { + box-shadow: 0 0 5px 1px rgb(231, 231, 231), 0 0 5px 1px #808080; + box-shadow: 5px 0 15px -4px rgba(172, 96, 182, 0.8), -5px 0 8px -4px rgba(174, 49, 190, 0.8); + padding: 20px; + width: 300px; + margin: 3px; + background: #FFFAFA; + /* border-top-right-radius: 8px; + border-top-left-radius: 45px; */ + border-bottom-right-radius: 64px; + border-bottom-left-radius: 8px; +} + + + +#list { + display: flex; + grid-gap: 120px; + list-style: none; + font-size: 24px; +} +#list li a { + color: #000000; + text-decoration: none; +} + + + +#wordWrap { + padding: 100px 100px 70px 100px; + color: #333; + font-family: 'lane'; +} + + +#firstDiv { + position: relative; + width: 800px; + padding: 50px 100px 50px 100px; + margin: 30px auto; + border: 4px solid #fff; + background: whitesmoke; + box-shadow: 0 0 15px 0px #bbb; + /* box-shadow: 0 0 30px 1px rgb(240, 240, 240), 0 0 30px 1px rgb(241, 241, 241); */ + /* border-top-right-radius: 12px; + border-top-left-radius: 12px; */ + border-bottom-right-radius: 120px; + border-bottom-left-radius: 8px; +} + +h2 { + margin-bottom: 35px; +} + +p { + font-size: 17.5px; + text-shadow: 0 0 1px rgb(114, 114, 114), 0 0 1px rgb(206, 206, 206); + +} + +spanB { + text-align: center; + font-size: 36px; + font-weight: bold; + text-transform: uppercase; +} + +spanC { + padding: 0px 7px 0px 7px; + border-radius: 4px; + font-family: 'lane'; + text-shadow: 0 0 3px #eee, 0 0 3px #eee; + background: rgb(212, 175, 246); + color:white; +} + +spanD { + font-size: 100px; +} + +#slika2 { + width: 200px; + height: 270px; + box-shadow: 0 0 5px 1px #000000, 0 0 5px 1px #000000; + float: right; + shape-margin: 2rem; + margin-left: 3rem; + margin-bottom: 2rem; + opacity: 0.8; + /* border-top-right-radius: 85px; + border-top-left-radius: 85px; */ + border-bottom-right-radius: 85px; + border-bottom-left-radius: 8px; +} +#text1 { + text-align: justify; + line-height: 1.2; +} +span { + position: absolute; + top:0; + left:0; + border: none; + width: 110px; + padding: 15px 20px; + font-weight: bold; + font-size: 20px; + color: #555; + text-align: center; + text-decoration: overline; + text-shadow: 0 0 1px grey, 0 0 1px grey; + background: #ebebeb; + border-bottom-right-radius: 32px; +} + +#secondNav { + margin-top: 10px; + min-height: 70px; + display: flex; + justify-content: flex-end; + align-items: center; + padding-right: 20px; + background: #f8f8f8; + -moz-box-shadow:0 5px 5px rgba(231, 231, 231, 0.75); + -webkit-box-shadow: 0 5px 5px rgba(219, 219, 219, 0.75); + box-shadow: 0 5px 5px rgba(218, 218, 218, 0.75); + margin-bottom: 10px; +} + + +#container { + width: 90%; + min-height: 1170px; + margin: 20px auto; + display: flex; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + border: 5px solid #fff; + padding: 80px 20px 0 20px; + background: whitesmoke; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 85px; + box-shadow: 0 0 15px 0px #bbb; +} + +.wrapper { + width: 300px; + height: 350px; + background: snow; + box-shadow: 0 0 30px 1px #bbb, 0 0 30px 1px #bbb; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 64px; + border: 1px solid #fff; + margin-bottom: 80px; +} + +.wrapperTop { + width: 100%; + height: 50%; + background: #C0C0C0; + border: 3px solid snow; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + background: url(images/pc.jpg); + background-repeat: no-repeat; + background-size: auto; +} + + + +span-rock { + font-weight: bold; + font-size: 72px; + overflow: visible; +} + +#miniDiv { + position: absolute; + width: 170px; + height: 170px; + padding: 10px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + box-shadow: 0 0 12px 2px #000000, 0 0 5px 2px; +} + +.class_div { + width: 170px; + position: absolute; + display: flex; + border-radius: 100px; + justify-content: center; + align-items: center; + padding: 20px; + background: #F5F5F5; +} + + +.headlineAbout { + position: absolute; + border: none; + width: 110px; + padding: 15px 20px; + font-weight: bold; + font-size: 20px; + text-align: center; + text-decoration: overline; + text-shadow: 0 0 1px grey, 0 0 1px grey; + background: rgb(228, 228, 228); + border-bottom-right-radius: 32px; +} + +.projectAbout { + padding: 15px; + font-size: 20px; + margin: 10px; + text-align: center; + line-height: 1.2; +} + +.headlineH3 { + border: none; + width: 120px; + padding: 15px 20px; + font-weight: bold; + font-size: 20px; + color: #444; + text-decoration: overline; + text-shadow: 0 0 1.5px grey, 0 0 1.5px grey; + background: rgb(228, 228, 228); + border-bottom-right-radius: 32px; +} + +#projectHeader { + text-align: center; + width: 96%; + margin: -2px auto; + background: #eee; + color: dodgerblue; + text-shadow: 0 0 1.5px grey, 0 0 1.5px grey; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + border: 3px solid #ddd; + box-shadow: 0 0 5px 1px #333, 0 0 5px 1px #333; +} + + + + + + +#output { + width: 350px; + height: 100%; + display: flex; + font-size: 42px; + justify-content: center; + align-items: center; +} +.btnClass { + padding: 6px 20px 6px 20px; + border: none; + width: 120px; + box-shadow: 0 0 3px 1px #000000, 0 0 3px 2px #808080; + border-radius: 20px; + background:rgb(209, 209, 209); + height: 60px; + color:#000000; + text-shadow: 0 0 2px rgb(182, 182, 182), 0 0 2px rgb(172, 172, 172); + font-size: 19px; + font-weight: bold; + cursor: pointer; +} + +.classDiv { + font-size: 30px; + font-weight: bold; + color: #a9a9a9; + text-shadow: 0 0 3px #000000, 0 0 3px #000000; +} + +#footerLine { + width: 100%; + height: 200px; + margin-top: 50px; + background: linear-gradient( whitesmoke, rgb(231, 205, 253)); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + border-top: 3px solid #fff; + box-shadow: 0 0 30px 1px rgb(233, 232, 232), 0 0 30px 1px rgb(228, 227, 227); +} +#footer_line { + font-size: 34px; + +} + + +@media screen and (max-width: 1100px) { + + #slika { + display: none; + } + + #list { + font-size: 30px; + text-align: center; + } +} + + +@media screen and (max-width: 1000px) { + + #navBar { + flex-direction: column; + } + +} + + + +@media screen and (max-width: 850px) { + + body { + width: 100%; + } + + #middleWrapper { + flex-direction: column; + } + + #firstDiv { + width: 95%; + margin: 30px auto; + padding: 30px 50px 30px 50px; + border-radius: 0; + } + + #navBar { + justify-content: center; + } + + #list { + flex-direction: column; + grid-gap: 10px; + font-size: 36px; + padding: 10px; + } + + #wordWrap { + padding: 75px; + } +} + + +@media screen and (max-width: 600px) { + #slika2 { + width: 140px; + shape-margin: 1rem; + margin-left: 1.5rem; + margin-bottom: 1rem; + border-radius: 12px; + } + + #wordWrap { + padding: 40px; + font-size: 64px; + } +} + + +@media screen and (max-width: 399px) { + + + #container { + width: 100%; + } + #mainWrapper { + padding: 0; + } + + #firstDiv { + padding: 20px; + } + + #slika2 { + width: 120px; + margin-top: 30px; + } + + #wordWrap { + font-size: 48px; + padding-bottom: 0; + } + + span { + display: none; + } +} \ No newline at end of file diff --git a/porto.html b/porto.html new file mode 100644 index 0000000..c34a6a3 --- /dev/null +++ b/porto.html @@ -0,0 +1,142 @@ + + + + + + + + Portofolio + + + + + + +

I become a
Software developer!

 + +
+
+ +

About

+ +

Hi, my name is Zlatan and I come from Breza (Bosnia & Herzegowina). I am 32 years old and I have been working in my father's service for over ten years, so it can be said that I am in a business position without any form of progress. The conditions in that job are difficult in most cases, but they made me do something in my free time and retrain myself in a profession with a better future. It is this page that is the fruit of it all. I tried to study for at least an hour every day, because the IT profession requires constant work habits, without which no serious progress can be made. Designing pages is quite interesting, but I paid much more attention to creating a developer mindset, because it is the basis on which to build further and further ... I hope that in the near future I will get a job in a company that will offer me the best possible training, in order to have great conditions for progress. I don't want to be poisoned in a workshop full of chemistry anymore. I want to breathe with full lungs and I think this is the only sleepy way to it. + +

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

Project 1

+
+

Color-Generator

+

The background color takes a new random color by tiping the button on the front of the Application.

+
+
+
+

Project 2

+
+

Password-Generator

+

Gives us a random password of 10, 15 od 20 elements. We can choose how much digits we get.

+
+
+
+

Project 3

+
+

Calculator

+

A simple calulator with the common options. We remove the value by clicking on the screen.

+
+
+
+

Project 4

+
+

Website example

+

A Website exemple for a Lawyer Company, with a responsive design and animations.

+
+
+
+

Project 5

+
+

Portofolio example

+

My Portofolio, the summary of all my projects combine in a website

+
+
+
+

Project 6

+
+

API number app

+

Write a number and get a random fact about the number chosen

+
+
+
+

Project 7

+
+

API date app

+

Write a date and get a random fact about the date you choose

+
+
+
+

Project 8

+
+

API years app

+

Write down the year you want and find out a random fact about the year you typed

+
+
+
+

Project 9

+
+

Color-Generator

+
+
+
+

Project 10

+
+

Color-Generator

+
+
+
+

Project 11

+
+

Color-Generator

+
+
+
+

Project 12

+
+

Color-Generator

+
+
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/index.css b/porto.js similarity index 100% rename from index.css rename to porto.js