diff --git a/article/ai/images/ai-hero.jpg b/article/ai/images/ai-hero.jpg new file mode 100644 index 0000000..6aa2aaa Binary files /dev/null and b/article/ai/images/ai-hero.jpg differ diff --git a/article/ai/images/img1.jpg b/article/ai/images/img1.jpg new file mode 100644 index 0000000..ede87b5 Binary files /dev/null and b/article/ai/images/img1.jpg differ diff --git a/article/ai/images/img2.jpg b/article/ai/images/img2.jpg new file mode 100644 index 0000000..1d4289e Binary files /dev/null and b/article/ai/images/img2.jpg differ diff --git a/article/ai/images/img3.jpg b/article/ai/images/img3.jpg new file mode 100644 index 0000000..bd50d65 Binary files /dev/null and b/article/ai/images/img3.jpg differ diff --git a/article/ai/images/index.html b/article/ai/images/index.html new file mode 100644 index 0000000..f711cdf --- /dev/null +++ b/article/ai/images/index.html @@ -0,0 +1,244 @@ + + + + + + AI Revolution + + + + + + + +
+ + +
+ +
+ +

AI Revolution

+ +

+ The AI Revolution: Transforming the Way We Live +

+ +

+ Artificial Intelligence is reshaping how we live, work, and think — + creating a smarter and more connected future. +

+ +
+ ⏱ 10 min read + + 2026 +
+ +
+ +
+ +
+ + +

+ Artificial Intelligence is changing how we live, work, and think. + It is no longer just a tool used for automation, but a powerful force shaping our daily lives. + From smartphones to healthcare systems, AI is becoming deeply integrated into everything we do. + This transformation is not small — it represents a major shift in how humans interact with technology + and how decisions are made in the modern world. +

+ + AI Technology + +
+ "AI is the new electricity." – Andrew Ng +
+ +
+

+Artificial Intelligence is not just another technological advancement — it is a revolution that is reshaping the foundations of our world. Unlike previous innovations, AI does not simply improve existing systems; it transforms how decisions are made, how problems are solved, and how humans interact with technology. This shift marks the beginning of a new era where machines are no longer passive tools, but active participants in our daily lives. +

+ +
+

From Innovation to Revolution

+

+ Throughout history, many technologies have changed the way we live. However, most of them acted as tools that required human control and direction. Artificial Intelligence is different. It introduces systems that can learn, adapt, and improve independently. This ability shifts AI from being just an innovation to becoming a full-scale revolution, as it changes not only what we do, but how we think and operate. +

+
+ +
+

The Shift in Human–Machine Interaction

+

+ One of the most significant aspects of the AI revolution is how it transforms the relationship between humans and machines. Instead of simply following instructions, AI systems analyze data, recognize patterns, and make decisions. This creates a new dynamic where technology becomes a partner rather than a tool, influencing industries such as healthcare, education, and business in unprecedented ways. +

+
+ +
+

Why AI is Called a Revolution

+

+ AI is considered a revolution because of its scale and impact. It affects nearly every sector, from small daily tasks to large global systems. Unlike traditional technologies, AI continuously evolves by learning from data, making it more powerful over time. This constant growth means that its influence will only expand, reshaping economies, societies, and even the future of work. +

+
+ +
+

The Impact of the AI Revolution

+

+ The AI revolution is already transforming our world. It is automating complex processes, enhancing decision-making, and enabling innovations that were once impossible. In industries like healthcare, AI helps detect diseases earlier. In transportation, it supports the development of autonomous vehicles. These changes highlight how AI is not just improving systems, but redefining them entirely. +

+
+ +
+

Challenges Within the Revolution

+

+ Despite its benefits, the AI revolution also brings challenges. Questions about ethics, privacy, and job displacement are becoming more important. As AI systems gain more influence, it is essential to ensure they are developed and used responsibly. Managing this balance will be a key part of shaping the future of this revolution. +

+
+ +
+

The Future of the Revolution

+

+ The AI revolution is still in its early stages, and its full potential has yet to be realized. As technology continues to evolve, AI will become even more integrated into our lives, influencing how cities are built, how education is delivered, and how global challenges are solved. The future will not just be shaped by AI — it will be defined by it. +

+
+ +
+

Conclusion

+

+ Artificial Intelligence represents one of the most significant revolutions in human history. It is not simply about faster machines or smarter systems, but about a fundamental transformation in how the world operates. Understanding this revolution is essential, because it is already shaping the present — and will define the future. +

+
+
+ + + +
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/article/ai/index.html b/article/ai/index.html new file mode 100644 index 0000000..f711cdf --- /dev/null +++ b/article/ai/index.html @@ -0,0 +1,244 @@ + + + + + + AI Revolution + + + + + + + +
+ + +
+ +
+ +

AI Revolution

+ +

+ The AI Revolution: Transforming the Way We Live +

+ +

+ Artificial Intelligence is reshaping how we live, work, and think — + creating a smarter and more connected future. +

+ +
+ ⏱ 10 min read + + 2026 +
+ +
+ +
+ +
+ + +

+ Artificial Intelligence is changing how we live, work, and think. + It is no longer just a tool used for automation, but a powerful force shaping our daily lives. + From smartphones to healthcare systems, AI is becoming deeply integrated into everything we do. + This transformation is not small — it represents a major shift in how humans interact with technology + and how decisions are made in the modern world. +

+ + AI Technology + +
+ "AI is the new electricity." – Andrew Ng +
+ +
+

+Artificial Intelligence is not just another technological advancement — it is a revolution that is reshaping the foundations of our world. Unlike previous innovations, AI does not simply improve existing systems; it transforms how decisions are made, how problems are solved, and how humans interact with technology. This shift marks the beginning of a new era where machines are no longer passive tools, but active participants in our daily lives. +

+ +
+

From Innovation to Revolution

+

+ Throughout history, many technologies have changed the way we live. However, most of them acted as tools that required human control and direction. Artificial Intelligence is different. It introduces systems that can learn, adapt, and improve independently. This ability shifts AI from being just an innovation to becoming a full-scale revolution, as it changes not only what we do, but how we think and operate. +

+
+ +
+

The Shift in Human–Machine Interaction

+

+ One of the most significant aspects of the AI revolution is how it transforms the relationship between humans and machines. Instead of simply following instructions, AI systems analyze data, recognize patterns, and make decisions. This creates a new dynamic where technology becomes a partner rather than a tool, influencing industries such as healthcare, education, and business in unprecedented ways. +

+
+ +
+

Why AI is Called a Revolution

+

