diff --git a/index.html b/index.html index d01f779ff..65c28e1d0 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,136 @@ - + + - + + + +
+ + + + - Document - - + 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 +
+
+ + +
+
+
+
+
Like what you see? + +

+
+ +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..c11be7437 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,435 @@ -/* 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 */ + +html { font-size: 62.5%; } /* =10px */ + +/* ## site styling begins*/ + + +h1 { + font-size: 10.0rem; + 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: 7.9rem; + 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: 1.5rem; + 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; +} + + +/* ## 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: .5rem; + font-size: 3.0rem; + 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: .5rem; + font-size: 3.0rem; + 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: 3.0rem; + 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: .5rem; + font-size: 3.0rem; + 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; +} + +/* /* ## two divs to go side by side with multiple nested divs using a parent div to house them in */ + +.parent { + display: flex; +} + +.container2 { + width: 50%; + background-color: none; +} + +.container3 { + width: 50%; + background-color: none; +} + +.container3Text { + border: 5px solid rgba(32, 30, 134, 0.233); + width: 100%; + height: auto; + max-width: 622px; + 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: 2.0rem; + font-style: bold; + + +} + +h3 { + font-size: 6.0rem; + 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: 2.5rem; + font-family: serif; + display: block; + padding-left: 33px; + margin: 14px auto; + margin-top: 1; + 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; + +} + +/* +

+
+
*/ + + +.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: 2.0rem; + font-style: bold; + margin-left: 87%; +} + +.footerText { + text-align: right; + font-size: 3.0rem; + color: rgb(3, 26, 44); + font-style: bold; + width: 100% + height: 40px; + margin: -55px; + margin-right: 18%; + +} + + + + + +@media screen and (max-width: 800%) { + .pictureRow { + float: none; + width: auto; + +