BTEC Level 2 Personal Portfolio

Original coursework project with unrelated drafts and test files removed.

View websiteDownload filesBack to current portfolio
index.htmlHTML
<html lang="en">
<head>
      <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="styles.css">
  
    <title>Charis OT</title> 
     </head>
 <body align="center">
 <style>
.topnav {
  background-color: #000000;
  text-align: center;
}

.topnav a {
  margin-right: 20px;
  color: white;
  text-decoration: none;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh; 
  display: flex;
}

.image-cont {
  width: 50%; 
  height: 100vh; 
  position: relative; 
}

.image-cont img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}


.text-cont {
  position: absolute;
  right: 0%; 
  top: 50%; 
  transform: translateY(-50%); 
  color: white;
  background-color: #1a1a1a; 
  padding: 20px;
  border-radius: 10px;
  width: 900px;
  height: 500px;
}

@media (max-width: 768px) {
  .container {
    height: auto; 
    flex-direction: column; 
    align-items: center;
  }

  .image-cont, .text-cont {
    width: 100%;
  }
}

</style>
       
<nav class="topnav">
  <a href="index.html" class="split-left">Portfolio</a>
  <a href="about.html">About me</a>
  <a href="skills.html">Skills</a>
  <a href="projects.html">Projects</a>
  <a href="achievements.html">Achievements</a>
  <a href="faq.html">FAQS</a>
  <a href="hobbies.html">Hobbies</a>
</nav>

<div class="container">
  <div class="image-cont">
    <img src="mm.jpg" alt="Photo of Charis Oturubo">
</div>
<div class="text-cont" align="left">
  <h1 > Charis <br> Oturubo </h1>
  <p> I am a student at Harlow college studying BTEC IT level 2,<br> I am passionate about web, software development and penetration testing. </p>
  <a href="contact.html" class="contactme" align="left">Contact Me</a>
</div>
about.htmlHTML
<html lang="en">
<head>
      <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="stylesheet" href="styles.css">
	
    <title>About Me</title> 
     </head>
 <body align="center">
 <style>
 h2 {
 color: white;
 font-size: 40px;
 text-align: left;
 text-decoration: underline;
 }
 
  h3 {
 color: white;
 font-size: 20px;
 text-align: right;
 }

 .about-container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.about-title, .vision-text, .mission-text {
    display: inline-block;
    margin-right: 285px; 
}

.vision-text {
	display: inline-block;
}

.mission-text {
	display: inline-block;
}

 .about-container {
            display: flex;
            justify-content: space-between;
            margin: 0 100px;
        }

        .about-section {
            width: 30%;
            color: white;
            text-align: center;
        }

        p {
            font-size: 20px;
            color: #ccc;
        }

        body {
            background-color: #111;
            font-family: Arial, sans-serif;
			}
 

       
        
  
</style>	
	<nav class="topnav">
	 <a href="index.html" class="split-left">Charis Oturubo</a> &nbsp; &nbsp; &nbsp; &nbsp;
	  <a href="contact.html" class="split">Contact Me</a>
	 <a href="about.html"> About me</a> &nbsp; &nbsp; &nbsp;
	 <a href="skills.html"> Skills </a> &nbsp; &nbsp; &nbsp;
	 <a href="projects.html">Projects</a> &nbsp; &nbsp; &nbsp;
	 <a href="achievements.html">Achievements</a> &nbsp; &nbsp; &nbsp;
	 <a href="faq.html">FAQS</a> &nbsp; &nbsp; &nbsp;
	 <a href="hobbies.html">Hobbie</a>&nbsp; &nbsp; &nbsp;
	
	</nav>

<img src="1.jpg" alt="Trulli" width="510" height="333"> &nbsp; &nbsp;&nbsp; &nbsp;
<img src="2.jpg" alt="Trulli" width="510" height="333">&nbsp; &nbsp;&nbsp; &nbsp;
<img src="3.jpg" alt="Trulli" width="510" height="333">

