From 270ec3d68c27a4a0dd5266589f160a2970919b79 Mon Sep 17 00:00:00 2001 From: chandra108 Date: Tue, 14 Apr 2020 02:05:14 -0400 Subject: [PATCH 1/4] Added Title To Site --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index d01f779ff..426c3a2d1 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Document + Chandra's Code From b03d0a18dcfee19953805125e36d807b7a60d7d4 Mon Sep 17 00:00:00 2001 From: chandra108 Date: Wed, 15 Apr 2020 16:03:18 -0400 Subject: [PATCH 2/4] git commit -m changes made --- index.html | 122 +++++++++++++++- style/index.css | 367 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 484 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 426c3a2d1..d6643032b 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,125 @@ - + + +
+ + + + - Chandra's Code - - + Chandra Can Code + +
+
+

Chandra Can Code

+
+
+

Chandra Dhopatkar

+
+ +
+ + +
+ + + +
+
+ +
+ +
+ + + + + +
+ +
+ Main Picture +
+ +
+ +
+ +
+ +
+

Chandra Dhopatkar

+

I created this minimalist website to showcase some of my projects. This would make a nice template for an artist, wishing to exhibit their art, any other creative who wishes to cleanly present their work without distraction.

+

I'm a Lambda Student who loves to learn. I am always learning more and more about coding!

+
+
+ + + +
+ +
+ +
+ pic1 +
+ +
+ pic2 +
+ +
+ pic3 +
+ +
+ pic4 +
+
+ +
+ +
+ pic1 +
+ +
+ pic2 +
+ +
+ pic3 +
+ +
+ pic4 +
+
+
+
+
+ + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..244372634 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,366 @@ -/* Add CSS styling here */ \ No newline at end of file + +/* Added a css reset to reduce browser inconsistencies */ + +/* Add CSS styling here */ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +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; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* ## Ends Eric Myers; begins css styling */ + +/* ## site styling begins*/ + + +h1 { + font-size: 100px; + font-weight: 100; + font-stretch: semi-condensed; + font-size-adjust: initial; + font-family: serif; + font: serif; + font-style: bold; + text-align: center; + color: rgb(176, 224, 230); + background-color: lightblue; + text-shadow: + -1px -1px 0 rgba(32, 30, 134, 0.233), + 1px -1px 0 rgba(32, 30, 134, 0.233), + -1px 1px 0 rgba(32, 30, 134, 0.233), + 1px 1px 0 rgba(32, 30, 134, 0.233); + +} + +h2 { + font-size: 79px; + text-align: left; + font-stretch: ultra-expanded; + font-size-adjust: initial; + font-family: serif; + font-style: bold; + text-align: left; + color: powderblue; + text-shadow: + -1px -1px 0 rgba(32, 30, 134, 0.233), + 1px -1px 0 rgba(32, 30, 134, 0.233), + -1px 1px 0 rgba(32, 30, 134, 0.233), + 1px 1px 0 rgba(32, 30, 134, 0.233); + width: 100%; + /* border: 0px 0px 1px 0px solid powderblue; */ + border: 8px blue; + padding: none; + margin: none; + } + + +.div1 { + width: 100%; + height: 100%; + padding: 1px; + border: 1px solid rgb(102, 169, 245); + background-color: powderblue; +} + +.div2 { + + width: 100%; + height: 50%; + margin: 20px; + padding: nonepx; + border: 0px 0px 1px 0px solid rgb(0, 110, 255); +} + +/* .div3 { + width: 100%; + height: 50%; + padding: 10px; + border: 1px solid powderblue +} */ + +.container { + display: flex; + max-width: 50%; + + + } + +.container > li { + flex: 1; + } + +@media all and (max-width: 600px) { + + .container { + flex-wrap: wrap; + } + + .container > li { + flex-basis: 50%; + } + +} +@media all and (max-width: 400px) { + + .container > li { + flex-basis: 100%; + } + + } + +.container > li { + /* border: 0px 0px 1px 0px; */ + + border-radius: 5px; + font-size: 15px; + font-family: Arial, Helvetica, sans-serif; + font-style: bold; + margin: auto; + text-align: center; + border: 3px solid rgba(32, 30, 134, 0.233); + padding: none; + display: inline-flexbox; + height: 20px; + width: 20px; + margin: 23px; + background: powderblue; + color: white; + +} + +.navButton { + width: 100%; + height: 100%; + background-color: rgb(43, 21, 22, 0); + border: none; +} + + + /* ## The following grayed out code could be useful for styling individual ids, should one want to in the future */ + + +/* #home { + border-radius: 5px; + font-size: 30px; + text-align: center; + height: 40px; + width: 40px; + margin: 20px; + border: 1px solid rgba(0, 0, 255, 0.247); + background: powderblue; + color: white; +} + +#about { + border-radius: 5px; + font-size: 30px; + text-align: center; + height: 40px; + width: 40px; + padding-inline-start: 0px; + margin: 20px; + border: 1px solid rgba(0, 0, 255, 0.247); + background: powderblue; + color: white; +} + +#contact { + border-radius: 5px; + font-size: 30px; + text-align: center; + height: 40px; + width: 40px; + margin: 20px; + border: 1px solid rgba(0, 0, 255, 0.247); + background: powderblue; + color: white; +} + +#projects { + border-radius: 5px; + font-size: 30px; + text-align: center; + display: inline-flexbox; + height: 40px; + width: 40px; + margin: 20px; + border: 1px solid rgba(0, 0, 255, 0.247); + background: powderblue; + color: white; */ +/* } */ + +/* ## The following separator class is used here to place a 5px solid line */ + +.separator { + border: .5px solid rgb(102, 169, 245); +} + + +/* ## this starts the body starting with the main picture */ + +.mainPicture { + border: 5px solid rgba(32, 30, 134, 0.233); + width: 100%; + height: auto; + max-width: 622px; + padding: none; + border-radius: 10px; + margin: 19px; +} + +/* /* ## trying to get the two divs to go side by side with multiple nested divs */ + +.parent { + display: flex; +} + +.container2 { + width: 50%; + background-color: red; +} + +.container3 { + width: 50%; + background-color: green; +} + +.container3Text { + border: 5px solid rgba(32, 30, 134, 0.233); + width: 100%; + height: auto; + max-width: 622px; + padding: none; + border-radius: 10px; + margin: 19px; + overflow-wrap: break-word; +} + +/* ## styles for the

