diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/index.css b/css/index.css index 7dd97920d..adbdb8a1a 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,268 @@ -/* Compile your LESS file! */ \ No newline at end of file +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +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; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* Set every element's box-sizing to border-box */ +* { + box-sizing: border-box; +} +html, +body { + height: 100%; +} +.flex-center { + display: flex; + justify-content: center; +} +.flex-even { + display: flex; + justify-content: space-evenly; +} +.container { + width: 90%; + margin: auto; +} +.container nav ul { + display: flex; + justify-content: center; + padding-top: 10px; + background-color: #aaa9ad; + height: 40px; + border: 1px solid black; +} +.container nav ul li a { + font-family: Sans-serif; + padding: 15px; + text-decoration: none; + font-size: 1.2rem; + color: white; +} +.container .pro-pic { + text-align: center; + padding-top: 30px; +} +.container .pro-pic img { + border-radius: 100%; + height: 150px; + margin: auto; +} +.container .character-disc { + text-align: center; + font-family: Sans-serif; +} +.container .character-disc h1 { + font-size: 1.7rem; +} +.container .character-disc p { + font-size: 0.8rem; + padding-top: 5px; + color: #7F00AF; +} +.container .call-to-action { + text-align: center; + padding-top: 100px; + padding-bottom: 75px; +} +.container .call-to-action p { + font-family: Sans-serif; +} +.container .call-to-action button { + margin-top: 10px; +} +.container .content { + display: flex; + padding-top: 10px; + background-color: #aaa9ad; + height: 300px; + border: 1px solid black; +} +.container .content .about { + width: 40%; + padding-left: 15px; + font-family: Sans-serif; + text-align: center; +} +@media (max-width: 500px) { + .container .content .about { + width: 80%; + } +} +.container .content .about h2 { + font-size: 1.5rem; + padding-bottom: 10px; + color: #7F00AF; +} +.container .content .about p { + padding: 10px; +} +@media (max-width: 500px) { + .container .content .about p { + font-size: 0.7rem; + } +} +.container .content .awards { + text-align: center; + margin-left: auto; + margin-right: auto; +} +.container .content .awards h2 { + font-size: 1.5rem; + padding-bottom: 10px; + color: #7F00AF; +} +.container .content .awards li { + border: 1px solid black; + padding: 10px; +} +@media (max-width: 500px) { + .container .content .awards li { + padding: 5px; + } +} +.container .hits { + height: 200px; + padding-top: 20px; + border-bottom: 1px solid black; +} +.container .hits h1 { + text-align: center; + font-size: 1.5rem; + padding-bottom: 15px; + color: #7F00AF; +} +.container .hits .ul-grid { + display: flex; + justify-content: space-evenly; +} +.container .contact { + text-align: center; + padding-top: 20px; +} +.container .contact h1 { + font-size: 1.7rem; + padding-bottom: 10px; +} diff --git a/img/Future.jpg b/img/Future.jpg new file mode 100644 index 000000000..2aaf559b7 Binary files /dev/null and b/img/Future.jpg differ diff --git a/index.html b/index.html index a7f9e3ad1..615faa6f7 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,91 @@ -

My Resume

+
+ + + +
+
+ Profile Pic +
+ +
+

Future Hendrix

+

Founder Of Mumble Rap

+
+ +
+

Do You Wanna Live That Low Life? You Can Learn To Take Your Mask Off Today!

+ +
+
+ +
+
+

About

+

Nayvadius DeMun Wilburn (born November 20, 1983), known professionally as Future, is an American rapper, singer, songwriter, and record producer. Born and raised in Atlanta, Georgia. Between late 2014 and early 2015, he released a trio of mixtapes to critical praise: Monster (2014), Beast Mode (2015), and 56 Nights (2015). His next releases, DS2 (2015), What a Time to Be Alive (2015, in collaboration with Drake), Evol (2016), Future (2017), Hndrxx (2017), and The Wizrd (2019) all debuted at number one on the U.S. Billboard 200. Future and Hndrxx made him the first artist since 2014 to debut two albums in consecutive weeks atop of that chart.

+
+ +
+

Awards

+
    +
  • BET's Best Male Hip Hop Artist
    • +
  • Grammy's Best Rap Performance (2019)
    • +
  • BET's Best Group (2016)
    • +
  • BET's Best Mixtape (2015)
    • +
  • BET's Best Club Banger (2014)
    • +
+
+
+ + +
+

Top Songs

+ +
+
    +
  • Song #
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
+ +
    +
  • Title
    • +
  • Mask Off
    • +
  • Low Life
    • +
  • Turn On the Lights
    • +
  • F*** Up Some Commas
    • +
  • Where Ya At
    • +
+ +
    +
  • Year
    • +
  • 2017
    • +
  • 2016
    • +
  • 2012
    • +
  • 2015
    • +
  • 2015
    • +
+
+
+ + +
+

Contact

+

Phone: 1-800-JoinTheTrap

+

Email: FutureMail@yahoo.com

+
+
\ No newline at end of file diff --git a/less/index.less b/less/index.less index 191ce142e..365241c9d 100644 --- a/less/index.less +++ b/less/index.less @@ -56,4 +56,157 @@ table { html, body { height: 100%; } +.flex-center { + display: flex; + justify-content: center; +} + +.flex-even { + display: flex; + justify-content: space-evenly; +} + +@font-style: Sans-serif; +@color-1: #7F00AF; +@color-2: #aaa9ad; + + +.container { + width: 90%; + margin: auto; + + nav ul { + .flex-center(); + padding-top: 10px; + background-color: #aaa9ad; + height: 40px; + border: 1px solid black; + + li a{ + font-family: @font-style; + padding: 15px; + text-decoration: none; + font-size: 1.2rem; + color: white; + } + } + + .pro-pic { + text-align: center; + padding-top: 30px; + + img { + border-radius: 100%; + height: 150px; + margin: auto; + } + } + + .character-disc { + text-align: center; + font-family: @font-style; + + h1 { + font-size: 1.7rem; + } + + p { + font-size: .8rem; + padding-top: 5px; + color: @color-1; + } + } + + .call-to-action { + text-align: center; + padding-top: 100px; + padding-bottom: 75px; + + p { + font-family: @font-style; + } + button { + margin-top: 10px; + } + } + + .content { + display: flex; + padding-top: 10px; + background-color: @color-2; + height: 300px; + border: 1px solid black; + + .about { + width: 40%; + padding-left: 15px; + font-family: @font-style; + text-align: center; + + @media (max-width: 500px) { + width: 80%; + } + + h2 { + font-size: 1.5rem; + padding-bottom: 10px; + color: @color-1; + } + + p { + padding: 10px; + + @media (max-width: 500px) { + font-size: .7rem; + } + } + } + + .awards { + text-align: center; + margin-left: auto; + margin-right: auto; + + h2 { + font-size: 1.5rem; + padding-bottom: 10px; + color: @color-1; + } + li { + border: 1px solid black; + padding: 10px; + + @media (max-width: 500px) { + padding: 5px; + } + } + } + } + + .hits { + height: 200px; + padding-top: 20px; + border-bottom: 1px solid black; + h1 { + text-align: center; + font-size: 1.5rem; + padding-bottom: 15px; + color: @color-1; + } + + .ul-grid { + .flex-even() + } + } + + .contact { + text-align: center; + padding-top: 20px; + + h1 { + font-size: 1.7rem; + padding-bottom: 10px; + } + } +}