diff --git a/images/beach.jpg b/images/beach.jpg new file mode 100644 index 000000000..e0e527bbd Binary files /dev/null and b/images/beach.jpg differ diff --git a/images/bird1.jpg b/images/bird1.jpg new file mode 100644 index 000000000..a3acd97cc Binary files /dev/null and b/images/bird1.jpg differ diff --git a/images/bird2.jpg b/images/bird2.jpg new file mode 100644 index 000000000..33eb55dec Binary files /dev/null and b/images/bird2.jpg differ diff --git a/images/cactus.jpg b/images/cactus.jpg new file mode 100644 index 000000000..f721f2936 Binary files /dev/null and b/images/cactus.jpg differ diff --git a/images/cow.jpg b/images/cow.jpg new file mode 100644 index 000000000..5d57fb41e Binary files /dev/null and b/images/cow.jpg differ diff --git a/images/nightbeach.jpg b/images/nightbeach.jpg new file mode 100644 index 000000000..bfcccaf67 Binary files /dev/null and b/images/nightbeach.jpg differ diff --git a/images/oakleaves.jpg b/images/oakleaves.jpg new file mode 100644 index 000000000..cd27a24dd Binary files /dev/null and b/images/oakleaves.jpg differ diff --git a/images/snowcactus.jpg b/images/snowcactus.jpg new file mode 100644 index 000000000..c06aa3ac7 Binary files /dev/null and b/images/snowcactus.jpg differ diff --git a/index.html b/index.html index 919fd6c59..1d3320c71 100644 --- a/index.html +++ b/index.html @@ -13,16 +13,59 @@
-
+ + +
+ +
+ +
+
+
+ +

Portfolio Piece

+
+
+ +

Portfolio Piece

+
+
+ +

Portfolio Piece

+
+
+ +
+
+ +

Portfolio Piece

+
+
+ +

Portfolio Piece

+
+
+ +

Portfolio Piece

+
+
+
+ + -
- -
\ No newline at end of file diff --git a/style/index.css b/style/index.css index 5c29597c1..a4e2fbd56 100644 --- a/style/index.css +++ b/style/index.css @@ -46,4 +46,74 @@ blockquote, q { margin:0; max-width:100%; border: 1px solid magenta - } \ No newline at end of file + } + +nav{ + display: flex; + justify-content: space-between; +} + +.top-section{ + display:flex; + justify-content:center; +} +.image-button{ + background-image: url("https://picsum.photos/600/400"); + background-repeat: no repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} +.row{ + display:flex; + justify-content: space-evenly; + flex-direction:row; + padding: 20px; +} +.portfolio-element{ + text-align:center; +} +button{ + background-color:lightgrey; + color:navy; + border: navy solid 1px; + padding: 5px 10px; +} +button:hover{ + background-color:black; + color:lightblue; + border: lightgrey 1px; +} +button a{ + text-decoration: none; + color:inherit; +} + +footer{ + background-color: lightblue; + padding: 20px; + text-align: center; +} + + + + + /*Media Queries go here*/ + +/*tablet view - 800px*/ +/*when the screen size reaches 800px or smaller these rules apply*/ +@media (max-width: 800px){ + + +} + + + +/*when the screen size reaches 500px or smaller these rules apply*/ +/*mobile view 500px*/ +@media (max-width: 500px){ + + +}