and

*/ + +h3 { + font-size: 60px; + font-family: serif; + font-style: bold; +} +p { + font-size: 25px; + font-family: serif; + display: block; + margin: 20px auto; + overflow-wrap: break-word; + word-wrap: break-word; + hyphens: auto; +} + +/* ## This following code is where my projects button begin */ + +#myprojects { + align-content: left; + margin: 30px; + border: 5px solid rgba(32, 30, 134, 0.233); + +} + +/* ## is where my picture gallery begins */ + + .pictureRow { + box-sizing: border-box; + } + + .pictureRow { + display: flex; + } + + .pictureColumn { + flex: 25%; + padding: none; + border-radius: 10px; + border: 5px solid rgba(32, 30, 134, 0.233); + margin: 30px; + } +/* second picture row */ + .pictureRow2 { + box-sizing: border-box; + } + + .pictureRow2 { + display: flex; + } + + .pictureColumn2 { + flex: 25%; + padding: none; + border-radius: 10px; + border: 5px solid rgba(32, 30, 134, 0.233); + margin: 30px; + } +.footerLine { + /* bottom: solid rgba(32, 30, 134, 0.233); */ + border: solid rgba(32, 30, 134, 0.233); + width: 100%; + height: none; +} +.footer { + background-color: lightblue; + width: 100%; + height: 75px; + +} + + + + + + + + + + + + + + + From 3c67ca9927f008382df08c2c2fedc25f2be0a953 Mon Sep 17 00:00:00 2001 From: chandra108 Date: Thu, 16 Apr 2020 13:21:11 -0400 Subject: [PATCH 3/4] done --- index.html | 25 ++++++++++++------- style/index.css | 66 ++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 76 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index d6643032b..8b312aa0e 100644 --- a/index.html +++ b/index.html @@ -44,20 +44,23 @@

Chandra Dhopatkar

-
+
+
Main Picture
- -
- -
+

Chandra Dhopatkar

+
+ + + +

I created this minimalist website to showcase some of my projects. This would make a nice template for an artist, wishing to exhibit their art, any other creative who wishes to cleanly present their work without distraction.

I'm a Lambda Student who loves to learn. I am always learning more and more about coding!

@@ -104,13 +107,17 @@

Chandra Dhopatkar

pic4
+ +
-
- - - +
+
+
Like what you see?

