diff --git a/README.md b/README.md index b9c5e37..31da907 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # Personal Website - -If you have any notes, questions, or other general comments for us to read, please put +i believe i'm done! +wait i have to make multiple commits....... +(If you have any notes, questions, or other general comments for us to read, please put them in this README! Good luck and have fun :) diff --git a/about.css b/about.css new file mode 100644 index 0000000..388865b --- /dev/null +++ b/about.css @@ -0,0 +1,132 @@ +header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + background-color: #f5f5f5; + padding: 20px; + color: rgb(255, 255, 255); + width: 70%; + margin-left: 15%; + border-bottom: #a5a5a5 solid 1px; + + .brand { + font-family: inherit; + color: #a5a5a5; + text-align: center; + background-color: #f5f5f5; + font-weight: bold; + justify-content: left; + text-align: left; + font-size: 30px; + } + nav { + display: flex; + gap: 2ch; + justify-content: right; + font-family: inherit; + color: #000000; + text-align: right; + background-color: #f5f5f5; + } + nav a { + text-decoration: none; + color: #000000; + font-weight: bold; + font-size: 20px; + } +} +@media (max-width: 430px) { + header { + margin-left: 0%; + } +} +body { + display: flex; + flex-direction: column; + margin-left: 10%; + margin-right: 10%; + background-color: #f5f5f5; +} +* { + font-family: inherit; + box-sizing: border-box; +} +.quote { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + color: #3361c4; + height: auto; + width: 100%; + h2 { + color: #f5f5f5; + background-color: #3361c4; + font-family: inherit; + padding: 20px; + } +} +@media (max-width: 600px) { + body { + font-size: 70%; + } +} +button { + display: flex; + font-family: inherit; + background-color: #3361c4; + border: none; + color: white; + padding-block: 15px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: medium; + margin-block: 20px; + cursor: pointer; + border-radius: 5px; + align-content: center; + align-items: center; + width: 100%; +} +.button:hover { + background-color: #5e7fc5; + color: #dadada; + cursor: pointer; +} +img { + display: flex; + justify-content: flex-end; + width: 50%; + height: 40%; +} +h3 { + color: #000000; + background-color: #ffbf10; + font-family: inherit; + padding: 20px; +} + +section { + display: flex; + flex-direction: row; + gap: 2rem; + align-items: center; + justify-content: center; + background-color: #f5f5f5; + padding: 20px; + margin-bottom: 15px; + border-bottom: #a5a5a5 solid 1px; + gap: 2%; + background-clip: border-box; + background-color: white; +} +@media (max-width: 1000px) { + section { + flex-direction: column; + } +} +ul { + background-color: white; +} diff --git a/about.html b/about.html new file mode 100644 index 0000000..c7e6bc4 --- /dev/null +++ b/about.html @@ -0,0 +1,73 @@ + + + + + + About me + + + +
+

William Henry Gates

+ +
+ +
+
+

+ I insist call me Bill, Having a wide range of interests make it + difficult to choose, but i invest my time mostly in this: +

+
+
+ +
+

philanthropy & Global Development

+ + philan-photo +
    +
  • Climate Change:I've invested in clean energy and wrote How to Avoid + a Climate Disaster to share solutions.
    • +
  • The Gates Foundation: Focuses on global health, education, gender + equality, and poverty reduction. i am planning to donate nearly all + my wealth to it by 2045.
+ +
+ +
+

Technology & Innovation

+ + gate-micro-photo +
    +
  • Tech Advocacy: Though no longer active at Microsoft, i still engage + with product teams and invests in tech startups.
    • +
  • AI & Energy Innovation: I'm deeply interested in how emerging + technologies can solve global problems.
+ +
+ +
+

Intellectual

+ + smart-guy-ik +
    +
  • Travel: I've traveled extensively to understand global challenges + firsthand.
    • +
  • Board Games: I enjoy Settlers of Catan and Bridge, often playing + with Warren Buffett.
    • +
  • Reading: Usually i am done with a book a week, spanning science, + history, biographies, and fiction.
