diff --git a/about.html b/about.html index df1043036..ca42abfaf 100644 --- a/about.html +++ b/about.html @@ -8,4 +8,5 @@

ABOUT

- \ No newline at end of file + + diff --git a/index.html b/index.html index d01f779ff..b008864f4 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,72 @@ Document + + + - +
+

Juan Ruiz

+ +
+
+ image of me +
+

Juan Ruiz

+ +

Hi. Welcome to my website. I like to build things and solve problems. For fun, I like to read, observe nature and work on incredibly ambitious projects. My coding journey so far has been great, I've struggled a lot but made massive progress in such little time.

+
+
+
+
+ project1 +

Project 1

+
+
+ project2 +

Project 2

+
+
+ project3 +

Project 3

+
+
+ project4 +

Project 4

+
+
+ +
+
+ project5 +

Project 5

+
+
+ project6 +

Project 6

+
+
+ project7 +

Project 7

+
+
+ project8 +

Project 8

+
+
+ + + \ No newline at end of file diff --git a/style/IMG_0550.jpg b/style/IMG_0550.jpg new file mode 100644 index 000000000..2f15fe66a Binary files /dev/null and b/style/IMG_0550.jpg differ diff --git a/style/index.css b/style/index.css index 440e53514..884e64e77 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,324 @@ -/* Add CSS styling here */ \ No newline at end of file +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +body { + font-family: 'Open Sans', sans-serif; +} + + +.juanruiz { + width: 450px; + height: 450px; + border-radius: 50%; + margin-top:5%; + margin-left:5%; +} + +.top-nav { + display:flex; + flex-direction:column; + background:black; + height:15vh; + justify-content:center; +} + +nav a { + margin-top:10%; + background:white; + padding:0.5%; + text-decoration:none; + color:black; + +} +nav a:hover { + background:black; + color:white; + +} + +h1 { + color:white; + font-size:2.3rem; + margin-bottom:1%; + margin-left:2%; +} + +nav { + margin-left:3%; +} + +header { + display:flex; + /* border:2px solid red; */ +} + +.title { + display:flex; + flex-direction:column; + width:50%; + justify-content:center; + margin-left:10%; +} + +h2 { + font-size:3rem; + /* border:2px solid red; */ +} + +button.header-button { + padding:2%; + font-size:1.2rem; + color:white; + background:black; + border:none; + margin-top:2%; + width:20%; + /* border:2px solid red; */ +} + +button.header-button:hover { + color:black; + background:white; + border:2px solid black; +} + + +h3 { + font-size:1.3rem; + margin-top:2%; + /* border:2px solid red; */ +} + +.projects1 { + display:flex; + justify-content:space-evenly; + margin-top:10%; +} + +.projects2 { + display:flex; + margin-top:10%; + justify-content:space-evenly; +} + + + +.projects1para { + display:flex; + justify-content:space-evenly; + margin-top:1%; +} +.projects2para { + display:flex; + justify-content:space-evenly; + margin-top:1%; + margin-bottom:10%; +} + +footer { + flex-direction:column; + align-items: center; + display:flex; + color:white; + background:black; + height:30vh; + margin-top:10%; +} + +.like-what-you-see { + margin-top:2%; + font-size:2.5rem; + height:5vh; +} + +.footer-button { + padding:1%; + margin-top:2%; + font-size:1rem; + color:black; + background:white; + border:none; + width:8%; +} + +.footer-button:hover { + color:white; + background:black; + border:2px solid white; +} + +p { + text-align:center; +} + + +@media (max-width:500px) { + + h1 { + margin-top:5%; + display:flex; + justify-content: center; + + } + + h2 { + text-align:center; + } + + .top-nav { + display:flex; + width:100%; + height:35vh; + } + + nav { + display:flex; + flex-direction:column; + justify-content: center; + width:100%; + margin-left:0%; + height:80%; + text-align:center; + } + + nav a { + margin:0 auto; + width:30%; + padding:2%; + } + + header { + display:flex; + flex-direction:column; + align-items:center; + width:100%; + } + + img.juanruiz { + width:40%; + height:200px; + display:flex; + align-items:center; + margin-bottom:5%; + + } + button.header-button { + display:flex; + justify-content:center; + align-items:center; + width:35%; + margin:0 auto; + padding:3%; + margin-top:8%; + margin-bottom:8%; + } + + h3 { + font-size:1.2rem; + width:80%; + margin:0 auto; + text-align:center; + } + + .projects1,.projects2{ + display:flex; + flex-wrap:wrap; + text-align:center; + } + + img.project1,.project2,.project5,.project6 { + margin-bottom:15%; + } + + .projects1para { + display:flex; + flex-wrap:wrap; + } + + p { + width:100%; + text-align:center; + margin-top:5%; + } + + .title { + width:100%; + margin-left:0%; + } + + footer { + height:25vh; + margin-top:10%; + } + + h2.like-what-you-see { + margin-top:5%; + margin-bottom:5%; + font-size:1.5rem; + } + + .footer-button { + width:100%; + padding:3%; + } +} + +@media (max-width: 800px) { + .juanruiz { + width:30%; + height:250px; + } + +h2 { + font-size:2.5rem; +} + +.title { + margin-top:5%; +} + +button.header-button { + width:35%; + padding:3%; + margin-bottom:5%; +} + +h3 { + font-size:1.2rem; +} + +h2.like-what-you-see { + margin-top:5%; + margin-bottom:3%; + font-size:2.5rem; +} + +button.footer-button { + width:30%; + padding:2%; +} + +img{ + margin-left:12%; + width:75%; + +} +}