+
+
diff --git a/style/index.css b/style/index.css index 244372634..416dc8f24 100644 --- a/style/index.css +++ b/style/index.css @@ -251,7 +251,7 @@ h2 { margin: 19px; } -/* /* ## trying to get the two divs to go side by side with multiple nested divs */ +/* /* ## two divs to go side by side with multiple nested divs using a parent div to house them in */ .parent { display: flex; @@ -259,12 +259,12 @@ h2 { .container2 { width: 50%; - background-color: red; + background-color: none; } .container3 { width: 50%; - background-color: green; + background-color: none; } .container3Text { @@ -275,21 +275,48 @@ h2 { padding: none; border-radius: 10px; margin: 19px; + margin-left: 25px; overflow-wrap: break-word; } /* ## styles for the

and

*/ +#myProjects { + border: 5px solid rgba(32, 30, 134, 0.233); + width: 150px; + height: 75px; + border-radius: 5px; + margin: 33px; + text-align: center; + background-color: powderblue; + font-size: 20px; + font-style: bold; + + +} + h3 { font-size: 60px; font-family: serif; + padding-top: 20px; + color: powderblue; + text-shadow: + -1px -1px 0 rgba(32, 30, 134, 0.233), + 1px -1px 0 rgba(32, 30, 134, 0.233), + -1px 1px 0 rgba(32, 30, 134, 0.233), + 1px 1px 0 rgba(32, 30, 134, 0.233); + width: 100%; + font-style: bold; + margin-left: 25px; } p { font-size: 25px; font-family: serif; display: block; - margin: 20px auto; + padding-left: 33px; + margin: 14px auto; + margin-top: 1; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; @@ -350,12 +377,39 @@ p { } +/* +

+
+
*/ +.footerLine { + text-align: center; +} +#contactMe { + border: 5px solid rgba(32, 30, 134, 0.233); + width: 145px; + height: 70px; + border-radius: 5px; + margin: none; + margin-top: 3px; + text-align: center; + background-color: powderblue; + font-size: 20px; + font-style: bold; + margin-left: 87%; +} - - +.footerText { + text-align: right; + font-size: 3.0rem; + width: 100% + height: 40px; + margin: -55px; + margin-right: 18%; + +} From 3a31c8a358a939280fba76f23480266892b9043f Mon Sep 17 00:00:00 2001 From: chandra108 Date: Fri, 17 Apr 2020 14:54:31 -0400 Subject: [PATCH 4/4] projectThree --- index.html | 10 +++++++--- style/index.css | 45 ++++++++++++++++++++++++++++++--------------- 2 files changed, 37 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 8b312aa0e..65c28e1d0 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,8 @@ - + + - + +
@@ -114,7 +116,9 @@

Chandra Dhopatkar

Like what you see?

+

Like what you see? + +

diff --git a/style/index.css b/style/index.css index 416dc8f24..c11be7437 100644 --- a/style/index.css +++ b/style/index.css @@ -53,11 +53,13 @@ table { /* ## Ends Eric Myers; begins css styling */ +html { font-size: 62.5%; } /* =10px */ + /* ## site styling begins*/ h1 { - font-size: 100px; + font-size: 10.0rem; font-weight: 100; font-stretch: semi-condensed; font-size-adjust: initial; @@ -76,7 +78,7 @@ h1 { } h2 { - font-size: 79px; + font-size: 7.9rem; text-align: left; font-stretch: ultra-expanded; font-size-adjust: initial; @@ -155,7 +157,7 @@ h2 { /* border: 0px 0px 1px 0px; */ border-radius: 5px; - font-size: 15px; + font-size: 1.5rem; font-family: Arial, Helvetica, sans-serif; font-style: bold; margin: auto; @@ -179,12 +181,20 @@ h2 { } +/* ## Media Query for nav buttons */ + +@media (max-width: 800%) { + .navButton + border-right: 1.5rem; +} + + /* ## The following grayed out code could be useful for styling individual ids, should one want to in the future */ /* #home { - border-radius: 5px; - font-size: 30px; + border-radius: .5rem; + font-size: 3.0rem; text-align: center; height: 40px; width: 40px; @@ -195,8 +205,8 @@ h2 { } #about { - border-radius: 5px; - font-size: 30px; + border-radius: .5rem; + font-size: 3.0rem; text-align: center; height: 40px; width: 40px; @@ -209,7 +219,7 @@ h2 { #contact { border-radius: 5px; - font-size: 30px; + font-size: 3.0rem; text-align: center; height: 40px; width: 40px; @@ -220,8 +230,8 @@ h2 { } #projects { - border-radius: 5px; - font-size: 30px; + border-radius: .5rem; + font-size: 3.0rem; text-align: center; display: inline-flexbox; height: 40px; @@ -289,14 +299,14 @@ h2 { margin: 33px; text-align: center; background-color: powderblue; - font-size: 20px; + font-size: 2.0rem; font-style: bold; } h3 { - font-size: 60px; + font-size: 6.0rem; font-family: serif; padding-top: 20px; color: powderblue; @@ -311,7 +321,7 @@ h3 { margin-left: 25px; } p { - font-size: 25px; + font-size: 2.5rem; font-family: serif; display: block; padding-left: 33px; @@ -396,7 +406,7 @@ p { margin-top: 3px; text-align: center; background-color: powderblue; - font-size: 20px; + font-size: 2.0rem; font-style: bold; margin-left: 87%; } @@ -404,6 +414,8 @@ p { .footerText { text-align: right; font-size: 3.0rem; + color: rgb(3, 26, 44); + font-style: bold; width: 100% height: 40px; margin: -55px; @@ -415,6 +427,9 @@ p { - +@media screen and (max-width: 800%) { + .pictureRow { + float: none; + width: auto;