<br>
<br>
<br>
<div class="about-container">
	<div class="about-section">
		<h2 class="about-title"> About me </h2>
		<p></p>
	</div>
	<div class="about-section">
		<h3 class="vision-text"> My vision </h3>
		<p> I hope to be a successfull penetration tester/ website devoler & designer, I really love coding but I would like to play basket ball or badmition at a professional level just as a backup incase I do not accompolish my first goal. </p>
	</div>
	<div class="about-section">
		<h3 class="mission-text"> My Mission </h3>
		<p> In order to accomplish my vision i am putting alot of work in learning what i can about coding trying to perfect my skill while also participating sporting event to raise my skill level in basketball and badminton</p>
	</div>
</body>
</html>






	  
skills.htmlHTML
<html lang="en">
<head>
      <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="stylesheet" href="styles.css">
	
    <title>My Skills</title> 
     </head>
 <body align="center">
 <style>
 .timeline {
  max-width: 800px;
  margin: 60px auto;
  padding: 0 20px;
}

.timeline h1 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.5rem;
  color: #C70039;
}

.timeline-container {
  position: relative;
  margin: 0;
  padding: 0;
  border-left: 3px solid #C70039;
}

.timeline-item {
  margin: 20px 0;
  position: relative;
  padding-left: 30px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 0;
  width: 16px;
  height: 16px;
  background-color: #C70039;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 3px #C70039;
  
}

.timeline-date {
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
}

.timeline-content {
  background: white;
  padding: 15px 20px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  
}

.timeline-content h2 {
  margin-top: 0;
  color: #333;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .timeline h1 {
    font-size: 2rem;
	color: #C70039;
  }
}  
 

       
        
  
</style>
	<nav class="topnav">
	 <a href="index.html" class="split-left">Charis Oturubo</a> &nbsp; &nbsp; &nbsp; &nbsp;
	 <a href="contact.html" class="split">Contact Me</a>
	 <a href="about.html"> About me</a> &nbsp; &nbsp; &nbsp;
	 <a href="skills.html"> Skills </a> &nbsp; &nbsp; &nbsp;
	 <a href="projects.html">Projects</a> &nbsp; &nbsp; &nbsp;
	 <a href="achievements.html">Achievements</a> &nbsp; &nbsp; &nbsp;
	 <a href="faq.html">Interest</a> &nbsp; &nbsp; &nbsp;
	 <a href="hobbies.html">Hobbie</a>&nbsp; &nbsp; &nbsp;
	</nav>

<section class="timeline">
    <h1>My Skills Over Time</h1>

    <div class="timeline-container">
      <div class="timeline-item">
        <div class="timeline-date">2021</div>
        <div class="timeline-content">
          <h2> Started Architure Study </h2>
          <p> Growin up i always loved hands on task so i took up architecture, I usually set my self different task, i built 3D models of houses, estates and multiple other things. i officailly started my study in 2021 when i joined high school.</p>
        </div>
      </div>

      <div class="timeline-item">
        <div class="timeline-date">2022</div>
        <div class="timeline-content">
          <h2>Started Web Development</h2>
          <p>I started learning how websites work and to create one of my own, at first i did not use html i used an extension called Elementor and was also using word press at thta time i thoguth making websites was easy cause 
		  i just dragged and dropped what i want into the website but now i know that there is much more to it.</p>
        </div>
      </div>

      <div class="timeline-item">
        <div class="timeline-date">2023</div>
        <div class="timeline-content">
          <h2>Python Programing</h2>
          <p> While studying more on IT i can across python my older brother told me that if i really want to get into it i should learn more than 1 computer language so i picked it up and i just recently made a currency converter program 
		  with error handling codes to make it less prone to crashing.</p>
        </div>
      </div>

      <div class="timeline-item">
        <div class="timeline-date">2025</div>
        <div class="timeline-content">
          <h2>Now Learning</h2>
          <p> I am now entirely focused on my IT career and i am expanding my knowlege in HTML, CSS, Python and Java Script.</p>
        </div>
      </div>
    </div>
  </section>
	 
projects.htmlHTML
<html lang="en">
<head>
      <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="stylesheet" href="styles.css">
	
    <title>My Projects</title> 
     </head>
 <body align="center">
 <style>
 html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

.card {
  background-color: #1a1a1a;
}