+ +
+ +
+
+ + + + + diff --git a/contactme.css b/contactme.css new file mode 100644 index 0000000..97485a1 --- /dev/null +++ b/contactme.css @@ -0,0 +1,128 @@ +button { + display: flex; + font-family: inherit; + background-color: #3361c4; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: medium; + margin: 15px 2px; + cursor: pointer; + border-radius: 5px; + align-content: center; + align-items: center; + width: 200px; +} +.button:hover { + background-color: #5e7fc5; + color: #dadada; + cursor: pointer; +} +* { + background-color: #f5f5f5; + font-family: inherit; + box-sizing: border-box; +} + +.quote { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + color: #3361c4; + height: auto; + width: 100%; + h2 { + color: #f5f5f5; + background-color: #3361c4; + font-family: inherit; + padding: 20px; + } +} + +.phone-number { + font-family: inherit; + color: #3361c4; + text-align: center; + padding-top: 20px; +} +body { + display: flex; + flex-direction: column; + margin-left: 0%; + margin-right: 0%; +} +label { + font-weight: bold; +} +.form-box { + gap: 10px; + display: flex; + flex-direction: column; + background-color: #f5f5f5; + padding: 20px; + margin-bottom: 15px; + width: 70%; + input, + textarea { + padding: 0.5em; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 1em; + } +} +section { + display: flex; + flex-direction: column; + align-items: center; +} +header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + background-color: #f5f5f5; + padding: 20px; + color: rgb(255, 255, 255); + width: 70%; + margin-left: 15%; + border-bottom: #a5a5a5 solid 1px; + + .brand { + font-family: inherit; + color: #a5a5a5; + text-align: center; + background-color: #f5f5f5; + font-weight: bold; + justify-content: left; + text-align: left; + font-size: 30px; + } + nav { + display: flex; + gap: 2ch; + justify-content: right; + font-family: inherit; + color: #000000; + text-align: right; + background-color: #f5f5f5; + } + nav a { + text-decoration: none; + color: #000000; + font-weight: bold; + font-size: 20px; + } +} + +@media (max-width: 600px) { + body { + font-size: 70%; + } + .form-box { + padding: 10px; + } +} diff --git a/contactme.html b/contactme.html new file mode 100644 index 0000000..f342e05 --- /dev/null +++ b/contactme.html @@ -0,0 +1,75 @@ + + + + + + Contact me + +
+ + +
+

Bill Gates

+ + +
+ +
+
+

+ If you have further questions, don't hesitate to get in touch. Bill. +

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ + diff --git a/home.css b/home.css new file mode 100644 index 0000000..55ad0ad --- /dev/null +++ b/home.css @@ -0,0 +1,126 @@ +header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + background-color: #f5f5f5; + padding: 20px; + color: #a5a5a5; + width: 70%; + margin-left: 15%; + border-bottom: #a5a5a5 solid 1px; + nav { + display: flex; + gap: 2ch; + justify-content: right; + font-family: inherit; + color: #000000; + text-align: right; + background-color: #f5f5f5; + } + nav a { + text-decoration: none; + color: #000000; + font-weight: bold; + font-size: 20px; + } +} +@media (max-width: 430px) { + header { + margin-left: 0%; + } +} +@media (max-width: 800px) { + header { + text-size-adjust: 60%; + } +} + +body { + display: flex; + flex-direction: column; + margin-left: 10%; + margin-right: 10%; +} +* { + background-color: #f5f5f5; + font-family: inherit; + box-sizing: border-box; +} +@media (max-width: 600px) { + main { + font-size: 70%; + } +} +h2 { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + height: auto; + width: 100%; + color: #f5f5f5; + background-color: #3361c4; + font-family: inherit; + padding: 20px; + margin-bottom: 0%; +} + +button { + display: flex; + font-family: inherit; + background-color: #3361c4; + border: none; + color: white; + padding-block: 15px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: medium; + margin-block: 20px; + cursor: pointer; + border-radius: 5px; + align-content: center; + align-items: center; + width: 100%; +} +.button:hover { + background-color: #5e7fc5; + color: #dadada; + cursor: pointer; +} +h3 { + color: #000000; + background-color: #ffbf10; + font-family: inherit; + padding: 20px; + background-clip: border-box; + margin-top: 0%; +} + +img { + display: flex; + justify-content: flex-end; + width: 50%; + height: 40%; +} +section { + display: flex; + flex-direction: row; + gap: 2rem; + align-items: center; + justify-content: center; + padding: 20px; + margin-bottom: 0%; + background-clip: border-box; + box-shadow: dark; + background-color: white; +} +@media (max-width: 1000px) { + section { + flex-direction: column; + } +} +p { + background-color: white; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..9477d9e --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + Personal Website + + + +
+

William Henry Gates

+ +
+ +
+

Programmer, Philantropist, Writer and more...

+
+ big-Billy-G +

+ Simply Bill, i'm passionate about innovation, especially in tech and + clean energy. Devoted to philanthropy tackling global health, poverty, + and education through the Gates Foundation. +

+ +

+ I believe in the power of technology to improve lives and create a + sustainable future. +

+
+ +