Add files via upload

bdiaz12 · Aug 8, 2023 · 5c0fc3b · 5c0fc3b
1 parent f824894
commit 5c0fc3b
Show file tree

Hide file tree

Showing 5 changed files with 244 additions and 0 deletions.
diff --git a/IMG_8121-Editcopy.jpg b/IMG_8121-Editcopy.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>Portfolio Website</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+  <main>
+    <div class="container">
+    <div class="header">
+      <header>Basma Diaz</header>
+      <article>
+      <h2>Software Developer</h2>
+      </article>
+    </div>
+    <div class="contactInfoContainer">
+    <div class="contactInfo"> 
+      <h2 class="contactMe">Contact Me!</h2>
+
+      <ol>
+        <li class="socialListItem">
+          <img src="https://static-00.iconduck.com/assets.00/linkedin-icon-512x512-vkm0drb1.png" alt="LinkedIn Logo" class="socialLogo"/>
+          <a href="https://www.linkedin.com/feed/">LinkedIn</a>
+        </li>
+        <li class="socialListItem">
+           <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Octicons-mark-github.svg/2048px-Octicons-mark-github.svg.png" alt="LinkedIn Logo" class="socialLogo" />
+          <a href="https://github.com/bdiaz12?tab=repositories">GitHub</a>
+        </li>
+        <li class="socialListItem">
+          <img src="https://illustoon.com/photo/7764.png" alt="LinkedIn Logo" class="socialLogo" />
+          <a href="https://mail.google.com/mail/u/0/#inbox">Email</a>
+        </li>
+      </ol>
+    </div>
+    <img src="IMG_8121-Editcopy.jpg" alt="girl holding flowers" class="profileImage" />
+    </div>
+    <div class="centerColumn">
+      <h2>About Me</h2>
+    <hr>
+      <p>
+        I'm a software developer living in Austin, TX. I'm very passionate about web development and design, I find joy in collaborating with others to create meaningful projects.I have a dream and a passion of creating a user friendly marketing app to advertise local small homeservice businesses.
+      </p>
+
+
+      <h2>As a former marketing consultant, I'm interested in:</h2>
+      <ul>
+        <li>Ways to challenge my creativity</li>
+        <li>Design and create computer systems and applications to make them user-friendly</li>
+        <li>The ability to learn new things.</li>
+
+      </ul>
+
+    </div>
+    <footer class="footer">© Copyright Basma Diaz</footer>
+  </div>
+  </main>
+</html>
diff --git a/replit.nix b/replit.nix
@@ -0,0 +1,6 @@
+{ pkgs }: {
+  deps = [
+    pkgs.nodePackages.vscode-langservers-extracted
+    pkgs.nodePackages.typescript-language-server  
+  ];
+}
diff --git a/script.js b/script.js
diff --git a/style.css b/style.css
@@ -0,0 +1,180 @@
+html {
+  height: 100%;
+  width: 100%;
+}
+
+main {
+margin:20px;
+padding:0;
+height:100%;
+background-color:#ffffff;
+color:#000000;  
+text-align:center;
+font-family:Verdana, Arial, Helvetica, sans-serif;
+font-size:16px;
+}
+
+a {
+color:#cc0000;
+text-decoration:underline;
+}
+
+a:hover {
+color:#ffffff
+text-decoration:none;
+}
+
+ol {
+list-style-type:disc;
+}
+
+ul {
+list-style-type:disc;
+}
+
+li {
+margin:4px 0 5px 10px;
+}
+
+img {
+  width: 150px;
+  height: 180px;
+  margin: 10px 0 0 0;
+  border-radius: 50%;
+  border: 2px double gray;
+
+
+}
+
+.container { 	
+  margin:0 auto;
+  width:650px;
+  text-align:left;
+  vertical-align: middle;	
+  background-color:#ffffff;
+}
+
+
+
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height:160px;
+  background-color:#2c2c2c;
+  font-style: oblique;
+  text-align: center;
+}
+
+.header{
+margin:0;
+padding:20px 0 0 20px;
+font-size: 1.9em;
+letter-spacing:.1em;
+color:#e86d6d;
+font-weight:lighter;
+}
+
+.header h2 {
+margin:0;
+padding:0 0 0 20px;
+font-size:.4em;
+font-weight:lighter;
+letter-spacing:.1em;
+color:#eeeeee;
+}
+
+.contactInfoContainer {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  left: 20px;
+  top: 700px;
+
+}
+
+.contactInfo ul li {
+  list-style-type: none;
+  margin-left: unset;
+
+}
+
+.contactInfo ul {
+  padding: unset;
+}
+
+.leftColumn p {
+  padding:10px
+}
+
+
+.leftColumn h2 {
+margin:0;
+padding:10px 0 0 10px;
+font-size:1em;
+}
+
+.leftColumn ul {
+margin:0 0 0 0;
+list-style:none;
+}
+
+.leftColumn li {
+margin:4px 0 5px 10px;
+}
+
+.leftColumn li a {
+text-decoration:underline;
+}
+
+.leftColumn li a:hover{
+text-decoration:none;
+}
+
+.centerColumn { 	
+padding:0;
+background-color:#ffffff;
+}
+
+.centerColumn p {
+padding:10px
+}
+
+.centerColumn h2 {
+margin:0;
+padding:10px 0 5px 0;
+font-size: 2 em;
+letter-spacing:.1em;
+}
+
+.footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  background-color:#2c2c2c;
+  color: #ffffff;
+  height: 30px;
+}
+
+.socialLogo {
+  height: 50px;
+  width: auto;
+  margin-right: 10px;
+}
+
+.socialListItem {
+  display: flex;
+  align-items: center;
+}
+
+.profileImage {
+  height: 300px;
+  width: auto;
+  position: relative;
+  left: -90px;
+  top: -690px;
+
+}