diff --git a/index.html b/index.html index d01f779ff..15b59ae67 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,68 @@ - Document + + My Portfolio - - - \ No newline at end of file +
+

Maksim Raymond

+ +
+
+ +
+

Maksim Raymond

+ +

This is my journey. I Strive to be the best. I am a 24 year old Twitch Streamer and Youtube Content Creator. I yearn for stability in my life. i deeply want to be stable enough to pursue my passions. Lambda presents that opportunity for me. No matter what, i will fight till the end! With Lambda, all my dreams can come ture. its just a matter of hard work, persistence, & dedication!

+
+
+
+
+
+ +

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..f67b50b82 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,257 @@ -/* 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: #ffd6bf; + } + + header { + background-color: rgb(62, 214, 189); + display: flex; + flex-direction: column; + padding: 25px; + } + + h1 { + color: orange; + padding: 1%; + } + + header nav { + display: flex; + padding: 15px; + } + + header nav a { + padding: 10px 20px; + border: 2px solid orange; + text-decoration: none; + color: white; + text-align: center; + } + + .home { + background-color: rgb(49, 48, 48); + 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: rgb(22, 68, 68); + 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:rgb(87, 216, 173); + } + header { + width: 100%; + background-color:#2ca7cc; + } + 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:#10566b; + } + header { + width: 100%; + background-color:rgb(120, 87, 209); + } + 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%; + } + } + + + \ No newline at end of file