From 622d883711db8c7e5016d25128256554c552a411 Mon Sep 17 00:00:00 2001 From: ty Date: Thu, 3 Sep 2020 15:17:57 -0400 Subject: [PATCH 1/6] Finished HTML part of the project. --- index.html | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/index.html b/index.html index d01f779ff..ca87cba77 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,46 @@ Document + +
+

Tyler Matthews

+
+ Home + About + Contact + Projects + +
+
+
+
+

My first site created with HTML and CSS!

+

After almost a full week at Lambda School, I went from 0 knowledge + to being able to create this site from scratch.

+
+
+
+ +
+
+
+ + + + +
+
+

These are 4 projects that are not mine and are random photos + from https://picsum.photos.

+
+
+ \ No newline at end of file From dab64842ad64efc5377835d8efaadc2a10f65eea Mon Sep 17 00:00:00 2001 From: ty Date: Thu, 3 Sep 2020 18:37:00 -0400 Subject: [PATCH 2/6] Finished most of the css. Need to finish the bottom and footer --- index.html | 32 +++++++------ style/index.css | 117 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 135 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index ca87cba77..81546dd49 100644 --- a/index.html +++ b/index.html @@ -1,43 +1,49 @@ + + - Document - + Tyler's Projects +

Tyler Matthews

- Home - About - Contact - Projects + Home + About + Contact + Projects

My first site created with HTML and CSS!

+

After almost a full week at Lambda School, I went from 0 knowledge to being able to create this site from scratch.

+
-
- +
+
+ +
-
+
-
-

These are 4 projects that are not mine and are random photos - from https://picsum.photos.

-
+
+

These are 4 projects that are not mine and are random photos + from https://picsum.photos.

+
diff --git a/style/index.css b/style/index.css index 440e53514..7cedcc081 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,116 @@ -/* Add CSS styling here */ \ No newline at end of file +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; +} +html{ + background-color:white; +} +h1{ + text-align:center; + padding:3%; + font-size:4rem; + color:black; +} +h2{ + font-size:2rem; +} +h1,h2,h3,h4,h5,h6{ + font-family: 'Open Sans', sans-serif; +} +p{ + font-family: 'Montserrat', sans-serif; +} +/*Nav Bar Styles*/ +.headernavbar{ + display:flex; + justify-content:space-evenly + +} +.headernavbar a{ + display:flex; + background-color:BLACK; + color:white; + padding:1%; + font-size:1.5rem; + border-radius:50%; + text-decoration: none; + + + /*Header text styles*/ +} +.mysitetext{ + text-align:center; + padding:3%; +} +.mysitetext p{ + padding:1%; +} +/*background image*/ +.backimage img{ + max-width:100%; + display:flex; + height: 30rem; +} + +.backgroundimage{ +background-image: url("https://github.com/LambdaSchool/web-module-project-intro-css/blob/main/assets/header_img.jpg?raw=true"); +background-repeat:no-repeat; +background-size:cover; +background-position:center; +background-attachment:fixed; +width:100vw; +height:20vh; +padding:10%; +} +/*4 picutre section*/ +.sectionimages{ + display:flex; + flex-direction:row; + +} + +.fourimagesection div img{ +padding-top:4%; +display:flex; +justify-content:left; +padding-left:2%; +padding-bottom:2%; +border:2px solid red; +} +.fourimagesection div p{ +display:flex; +width:4rem; +height:4rem; +color:blue; +border:2px solid red; + +} + +.contactmefooter a{ + background-color:white; + color:black; + padding:1%; + margin-top:25%; + font-size:1.5rem; + text-decoration: none; + text-align:center; + border:2px solid red; + + +} \ No newline at end of file From c9692e1afb18270c7a903b18ea8c869ad246cb7e Mon Sep 17 00:00:00 2001 From: ty Date: Thu, 3 Sep 2020 19:22:38 -0400 Subject: [PATCH 3/6] Fixed the footer link --- index.html | 10 ++++++++-- style/index.css | 24 ++++++++++++++---------- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 81546dd49..9e16367b6 100644 --- a/index.html +++ b/index.html @@ -34,10 +34,16 @@

My first site created with HTML and CSS!

-
+
+
+
+
+
+
+
@@ -47,7 +53,7 @@

My first site created with HTML and CSS!