+ AI is considered a revolution because of its scale and impact. It affects nearly every sector, from small daily tasks to large global systems. Unlike traditional technologies, AI continuously evolves by learning from data, making it more powerful over time. This constant growth means that its influence will only expand, reshaping economies, societies, and even the future of work. +

+
+ +
+

The Impact of the AI Revolution

+

+ The AI revolution is already transforming our world. It is automating complex processes, enhancing decision-making, and enabling innovations that were once impossible. In industries like healthcare, AI helps detect diseases earlier. In transportation, it supports the development of autonomous vehicles. These changes highlight how AI is not just improving systems, but redefining them entirely. +

+
+ +
+

Challenges Within the Revolution

+

+ Despite its benefits, the AI revolution also brings challenges. Questions about ethics, privacy, and job displacement are becoming more important. As AI systems gain more influence, it is essential to ensure they are developed and used responsibly. Managing this balance will be a key part of shaping the future of this revolution. +

+
+ +
+

The Future of the Revolution

+

+ The AI revolution is still in its early stages, and its full potential has yet to be realized. As technology continues to evolve, AI will become even more integrated into our lives, influencing how cities are built, how education is delivered, and how global challenges are solved. The future will not just be shaped by AI — it will be defined by it. +

+
+ +
+

Conclusion

+

+ Artificial Intelligence represents one of the most significant revolutions in human history. It is not simply about faster machines or smarter systems, but about a fundamental transformation in how the world operates. Understanding this revolution is essential, because it is already shaping the present — and will define the future. +