.container {
  padding: 0 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: black;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: grey;
}

 
 .h1 { 
    align: left;
	color: white:
	font-size: 20px;
	font-family: serif;
	}
   
 
.container p{
  color: white;
  font-size: 18px;
   }
   
.container button{
  background-color: #C70039;
  font-size: 18px;
   }

.container h2{
  color: white;
  font-size: 30px;
   }
  }
       
        
  
</style>
	<nav class="topnav">
	 <a href="index.html" class="split-left">Charis Oturubo</a> &nbsp; &nbsp; &nbsp; &nbsp;
	 <a href="contact.html" class="split">Contact Me</a>
	 <a href="about.html"> About me</a> &nbsp; &nbsp; &nbsp;
	 <a href="skills.html"> Skills </a> &nbsp; &nbsp; &nbsp;
	 <a href="projects.html">Projects</a> &nbsp; &nbsp; &nbsp;
	 <a href="achievements.html">Achievements</a> &nbsp; &nbsp; &nbsp;
	 <a href="faq.html">FAQS</a> &nbsp; &nbsp; &nbsp;
	 <a href="hobbies.html">Hobbie</a>&nbsp; &nbsp; &nbsp;
	</nav>

<br>
<br>
<br>
<br>
<br>
<div class="row">
  <div class="column">
    <div class="card">
      <img src="01.png" alt="Unit 13 website" style="width:100%" height="50%">
      <div class="container">
        <h2>Website Development.</h2>
        <p class="title">Unit 13</p>
        <p>This is my website development course work which i used some element i already knew from some of my practices and other clases and a lot of help from w3school.</p>
        <p><a href="../mobile-world-station-v2/index.html"><button class="button">Visit</button></a></p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img src="0.png" alt="graphic design" style="width:100%" height="50%">
      <div class="container">
        <h2>Grahpic Design</h2>
        <p class="title">Unit 6</p>
        <p> This is the finished product of my phone advert design for unit 6.</p>
		<br>
        <p><a href="unit6.html"><button class="button">Visit</button></a></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="03.png" alt="Animation" style="width:100%" height="50%">
      <div class="container">
        <h2>Animation</h2>
        <p class="title">Unit 4</p>
        <p>This is the finshed product of my healthy living aninamtion for unit 4. </p>
		<br>
        <p><button class="button">Visit</button></p>
      </div>
    </div>
  </div>
</div>
</body>
</html>
	 
achievements.htmlHTML
<html lang="en">
<head>
      <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="stylesheet" href="styles.css">
	
    <title>My Achievements</title> 
     </head>
 <body align="center">
 <style>
 html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

.card {
  background-color: #1a1a1a;
}

.container {
  padding: 0 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: black;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: grey;
}

 
 .h1 { 
    align: left;
	color: white:
	font-size: 20px;
	font-family: serif;
	}
   
 
.container p{
  color: white;
  font-size: 18px;
   }
   
.container button{
  background-color: #C70039;
  font-size: 18px;
   }

.container h2{
  color: white;
  font-size: 30px;
   }
       
        
  
</style>
	
	<nav class="topnav">
	 <a href="index.html" class="split-left">Charis Oturubo</a> &nbsp; &nbsp; &nbsp; &nbsp;
	 <a href="contact.html" class="split">Contact Me</a>
	 <a href="about.html"> About me</a> &nbsp; &nbsp; &nbsp;
	 <a href="skills.html"> Skills </a> &nbsp; &nbsp; &nbsp;
	 <a href="projects.html">Projects</a> &nbsp; &nbsp; &nbsp;
	 <a href="achievements.html">Achievements</a> &nbsp; &nbsp; &nbsp;
	 <a href="faq.html">FAQS</a> &nbsp; &nbsp; &nbsp;
	 <a href="hobbies.html">Hobbie</a>&nbsp; &nbsp; &nbsp;
	</nav>
