diff --git a/week-2/css/style.css b/week-2/css/style.css new file mode 100644 index 0000000..870bf2d --- /dev/null +++ b/week-2/css/style.css @@ -0,0 +1,181 @@ +h1 { + display: flex; + justify-content: center; + text-decoration: underline red; +} + +h2 { + text-decoration: underline red; + margin: 0; +} + +ul { + padding: 0; +} + +li { + list-style-type: none; + padding: 0; +} + +a { + text-decoration: none; + color: black; + padding: 0; +} + +nav > ul > li > a { + display: flex; + justify-content: center; + padding: 5px; +} + +@media (min-width: 320px) { + main { + display: flex; + justify-content: center; + flex-direction: column; + } + img { + width: 15rem; + height: auto; + } + .photo { + display: flex; + justify-content: center; + } + .container { + display: flex; + justify-content: center; + flex-direction: column; + padding-left: 30px; + padding-right: 30px; + } + .about { + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + align-self: center; + width: 15rem; + padding-left: 30px; + padding-right: 30px; + } + .row-one { + display: flex; + justify-content: center; + flex-direction: column; + } + .row-two { + padding-top: 10px; + } +} + +@media (min-width: 375px) { + main { + display: flex; + justify-content: center; + flex-direction: column; + } + img { + width: 15rem; + height: auto; + } + .photo { + display: flex; + justify-content: center; + } + .container { + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + padding-left: 60px; + padding-right: 0; + } + .about { + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + align-self: center; + width: 15rem; + } + + .row-one { + display: flex; + justify-content: center; + flex-direction: column; + } + .row-two { + display: flex; + justify-content: center; + flex-direction: column; + padding-top: 10px; + } +} + +@media (min-width: 425px) { + .container { + width: 15rem; + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + align-self: center; + padding-right: 60px; + } + nav > ul > li > a { + display: flex; + justify-content: center; + padding: 5px; + } +} + +@media (min-width: 768px) { + header { + padding-bottom: 10px; + } + .row-one { + display: flex; + justify-content: space-evenly; + flex-direction: row; + align-self: center; + padding-bottom: 10px; + } + .row-two { + display: flex; + justify-content: space-evenly; + flex-direction: row; + align-self: center; + } + .about { + display: flex; + justify-content: flex-start; + align-items: flex-start; + padding: 0; + padding-right: 5rem; + margin: 0; + } + .container { + padding: 0; + margin: 0; + } + #left-col { + padding-right: 5rem; + } + nav { + align-self: center; + } + nav > ul { + display: flex; + justify-content: center; + flex-direction: row; + align-items: center; + align-self: center; + } + nav > ul > li > a { + padding: 0; + padding-right: 60px; + } +} diff --git a/week-2/images/picture.jpg b/week-2/images/picture.jpg new file mode 100644 index 0000000..5c0a3e5 Binary files /dev/null and b/week-2/images/picture.jpg differ diff --git a/week-2/index.html b/week-2/index.html new file mode 100644 index 0000000..af8ae02 --- /dev/null +++ b/week-2/index.html @@ -0,0 +1,70 @@ + + + + + + + Week 2 + + +
+

Dan Collette

+ +
+
+
+
+

About Me

+

+ My name is Dan Collette, I am a sophmore at the University of + Connecticut majoring in Digital Media and Design with a + Concentration in Web and Interactive Design. I'm from Middlebury, CT + which is a very small town with a population just under 8,000. In my + free time I enjoy skatboarding, hanging out with friends, or working + on personal projects. I'm looking forward to this semester and am + excited to develop my web design skills. +

+
+
+ A photo of me and a friend +
+
+
+
+

My Interests

+
    +
  • Skateboarding
  • +
  • Snowboarding
  • +
  • Mountian Biking
  • +
  • Photography
  • +
  • Visual Effects / Video Editing
  • +
+
+
+

Favorite Websites

+ +
+
+
+ + +