diff --git a/animation.html b/animation.html index e69de29..130fc56 100644 --- a/animation.html +++ b/animation.html @@ -0,0 +1,24 @@ + + + + + + CSS Animation + + + + +
+ Home +
+

CSS Animation Project

+

This project was a midterm for my Web II course where we were instructed to study a part of CSS that we did not know much about. I chose CSS animations and transitions.

+
+
+
+ CSS Showcase Gif + CSS Showcase Gif +
+ + + \ No newline at end of file diff --git a/css/animation.css b/css/animation.css new file mode 100644 index 0000000..3921748 --- /dev/null +++ b/css/animation.css @@ -0,0 +1,104 @@ +.flex{ + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + +} +@media(min-width:700px){ +.flex{ + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + padding: 70px; +} +} +p{ + font-family: 'Raleway', sans-serif; + font-weight: 300; + font-size: 20px; + margin: 0%; + +} +a.leftbutton{ + font-size: 25px; + color: black; + font-family: 'Raleway', sans-serif; + font-weight: 300; + border: black 2px solid; + padding: 10px; + text-decoration: none; + +} +a.leftbutton:hover{ + text-decoration: none; + color: white; + border: #1d9c9f 2px solid; + background-color: #1d9c9f; + -webkit-transition: ease-in .75s; + transition: ease-in .75s; +} +h1{ + margin:0%; + font-family: 'Abril Fatface', cursive; + +} +.right{ +display: -webkit-box; +display: flex; +-webkit-box-orient: vertical; +-webkit-box-direction: normal; + flex-direction: column; + margin: 30px; + +} +.gif{ + max-width: 500px; + max-height: 300px; +} +.box{ + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; +} + +@media(min-width:700px){ + .box{ + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + } + .right{ + padding-left: 4em; + margin: 0px; + } +} +@media(max-width:650px){ + .gif{ + max-width: 250px; + max-height: 150px; + } +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index b78fe17..db3b810 100644 --- a/css/style.css +++ b/css/style.css @@ -55,9 +55,7 @@ background-color: black; .navbar-light .navbar-nav{ margin-top: 20px; } -body{ - -} + .body{ background-image: url("../img/morepink.jpg"); background-position: center top; @@ -233,14 +231,22 @@ a.fab:hover{ 0%, 100%, 0% {-webkit-transform: translateY(0);transform: translateY(0);} 50% {-webkit-transform: translateY(-5px);transform: translateY(-15px);} } - i.fas{ + a.fas{ font-size: 5em; + color: black; } - i.fas:hover{ + a.fas:hover{ color: #1d9c9f; -webkit-transition: ease-in .75s; transition: ease-in .75s; + text-decoration: none; } + a.fas:visited{ + color: black; + -webkit-transition: ease-in .75s; + transition: ease-in .75s; + text-decoration: none; +} .section2{ padding: 45px; display: -webkit-box; @@ -251,7 +257,8 @@ a.fab:hover{ align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; - flex-direction: column; + flex-direction: column; + margin-bottom: 50px; } @media(min-width: 800px){ .section2{ @@ -283,9 +290,7 @@ a.fab:hover{ .innerBox{ padding-right: 25px; } - .box1{ - } .wrapper{ max-width: 700px; max-height: 700px; @@ -391,12 +396,14 @@ figure { display: -webkit-box; display: flex; -webkit-box-pack: center; - justify-content: center; + justify-content: center; -webkit-box-align: center; - align-items: center; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - flex-flow: row wrap; + align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-flow: row wrap; + padding-top: 40px; + padding-bottom: 40px; @@ -433,6 +440,7 @@ transition: ease-in .5s; text-align: center; font-family: 'Raleway',sans-serif; font-size: 25px; + text-shadow: 2px 2px 5px hotpink; } @@ -445,4 +453,49 @@ transition: ease-in .5s; -webkit-box-pack: center; justify-content: center; } - \ No newline at end of file +.foot{ + display: -webkit-box; + display: flex; + justify-content: space-around; + -webkit-box-align: center; + align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + margin-top: 2%; + margin-bottom: 2%; +} + @media(min-width:900px){ + .foot { + display: -webkit-box; + display: flex; + justify-content: space-around; + -webkit-box-align: center; + align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + } +} +.info{ + padding: 20px; +} +.buttonorg{ + display: -webkit-box; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + -webkit-box-align: center; + align-items: center; + align-items: center; +} +.footer{ + font-family: 'Raleway',sans-serif; + font-size: 20px; +} +.portfolio2{ + padding: 30px; + font-family: 'Raleway',sans-serif; + font-size: 20px; +} \ No newline at end of file diff --git a/img/CSS Showcase.gif b/img/CSS Showcase.gif new file mode 100644 index 0000000..2c7f26d Binary files /dev/null and b/img/CSS Showcase.gif differ diff --git a/img/CSS Showcase2.gif b/img/CSS Showcase2.gif new file mode 100644 index 0000000..a8b35c9 Binary files /dev/null and b/img/CSS Showcase2.gif differ diff --git a/img/Internship_Resume_Most_Recent.pdf b/img/Internship_Resume_Most_Recent.pdf new file mode 100644 index 0000000..8c13bf5 Binary files /dev/null and b/img/Internship_Resume_Most_Recent.pdf differ diff --git a/img/Resume.pdf b/img/Resume.pdf new file mode 100644 index 0000000..df23e91 Binary files /dev/null and b/img/Resume.pdf differ diff --git a/img/Resume/2020Resume_Internship.pdf b/img/Resume/2020Resume_Internship.pdf new file mode 100644 index 0000000..2272573 Binary files /dev/null and b/img/Resume/2020Resume_Internship.pdf differ diff --git a/img/Resume/2020_Internship_Resume.pdf b/img/Resume/2020_Internship_Resume.pdf new file mode 100644 index 0000000..2dba48c Binary files /dev/null and b/img/Resume/2020_Internship_Resume.pdf differ diff --git a/img/Resume/Internship_Resume_Most_Recent.pdf b/img/Resume/Internship_Resume_Most_Recent.pdf new file mode 100644 index 0000000..8c13bf5 Binary files /dev/null and b/img/Resume/Internship_Resume_Most_Recent.pdf differ diff --git a/img/Resume/MeiraResume_2020.pdf b/img/Resume/MeiraResume_2020.pdf new file mode 100644 index 0000000..56cf989 Binary files /dev/null and b/img/Resume/MeiraResume_2020.pdf differ diff --git a/img/Resume/Meira_Tompkins_Resume (9).pdf b/img/Resume/Meira_Tompkins_Resume (9).pdf new file mode 100644 index 0000000..3735247 Binary files /dev/null and b/img/Resume/Meira_Tompkins_Resume (9).pdf differ diff --git a/img/Resume/Meira_Tompkins_Resume.pdf b/img/Resume/Meira_Tompkins_Resume.pdf new file mode 100644 index 0000000..a298bb8 Binary files /dev/null and b/img/Resume/Meira_Tompkins_Resume.pdf differ diff --git a/img/Resume/Meira_Tompkins_Resume_1.pdf b/img/Resume/Meira_Tompkins_Resume_1.pdf new file mode 100644 index 0000000..08aa244 Binary files /dev/null and b/img/Resume/Meira_Tompkins_Resume_1.pdf differ diff --git a/img/Resume/Meira_Tompkins_Resume_10.JPG b/img/Resume/Meira_Tompkins_Resume_10.JPG new file mode 100644 index 0000000..e6a8e1d Binary files /dev/null and b/img/Resume/Meira_Tompkins_Resume_10.JPG differ diff --git a/img/Resume/Meira_Tompkins_Resume_10.pdf b/img/Resume/Meira_Tompkins_Resume_10.pdf new file mode 100644 index 0000000..28f85fd Binary files /dev/null and b/img/Resume/Meira_Tompkins_Resume_10.pdf differ diff --git a/img/Resume/resume.indd b/img/Resume/resume.indd new file mode 100644 index 0000000..e8ae9e0 Binary files /dev/null and b/img/Resume/resume.indd differ diff --git a/img/Resume/resume_2020.indd b/img/Resume/resume_2020.indd new file mode 100644 index 0000000..1bea294 Binary files /dev/null and b/img/Resume/resume_2020.indd differ diff --git a/img/Resume/resume_2020.pdf b/img/Resume/resume_2020.pdf new file mode 100644 index 0000000..df23e91 Binary files /dev/null and b/img/Resume/resume_2020.pdf differ diff --git a/img/Resume/resume_graphic_design_job.indd b/img/Resume/resume_graphic_design_job.indd new file mode 100644 index 0000000..2d51a7b Binary files /dev/null and b/img/Resume/resume_graphic_design_job.indd differ diff --git a/img/Resume/resume_graphic_design_job.pdf b/img/Resume/resume_graphic_design_job.pdf new file mode 100644 index 0000000..a1becac Binary files /dev/null and b/img/Resume/resume_graphic_design_job.pdf differ diff --git a/img/Resume/resume_graphic_design_job1.pdf b/img/Resume/resume_graphic_design_job1.pdf new file mode 100644 index 0000000..6f97ace Binary files /dev/null and b/img/Resume/resume_graphic_design_job1.pdf differ diff --git a/img/sand.png b/img/sand.png new file mode 100644 index 0000000..b9deee8 Binary files /dev/null and b/img/sand.png differ diff --git a/img/starwars2.jpg b/img/starwars2.jpg new file mode 100644 index 0000000..4cf3982 Binary files /dev/null and b/img/starwars2.jpg differ diff --git a/img/starwars3.jpg b/img/starwars3.jpg new file mode 100644 index 0000000..32ca031 Binary files /dev/null and b/img/starwars3.jpg differ diff --git a/img/umbridge screenshot.JPG b/img/umbridge screenshot.JPG new file mode 100644 index 0000000..18f0c58 Binary files /dev/null and b/img/umbridge screenshot.JPG differ diff --git a/img/umbridge.jpg b/img/umbridge.jpg new file mode 100644 index 0000000..49f65bf Binary files /dev/null and b/img/umbridge.jpg differ diff --git a/img/web1.png b/img/web1.png new file mode 100644 index 0000000..6371bf8 Binary files /dev/null and b/img/web1.png differ diff --git a/index.html b/index.html index 5c65599..7edb911 100644 --- a/index.html +++ b/index.html @@ -38,7 +38,7 @@
  • Home
  • About
  • Portfolio
    • -
  • Contact
    • +
  • Contact
    • @@ -50,12 +50,12 @@

    Designer // Coder // Artist

    - Resume + Resume
    - +
    @@ -70,7 +70,7 @@
    - +
    CSS Animation
    CSS Animation
    @@ -86,40 +86,51 @@
    - +
    Farmhouse Cafe
    - - - +
    - -
    Farmhouse Cafe
    + +
    Web
    - -
    Farmhouse Cafe
    + +
    Animation // Editing
    - -
    Farmhouse Cafe
    + +
    Miscellaneous
    - - -
    - -
    + +