<br>
<br>
<br>
<br>
<br>
<div class="row">
  <div class="column">
    <div class="card">
      <img src="13.jpeg" alt="Unit 13 website" style="width:100%" height="50%">
      <div class="container">
        <h2>Website Development.</h2>
        <p class="title">Unit 13</p>
        <p> After resubmission and carefull marking i ended up with a merit grade for my website, i admit this is not the best website but for my first i like to think of it as stepping stone toward greater things. </p>
        <p><a href="achievement-proof.html"><button class="button">Grade proof.</button></a></p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img src="6.png" alt="graphic design" style="width:100%" height="50%">
      <div class="container">
        <h2>Grahpic Design</h2>
        <p class="title">Unit 6</p>
        <p>After resubmission and carefull marking i ended up with a merit grade for my website, i admit this is not the best website but for my first i like to think of it as stepping stone toward greater things.</p>
		<p><a href="achievement-proof.html"><button class="button">Grade proof.</button></a></p>
      </div>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <img src="4.png" alt="Animation" style="width:100%" height="50%">
      <div class="container">
        <h2>Animation</h2>
        <p class="title">Unit 4</p>
        <p>After resubmission and carefull marking i ended up with a merit grade for my website, i admit this is not the best website but for my first i like to think of it as stepping stone toward greater things.</p>
		<p><a href="achievement-proof.html"><button class="button">Grade proof.</button></a></p>
      </div>
    </div>
  </div>
</div>
<br>
<br>
<a href="projects.html" class="contactme" align="left">To Inspect my project click here.</a>
<br>
<br>
<br>
<br>
</body>
</html>
	  
achievement-proof.htmlHTML
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title> Achievements Proof </title>
</head>
<body align="center">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img src="ach.jpeg" width="1400" height="700" align="center">
</body>
</html>
hobbies.htmlHTML
<html lang="en">
<head>
      <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="stylesheet" href="styles.css">
	
    <title>My Hobbies</title> 
     </head>
 <body align="center"> <style>
h2 {
 color: white;
 font-size: 40px;
 text-align: left;
 padding-left: 50;
 text-decoration: underline;
 }
 
  h3 {
 color: white;
 font-size: 20px;
 text-align: right;
 }

 .about-container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.about-title, .vision-text, .mission-text {
    display: inline-block;
    margin-right: 285px; 
}

.vision-text {
	display: inline-block;
}

.mission-text {
	display: inline-block;
}

 .about-container {
            display: flex;
            justify-content: space-between;
            margin: 0 100px;
        }

        .about-section {
            width: 30%;
            color: white;
            text-align: center;
        }

        p {
            font-size: 20px;
            color: #ccc;
        }

        body {
            background-color: #111;
            font-family: Arial, sans-serif;
			}
</style>
	<nav class="topnav">
	 <a href="index.html" class="split-left">Charis Oturubo</a> &nbsp; &nbsp; &nbsp; &nbsp;
	 <a href="contact.html" class="split">Contact Me</a>
	 <a href="about.html"> About me</a> &nbsp; &nbsp; &nbsp;
	 <a href="skills.html"> Skills </a> &nbsp; &nbsp; &nbsp;
	 <a href="projects.html">Projects</a> &nbsp; &nbsp; &nbsp;
	 <a href="achievements.html">Achievements</a> &nbsp; &nbsp; &nbsp;
	 <a href="faq.html">FAQS</a> &nbsp; &nbsp; &nbsp;
	 <a href="hobbies.html">Hobbie</a>&nbsp; &nbsp; &nbsp;
	 
	 </nav>
	 
<img src="h1.jpg" alt="Trulli" width="590" height="333"> &nbsp; &nbsp;&nbsp; &nbsp;
<img src="h2.jpg" alt="Trulli" width="590" height="333">&nbsp; &nbsp;&nbsp; &nbsp;
<img src="h5.jpg" alt="Trulli" width="590" height="333">

