diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100755 index 0000000..5e09571 --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2023 Joseph Mwanza (https://codepen.io/Joe79/pen/poaKJjp) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md old mode 100644 new mode 100755 index cd62be0..7717d23 --- a/README.md +++ b/README.md @@ -1,26 +1,4 @@ -# My-Codepen-Website -An empty repository for Git learners to fork +# Personal Portfolio -## Fork and Clone our Repository -Make a fork of the repository to your Github Profile and clone it to your computer. +A Pen created on CodePen.io. Original URL: [https://codepen.io/Joe79/pen/poaKJjp](https://codepen.io/Joe79/pen/poaKJjp). -https://github.com/CodeYourFuture/My-CodePen-Website - -You'll be using this forked version to host your website. - -## Add your files -Copy the files that you've unzipped to the repository folder for your website. - -Find this folder by clicking Show in Explorer in Github Desktop. - -## Upload to Github -Next, use Github and Github Desktop to upload your website to your Github Profile. - -If you get stuck, make sure to check this week's lesson to see what we covered. - -## Done! -Your completed repository should look something like this: - -https://github.com/CodeYourFuture/My-CodePen-Website-Example-Solution - -Stuck? Any Questions? Ask on Slack. Remember to update this README diff --git a/dist/index.html b/dist/index.html new file mode 100755 index 0000000..7b6cdda --- /dev/null +++ b/dist/index.html @@ -0,0 +1,67 @@ + + + + + CodePen - Personal Portfolio + + + + + + + +
+ +

Hello!

+ +

My name is Joseph Mwanza

- +

And I am a Web Developer

+ +
+ +
+

Projects

+
+ + Random Picture

Random color generator

 + + Delicious dish

Delicious dish

 + + Junk car

Junk car

 + + Racing game

Racing game

 + + Volleyball competition

Volleyball competition

 + + Car show

Car show

 +
+ +
+ +
+

Social Media

+

You can find me on

+ +
+ + + + + + + + + + diff --git a/dist/style.css b/dist/style.css new file mode 100755 index 0000000..4805f1d --- /dev/null +++ b/dist/style.css @@ -0,0 +1,151 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Raleway:wght@200;400&display=swap'); + +*{ + box-sizing: border-box; +} +body { + background-color: #94958B; + font-family: 'lato', sans-serif; + margin: 0; +} + +nav{ + background-color: #80475E; + color: #94958B; + display: flex; + justify-content: flex-end; + padding: 15px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; +} + +nav a { + color: #fff; + margin-left: 20px; + text-decoration: none; +} + +nav a:hover { + text-decoration: underline; +} + +header { + background-image: url(https://miro.medium.com/max/5764/1*_Cu-p0mXOlRvZ3YiDrJBEQ.jpeg); + background-size: cover; + background-position: center center; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100vh; + position: relative; +} + +header::after { + content: ''; + background-color: #000; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0.8; +} + +header * { + position: relative; + z-index: 1; +} + +header h1 { + font-size: 60px; + margin-bottom: 5px; + margin-top: 0; +} + +header p { + font-size: 30px; + margin: 0; +} + +section { + padding: 40px; + text-align: center; +} + +section h2 { + margin: 0; +} + +section p { + margin-top: 0; +} + +.projects-container { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + max-width: 810px; + margin: 20px auto 0; +} +.project-tile { + margin: 10px; + max-width: 250px; +} + +.project-tile img { + max-width: 100%; +} + +.project-tile p { + font-size: 20px; + margin-top: 10px; +} + +.bg-pinkish { + background-color: #A64253; + color: #fff; +} + +.social-ul { + display: flex; + flex-wrap: wrap; + justify-content: center; + list-style-type: none; + padding: 0; + margin: 0; +} + +.social-ul a { + border-radius: 50%; + border: 3px solid #fff; + color: #fff; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 30px; + margin: 5px 10px; + height: 50px; + width: 50px; +} +footer { + background-color: #80475E; + color: #94958B; + padding: 10px; + text-align: center; +} + +footer .fa-heart { + color: #fff; +} + +@media (max-width: 440px) { + section { + padding: 20px; + } +} \ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100755 index 0000000..935e378 --- /dev/null +++ b/src/index.html @@ -0,0 +1,61 @@ + + + + + + + + + +
+ +

Hello!

+ +

My name is Joseph Mwanza

- +

And I am a Web Developer

+ +
+ +
+

Projects

+
+ + Random Picture

Random color generator

 + + Delicious dish

Delicious dish

 + + Junk car

Junk car

 + + Racing game

Racing game

 + + Volleyball competition

Volleyball competition

 + + Car show

Car show

 +
+ +
+ +
+

Social Media

+

You can find me on

+ +
+ + + + + + + diff --git a/src/style.css b/src/style.css new file mode 100755 index 0000000..4805f1d --- /dev/null +++ b/src/style.css @@ -0,0 +1,151 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Raleway:wght@200;400&display=swap'); + +*{ + box-sizing: border-box; +} +body { + background-color: #94958B; + font-family: 'lato', sans-serif; + margin: 0; +} + +nav{ + background-color: #80475E; + color: #94958B; + display: flex; + justify-content: flex-end; + padding: 15px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; +} + +nav a { + color: #fff; + margin-left: 20px; + text-decoration: none; +} + +nav a:hover { + text-decoration: underline; +} + +header { + background-image: url(https://miro.medium.com/max/5764/1*_Cu-p0mXOlRvZ3YiDrJBEQ.jpeg); + background-size: cover; + background-position: center center; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100vh; + position: relative; +} + +header::after { + content: ''; + background-color: #000; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0.8; +} + +header * { + position: relative; + z-index: 1; +} + +header h1 { + font-size: 60px; + margin-bottom: 5px; + margin-top: 0; +} + +header p { + font-size: 30px; + margin: 0; +} + +section { + padding: 40px; + text-align: center; +} + +section h2 { + margin: 0; +} + +section p { + margin-top: 0; +} + +.projects-container { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + max-width: 810px; + margin: 20px auto 0; +} +.project-tile { + margin: 10px; + max-width: 250px; +} + +.project-tile img { + max-width: 100%; +} + +.project-tile p { + font-size: 20px; + margin-top: 10px; +} + +.bg-pinkish { + background-color: #A64253; + color: #fff; +} + +.social-ul { + display: flex; + flex-wrap: wrap; + justify-content: center; + list-style-type: none; + padding: 0; + margin: 0; +} + +.social-ul a { + border-radius: 50%; + border: 3px solid #fff; + color: #fff; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 30px; + margin: 5px 10px; + height: 50px; + width: 50px; +} +footer { + background-color: #80475E; + color: #94958B; + padding: 10px; + text-align: center; +} + +footer .fa-heart { + color: #fff; +} + +@media (max-width: 440px) { + section { + padding: 20px; + } +} \ No newline at end of file