+
+
+ + + +
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/article/ai/style.css b/article/ai/style.css new file mode 100644 index 0000000..13a9947 --- /dev/null +++ b/article/ai/style.css @@ -0,0 +1,500 @@ +:root { + --bg: #f9fafb; + --text: #111827; + --subtext: #6b7280; + --accent: #f97316; + --border: #e5e7eb; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +header { + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 5px 0; + background: white; + z-index: 1000; + border-bottom: 1px solid var(--border); + backdrop-filter: blur(10px); +} + +body { + font-family: 'Poppins', sans-serif; + background: var(--bg); + color: var(--text); + line-height: 1.9; +} + + +.nav { + max-width: 1200px; + margin: auto; + padding: 16px 20px; + display: grid; + grid-template-columns: 1fr auto 1fr; + justify-content: space-between; + align-items: center; +} + +.nav-left { + justify-self: start; +} + +.nav-links { + justify-self: center; + display: flex; + gap: 25px; +} + +.auth { + justify-self: end; + display: flex; + gap: 10px; +} + +.logo { + font-size: 18px; + font-weight: 600; + letter-spacing: 1px; +} + +.nav-links a { + font-size: 14px; + color: #6b7280; +} + +.auth a { + font-size: 14px; +} + +.nav-links a:hover { + color: #111827; +} + +/* Join / Login */ +.auth { + display: flex; + gap: 15px; + align-items: center; + font-size: 14px; +} + +.auth a { + text-decoration: none; + color: #111827; + font-weight: 500; +} + +.auth a:hover { + color: var(--accent); +} + +/* LAYOUT */ +.container { + max-width: 1100px; + margin: auto; + padding: 80px 20px; + display: grid; + grid-template-columns: 3fr 1fr; + gap: 60px; +} + +.hero { + background: linear-gradient(135deg, #f2e4d2, #ffffff); + padding: 80px 40px; + border-radius: 20px; + margin-bottom: 60px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.092); +} + +/* TAG */ +.hero .tag { + color: var(--accent); + font-weight: 600; + margin-bottom: 10px; +} + +/* TITLE*/ +.hero h1 { + font-size: 52px; + line-height: 1.2; + max-width: 800px; + margin-bottom: 20px; +} + +/* DESCRIPTION */ +.hero .desc { + font-size: 18px; + color: var(--subtext); + max-width: 600px; + margin-bottom: 20px; +} + +/* META */ +.hero .meta { + display: flex; + gap: 10px; + color: var(--subtext); + font-size: 14px; +} + +/* ARTICLE */ +article { + max-width: 700px; +} + +article h1 { + font-size: 48px; + line-height: 1.2; + margin-bottom: 20px; +} + +article h1::after { + content: ""; + display: block; + width: 60px; + height: 3px; + background: var(--accent); + margin-top: 10px; +} + +article p { + font-size: 18px; + line-height: 1.9; + color: #374151; + margin-bottom: 20px; + max-width: 700px; +} + +.intro { + font-size: 18px; + color: var(--subtext); + margin-bottom: 30px; +} + +.intro::first-letter { + font-size: 48px; + font-weight: bold; + color: var(--accent); +} + +article img { + width: 100%; + border-radius: 16px; + margin: 40px 0; + box-shadow: 0 20px 40px rgba(0,0,0,0.06); + transition: 0.3s; +} + +article img:hover { + transform: scale(1.02); +} + +/* HERO IMAGE */ +article img:first-of-type { + height: 350px; + object-fit: cover; +} + +/* TEXT */ +article p { + font-size: 18px; + color: #374151; + letter-spacing: 0.2px; +} + +/* SECTIONS */ +section { + margin-top: 80px; + +} + +section h2 { + font-size: 26px; + margin-bottom: 15px; + letter-spacing: -0.5px; +} + +section::after { + content: ""; + display: block; + width: 40px; + height: 2px; + background: var(--border); + margin-top: 40px; +} + +/* nth-child */ +article section:nth-child(odd) { + background: #f8fafc; + padding: 25px; + border-radius: 16px; +} + +/* BLOCKQUOTE */ +blockquote { + margin: 40px 0; + padding: 20px; + border-left: 4px solid var(--accent); + background: #fff7ed; + font-size: 18px; + font-weight: 500; +} + +/* VIDEO */ +iframe { + width: 100%; + height: 320px; + border-radius: 12px; + border: none; +} + +/* ASIDE */ +aside { + border: 1px solid var(--border); + padding: 25px; + border-radius: 16px; + background: #ffffff; + box-shadow: 0 10px 30px rgba(0,0,0,0.04); + position: sticky; + top: 120px; +} +.aside-box { + background: white; + padding: 20px; + border-radius: 16px; + margin-bottom: 20px; + box-shadow: 0 10px 30px rgba(0,0,0,0.03); +} +aside h3, +aside h4 { + margin-bottom: 15px; + font-size: 16px; + font-weight: 600; +} +aside ul { + list-style: none; + padding: 0; +} + +aside li { + margin-bottom: 12px; + padding-left: 14px; + position: relative; +} + +aside li::before { + content: ""; + width: 6px; + height: 6px; + background: var(--accent); + border-radius: 50%; + position: absolute; + left: 0; + top: 8px; +} +.author .name { + font-weight: 600; + margin-bottom: 5px; +} + +.author p { + font-size: 14px; + color: #6b7280; +} +.newsletter input { + width: 100%; + padding: 10px; + border-radius: 10px; + border: 1px solid #ddd; + margin: 10px 0; +} + +.newsletter button { + width: 100%; + padding: 10px; + background: var(--accent); + color: white; + border: none; + border-radius: 10px; + cursor: pointer; + transition: 0.3s; +} + +.newsletter button:hover { + transform: translateY(-2px); +} +.popular a { + text-decoration: none; + color: #374151; + transition: 0.3s; +} + +.popular a:hover { + color: var(--accent); +} + +/* RELATED SECTION */ + + +.related { + max-width: 1100px; + margin: 120px auto; + padding: 0 20px; +} + +.related h2 { + font-size: 28px; + margin-bottom: 30px; +} + +/* GRID */ +.cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 25px; +} + +/* CARD */ +.card { + background: white; + border-radius: 16px; + overflow: hidden; + transition: 0.3s; + box-shadow: 0 10px 30px rgba(0,0,0,0.04); +} + +.card:hover { + transform: translateY(-10px); +} + +/* IMAGE */ +.card img { + width: 100%; + height: 180px; + object-fit: cover; + transition: 0.3s; +} + +.card:hover img { + transform: scale(1.05); +} + +/* CONTENT */ +.card h3 { + padding: 12px 15px 5px; + font-size: 16px; +} + +.card p { + padding: 0 15px 15px; + font-size: 14px; + color: #6b7280; +} + +/* FOOTER */ +footer { + text-align: center; + padding: 40px; + color: var(--subtext); +} + +/* ANIMATION */ +article { + animation: fade 0.8s ease; +} + +@keyframes fade { + from {opacity: 0; transform: translateY(10px);} + to {opacity: 1;} +} + +/* RESPONSIVE */ +@media (max-width: 768px) { + .container { + grid-template-columns: 1fr; + } + + .cards { + grid-template-columns: 1fr; + } + + article h1 { + font-size: 32px; + } +} + +/* BACKGROUND OF JOIN - LOGIIN */ +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.4); + + display: none; + justify-content: center; + align-items: center; +} + +/* TO SHOW ONLY WHEN CLICK IT */ +.modal:target { + display: flex; +} + +/* BOX */ +.modal-box { + background: white; + padding: 40px; + border-radius: 16px; + width: 300px; + position: relative; + animation: pop 0.3s ease; +} + +/* CLOSE BOTTUN */ +.close { + position: absolute; + top: 10px; + right: 15px; + text-decoration: none; + font-size: 22px; + color: #333; +} + +/* FORMS */ +.modal-box input { + width: 100%; + margin: 10px 0; + padding: 10px; + border: 1px solid #ddd; + border-radius: 8px; +} + +.modal-box button { + width: 100%; + padding: 10px; + border: none; + background: var(--accent); + color: white; + border-radius: 8px; + cursor: pointer; +} + +/* ANIMATION */ +@keyframes pop { + from { + transform: scale(0.8); + opacity: 0; + } + to { + transform: scale(1); + } +} \ No newline at end of file diff --git a/careers/cv/images/83UcHeEojAXzmOslH4ZPi0P08hiMPV4Ub16b6aJI.jpg b/careers/cv/images/83UcHeEojAXzmOslH4ZPi0P08hiMPV4Ub16b6aJI.jpg new file mode 100644 index 0000000..f96f0c5 Binary files /dev/null and b/careers/cv/images/83UcHeEojAXzmOslH4ZPi0P08hiMPV4Ub16b6aJI.jpg differ diff --git a/careers/cv/images/main.png b/careers/cv/images/main.png new file mode 100644 index 0000000..7e293cc Binary files /dev/null and b/careers/cv/images/main.png differ diff --git a/careers/cv/images/squarespace-logo-11609377962nf6kmj9bpx.png b/careers/cv/images/squarespace-logo-11609377962nf6kmj9bpx.png new file mode 100644 index 0000000..1461dd5 Binary files /dev/null and b/careers/cv/images/squarespace-logo-11609377962nf6kmj9bpx.png differ diff --git a/careers/cv/images/tuwaiq logo.png b/careers/cv/images/tuwaiq logo.png new file mode 100644 index 0000000..4f147ac Binary files /dev/null and b/careers/cv/images/tuwaiq logo.png differ diff --git a/careers/cv/index.html b/careers/cv/index.html new file mode 100644 index 0000000..7c29a60 --- /dev/null +++ b/careers/cv/index.html @@ -0,0 +1,269 @@ + + + + + + + + + Wajn Portfolio + + +
+ + + +
+ +
+
+ Wajn Profile +
+
+

Hi, It's Wajn

+ +

I'm a

+ +

+ Computer Science graduate with strong academic performance and experience in web development + and software development. Passionate about building modern digital solutions and continuously + improving technical skills. +

+ + + + View My CV +
+
+ +
+

Education

+ +
+ +
+
+
+

Jazan University

+

Bachelor of Computer Science

+ GPA: 4.79 / 5 + 2021 - 2025 +
+
+ +
+
+
+

Courses & Certifications

+

AI & Web Development, Software Basics, 3D computer design

+ Self-learning + Online Platforms +
+
+ +
+
+
+

Continuous Learning

+

Flutter, UI/UX Design, Python-Django

+ Currently Improving Skills +
+
+ +
+ +
+

Skills

+ +
+ +
+

HTML & CSS

+
+
+
+
+ +
+

Python

+
+
+
+
+ +
+

Flutter

+
+
+
+
+ +
+

UI/UX

+
+
+
+
+ +
+

+ Always learning and improving !! +

+
+ +
+

Experience

+ +
+ + +
+ +

Digital Transformation Trainee

+ Royal Commission | 2025 +
+ +
+ Royal Commission Logo + +

+ During my training at the Royal Commission, I gained hands-on experience in digital transformation + processes and modern technologies. I worked on understanding workflows, analyzing systems, and how + organizations optimize performance through digital solutions. +

+ +

+ This experience strengthened my analytical thinking, communication skills, and ability to work + within a professional environment. +

+
+
+ + +
+ +

Freelance Web Designer

+ Squarespace Projects +
+ +
+ Web Design Logo + +

+ I designed and developed modern websites focusing on clean UI and responsive layouts. I worked + closely with clients to transform their ideas into functional digital experiences. +

+ +

+ This role enhanced my creativity, attention to detail, and ability to deliver user-centered designs. +

+
+
+ + +
+ +

Web Development Trainee using Python by (Django)

+ Tuwaiq Academy | Present +
+ +
+ Tuwaiq Academy Logo + +

+ I am currently enrolled in the Web Application Development Bootcamp at Tuwaiq Academy, + where I am gaining practical experience in building dynamic web applications using Django. + The program focuses on backend development, database management, and creating scalable + web systems following best practices. +

+ +

+ Through this intensive training, I am strengthening my skills in Python, Django framework, + and problem-solving, while working on real-world projects that simulate professional + development environments. +

+
+
+ +
+
+ +
+

Explore What Makes Me Different →

+

Swipe or scroll to discover

+ +
+
+

🚀 Real Impact

+

+ I build real-world projects that focus on user experience and practical solutions, not just theory. +

+
+ +
+

🧠 Problem Solving

+

+ I approach challenges with structured thinking, breaking down complex problems into clear solutions. +

+
+ +
+

📚 Continuous Learning

+

+ I constantly improve my skills through hands-on practice and real project development. +

+
+ +
+

🎨 Creative Thinking

+

+ I combine creativity with technical skills to design and build modern digital experiences. +

+
+ +
+

🐍 Django Journey

+

+ Currently building scalable web applications using Django with a strong backend foundation. +

+
+ +
+

⚡ Fast Learner

+

+ I quickly adapt to new technologies and environments, allowing me to grow efficiently in dynamic fields. +

+
+ +
+

🎯 Detail Oriented

+

+ I pay attention to small details in design and code to deliver high-quality results. +

+
+
+
+ + + + + + \ No newline at end of file diff --git a/careers/cv/style.css b/careers/cv/style.css new file mode 100644 index 0000000..e034c96 --- /dev/null +++ b/careers/cv/style.css @@ -0,0 +1,580 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + border: none; + outline: none; + font-family: 'Poppins', sans-serif; +} + +html{ + font-size: 62.5%; +} + +body{ + width: 100%; + min-height: 100vh; + overflow-x: hidden; + background-color: black; + color: white; +} + +header{ + margin-top: 20px; + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 1rem 9%; + background-color: transparent; + filter: drop-shadow(10px); + display: flex; + justify-content: space-between; + align-items: center; + z-index: 100; +} + +.logo{ + font-size: 3rem; + color: #b74b4b; + font-weight: 800; + cursor: pointer; + transition: 0.5s ease; +} + +.logo:hover{ + transform: scale(1.1); +} + +nav a{ + font-size: 1.8rem; + color: white; + margin-left: 4rem; + font-weight: 500; + transition: 0.3s ease; + border-bottom: 3px solid transparent; +} + +nav a:hover, +nav a.active{ + color: #b74b4b; + border-bottom: 3px solid #b74b4b; +} + +@media(max-width:995px){ + nav{ + position: absolute; + display: none; + top: 0; + right: 0; + width: 40%; + border-left: 3px solid #b74b4b; + border-bottom: 3px solid #b74b4b; + border-bottom-left-radius: 2rem; + padding: 1rem solid; + background-color: #161616; + border-top: 0.1rem solid rgba(0,0,0,0.1); + } + + nav.active{ + display: block; + } + + nav a{ + display: block; + font-size: 2rem; + margin: 3rem 0; + } + + nav a:hover, + nav a.active{ + padding: 1rem; + border-radius: 0.5rem; + border-bottom: 0.5rem solid #b74b4b; + } +} + +section{ + min-height: 100vh; + padding: 5rem 9% 5rem; + scroll-margin-top: 100px; +} + +.home{ + display: flex; + justify-content: center; + align-items: center; + gap: 8rem; + background-color: black; +} + +.home .home-content h1{ + font-size: 6rem; + font-weight: 700; + line-height: 1.3; +} + +span{ + color: #b74b4b; +} + +.home-content h3{ + font-size: 4rem; + margin-bottom: 1rem; + font-weight: 700; +} + +.home-content p{ + font-size: 1.6rem; +} + +.home-img{ + border-radius: 50%; +} +.home-img img{ + width: 33rem; + object-fit: cover; + border-radius: 55%; + position: relative; + + border: 3px solid #b74b4b; + box-shadow: + 0 0 15px #b74b4b, + 0 0 30px rgba(183,75,75,0.6), + 0 0 60px rgba(183,75,75,0.3); + + transition: 0.4s ease; +} +.home-img img:hover{ + transform: scale(1.05); + + box-shadow: + 0 0 25px #b74b4b, + 0 0 50px rgba(183,75,75,0.8), + 0 0 80px rgba(183,75,75,0.5); +} + +.social-icons a{ + display: inline-flex; + justify-content: center; + align-items: center; + width: 4rem; + height: 4rem; + background-color: transparent; + border: 0.2rem solid #b74b4b; + font-size: 2rem; + border-radius: 50%; + margin: 3rem 1.5rem 3rem 0; + transition: 0.3s ease; + color: #b74b4b; +} + +.social-icons a:hover{ + color: black; + transform: scale(1.3) translateY(-5px); + background-color: #b74b4b; + box-shadow: 0 0 25px #b74b4b; +} + +.btn{ + display: inline-block; + padding: 1rem 2.8rem; + background-color: black; + border-radius: 4rem; + font-size: 1.6rem; + color: #b74b4b; + letter-spacing: 0.3rem; + font-weight: 600; + border: 2px solid #b74b4b; + transition: 0.3s ease; + cursor: pointer; +} + +.btn:hover{ + transform: scale3d(1.03); + background-color: #b74b4b; + color: black; + box-shadow: 0 0 25px #b74b4b; +} + +.typing-text{ + font-size: 34px; + font-weight: 600; + min-width: 280px; +} + +.typing-text span{ + position: relative; +} + +.typing-text span::before{ + content: "software Developer"; + color: #b74b4b; + animation: words 20s infinite; +} + +.typing-text span::after{ + content: ""; + background-color: black; + position: absolute; + width: calc(100% + 8px); + height: 100%; + border-left: 3px solid black; + right: -8; + animation: cursor 0.6s infinite; +} + +@keyframes cursor{ + to{ + border-left: 3px solid #b74b4b; + } +} + +@keyframes words{ + 0%, 20%{ + content: "CS graduate"; + } + 21%, 40%{ + content: "Developer"; + } + 41%, 60%{ + content: "Web Designer"; + } + 61%, 80%{ + content: "Graphic Designer"; + } + 81%, 100%{ + content: "Content Writer"; + } +} + +@media (max-width: 1000px){ + .home{ + gap: 4rem; + } +} + +@media(max-width:995px){ + .home{ + flex-direction: column; + margin: 5rem 4rem; + } + + .home .home-content h3{ + font-size: 2.5rem; + } + + .home-content h1{ + font-size: 5rem; + } + + .home-img img{ + width: 70vw; + margin-top: 4rem; + } +} + +/* Education Section */ +#education h2{ + font-size: 3.5rem; + margin-bottom: 4rem; +} + +/* Timeline */ +.timeline{ + position: relative; + margin-left: 2rem; + padding-left: 2rem; + border-left: 2px solid #b74b4b; +} + +/* Item */ +.timeline-item{ + position: relative; + margin-bottom: 3rem; + padding-left: 2rem; +} + +/* Circle */ +.timeline-item .circle{ + position: absolute; + left: -10px; + top: 5px; + width: 15px; + height: 15px; + background: #b74b4b; + border-radius: 50%; +} + +/* Content Box */ +.timeline-item .content{ + background: #111; + padding: 2rem; + border-radius: 10px; + transition: 0.3s; +} + +.timeline-item .content:hover{ + transform: translateY(-5px); + background: #b74b4b; + color: black; +} + +/* Text */ +.timeline-item h3{ + font-size: 2rem; + margin-bottom: 0.5rem; +} + +.timeline-item p{ + font-size: 1.5rem; +} + +.timeline-item span{ + font-size: 1.3rem; + display: block; + margin-top: 0.5rem; +} + +.timeline-item small{ + font-size: 1.2rem; + color: #aaa; +} + +/* Skills Section */ +#skills h2{ + font-size: 4rem; + margin-bottom: 4rem; +} + +/* Container */ +.skills-container{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); + gap: 2.5rem; +} + +/* Card */ +.skill-card{ + background: #111; + padding: 2.5rem; + border-radius: 15px; + transition: 0.3s; + position: relative; +} + +.skill-card:hover{ + transform: translateY(-8px); + box-shadow: 0 0 25px rgba(183,75,75,0.6); +} + +/* Title */ +.skill-card h3{ + font-size: 2rem; + margin-bottom: 1.5rem; +} + +/* Bar */ +.bar{ + width: 100%; + height: 10px; + background: #222; + border-radius: 20px; + overflow: hidden; +} + +/* Fill */ +.fill{ + height: 100%; + border-radius: 20px; + background: linear-gradient(90deg, #b74b4b, #ff6b6b); +} + +/* skill % */ +.html{ width: 90%; } +.python{ width: 85%; } +.flutter{ width: 75%; } +.ui{ width: 80%; } + +.skill-card::after{ + content: attr(data-level); + position: absolute; + top: 20px; + right: 20px; + font-size: 1.4rem; + color: #aaa; +} + +/* note after %*/ +.skills-note{ + margin-top: 2rem; + font-size: 2rem; + color: #aaa; +} + +/* Experience Section */ +#experience h2{ + font-size: 4.5rem; + margin-bottom: 3rem; +} + +/* Card */ +.exp-card{ + background: #111; + padding: 3rem; + border-radius: 16px; + margin-bottom: 2rem; + border: 1px solid #222; + transition: 0.3s; +} + +/* Hover */ +.exp-card:hover{ + transform: translateY(-6px); + box-shadow: 0 0 30px rgba(183,75,75,0.4); + border-color: #b74b4b; +} + +/* Title */ +.exp-card h3{ + font-size: 2.6rem; + margin-bottom: 0.5rem; +} + +/* Subtitle */ +.exp-card span{ + font-size: 1.5rem; + color: #b74b4b; + display: block; + margin-bottom: 1.5rem; +} + +/* Layout */ +.exp-details{ + display: flex; + gap: 2rem; + align-items: flex-start; +} + +/* Logo */ +.exp-details img{ + width: 60px; + height: 60px; + object-fit: contain; +} + +/* Text container */ +.exp-text{ + flex: 1; +} + +#experience .exp-text p{ + line-height: 2.2; + color: #f1f1f1; +} + +/* Divider */ +.exp-text p:last-child{ + margin-bottom: 0; +} + +/* Achievement Section */ +#achievements h2{ + font-size: 4rem; + margin-bottom: 2rem; +} + +/* Slider */ +.slider{ + display: flex; + gap: 2rem; + overflow-x: auto; + scroll-behavior: smooth; + padding: 1rem 0; + scrollbar-width: none; +} +.slider::-webkit-scrollbar{ + display: none; +} +/* Card */ +.ach-card{ + min-width: 280px; + height: 170px; + background: rgba(255,255,255,0.03); + backdrop-filter: blur(10px); + border-radius: 20px; + padding: 2rem; + flex-shrink: 0; + transition: 0.4s; + border: 1px solid rgba(255,255,255,0.05); +} +/* Hover effect */ +.ach-card:hover{ + transform: translateY(-6px); + border: 1px solid #b74b4b; + background: rgba(183,75,75,0.08); +} +.ach-card:first-child{ + border: 1px solid #b74b4b; + background: rgba(183,75,75,0.08); +} + +.ach-card h3{ + font-size: 1.9rem; + margin-bottom: 0.8rem; +} + +.ach-card p{ + font-size: 1.9rem; + color: #aaa; +} +#achievements h2{ + font-size: 4.2rem; + margin-bottom: 1rem; +} + +.hint{ + font-size: 1.9rem; + color: #666; + margin-bottom: 2rem; +} + +#experience p{ + font-size: 1.7rem !important; +} + +/* Footer */ +footer{ + background: #000; + padding: 2rem 0; + overflow: hidden; + border-top: 1px solid #111; + margin-top: 5rem; +} + +/* content */ +.footer-track{ + display: inline-block; + white-space: nowrap; + font-size: 2rem; + color: #b74b4b; + animation: scrollText 15s linear infinite; + gap: 4rem; + + /* movement*/ + display: inline-block; + animation: scrollText 10s linear infinite; +} + +/* Animation */ +@keyframes scrollText{ + from{ + transform: translateX(0); + } + to{ + transform: translateX(-50%); + } +} diff --git a/careers/cv/wajn-cv.pdf b/careers/cv/wajn-cv.pdf new file mode 100644 index 0000000..cb74f9b Binary files /dev/null and b/careers/cv/wajn-cv.pdf differ diff --git a/css/introduction/images/logo.png b/css/introduction/images/logo.png new file mode 100644 index 0000000..e58a961 Binary files /dev/null and b/css/introduction/images/logo.png differ diff --git a/css/introduction/index.html b/css/introduction/index.html new file mode 100644 index 0000000..84c835f --- /dev/null +++ b/css/introduction/index.html @@ -0,0 +1,238 @@ + + + + + Bidaya + + + + + + + + + +
+
+ +
+

Start Your Business From Zero

+

Turn your idea into a real business with a clear, guided process.

+ +
+ Get Started + +
+
+
+
+ + +
+

About Us

+

+ We help you turn your ideas into real businesses step by step. +

+ +
+ + +
+

What We Offer

+ +
    +
  • Step-by-step guidance
  • +
  • Simple tools
  • +
  • Beginner friendly
  • +
  • Clear learning process
  • +
+
+ + +
+ + +
+
+

50+

+

Business Ideas

+
+ +
+

1000+

+

Users Started

+
+ +
+

20+

+

Guides

+
+ +
+

Step-by-Step

+

Clear Process

+
+
+ +
+
+ +

How It Works

+

A simple 5-step process to start your business

+ +
+ +
+ +
+
1
+

Find Your Idea

+

Choose a business idea that solves a real problem.

+
+ +
+
2
+

Plan

+

Create a simple and clear plan.

+
+ +
+
3
+

Budget

+

Understand your costs and profits.

+
+ +
+
4
+

Build

+

Start creating your product.

+
+ +
+
5
+

Launch

+

Introduce your business to the world.

+
+ +
+ + Start Your Journey → + +
+ +
+
+ +

Resources

+

Everything you need to start your business

+ +
+ +
+
+

Business Ideas

+

Get inspiration for your next startup.

+
+ Explore → +
+ +
+
+

Business Plan

+

Download a simple plan template.

+
+ Template → +
+ +
+
+

Marketing Guide

+

Learn how to grow your business.

+
+ Learn → +
+ +
+ +
+ + +
+

Contact Us

+

Have questions? Reach out to us anytime.

+ +
+ + + + + +
+
+ + + + + \ No newline at end of file diff --git a/css/introduction/start.html b/css/introduction/start.html new file mode 100644 index 0000000..9d92903 --- /dev/null +++ b/css/introduction/start.html @@ -0,0 +1,102 @@ + + + + + Start Journey + + + + + +
+ + + + + + + + + +
+
+
Step 1 / 5
+

Step 1: Find Your Idea

+

What problem do you want to solve?

+ + + + +
+ +
+
+
Step 2 / 5
+

Step 2: Plan

+

What is your main goal?

+ + + + +
+ +
+
+
Step 3 / 5
+

Step 3: Budget

+

How much will you start with?

+ + + + +
+ +
+
+
Step 4 / 5
+

Step 4: Build

+

What will you build first?

+ + + + +
+ +
+
+ +
Final Step
+ +

Your Business Plan

+ +
+ +
+

Your Idea

+

A business that solves a real problem and creates value.

+
+ +
+

Your Plan

+

A simple and clear roadmap to launch your idea.

+
+ +
+

Budget

+

Start small and grow step by step.

+
+ +
+

First Step

+

Build a basic version and test it.

+
+ +
+ + Start Again +
+ +
+ + + \ No newline at end of file diff --git a/css/introduction/style.css b/css/introduction/style.css new file mode 100644 index 0000000..de6f293 --- /dev/null +++ b/css/introduction/style.css @@ -0,0 +1,817 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --accent: #7CFF4F; + --subtext: #9ca3af; + --border: rgba(255,255,255,0.08); + --card-soft: rgba(255,255,255,0.02); +} + +/* BACKGROUND EFFECT */ +body { + font-family: 'Poppins', sans-serif; + color: white; + + background: + radial-gradient(circle at 20% 30%, rgba(66, 211, 18, 0.195), transparent 40%), + radial-gradient(circle at 80% 70%, rgba(123, 255, 79, 0.081), transparent 50%), + linear-gradient(135deg, #020d0a, #031a12, #020d0a); + + background-repeat: no-repeat; + background-attachment: fixed; +} + +body::before { + content: ""; + position: fixed; + width: 600px; + height: 600px; + background: radial-gradient(circle, rgba(0,255,150,0.2), transparent 70%); + top: -100px; + left: -100px; + filter: blur(120px); + animation: floatGlow 12s infinite alternate ease-in-out; + z-index: -1; +} + +body::after { + content: ""; + position: fixed; + width: 500px; + height: 500px; + background: radial-gradient(circle, rgba(4, 77, 46, 0.418), transparent 90%); + bottom: -100px; + right: -100px; + filter: blur(120px); + animation: floatGlow 15s infinite alternate ease-in-out; + z-index: -1; +} + +@keyframes floatGlow { + from { + transform: translate(0, 0); + } + to { + transform: translate(150px, 80px); + } +} + +/* NAVBAR */ +.navbar { + position: sticky; + top: 0; + z-index: 1000; + display: flex; + justify-content: space-between; + align-items: center; + margin: 20px; + padding: 15px 30px; + background: rgba(20, 20, 20, 0.6); + backdrop-filter: blur(12px); + border-radius: 50px; + border: 1px solid rgba(255,255,255,0.08); + box-shadow: 0 4px 20px rgba(0,0,0,0.4); +} + +/* NAV LINKS */ +/* left & right links */ +.nav-left, +.nav-right { + display: flex; + gap: 25px; +} + +/* center logo */ +.logo { + display: flex; + align-items: center; + gap: 10px; +} + +/* logo image size */ +.logo img { + width: 35px; + height: 35px; + object-fit: contain; +} + +/* NAVBAR LINKS */ +.navbar a { + color: white; /* main color */ + text-decoration: none; /* remove underline */ + font-size: 15px; + transition: 0.3s; + position: relative; +} + +/* remove purple visited color */ +.navbar a:visited { + color: white; +} + +/* hover color */ +.navbar a:hover { + color: #7CFF4F; +} + +/* underline animation */ +.navbar a::after { + content: ""; + position: absolute; + left: 0; + bottom: -5px; + width: 0%; + height: 2px; + background: #7CFF4F; + transition: 0.3s; +} + +.navbar a:hover::after { + width: 100%; +} + +/* HERO */ +.hero { + display: flex; + justify-content: center; + margin-top: 40px; +} + +.hero-card { + background: white; + color: black; + width: 85%; + border-radius: 30px; + padding: 50px; + display: flex; + align-items: center; + justify-content: space-between; + animation: fadeIn 1s ease; + box-shadow: 0 20px 50px rgba(0,0,0,0.3); +} + +/* HERO -- */ +.hero-card { + position: relative; + overflow: hidden; +} + +/* glow subtle inside card */ +.hero-card::before { + content: ""; + position: absolute; + width: 300px; + height: 300px; + background: radial-gradient(circle, rgba(124,255,79,0.15), transparent 70%); + top: -50px; + right: -50px; + filter: blur(80px); +} + + +/* ANIMATION */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* TEXT */ +.hero-text h1 { + font-size: 42px; +} + +.hero-text p { + margin-top: 15px; + color: #555; +} + +/* BUTTONS */ +.buttons { + margin-top: 20px; +} + +.primary { + background: #7CFF4F; + border: none; + padding: 12px 22px; + border-radius: 25px; + cursor: pointer; + display: inline-block; + text-decoration: none; + box-shadow: 0 4px 12px rgba(124,255,79,0.3); + transition: 0.3s; + color: black; +} + +.primary:hover { + transform: scale(1.08); + box-shadow: 0 10px 25px rgba(124,255,79,0.4); +} + +.secondary { + background: transparent; + border: 1px solid black; + padding: 12px 22px; + border-radius: 25px; + margin-left: 10px; + cursor: pointer; +} + +/* INTERACTIVE SECTION */ +.interactive { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + + +.interactive input { + display: none; +} + +.start-btn { + margin-top: 40px; + display: inline-block; +} + +/* card */ +.content { + display: none; + text-align: center; + max-width: 500px; + background: #1a1a1a; + padding: 40px; + border-radius: 25px; + box-shadow: 0 20px 50px rgba(0,0,0,0.5); + animation: fadeIn 0.5s ease; + position: relative; + overflow: hidden; +} +#step1:checked ~ .step1, +#step2:checked ~ .step2, +#step3:checked ~ .step3, +#step4:checked ~ .step4, +#step5:checked ~ .step5 { + display: block; +} + +/* GLOBAL SECTION STYLE */ +.section { + margin: 140px auto; + padding: 40px 20px; + width: 85%; + border-radius: 30px; + + background: rgba(255,255,255,0.02); + border: 1px solid rgba(255,255,255,0.06); + + backdrop-filter: blur(10px); +} + +.section h2 { + font-size: 32px; + margin-bottom: 10px; +} + +.section p { + color: var(--subtext); +} + +/* ABOUT */ +.about-container { + display: flex; + justify-content: space-between; + gap: 60px; + margin-top: 40px; + flex-wrap: wrap; +} + +/* LEFT SIDE */ +.about-left { + max-width: 300px; +} + +.about-list { + margin-top: 20px; + padding-left: 0; + list-style: none; +} + +.about-list li { + margin-bottom: 12px; + color: var(--subtext); + position: relative; + padding-left: 20px; +} + +.about-list li::before { + content: "•"; + position: absolute; + left: 0; + color: var(--accent); +} + +/* RIGHT SIDE */ +.about-right { + max-width: 400px; +} + +/* TOOLS GRID */ +.tools { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px; + margin-top: 20px; +} + +/* TOOL CARD */ +.tool { + padding: 15px; + border-radius: 15px; + background: rgba(255,255,255,0.03); + border: 1px solid rgba(255,255,255,0.05); + text-decoration: none; + color: white; + display: block; + transition: 0.3s; +} + +.tool:hover { + transform: translateY(-5px); + border-color: var(--accent); + box-shadow: 0 10px 25px rgba(0,0,0,0.3); +} + +/* TEXT */ +.tool span { + font-weight: 600; +} + +.tool p { + font-size: 13px; + color: var(--subtext); + margin-top: 5px; +} + +/* ABOUT--*/ + +.section.about { + padding: 60px 60px; + max-width: 1100px; + margin: 100px auto; +} + +.about-container { + gap: 40px; /* كان كبير */ +} + +.about-left { + max-width: 260px; +} + +.about-right { + max-width: 320px; +} + +.about h3 { + margin-bottom: 12px; +} + +.about-list li { + font-size: 14px; + margin-bottom: 10px; +} + +.tools { + gap: 12px; +} + +.tool { + padding: 16px; +} + +.tool:hover { + background: rgba(124,255,79,0.05); +} + + + + + +/* RESOURCES */ +.resources { + background: rgba(255,255,255,0.015); + padding: 100px 20px; + text-align: center; +} + +.resources-sub { + color: var(--subtext); + margin-bottom: 50px; +} + +.resources-container { + display: flex; + justify-content: center; + gap: 25px; + flex-wrap: wrap; +} + +/* CARD */ +.resource-card { + background: var(--card-soft); + border: 1px solid var(--border); + padding: 25px; + border-radius: 20px; + width: 260px; + transition: 0.3s; + text-align: left; + position: relative; + overflow: hidden; + cursor: pointer; +} + +/* hover effect */ +.resource-card:hover { + transform: translateY(-10px); + box-shadow: 0 15px 35px rgba(124,255,79,0.1); +} + +/* link */ +.resource-link { + display: inline-block; + margin-top: 15px; + color: var(--accent); + text-decoration: none; + font-size: 14px; +} + +.resource-link:hover { + text-decoration: underline; +} + +/* CONTACT */ +.contact { + border: 1px solid rgba(124,255,79,0.2); + box-shadow: 0 10px 40px rgba(124,255,79,0.05); + padding: 100px 40px; + text-align: center; +} + +.contact h2 { + width: fit-content; + margin: auto; + margin-bottom: 28px; + padding: 12px 40px; + border-radius: 20px; + background: rgba(124, 255, 79, 0.08); + border: 1px solid rgba(124,255,79,0.2); + color: rgba(124,255,79,0.7); + box-shadow: 0 4px 20px rgba(124,255,79,0.08); +} + +.contact p { + margin-bottom: 30px; +} + +.contact-box { + display: flex; + flex-direction: column; + gap: 25px; + align-items: center; +} + +.contact-box input, +.contact-box textarea { + width: 300px; + padding: 12px; + border-radius: 10px; + border: none; +} + +.contact-box textarea { + height: 100px; +} + +.content h1 { + font-size: 32px; + margin-bottom: 15px; +} + +.content p { + color: #aaa; + margin-bottom: 25px; +} + +/*STATS BAR*/ +.stats { + margin: 60px auto; + width: 80%; + background: #1a1a1a; + padding: 25px; + border-radius: 20px; + display: flex; + justify-content: space-around; + text-align: center; +} + +.stat h3 { + font-size: 24px; + color: #7CFF4F; +} + +.stat p { + color: #aaa; + font-size: 14px; +} + +.steps { + padding: 100px 20px; + text-align: center; +} + +.steps h2 { + font-size: 32px; + margin-bottom: 40px; +} + +/* SECTION */ +.steps { + padding: 100px 20px; + border: 1px solid rgba(124,255,79,0.15); + text-align: center; +} + +/* TITLE */ +.steps h2 { + font-size: 32px; + margin-bottom: 10px; +} + +.how-sub { + color: #aaa; + margin-bottom: 60px; +} + +/* TIMELINE CONTAINER */ +.timeline { + position: relative; + display: flex; + justify-content: space-between; + align-items: flex-start; + max-width: 1000px; + margin: auto; + gap: 20px; +} + +/* LINE */ +.timeline-line { + position: absolute; + top: 20px; + left: 0; + width: 100%; + height: 2px; + background: rgba(255,255,255,0.1); +} + +/* STEP */ +.timeline-step { + position: relative; + width: 100%; + max-width: 180px; + text-align: center; +} + +/* CIRCLE */ +.circle { + width: 40px; + height: 40px; + background: #7CFF4F; + color: black; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: auto; + margin-bottom: 15px; + font-weight: bold; + z-index: 2; +} + +/* TEXT */ +.timeline-step h3 { + margin-bottom: 8px; +} + +.timeline-step p { + font-size: 13px; + color: #aaa; +} + +/* BUTTON */ +.start-btn { + display: inline-block; + margin-top: 60px; +} + +.steps-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 25px; + max-width: 1100px; + margin: 40px auto; +} + +.step-card { + background: #1a1a1a; + border-radius: 20px; + width: 250px; + height:100%; + padding: 25px; + text-align: left; + transition: 0.3s; + box-shadow: 0 8px 20px rgba(0,0,0,0.4); +} + +.step-card:hover { + transform: translateY(-10px); +} + + +/* STEP INPUT */ +.step-input { + width: 100%; + padding: 12px; + border-radius: 10px; + border: none; + margin: 20px 0; + outline: none; + background: #111; + color: white; +} + +/* STEP COUNTER */ +.step-count { + display: inline-block; + background: rgba(124,255,79,0.1); + border: 1px solid rgba(124,255,79,0.3); + padding: 5px 12px; + border-radius: 20px; + font-size: 12px; + color: #7CFF4F; + margin-bottom: 15px; +} + +.step-card { + opacity: 0.85; + transition: 0.3s; +} + +.step-card:hover { + opacity: 1; + transform: translateY(-8px); +} + +/* FOUCS EFFECT */ +.step-input:focus { + border: 1px solid #7CFF4F; + box-shadow: 0 0 10px rgba(124,255,79,0.2); +} + +/* PROGRESS BAR */ +.progress { + position: absolute; + top: 0; + left: 0; + height: 4px; + background: linear-gradient(90deg, #7CFF4F, #00ff99); + border-radius: 10px; + box-shadow: 0 0 10px rgba(124,255,79,0.6); + transition: 0.4s ease; +} + +/* SUMMARY BOX */ +.summary-box { + text-align: left; + margin-top: 20px; +} + +.summary-item { + background: #111; + padding: 15px; + border-radius: 12px; + margin-bottom: 12px; + border: 1px solid rgba(255,255,255,0.05); +} + +.summary-item h3 { + margin-bottom: 5px; + color: #7CFF4F; +} + +.summary-item p { + color: #aaa; + font-size: 14px; +} + +/* LIST CONTAINER */ +.resources-list { + max-width: 800px; + margin: 60px auto; +} + +/* ITEM */ +.resource-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 25px 0; + border-bottom: 1px solid var(--border); + transition: 0.3s; +} + +/* hover */ +.resource-item:hover { + padding-left: 10px; +} + +/* TEXT */ +.resource-item h3 { + margin-bottom: 5px; +} + +.resource-item p { + color: var(--subtext); + font-size: 14px; +} + +/* LINK */ +.resource-item a { + color: var(--accent); + text-decoration: none; + font-size: 14px; +} + +.resource-item a:hover { + transform: translateX(5px); +} + + +/* FOOTER SECTION */ + +.footer { + margin-top: 100px; + padding: 60px 20px; + background: #0a0a0a; + text-align: center; + border-top: 1px solid #222; +} + +/* Logo / Brand */ +.footer-logo { + font-size: 28px; + margin-bottom: 10px; +} + +/* Tagline text */ +.footer-tagline { + color: #aaa; + margin-bottom: 25px; +} + +/* Links container */ +.footer-links { + display: flex; + justify-content: center; + gap: 25px; + margin-bottom: 30px; +} + +/* Links style */ +.footer-links a { + color: #ddd; + text-decoration: none; + transition: 0.3s; +} + +/* Hover effect */ +.footer-links a:hover { + color: #7CFF4F; +} +/* Copyright text */ +.copy { + font-size: 13px; + color: #666; +} \ No newline at end of file diff --git a/html/introduction/index.html b/html/introduction/index.html new file mode 100644 index 0000000..84c835f --- /dev/null +++ b/html/introduction/index.html @@ -0,0 +1,238 @@ + + + + + Bidaya + + + + + + + + + +
+
+ +
+

Start Your Business From Zero

+

Turn your idea into a real business with a clear, guided process.

+ +
+ Get Started + +
+
+
+
+ + +
+

About Us

+

+ We help you turn your ideas into real businesses step by step. +

+ +
+ + +
+

What We Offer

+ +
    +
  • Step-by-step guidance
  • +
  • Simple tools
  • +
  • Beginner friendly
  • +
  • Clear learning process
  • +
+
+ + +
+ + +
+
+

50+

+

Business Ideas

+
+ +
+

1000+

+

Users Started

+
+ +
+

20+

+

Guides

+
+ +
+

Step-by-Step

+

Clear Process

+
+
+ +
+
+ +

How It Works

+

A simple 5-step process to start your business

+ +
+ +
+ +
+
1
+

Find Your Idea

+

Choose a business idea that solves a real problem.

+
+ +
+
2
+

Plan

+

Create a simple and clear plan.

+
+ +
+
3
+

Budget

+

Understand your costs and profits.

+
+ +
+
4
+

Build

+

Start creating your product.

+
+ +
+
5
+

Launch

+

Introduce your business to the world.

+
+ +
+ + Start Your Journey → + +
+ +
+
+ +

Resources

+

Everything you need to start your business

+ +
+ +
+
+

Business Ideas

+

Get inspiration for your next startup.

+
+ Explore → +
+ +
+
+

Business Plan

+

Download a simple plan template.

+
+ Template → +
+ +
+
+

Marketing Guide

+

Learn how to grow your business.

+
+ Learn → +
+ +
+ +
+ + +
+

Contact Us

+

Have questions? Reach out to us anytime.

+ +
+ + + + + +
+
+ + + + + \ No newline at end of file