diff --git a/style/index.css b/style/index.css index 7cedcc081..47892c758 100644 --- a/style/index.css +++ b/style/index.css @@ -88,29 +88,33 @@ padding:10%; .fourimagesection div img{ padding-top:4%; display:flex; -justify-content:left; -padding-left:2%; -padding-bottom:2%; +flex-direction:row; border:2px solid red; } .fourimagesection div p{ display:flex; -width:4rem; -height:4rem; +flex-direction:row; +flex-wrap:none; +align-self:baseline; color:blue; -border:2px solid red; -} +} +.contactmefooter{ +padding:5%; +text-align:center; + +} .contactmefooter a{ - background-color:white; - color:black; + background-color:black; + color:white; padding:1%; margin-top:25%; font-size:1.5rem; text-decoration: none; text-align:center; - border:2px solid red; + border-radius:50%; + } \ No newline at end of file From d8cdb6ec7ff3fefecfce5d22e54c518a72f52932 Mon Sep 17 00:00:00 2001 From: ty Date: Thu, 3 Sep 2020 22:32:15 -0400 Subject: [PATCH 4/6] finsished css. --- index.html | 20 +++++++++++++------- style/index.css | 20 +++++++++----------- 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 9e16367b6..a211b6310 100644 --- a/index.html +++ b/index.html @@ -35,16 +35,22 @@

My first site created with HTML and CSS!

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

These are 4 projects that are not mine and are random photos diff --git a/style/index.css b/style/index.css index 47892c758..b9b816fe2 100644 --- a/style/index.css +++ b/style/index.css @@ -79,24 +79,22 @@ height:20vh; padding:10%; } /*4 picutre section*/ -.sectionimages{ - display:flex; - flex-direction:row; - -} -.fourimagesection div img{ -padding-top:4%; -display:flex; +.fourimagesection .fourimages img{ +display:inline-flex; flex-direction:row; -border:2px solid red; +justify-content:space-between; +margin-left:10%; +width:10%; +padding-top:3%; } .fourimagesection div p{ display:flex; -flex-direction:row; +justify-content:center; flex-wrap:none; align-self:baseline; -color:blue; +color:black; +align-items: flex-start; } From 13cce6ad565be369d6a40248519784f04396389d Mon Sep 17 00:00:00 2001 From: ty Date: Mon, 7 Sep 2020 22:41:31 -0400 Subject: [PATCH 5/6] Fixed 4 project photos from aligning correctly. --- .DS_Store | Bin 0 -> 6148 bytes index.html | 15 +++++++++------ style/index.css | 37 +++++++++++++++++++++---------------- 3 files changed, 30 insertions(+), 22 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..77e3aebbabaeb18603a3572dfc6a5ce2b2ab2f7c GIT binary patch literal 6148 zcmeHK(P|Sx6ur}?x>+qo5ZcFi5qt!d-r|gsuDyzfcW@Ec5H?|w2svK@@)v9u{es?q~J1e)>clHiX&fX5+ zjoyF4#9;y(x3U`sf5B%26H`2G_mVhGUL(tlo3xJ?*@LLBPY^v zqoaSRnv-a1w53(RDlo0UqJFIK`Tt=4{ePNdpR58_f&WSYQQB?qwlF1gw$4nB&sqsT rgtKwGu|`EfVUA-J@KL-9SB5&t0kCOstPvTQ{Si Tyler's Projects +

@@ -34,24 +35,26 @@

My first site created with HTML and CSS!

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

These are 4 projects that are not mine and are random photos from https://picsum.photos.

diff --git a/style/index.css b/style/index.css index b9b816fe2..a347cfc4f 100644 --- a/style/index.css +++ b/style/index.css @@ -80,24 +80,28 @@ padding:10%; } /*4 picutre section*/ -.fourimagesection .fourimages img{ -display:inline-flex; -flex-direction:row; -justify-content:space-between; -margin-left:10%; -width:10%; -padding-top:3%; -} -.fourimagesection div p{ -display:flex; -justify-content:center; -flex-wrap:none; -align-self:baseline; -color:black; -align-items: flex-start; +.imagesection1{ + + display:flex; + justify-content:space-evenly; + padding-top:5%; +} +.imagesection2{ + + display:flex; + justify-content:space-evenly; + padding-top:5%; } +.text p{ + text-align:center; + padding-top:6%; + font-size:1.5rem; +} + + + .contactmefooter{ padding:5%; text-align:center; @@ -115,4 +119,5 @@ text-align:center; -} \ No newline at end of file +} +/**/ \ No newline at end of file From 76561de1e13104e8ddb589fb1ed481c3beb0d9d5 Mon Sep 17 00:00:00 2001 From: ty Date: Mon, 7 Sep 2020 23:20:03 -0400 Subject: [PATCH 6/6] Fixed css media for tablets and mobile browsers. --- style/index.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/style/index.css b/style/index.css index a347cfc4f..e264795c2 100644 --- a/style/index.css +++ b/style/index.css @@ -20,6 +20,7 @@ vertical-align: baseline; } html{ background-color:white; + font-size:62.5%; } h1{ text-align:center; @@ -120,4 +121,10 @@ text-align:center; } -/**/ \ No newline at end of file +/*Media*/ +@media(max-width: 800px){ + +} +@media (max-width: 500px){ + +} \ No newline at end of file