<br>
<br>
<br>
<div class="about-container">
	<div class="about-section">
		<h2 class="about-title"> Basketball </h2>
		<p>Growing up i never liked any sport but people around me always insisted I picked up basket ball as a sport and over the year i actually started liking it and now I am taking it seriously, I have joined some group to improve
		my skill and i have gotten my equipments to practice during my spare time.</p>
	</div>
	<div class="about-section">
		<h2 class="vision-text"> Coding</h2>
		<p> During my year 10 and 11 i wanted to study achitecture because i like creating thing, while i studied subjects relating to achitecture my mom insisted that i study It aswell, i found it frustratin at first but i quickly realised that i couls still
		create a multitude of different design and make it reach alot more people online and it could be of use to different people so i changed my course to IT but i havent still forgotten about my architecture dream.</p>
	</div>
	<div class="about-section">
		<h2 class="mission-text"> Badminton </h2>
		<p> Badminton is a sport i never thought of playing infact i only realised there was a sport called badminton when i was 16, I saw some my friends who were seniors playing in the field and they invited me to join suprisingly i was actually good at it and quickly picked it up and now i play from time tot o just to kill time. </p>
	</div>
</body>
</html>
faq.htmlHTML
<html lang="en">
<head>
      <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="stylesheet" href="styles.css">
	<script src="https://cdn.tailwindcss.com"></script>
	
    <title>FAQs</title> 
     </head>
 <body align="center"> 
 <style>
   .faq-section {
      max-width: 800px;
      margin: auto;
    }

    .faq-item {
      border: 1px solid #c30050;
      margin-bottom: 1rem;
      border-radius: 8px;
      overflow: hidden;
    }

    .faq-question {
      background-color: #000;
      color: white;
      padding: 1rem;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .faq-answer {
      display: none;
      background-color: #1e1e1e;
      padding: 1rem;
      color: #ccc;
    }

    .faq-question:hover {
      background-color: #c30050;
    }

    .rotate {
      transform: rotate(180deg);
      transition: transform 0.3s ease;
    }

    .hidden { display: none; }
.show { display: block; }

#faqs {
  margin-top: 3rem;
}

.faq-answer {
  transition: max-height 0.3s ease;
  overflow: hidden;
  display: none;
}

} 

</style>	
	<nav class="topnav">
	 <a href="index.html" class="split-left">Charis Oturubo</a> &nbsp; &nbsp; &nbsp; &nbsp;
	 <a href="contact.html" class="split">Contact Me</a>
	 <a href="about.html"> About me</a> &nbsp; &nbsp; &nbsp;
	 <a href="skills.html"> Skills </a> &nbsp; &nbsp; &nbsp;
	 <a href="projects.html">Projects</a> &nbsp; &nbsp; &nbsp;
	 <a href="achievements.html">Achievements</a> &nbsp; &nbsp; &nbsp;
	 <a href="faq.html">FAQS</a> &nbsp; &nbsp; &nbsp;
	 <a href="hobbies.html">Hobbie</a>&nbsp; &nbsp; &nbsp;
	 </nav>

<section id="faqs" class="max-w-3xl mx-auto p-6 text-white">
  <h2 class="text-3xl font-bold mb-6 text-center text-white">Frequently Asked Questions</h2>

  <div class="space-y-4">
    <div class="border border-pink-700 rounded-lg">
      <button onclick="toggleFAQ(this)" class="w-full text-left p-4 bg-black hover:bg-pink-900 flex justify-between items-center">
        <span class="font-semibold">What services do you offer?</span>
        <span class="text-pink-500 text-xl transition-transform">&#9660;</span>
      </button>
      <div class="p-4 hidden bg-gray-900 text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tincidunt neque. Sed bibendum, risus a imperdiet consectetur, urna nisl euismod sem, in sollicitudin orci turpis eget enim. Praesent magna lectus, hendrerit sodales dapibus vitae, bibendum sed tortor. Ut porta elit ac eros sagittis dictum. Praesent dignissim magna eu arcu dignissim consequat. Aliquam eu metus quis turpis faucibus faucibus non at leo. In quis odio imperdiet, maximus lacus vel, tempor tellus. Suspendisse at congue nisl, ac consectetur diam. Vestibulum fermentum ut magna ultricies blandit. Donec efficitur, lorem vel venenatis lobortis, purus odio efficitur magna, vel mattis nunc leo in ligula.

Donec ac vestibulum arcu. Cras sagittis elit orci, imperdiet feugiat arcu condimentum sit amet. Praesent eget felis posuere, bibendum magna lobortis, facilisis elit. Pellentesque aliquet pharetra neque eleifend sodales. Sed metus nisi, ultricies quis turpis at, sagittis condimentum felis. Pellentesque eget molestie turpis. Suspendisse et pharetra dolor, in sagittis odio. Morbi egestas sollicitudin sapien, a auctor felis suscipit sed. Nullam sed convallis dolor.

