Code-the-Dream-School · J-C-X · Feb 11, 2023 · Feb 21, 2023 · Feb 21, 2023 · Feb 21, 2023
diff --git a/index.css b/index.css
@@ -0,0 +1,235 @@
+/* Change the background color of the page body */
+body {
+    background-color: #ffffff;
+  }
+
+  /* Change the default text color */
+  body {
+    color: #161616;
+  }
+
+  /* Define the font family for the entire page or just a section */
+  body {
+    font-family: Georgia, serif;
+  }
+
+  /* Header with links read horizontally */
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: #93ccdf;
+}
+
+/* Profile image and name styles */
+.profile-image {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  margin-right: 15px;
+}
+
+h1 {
+  margin: 0;
+}
+
+/* Navigation styles */
+.nav ul {
+  display: flex;
+  align-items: center;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav li {
+  margin-left: 15px;
+}
+
+.nav a {
+  text-decoration: none;
+  color: #333;
+  font-weight: bold;
+}
+
+.nav a:hover {
+  color: #555;
+}
+
+
+  /*  About  */
+  #about {
+    margin: 50px 0;
+    text-align: left;
+  }
+
+  #about h1 {
+    /* font-size: 36px;  */
+    margin-bottom: 20px;
+  }
+
+  #about p {
+    margin: 0 40px;
+    text-align: justify;
+    line-height: 1.5;
+  }
+
+
+  /* Styles for the rest of the website */
+  section {
+    margin-top: 40px;
+  }
+
+
+  /* Add spacing (padding/margin) between sections */
+  section {
+    padding-right: 10px;
+    margin-bottom: 10px;
+  }
+
+  /* Change the font size, weight, and color of all headings */
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 30px;
+    font-weight: bold;
+    color: #232222;
+  }
+
+  /* Transform the "Experience" list items into styled blocks */
+  #experience {
+    margin: 50px 0;
+  }
+
+  #experience h2 {
+    font-size: 30px;
+    margin-bottom: 20px;
+  }
+
+  #experience ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  #experience li {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 20px;
+    border: 2px solid #2985d1;
+  }
+
+  /* Transform the "Skills" list items into styled blocks */
+  #skills {
+    margin: 50px 0;
+  }
+
+  #skills h2 {
+    font-size: 30px;
+    margin-bottom: 20px;
+  }
+
+  #skills ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+  }
+
+  #skills li {
+    margin-right: 20px;
+    padding: 20px;
+    border: 2px solid #2985d1;
+  }
+
+  #skills li:last-child {
+    margin-right: 0;
+  }
+
+
+
+  /* Style the "Leave a Message" form elements */    
+  section {
+    margin: 50px 0;
+  }
+
+  section h2 {
+    font-size: 30px;
+    margin-bottom: 20px;
+  }
+
+  form {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  label {
+    width: 100%;
+    margin-bottom: 10px;
+    font-weight: bold;
+  }
+
+  input[type="text"],
+  input[type="email"],
+  textarea {
+    width: 100%;
+    padding: 10px;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    margin-bottom: 20px;
+  }
+
+  button[type="submit"] {
+    background-color: #2985d1;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+
+  button[type="submit"]:hover {
+    background-color: #2985d1;
+  }
+
+  /* Change the spacing and background color of the footer */
+  footer {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    font-size: 15px;
+    background-color: #93ccdf;
+  }
+
+  .social-icons {
+    display: flex;
+  }
+
+  .social-icons a {
+    display: inline-block;
+    margin-left: 10px;
+  }
+
+  .social-icons img {
+    width: 32px;
+    height: 32px;
+  }
+
+/* For mobile devices */
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+  }
+
+  .nav ul {
+    flex-direction: column;
+  }
+
+  .nav li {
+    margin-left: 0;
+    margin-bottom: 10px;
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<html>
+    <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>  
+        Jose Castillo
+    </title>
+    <link rel="stylesheet", href="index.css">   
+    </head> 
+<body>  
+    <header>
+        <div class="container">
+        <nav class="nav">
+            <ul>
+                <img src="C:\Users\Jose Castillo\Downloads\IMG_4455.jpg" alt="Jose_Castillo" class="profile-image"> <h1>Jose Castillo</h1>
+                <li><a href="#about">About</a></li>
+                <li><a href="#experience">Experience</a></li>
+                <li><a href="#skills">Skills</a></li>
+                <li><a href="#projects">Projects</a></li>
+                <li><a href="#leave_message">Messages</a></li>
+            </ul>
+        </nav>
+    </header>    
+
+<main>
+    <div class="container">
+
+<section id="about">  
+<h1>About</h1> 
+<p>
+    Currently a student at East Los Angeles College and will soon transfer majoring
+    in Computer Science. In my free-time I like to go around Los Angeles trying out 
+    new places and going on hikes with my friends. Additionally, I'm very passionate
+    about constantly learning so I also enjoy reading when I have the chance.
+</p>
+</section>
+
+<section id="experience">  
+<h2>Experience</h2>  <p>
+<ul>
+    <li><strong> Digital Marketing Intern, Project Destined -- </strong>
+
+        <span>  June 2020 - Aug 2020</span></li>
+
+    <li><strong> Commercial Real Estate Intern, Project Destined -- </strong>
+
+        <span>  June 2021 - Aug 2021</span></li>
+
+    <li><strong> Code The Dream, Beginner Classes -- </strong>
+
+        <span>  Jan 2023 - Present</span></li>
+</ul>
+</p>   </section>
+
+<section id="skills">
+    <h2>Skills</h2> 
+    <ul> </ul>
+</section>
+
+<section id="projects">
+    <h2>Projects</h2>
+    <ul> </ul>
+  </section>  
+
+<section id="contact">  
+<h4>Connnect</h4> <ul> 
+<li>   Gmail: [email protected] </li>
+<li>   Email: [email protected] </li>
+</ul>
+</section>
+
+<section>
+    <h2>Leave a Message</h2>
+    <form id="leave_message">
+      <label for="usersName">Name:</label>
+      <input type="text" id="usersName" name="usersName" required>
+      <br>
+      <label for="usersEmail">Email:</label>
+      <input type="email" id="usersEmail" name="usersEmail" required>
+      <br><label for="usersMessage">Message:</label>
+      <textarea 
+        id="usersMessage" 
+        name="usersMessage" 
+        required
+        ></textarea><br>
+
+      <button type="submit">
+        Submit</button>
+    </form>
+</section>
+
+<section id="messages">
+    <h2>Messages</h2>
+    <ul id="messageList"></ul>
+</section>
+
+
+</div>
+</main>
+
+<footer> 
+    <div class="social-icons">
+        <a href="https://twitter.com/Jose_Castillo02" target="_blank">
+          <img src="C:\Users\Jose Castillo\Downloads\square-twitter.svg" alt="Twitter">
+        </a>
+        <a href="https://github.com/J-C-X" target="_blank">
+          <img src="file:///C:/Users/Jose%20Castillo/Downloads/square-github.svg" alt="GitHub">
+        </a>
+      </div>   
+</footer>
+<script src="index.js"></script>
+
+</body>
+</html>
+
+
+
+
+