From 4391a7686680ed477b4bfd7224782370f948c0ab Mon Sep 17 00:00:00 2001 From: kody ta Date: Tue, 31 Jan 2023 22:01:15 -0500 Subject: [PATCH 1/2] finished project --- index.html | 31 ++++++++++++++++++++++++++++++- style/index.css | 44 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 73 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d01f779ff..cbb105ffd 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,37 @@ Document + - +
+

KODY TA

+ +

Introduction to my projects

+

I love to write music. +

+ +
+ +
+ + + + +
+ Some text will go here describing all the projects to the left. +
+
+ + + + \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..1549908a9 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,43 @@ -/* Add CSS styling here */ \ No newline at end of file +.topsection{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; +} + +footer{ + background-color: lightgrey; + text-align: center; + padding: 25px; +} + +.row{ + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.description{ + width: 200px; + text-align: center; + padding: 20px; +} + +button { + background-color: white; + color: black; + border:black solid 1px; + padding: 5px 10px; +} + +button:hover{ + background-color: black; + color: white; + border:white solid 1px; +} + +button a{ + text-decoration: none; + color: inherit; +} From b25b89a820d1fd79ec1895d56c43a8bacb90a27d Mon Sep 17 00:00:00 2001 From: kody ta Date: Wed, 1 Feb 2023 16:59:26 -0500 Subject: [PATCH 2/2] finished project --- index.html | 13 +++++---- style/index.css | 75 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 83 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index cbb105ffd..ccc4a83df 100644 --- a/index.html +++ b/index.html @@ -9,16 +9,19 @@

KODY TA

- -

Introduction to my projects

+ +

Introduction to my projects

I love to write music.

- +
+ +
+
@@ -27,7 +30,7 @@

Introduction to my projects

- Some text will go here describing all the projects to the left. +

Some text will go here describing all the projects to the left.

diff --git a/style/index.css b/style/index.css index 1549908a9..23e1fceeb 100644 --- a/style/index.css +++ b/style/index.css @@ -1,8 +1,52 @@ + +*{ + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +html{ + font-size: 62.5%; +} + +body{ + font-size: 1.6rem; + line-height: 1.5; +} + +section{ + padding: 4% 0; +} + +h1, h2{ + margin:2% 0; +} + +h1{ + font-size: 4rem; +} + +h2{ + font-size: 3.5rem; +} + .topsection{ display: flex; flex-direction: column; justify-content: center; text-align: center; + width: 80%; + margin: 0 auto; +} + +.bg-img{ + background-image: url('https://images.unsplash.com/photo-1675275013477-6ac381c759a2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60/>'); + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + height: 50vh; } footer{ @@ -41,3 +85,34 @@ button a{ text-decoration: none; color: inherit; } + + +@media(max-width: 800px){ + .row{ + flex-wrap: wrap; + } + .row img{ + width: 20%; + } + .row div{ + width:100%; + } +} +@media(max-width: 500px){ + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button{ + width: 40%; + margin: 1% 0; + } + .row{ + flex-wrap: wrap; + } + .row img{ + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file