Sed tincidunt nec arcu ut pharetra. Duis velit tellus, porttitor sit amet nisi et, tincidunt porttitor nunc. Vivamus vel dolor faucibus, tristique mi et, tempus velit. Mauris nisl sem, egestas ut auctor quis, tristique ac nunc. Integer fermentum libero et aliquet mollis. In id mattis eros, at porta massa. Fusce malesuada interdum cursus. Integer euismod rhoncus metus, eu condimentum dolor auctor nec. Quisque vitae lorem id nulla semper vehicula at ut turpis.
      </div>
    </div>

    <div class="border border-pink-700 rounded-lg">
      <button onclick="toggleFAQ(this)" class="w-full text-left p-4 bg-black hover:bg-pink-900 flex justify-between items-center">
        <span class="font-semibold">How much do you charge?</span>
        <span class="text-pink-500 text-xl transition-transform">&#9660;</span>
      </button>
      <div class="p-4 hidden bg-gray-900 text-gray-300">
        Cras a ullamcorper ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus faucibus lacus et consectetur tristique. Morbi rhoncus nulla vitae bibendum aliquam. In quis nibh neque. Suspendisse gravida ante eu molestie lobortis. Sed lobortis neque ac lacinia molestie. In non dictum lectus. Duis dapibus nulla sit amet quam sagittis, eu congue nibh mollis. Suspendisse potenti. Quisque ultricies purus at libero congue aliquet. Nulla vestibulum dui vehicula bibendum efficitur. Suspendisse eros mauris, pellentesque ut auctor ac, hendrerit a elit. Aliquam erat volutpat.
      </div>
    </div>

    <div class="border border-pink-700 rounded-lg">
      <button onclick="toggleFAQ(this)" class="w-full text-left p-4 bg-black hover:bg-pink-900 flex justify-between items-center">
        <span class="font-semibold">Are you available right now?</span>
        <span class="text-pink-500 text-xl transition-transform">&#9660;</span>
      </button>
      <div class="p-4 hidden bg-gray-900 text-gray-300">
        Donec ac vestibulum arcu. Cras sagittis elit orci, imperdiet feugiat arcu condimentum sit amet. Praesent eget felis posuere, bibendum magna lobortis, facilisis elit. Pellentesque aliquet pharetra neque eleifend sodales. Sed metus nisi, ultricies quis turpis at, sagittis condimentum felis. Pellentesque eget molestie turpis. Suspendisse et pharetra dolor, in sagittis odio. Morbi egestas sollicitudin sapien, a auctor felis suscipit sed. Nullam sed convallis dolor.

Sed tincidunt nec arcu ut pharetra. Duis velit tellus, porttitor sit amet nisi et, tincidunt porttitor nunc. Vivamus vel dolor faucibus, tristique mi et, tempus velit. Mauris nisl sem, egestas ut auctor quis, tristique ac nunc. Integer fermentum libero et aliquet mollis. In id mattis eros, at porta massa.
      </div>
    </div>
  </div>
</section>

<script>
  function toggleFAQ(button) {
    const content = button.nextElementSibling;
    const arrow = button.querySelector('span:last-child');
    const isHidden = content.classList.contains('hidden');
    content.classList.toggle('hidden');
    arrow.classList.toggle('rotate-180');
    button.setAttribute('aria-expanded', isHidden);
  }
</script>
contact.htmlHTML
<html lang="en">
<head>
      <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

	
	<link rel="stylesheet" href="styles.css">
	
    <title>Contact Me</title> 
     </head>
 <body align="center">
<style>
 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Contact Section Styling */
.contact-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: transparent;
}

.contact-container {
    display: flex;
    max-width: 1100px;
    width: 100%;
}

.image-container {
    flex: 1;
}

.image-container img {
    width: 500;
    height: 600;
    object-fit: cover;
}

.contact-details {
    flex: 1;
    background: #1a1a1a;
    color: #fff;
    padding: 40px;
}

