diff --git a/Pictures/Collage.jpg b/Pictures/Collage.jpg new file mode 100644 index 000000000..266fdb56c Binary files /dev/null and b/Pictures/Collage.jpg differ diff --git a/Pictures/ICache.PNG b/Pictures/ICache.PNG new file mode 100644 index 000000000..a1f11f026 Binary files /dev/null and b/Pictures/ICache.PNG differ diff --git a/Pictures/ICheart.jpg b/Pictures/ICheart.jpg new file mode 100644 index 000000000..3b14af867 Binary files /dev/null and b/Pictures/ICheart.jpg differ diff --git a/Pictures/ICsoul.PNG b/Pictures/ICsoul.PNG new file mode 100644 index 000000000..1f01b1e6b Binary files /dev/null and b/Pictures/ICsoul.PNG differ diff --git a/Pictures/ICspirit.PNG b/Pictures/ICspirit.PNG new file mode 100644 index 000000000..dd6ea8fc4 Binary files /dev/null and b/Pictures/ICspirit.PNG differ diff --git a/Pictures/WPaid.jpg b/Pictures/WPaid.jpg new file mode 100644 index 000000000..a89d32c31 Binary files /dev/null and b/Pictures/WPaid.jpg differ diff --git a/Pictures/WPelate.jpg b/Pictures/WPelate.jpg new file mode 100644 index 000000000..0b68aad02 Binary files /dev/null and b/Pictures/WPelate.jpg differ diff --git a/Pictures/WPemc.jpg b/Pictures/WPemc.jpg new file mode 100644 index 000000000..03db722da Binary files /dev/null and b/Pictures/WPemc.jpg differ diff --git a/Pictures/WPstop.jpg b/Pictures/WPstop.jpg new file mode 100644 index 000000000..83f5ab69b Binary files /dev/null and b/Pictures/WPstop.jpg differ diff --git a/Pictures/flowerjacket.JPG b/Pictures/flowerjacket.JPG new file mode 100644 index 000000000..52b86e08d Binary files /dev/null and b/Pictures/flowerjacket.JPG differ diff --git a/Pictures/sparkel.jpg b/Pictures/sparkel.jpg new file mode 100644 index 000000000..807053b63 Binary files /dev/null and b/Pictures/sparkel.jpg differ diff --git a/Wireframe Options/ReadMe.md b/Wireframe Options/ReadMe.md index 2bf501338..2eb94a8f1 100644 --- a/Wireframe Options/ReadMe.md +++ b/Wireframe Options/ReadMe.md @@ -1,12 +1,12 @@ # Wireframes From the images above, chose a wireframe to guide your design for today's project. Remember that your final project must include: - -- [ ] A navigation bar with `About`, `Projects`, and `Contact` pages -- [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you. +option 3 +- [X] A navigation bar with `About`, `Projects`, and `Contact` pages +- [X] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you. - [ ] Information about you in place of the given placeholder - [ ] A `My Projects` button (doesn't need to be functional) - [ ] A `Contact Me` button (doesn't need to be functional) -- [ ] Link navigation items to new HTML pages +- [X] Link navigation items to new HTML pages Some choices are easier than others, pick something that feels right to you. \ No newline at end of file diff --git a/about.html b/about.html index df1043036..1f688bf82 100644 --- a/about.html +++ b/about.html @@ -1,11 +1,22 @@ + - - - Document + + + + + Document - -

ABOUT

- - \ No newline at end of file + + +
+
+

About Elizabeth Knoll

+
+ +
\ No newline at end of file diff --git a/contact.html b/contact.html index 7c293bd11..8f483fc23 100644 --- a/contact.html +++ b/contact.html @@ -1,11 +1,22 @@ + - - - Document + + + + + Document - -

CONTACT

- - \ No newline at end of file + + +
+
+

Contact Elizabeth Knoll

+
+ +
\ No newline at end of file diff --git a/elizabeth.knoll.txt b/elizabeth.knoll.txt new file mode 100644 index 000000000..79ec823ea --- /dev/null +++ b/elizabeth.knoll.txt @@ -0,0 +1,22 @@ + + +Q&A +// identify and explain all properties in the box model +1. content/center = text +2. padding = space around the text +3. border = defines the space outter edge of padding +4. Margin = space between the border and other content/ boxes on the page + +// describe and understand that flexbox is a module + once Display: flex; is placed it opens up a treasure chest of styling opt. Makes life so much easier + +Tasks stretch +// demonstrate understanding of flex container properties in flex box / +// Make your webpage work at different browser widths, including mobile +// Add CSS animations +// Design and execute your own wireframe for About, Projects, and Contact pages +// Host your website on Netlify.com + +RESPONSIVE webpage + + diff --git a/index.html b/index.html index d01f779ff..ce8f10079 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,116 @@ + - - - Document + + + + + + Document - + +
+ +
+ +
+

