diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..7a9dfa044 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index d01f779ff..2e4769fff 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,78 @@ + - - - Document + + + + Document + - +
+

Maksim Raymond

+ +
+
+ +
+

Maksim Raymond

+ +

This is my journey. Im 24 years old. Im a Twitch streamer and needed to create a website for my business. For + years I have been into computers and video games. I have always wanted to become a video game tester and figure + out how they work. My cousin finally convinced me to take a look at Lambda. Two days into school and already I + know how to create a website. Only then did I realize that my dreams could come true through Software + Development. Im ready to head to the Next Level!

+
+
+
+
+
+ +

Project

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+ +

Project 4

+
+
+
+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+ +

Project 7

+
+
+ +

Project 8

+
+
+
+

Like what you see?

+ +
+ + \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..a3219cd4d 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,256 @@ -/* Add CSS styling here */ \ No newline at end of file +* { + box-sizing: border-box; + margin: 0; + padding: 0; + max-width: 100%; + text-decoration: none; + color: black; +} + +body { + background-color: #b3ecec; +} + +header { + background-color: teal; + display: flex; + flex-direction: column; + padding: 25px; +} + +h1 { + color: white; + padding: 1%; +} + +header nav { + display: flex; + padding: 15px; +} + +header nav a { + padding: 10px 20px; + border: 3px solid black; + text-decoration: none; + color: white; + text-align: center; +} + +.home { + background-color: black; + color: white; +} + +.headWrapper { + display: flex; +} + +img { + padding: 10px; + display: flex; + width: 40%; +} + +.right { + display: flex; + flex-direction: column; + padding-left: 5%; + padding-top: 8%; + width: 50%; +} + +.right > * { + margin-bottom: 30px; + width: 60%; +} + +.right button { + width: 20%; + padding: 10px; + border-radius: 5px; +} + +.right p { + font-size: 24px; +} +.pictures { + padding-top: 25px; +} +.rowOne, +.rowTwo { + display: flex; + flex-direction: row; + justify-content: space-evenly; +} +.rowOne p { + padding-bottom: 30px; +} + +.rowOne > *, +.rowTwo > * { + display: flex; + flex-direction: column; + align-items: center; +} +.rowOne img, +.rowTwo img { + width: 250px; + height: 250px; +} + +.footer { + display: flex; + flex-direction: column; + align-items: center; + padding: 45px; + background-color: #ffd6bf; + margin-top: 30px; +} + +.footer button { + padding: 20px; + margin: 10px; + border-radius: 20px; + background-color: #b3ecec; +} +.footer a { + margin: 45px; +} + +@media(max-width:800px){ + + + body { + width: 100%; + background-color:teal; + } + header { + width: 100%; + background-color:#367588; + } + header h1 { + text-align: center; + } + nav { + flex-direction: column; + margin: 0 auto; + width: 50%; + } + + .headWrapper { + align-items: center; + flex-direction: column; + width: 100%; + padding: 0; + text-align: center; + } + + img { + width: 100%; + padding: 50px; + } + .right { + width: 100%; + align-items: center; + } + .rowOne{ + flex-wrap:wrap; + width:100%; + } + .rowOne div{ + width:50%; + } + .rowOne div img{ + padding:8%; + width:100%; + height:400px; + + } + .rowTwo{ + flex-wrap:wrap; + width:100%; + } + .rowTwo div{ + width:50%; + } + .rowTwo div img{ + padding:8%; + width:100%; + height:400px; + } + h2{ + font-size:2rem; + } + button a{ + font-size: 1.5rem; + } + .footer button{ + margin-top:25px; + } + } + + + +@media (max-width: 500px) { + body { + width: 500px; + background-color:#367588; + } + header { + width: 100%; + background-color:teal; + } + header h1 { + text-align: center; + } + nav { + flex-direction: column; + margin: 0 auto; + width: 50%; + } + + .headWrapper { + align-items: center; + flex-direction: column; + width: 100%; + padding: 0; + text-align: center; + } + + img { + width: 100%; + padding: 50px; + } + .right { + width: 100%; + align-items: center; + } + .right button{ + width:30%; + } + .right button a{ + font-size: 1.2rem; + } + .rowOne{ + flex-wrap:wrap; + width:100%; + } + .rowOne div{ + width:50%; + } + .rowOne div img{ + padding:8%; + } + .rowTwo{ + flex-wrap:wrap; + width:100%; + } + .rowTwo div{ + width:50%; + } + .rowTwo div img{ + padding:8%; + } +} + +