.contact-details h1 {
    font-size: 50px;
    margin-bottom: 20px;
    color: #C70039;
    text-align: left;
}

.contact-details p {
    font-size: 16px;
    margin-bottom: 20px;
    margin-left: 35px;
    text-align: left;
}

.contact-details ul {
    list-style: none;
    text-align: left;
}

.contact-details ul li {
    font-size: 18px;
    margin-bottom: 15px;
    text-align: left;
}

.contact-details i {
    margin-right: 0px;
    color: #C70039;
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }

    .contact-details {
        padding: 20px;
    }
}
</style>
	
<nav class="topnav">
	<a href="index.html" class="split-left">Portfolio</a> &nbsp; &nbsp; &nbsp; &nbsp;
	 <a href="about.html"> About me</a> &nbsp; &nbsp; &nbsp;
	 <a href="skills.html"> Skills </a> &nbsp; &nbsp; &nbsp;
	 <a href="projects.html">Projects</a> &nbsp; &nbsp; &nbsp;
	 <a href="achievements.html">Achievements</a> &nbsp; &nbsp; &nbsp;
	 <a href="faq.html">FAQS</a> &nbsp; &nbsp; &nbsp;
	 <a href="hobbies.html">Hobbie</a>&nbsp; &nbsp; &nbsp;
</nav>
<section class="contact-section">
        <div class="contact-container">
            <div class="image-container">
                <img src="mm.jpg" alt="Building Image">
            </div>
            <div class="contact-details">
                <h1> My Contacts </h1>
                <p> I can be contacted through the following source <br> and will get back to you within 24 hrs. </p>
                <ul>
                    <li><i class="fas fa-phone-alt"></i> +44 078-####-####</li>
                    <li><i class="fas fa-envelope"></i> 11250135@student.harlow-college.ac.uk </li>
                    <li><i class="fas fa-map-marker-alt"></i> Velizy Ave, Harlow CM20 3EZ</li>
                </ul>
            </div>
        </div>
    </section>
</body>
</html>
	 
unit6.htmlHTML
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title> Unit 6 </title>
</head>
<body align="center">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img src="6.png" width="900" height="700" align="center">
</body>
</html>
styles.cssCSS
* {box-sizing:boder-box}
	   body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #1a1a1a;
      background-repeat: no-repeat;
      background-attachment: fixed;  
      background-size: cover;
      margin: 0;
  padding: 0;
}

.topnav {
  background-color: #000000;
  padding: 10px 20px;
  text-align: center;
}

.topnav a {
  margin-right: 20px;
  color: white;
  text-decoration: none;
}

.topnav a.split {
  float: right;
  background-color: #C70039;
  color: white                                     ;
}

.topnav a.split-left {
  float: left;
  background-color: #C70039;
  color: black;
}
 
.topnav {
  overflow: hidden;
  background-color: #000000;
}

.topnav a {
  float: right;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: grey;
  color: white;
}

.topnav a.active {
  background-color: grey;
  color: black;
}

.topnav input[type=text] {
  float: right;
  padding: 6px;
  margin-top: 8px;
  margin-right: 16px;
  border: none;
  font-size: 17px;
}

@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 20%;
    margin: 0;
    padding: 14px;
  }
  
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}
.       logo {
    width: 20px; 
    height: 20px; 
    background: url('l2.png') no-repeat center center; 
    background-size: contain; 
    border-radius: 5%; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    margin: 20px ; 
} 

     a {
            color: black; 
            text-decoration: none; 
        }

        
        a:hover {
            color: red; 
        }

        
        a:visited {
            color: white; 
        }

        
        a:active {
            color: green; 
        }
		
		
  h1{ 
        color: white;
		font-size: 65px;
		text-align: center
		font-family: serif;
  }

.contactme {
  display: inline-block;
  padding: 15px 30px;  
  font-size: 18px;  
  background-color: #C70039; 
  color: white;  
  text-decoration: none;  
  border-radius: 5px;  
  cursor: pointer;  
  transition: background 0.3s ease;  
}

.contactme:hover {
  background-color: #444;
  color: #000000; 
}

.p title {
	color: white;
}