Spaces:

school44s
/

OBTSX_project

Running

App Files Files Community

school44s commited on Feb 9, 2025

Commit

cce161b

verified ·

1 Parent(s): 0fabf08

Upload 2 files

Browse files

Files changed (2) hide show

VnexpressX/vnexpressX.html +142 -0
b7/b7.html +296 -0

VnexpressX/vnexpressX.html ADDED Viewed

	@@ -0,0 +1,142 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>vnexpressX - News</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f4f4f4;
+    }
+    header {
+      background-color: #333;
+      color: #fff;
+      padding: 10px 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    header h1 {
+      margin: 0;
+    }
+    header nav ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+    }
+    header nav ul li {
+      margin: 0 10px;
+    }
+    header nav ul li a {
+      color: #fff;
+      text-decoration: none;
+    }
+    main {
+      padding: 20px;
+    }
+    .article {
+      background: #fff;
+      margin: 20px 0;
+      padding: 15px;
+      border-radius: 5px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      display: flex;
+    }
+    .article-image {
+      width: 150px;
+      height: 150px;
+      border-radius: 5px;
+      margin-right: 15px;
+      object-fit: cover;
+    }
+    .article-content {
+      flex: 1;
+    }
+    .article-title {
+      margin: 0;
+      font-size: 1.5em;
+    }
+    .article-title a {
+      text-decoration: none;
+      color: #333;
+    }
+    .article-title a:hover {
+      color: #007BFF;
+    }
+    .article-description {
+      color: #666;
+    }
+    footer {
+      text-align: center;
+      padding: 10px 0;
+      background: #333;
+      color: #fff;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>vnexpressX</h1>
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Technology</a></li>
+        <li><a href="#">Health</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main>
+    <section id="news-container"></section>
+  </main>
+  <footer>
+    <p>&copy; 2025 vnexpressX. All rights reserved.</p>
+  </footer>
+  <script>
+    const articles = [
+      {
+        title: "Breaking News: Major Event Happens",
+        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        url: "#",
+        image: "https://via.placeholder.com/150",
+      },
+      {
+        title: "Tech Trends: New Innovations in 2025",
+        description: "Curabitur vel erat in ligula bibendum sollicitudin.",
+        url: "#",
+        image: "https://via.placeholder.com/150",
+      },
+      {
+        title: "Health Tips: Staying Fit During Winter",
+        description: "Pellentesque habitant morbi tristique senectus et netus.",
+        url: "#",
+        image: "https://via.placeholder.com/150",
+      },
+    ];
+    function renderArticles() {
+      const newsContainer = document.getElementById("news-container");
+      articles.forEach((article) => {
+        const articleElement = document.createElement("div");
+        articleElement.className = "article";
+        articleElement.innerHTML = `
+          <img src="${article.image}" alt="${article.title}" class="article-image" />
+          <div class="article-content">
+            <h2 class="article-title"><a href="${article.url}">${article.title}</a></h2>
+            <p class="article-description">${article.description}</p>
+          </div>
+        `;
+        newsContainer.appendChild(articleElement);
+      });
+    }
+    document.addEventListener("DOMContentLoaded", () => {
+      renderArticles();
+    });
+  </script>
+</body>
+</html>

b7/b7.html ADDED Viewed

	@@ -0,0 +1,296 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="main.css">
+</head>
+<body>
+    <style>
+    body{
+        margin: 0;
+        font-family: Arial, Helvetica, sans-serif;
+        background-color: black;
+        color: white;
+    }
+    .navbar{
+        display: flex;
+        justify-content: center;
+        background-color: #1d1a1a;
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+    }
+    .navbar a{
+        color: white;
+        text-decoration: none;
+        margin: 0 15px;
+        font-size: 18px;
+        padding: 8px 12px;
+        border-radius: 4px;
+        transition: all 0.3s ease;
+    }
+    .navbar a:hover{
+        background-color: #464444;
+    }
+    .navbar a.active{
+        color: #f7ca3e;
+        font-weight: bold;
+    }
+    #item_container_narration-ablink{
+        background-color: #0a0a0a;
+        margin: 3%;
+    }
+    #item_container_narration-explink{
+        background-color: #0a0a0a;
+        margin: 3%;}
+    #item_container_narration-portlink{
+        background-color: #0a0a0a;
+        margin: 3%;}
+    #item_container_narration-bllink{
+        background-color: #0a0a0a;
+        margin: 3%;}
+    #item_container_narration-contlink{
+        background-color: #0a0a0a;
+        margin: 3%;}
+    .border {
+        border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
+        border-width: 4px;
+        border-style: solid;
+        padding: 5px;
+        margin: 10%;
+        margin-top: 0;
+    }
+    .item{
+        background-color: #0c0c0c;
+        border-image: linear-gradient(to right, #cabf23 0%, #b78be9 100%) 1;
+        border-width: 4px;
+        border-style: solid;
+        padding: 5px;
+    }
+    </style>
+    <div class="navbar">
+        <a id="item_container_narration-ablink" href="#About">About</a>
+        <a id="item_container_narration-explink" href="#Experience">Experience</a>
+        <a id="item_container_narration-portlink" href="#Portfolio">Portfolio</a>
+        <a id="item_container_narration-bllink" href="#Blog">Blog</a>
+        <a id="item_container_narration-contlink" href="#Contact">Contact</a>
+    </div>
+    <div id="About" class="border">
+        <h1>About Me</h1>
+        <p>
+            Hi, I'm Alex—a passionate programmer and cybersecurity enthusiast. I specialize in building innovative solutions, solving complex problems, and protecting systems from potential threats. With years of experience in coding and security analysis, I've developed a deep understanding of how technology shapes our world.
+        </p>
+        <p>
+            I'm skilled in Python, C++, and AI development, focusing on creating smarter and safer systems. To me, every line of code is more than just instructions—it's a tool to drive progress and an art form to shape the future.
+        </p>
+        <p>
+            I believe technology holds the power to transform lives, and I'm committed to using my skills to make a meaningful impact. Let's connect and explore new ideas together! 😊
+        </p>
+        <h1>What I'm Doing</h1>
+        <div class="item">
+            <h2>Web design</h2>
+            <p>
+                I'm currently working on a web design project that involves creating a responsive and user-friendly interface for.
+            </p>
+            <p>
+                The most modern and high-quality design made at a professional level.
+            </p>
+        </div>
+        <div class="item">
+            <h2>Web development</h2>
+            <p>
+                I'm currently working on a web development project that involves creating a responsive and user-friendly interface for.
+            </p>
+            <p>
+                High-quality development of sites at the professional level.
+            </p>
+        </div>
+        <div class="item">
+            <h2>Mobile Apps</h2>
+            <p>
+                I'm currently working on a mobile app project that involves creating a responsive and user-friendly interface for.
+            </p>
+            <p>
+                Professional development of applications for iOS and Android.
+            </p>
+        </div>
+        <div class="item">
+            <h2>Chat bot</h2>
+            <p>
+                I'm currently working on a chat bot project that involves creating a responsive and user-friendly interface for.
+            </p>
+            <p>
+                Create a chat system bot based on previously provided knowledge (RAG)
+            </p>
+        </div>
+    </div>
+    <div id="Experience" class="border">
+        <h1>Experience</h1>
+        <div class="item">
+            <h2>Education</h2>
+            <p>
+                I have a degree in Computer Science from a reputable university.
+            </p>
+            <p>
+                I've also completed internships in cybersecurity and software development.
+            </p>
+        </div>
+        <div class="item">
+            <h2>Work Experience</h2>
+            <p>
+                I've been working as a software engineer for a tech company.
+            </p>
+            <p>
+                I've developed various software solutions, including web applications and AI systems.
+            </p>
+        </div>
+        <div class="item">
+            <p>
+                I've also worked on various personal projects, including a chatbot and a mobile app.
+            </p>
+            <p>
+                I'm currently working on a web development project that involves creating a responsive and user-friendly interface for.
+            </p>
+        </div>
+    </div>
+    <div id="Portfolio" class="border">
+        <h1>Portfolio</h1>
+        <div class="item">
+            <p>
+                I've developed various software solutions, including web applications and AI systems.
+            </p>
+            <p>
+                Here are some of my most recent projects:
+            </p>
+        </div>
+        <div class="item">
+            <p>
+                I've been working on a web development project that involves creating a responsive and user-friendly interface for.
+            </p>
+            <p>
+                The most modern and high-quality design made at a professional level.
+            </p>
+        </div>
+    </div>
+    <div id="Blog" class="border">
+        <div class="item">
+            <p>
+                I've also worked on various personal projects, including a chatbot and a mobile app.
+            </p>
+            <p>
+                I'm currently working on a web development project that involves creating a responsive and user-friendly interface for.
+            </p>
+        </div>
+        <div class="item">
+            <p>
+                I've been working on a chat bot project that involves creating a responsive and user-friendly interface for.
+            </p>
+            <p>
+                Create a chat system bot based on previously provided knowledge (RAG)
+            </p>
+        </div>
+    </div>
+    <div id="Contact" class="border">
+        <div class="item">
+            <p>
+                I'm available for freelance work, web development, and cybersecurity projects.
+            </p>
+            <p>
+                Let's connect and explore new ideas together! ��
+            </p>
+        </div>
+        <div class="item">
+            <p>
+                You can reach me at [your email address] or [your phone number].
+            </p>
+            <p>
+                I'm always looking for opportunities to make a meaningful impact.
+            </p>
+        </div>
+    </div>
+    <script>
+        var About_link = document.getElementById('item_container_narration-ablink');
+        var Experience_link = document.getElementById('item_container_narration-explink');
+        var Portfolio_link = document.getElementById('item_container_narration-portlink');
+        var Blog_link = document.getElementById('item_container_narration-bllink')
+        var Contact_link = document.getElementById('item_container_narration-contlink');
+        var About_responsive = document.getElementById('About');
+        var Experience_responsive = document.getElementById('Experience');
+        var Portfolio_responsive = document.getElementById('Portfolio');
+        var Blog_responsive = document.getElementById('Blog');
+        var Contact_responsive = document.getElementById('Contact');
+        About_link.addEventListener('click', function() {
+            About_link.classList.add('active');
+            Experience_link.classList.remove('active');
+            Portfolio_link.classList.remove('active');
+            Blog_link.classList.remove('active');
+            Contact_link.classList.remove('active');
+            About_responsive.style.display = 'block';
+            Experience_responsive.style.display = 'none';
+            Portfolio_responsive.style.display = 'none';
+            Blog_responsive.style.display = 'none';
+            Contact_responsive.style.display = 'none';
+        });
+        Experience_link.addEventListener('click', function() {
+            Experience_link.classList.add('active');
+            About_link.classList.remove('active');
+            Portfolio_link.classList.remove('active');
+            Blog_link.classList.remove('active');
+            Contact_link.classList.remove('active');
+            About_responsive.style.display = 'none';
+            Experience_responsive.style.display = 'block';
+            Portfolio_responsive.style.display = 'none';
+            Blog_responsive.style.display = 'none';
+            Contact_responsive.style.display = 'none';
+        });
+        Portfolio_link.addEventListener('click', function(){
+            Portfolio_link.classList.add('active');
+            About_link.classList.remove('active');
+            Experience_link.classList.remove('active');
+            Blog_link.classList.remove('active');
+            Contact_link.classList.remove('active');
+            About_responsive.style.display = 'none';
+            Experience_responsive.style.display = 'none';
+            Portfolio_responsive.style.display = 'block';
+            Blog_responsive.style.display = 'none';
+            Contact_responsive.style.display = 'none';
+        });
+        Blog_link.addEventListener('click', function() {
+            Blog_link.classList.add('active');
+            About_link.classList.remove('active');
+            Experience_link.classList.remove('active');
+            Portfolio_link.classList.remove('active');
+            Contact_link.classList.remove('active');
+            About_responsive.style.display = 'none';
+            Experience_responsive.style.display = 'none';
+            Portfolio_responsive.style.display = 'none';
+            Blog_responsive.style.display = 'block';
+            Contact_responsive.style.display = 'none';
+        });
+        Contact_link.addEventListener('click', function() {
+            Contact_link.classList.add('active');
+            About_link.classList.remove('active');
+            Experience_link.classList.remove('active');
+            Portfolio_link.classList.remove('active');
+            Blog_link.classList.remove('active');
+            About_responsive.style.display = 'none';
+            Experience_responsive.style.display = 'none';
+            Portfolio_responsive.style.display = 'none';
+            Blog_responsive.style.display = 'none';
+            Contact_responsive.style.display = 'block';
+        });
+    </script>
+</body>
+</html>