Elizabeth Knoll

+
+ + + +
+ + + + - + + + +
+ +
+ +
+ + +
+ +

Elizabeth Knoll

+ + + +

I suddenly began to design these one day just for fun, really. It grew and more words joined the word play more personal statements needed to be made visual and so thus the collage you see now came into being.

+ Simply let ART stART the heART. +
+ + +
+ + + + + + + +
+

Word Breakdown

+
+ +
+ Stop Sign wordbreakdown stay optimistic written out written on a real stopsign + e equals m c squared wordbreakdown emotions equals momentum times conciousness mind and body squared pic background chalkboard + elation wordbreakdown elevated language of vibration picture background has fireworks + Don't be afraid wordbreakdown for afraid, ask for aid background heart shaped bandaid vintage +
+ +
+

Image Creation

+
+ +
+ + + + +
+ + + + + + + + +
+ + +
+ + + +
+ + + + \ No newline at end of file diff --git a/projects.html b/projects.html index 266e620b0..79e8e9f65 100644 --- a/projects.html +++ b/projects.html @@ -1,11 +1,22 @@ + - - - Document + + + + + Document - -

PROJECTS

- - \ No newline at end of file + + +
+
+

Projects of Elizabeth Knoll

+
+ +
\ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..352a51cda 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,236 @@ -/* Add CSS styling here */ \ No newline at end of file +/* Add CSS styling here */ +html { + font-size: 62.5%; + +} +/* Reset */ +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; +} +/* Reset */ + +/* General */ +.maindiv { + width:80%; + margin:0 auto; +} + +h1 { + font-family:impact; + font-size:4rem; + margin:0% 0% 2% 0%; + padding:1%; +} +h2 { + font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size:3rem; + text-align:center; +} +h3 { + font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size:1.5rem; +} +p { + font-size:1.25rem; + font-family:roboto; + padding:1.0rem; + line-height:1.4; +} + span { + display:flex; + justify-content:flex-end; + } + /* General End */ + + /* Header */ +.container { + background-color:silver; + padding:20px; + margin:0x; +} +.container nav a { + margin:0% 0% 0% 2%; + padding:0.5rem; + border:solid black .13rem; + background-color:silver; +} +/* Header end */ + +/* Intro begin */ +.sec1 { + display:flex; +} +.introimg { + display:flex; + justify-content:space-around; + border:#4CAF50 .25rem; + max-height:20.5rem; + max-width:20.5rem; + box-sizing:border-box; + margin:0.25rem; +} +.sec1div, h3, a, p { + margin:0.2rem; + padding:0.5rem; +} +a { + border: radius .5rem; + background-color:#4CAF50; /* Green */ + border:none; + color: black; + padding:0.20rem; + text-align:center; + text-decoration:none; + font-size: 1.0rem; + margin:.5rem .25rem; + cursor:pointer; +} +a:hover{ + +} +/* intro end */ + +/* Gallery Begin */ +.secimggal1 { + width: auto; height: 15.0rem; + display: flex; + justify-content: space-around; + background-color: rgb(92, 70, 70); +} + +.secimggal2 { + width: auto; height: 20.0rem; + display: flex; + justify-content: space-around; + background-color: rgb(92, 70, 70); +} +/* Gallery End */ + +/* footer Begin */ +.footer { + text-align: center; + padding: .8rem; + font-size: .8rem; +} +footer div { + display: flex; + justify-content: center; +} +.footerdiv { + display: flex; + justify-content: flex-end; +} +.fa:hover { + opacity: 0.7; +} +.fa-facebook { +background: #3B5998; +color: white; +} +/* Footer End */ + +/* Media Queries */ + +/* tabelt */ +@media only screen and (min-width: 800px) { + +.secimggal1, .secimggal2 { + flex-wrap: wrap; +} + +} + +/* phone */ +@media only screen and (min-width: 500px) { + + .secimggal1, .secimggal2 { + flex-wrap: wrap; + } + + +} \ No newline at end of file