Benjamin ogzewalla

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

css/index.css

@@ -1 +1,268 @@
-/* Compile your LESS 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;
+}

index.html

@@ -14,6 +14,91 @@
 </head>
 
 <body>
-  <h1>My Resume</h1>
+  <div class="container">
+
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Portfolio</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+    </nav>
+
+    <header>
+      <div class="pro-pic">
+        <img src="img\Future.jpg" alt="Profile Pic">
+      </div>
+
+      <div class="character-disc">
+      <h1>Future Hendrix</h1>
+      <p>Founder Of Mumble Rap</p>
+      </div>
+
+      <div class="call-to-action">
+        <p>Do You Wanna Live That Low Life? You Can Learn To Take Your Mask Off Today!</p>
+        <button type="button">Join The Trap</button>
+      </div>
+    </header>
+
+    <section class="content">
+      <div class="about">
+        <h2>About</h1>
+        <p>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.</p>
+      </div>
+
+      <div class="awards">
+        <h2>Awards</h1>
+        <ul>
+          <li>BET's Best Male Hip Hop Artist</li>
+          <li>Grammy's Best Rap Performance (2019)</li>
+          <li>BET's Best Group (2016)</li>
+          <li>BET's Best Mixtape (2015)</li>
+          <li>BET's Best Club Banger (2014)</li>
+        </ul>
+      </div>
+    </section>
+
+
+    <section class="hits">
+      <h1>Top Songs</h1>
+
+      <div class="ul-grid">
+        <ul>
+          <li>Song #</li>
+          <li>1</li>
+          <li>2</li>
+          <li>3</li>
+          <li>4</li>
+          <li>5</li>
+        </ul>
+
+        <ul>
+            <li>Title</li>
+            <li>Mask Off</li>
+            <li>Low Life</li>
+            <li>Turn On the Lights</li>
+            <li>F*** Up Some Commas</li>
+            <li>Where Ya At</li>
+          </ul>
+
+          <ul>
+              <li>Year</li>
+              <li>2017</li>
+              <li>2016</li>
+              <li>2012</li>
+              <li>2015</li>
+              <li>2015</li>
+            </ul>
+      </div>
+    </section>
+
+
+    <div class="contact">
+      <h1>Contact</h1>
+      <p>Phone: 1-800-JoinTheTrap</p>
+      <p>Email: [email protected]</p>
+    </div>
+  </div>
 </body>
 </html>