Skip to content

Develop #1186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ht1204 wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Develop #1186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e747c59
feat: landing page
ht1204 May 18, 2026
738abb2
Add navigation and menu fixes
ht1204 May 18, 2026
45a997d
Add trailing newlines
ht1204 May 18, 2026
766b1bc
Fix: Add favicon, footer BEM compliance, process links
ht1204 May 18, 2026
587dd5d
Remove duplicate process cards, keep 4 cards with correct href
ht1204 May 18, 2026
74ddb4b
Fix header nav spacing - add gap to header on desktop
ht1204 May 18, 2026
f34eb54
Fix header nav spacing - restore margin-left: auto with gap
ht1204 May 18, 2026
0595ea8
Fix Hire Us position - separate from nav, far right of header
ht1204 May 18, 2026
bfac50f
Center nav links on desktop with flex:1 and justify-content:center
ht1204 May 18, 2026
d3c9d21
chore: remove mockup
ht1204 May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions .github/workflows/test.yml-template
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Test

on:
pull_request:
branches: [ master ]

jobs:
build:

runs-on: ubuntu-latest

strategy:
matrix:
node-version: [20.x]

steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm install
- run: npm test
- name: Upload HTML report(backstop data)
if: ${{ always() }}
uses: actions/upload-artifact@v2
with:
name: report
path: backstop_data
332 changes: 329 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,340 @@
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Dia</title>
<title>Air</title>
<link
rel="icon"
href="src/images/logo/dia-logo.svg"
type="image/svg+xml"
/>
<link
rel="stylesheet"
href="src/styles/main.scss"
Comment on lines +9 to 17
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No favicon link is present in the head section. Checklist item #1 (Tech Review) requires adding a favicon.

/>
</head>
<body>
<h1>Dia</h1>
<!-- Header -->
<header class="header">
<a href="#" class="header__logo">
<img src="src/images/logo/dia-logo.svg" alt="Air Logo">
</a>
<nav class="nav" id="nav-menu">
<button class="nav__close" id="menu-close" aria-label="Close menu">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18" stroke="white" stroke-width="2" stroke-linecap="round"/>
<path d="M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<ul class="nav__list">
<li><a href="#our-expertise" class="nav__link">Our Expertise</a></li>
<li><a href="#process" class="nav__link">Process</a></li>
<li><a href="#testimonials" class="nav__link">Testimonials</a></li>
<li><a href="#vis-pas-res" class="nav__link">Vision</a></li>
<li>
<a href="#send" class="nav__link nav__link--hire">
Hire Us
</a>
</li>
</ul>
</nav>
<a href="#send" class="header__hire-us">Hire Us</a>
<button class="header__menu" id="menu-btn" aria-label="Toggle menu">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 6H21" stroke="white" stroke-width="2" stroke-linecap="round"/>
<path d="M3 12H21" stroke="white" stroke-width="2" stroke-linecap="round"/>
<path d="M3 18H21" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</header>

<!-- Strategic Agency -->
<section class="strategic">
<div class="strategic__container">
<div class="strategic__content">
<p class="strategic__rubric">Strategic Agency</p>
<h1 class="strategic__title">We help brands grow through strategic design and development</h1>
<p class="strategic__text">Our team of experts combines creativity with technical excellence to deliver outstanding digital experiences.</p>
<div class="strategic__buttons">
<a href="#our-expertise" class="strategic__btn">Learn more</a>
<a href="#send" class="strategic__btn strategic__btn--hire">Hire Us</a>
</div>
</div>
</div>
</section>

<!-- Hero Screen Slider -->
<section class="hero-screen" id="hero-slider">
<div class="hero-screen__buttons">
<button class="hero-screen__icon" id="btn-left" aria-label="Previous slide">
<img src="src/images/slider/arrow-left.svg" alt="Previous">
</button>
<button class="hero-screen__icon" id="btn-right" aria-label="Next slide">
<img src="src/images/slider/arrow-right.svg" alt="Next">
</button>
</div>
<div class="hero-screen__caption">
<p class="hero-screen__title">Strategic Design</p>
<p class="hero-screen__text">Building digital experiences that matter</p>
</div>
</section>

<!-- Who We Are -->
<section class="who-we-are">
<div class="who-we-are__container">
<div class="who-we-are__content">
<p class="who-we-are__rubric">Who We Are</p>
<h2 class="who-we-are__title">Passionate team creating exceptional work</h2>
<p class="who-we-are__text">We believe in the power of collaboration and innovation. Our diverse team brings together expertise in design, development, and strategy to deliver results that exceed expectations.</p>
</div>
<div class="who-we-are__image">
<img src="src/images/features/features-bg.jpg" alt="Our Team">
</div>
</div>
</section>

<!-- Our Expertise -->
<section class="our-expertise" id="our-expertise">
<p class="our-expertise__rubric">Our Expertise</p>
<h2 class="our-expertise__title">Services we provide</h2>
<div class="our-expertise__cards">
<div class="our-expertise__card">
<div class="our-expertise__card-icon">
<img src="src/images/features/features-item-icon-1.svg" alt="Branding">
</div>
<h3 class="our-expertise__card-title">Branding</h3>
<p class="our-expertise__card-text">Create memorable brand identities that resonate with your audience.</p>
</div>
<div class="our-expertise__card">
<div class="our-expertise__card-icon">
<img src="src/images/features/features-item-icon-2.svg" alt="Design">
</div>
<h3 class="our-expertise__card-title">UI/UX Design</h3>
<p class="our-expertise__card-text">Craft intuitive and beautiful interfaces users love.</p>
</div>
<div class="our-expertise__card">
<div class="our-expertise__card-icon">
<img src="src/images/features/features-item-icon-3.svg" alt="Development">
</div>
<h3 class="our-expertise__card-title">Development</h3>
<p class="our-expertise__card-text">Build robust, scalable web applications.</p>
</div>
</div>
</section>

<!-- Process -->
<section class="process" id="process">
<div class="process__container">
<div class="process__content">
<p class="process__rubric">Process</p>
<h2 class="process__title">How we work</h2>
<p class="process__text">Our proven methodology ensures consistent, high-quality results for every project we undertake.</p>
</div>
<div class="process__cards">
<div class="process__card">
<div class="process__card-number">01</div>
<h3 class="process__card-title">Discovery</h3>
<a href="#our-expertise" class="process__card-link">
Learn More
<img src="src/images/slider/arrow-right.svg" alt="Arrow">
</a>
</div>
<div class="process__card">
<div class="process__card-number">02</div>
<h3 class="process__card-title">Strategy</h3>
<a href="#our-expertise" class="process__card-link">
Learn More
<img src="src/images/slider/arrow-right.svg" alt="Arrow">
</a>
</div>
<div class="process__card">
<div class="process__card-number">03</div>
<h3 class="process__card-title">Design</h3>
<a href="#our-expertise" class="process__card-link">
Learn More
<img src="src/images/slider/arrow-right.svg" alt="Arrow">
</a>
</div>
<div class="process__card">
<div class="process__card-number">04</div>
<h3 class="process__card-title">Execute</h3>
<a href="#our-expertise" class="process__card-link">
Learn More
<img src="src/images/slider/arrow-right.svg" alt="Arrow">
</a>
</div>
</div>
</div>
</section>

<!-- Testimonials -->
<section class="testimonials" id="testimonials">
<p class="testimonials__rubric">Testimonials</p>
<h2 class="testimonials__title">What clients say</h2>
<div class="testimonials__cards">
<div class="testimonials__card">
<div class="testimonials__card-header">
<div class="testimonials__card-avatar">
<img src="src/images/testimonials/testimonial-ava-1.jpg" alt="Client">
</div>
<div>
<p class="testimonials__card-name">Sarah Johnson</p>
<p class="testimonials__card-role">CEO, TechStart</p>
</div>
</div>
<p class="testimonials__card-text">"Outstanding work! The team exceeded our expectations with their creativity and technical expertise."</p>
</div>
<div class="testimonials__card">
<div class="testimonials__card-header">
<div class="testimonials__card-avatar">
<img src="src/images/testimonials/testimonial-ava-2.jpg" alt="Client">
</div>
<div>
<p class="testimonials__card-name">Michael Chen</p>
<p class="testimonials__card-role">Founder, DesignCo</p>
</div>
</div>
<p class="testimonials__card-text">"Professional, responsive, and delivered on time. Highly recommend for any design project."</p>
</div>
<div class="testimonials__card">
<div class="testimonials__card-header">
<div class="testimonials__card-avatar">
<img src="src/images/testimonials/testimonial-ava-3.jpg" alt="Client">
</div>
<div>
<p class="testimonials__card-name">Emily Davis</p>
<p class="testimonials__card-role">Marketing Director, BrandX</p>
</div>
</div>
<p class="testimonials__card-text">"They transformed our brand identity. The attention to detail is remarkable."</p>
</div>
</div>
</section>

<!-- Vision, Passion, Results -->
<section class="vis-pas-res" id="vis-pas-res">
<p class="vis-pas-res__rubric">Our Values</p>
<h2 class="vis-pas-res__title">Vision, Passion, Results</h2>
<div class="vis-pas-res__cards">
<div class="vis-pas-res__card">
<h3 class="vis-pas-res__card-title">Vision</h3>
<p class="vis-pas-res__card-text">We envision a future where exceptional design and technology create meaningful experiences.</p>
<a href="#send" class="vis-pas-res__card-btn">Apply</a>
</div>
<div class="vis-pas-res__card">
<h3 class="vis-pas-res__card-title">Passion</h3>
<p class="vis-pas-res__card-text">Driven by passion, we pour our hearts into every project, ensuring excellence at every step.</p>
<a href="#send" class="vis-pas-res__card-btn">Apply</a>
</div>
<div class="vis-pas-res__card">
<h3 class="vis-pas-res__card-title">Results</h3>
<p class="vis-pas-res__card-text">Our track record speaks for itself—measurable results that drive business growth.</p>
<a href="#send" class="vis-pas-res__card-btn">Apply</a>
</div>
</div>
</section>

<!-- Send Message Form -->
<section class="send" id="send">
<div class="send__container">
<div class="send__content">
<p class="send__rubric">Send us a message</p>
<h2 class="send__title">Let's work together</h2>
<p class="send__text">Tell us about your project and we'll get back to you as soon as possible.</p>
</div>
<div class="send__form-container">
<form class="send__form" id="contact-form">
<div class="send__input-group">
<label class="send__input-label" for="name">Name</label>
<input
type="text"
id="name"
name="name"
class="send__input"
placeholder="Your name"
required
>
</div>
<div class="send__input-group">
<label class="send__input-label" for="email">Email</label>
<input
type="email"
id="email"
name="email"
class="send__input"
placeholder="[email protected]"
required
>
</div>
<div class="send__input-group">
<label class="send__input-label" for="phone">Phone</label>
<input
type="tel"
id="phone"
name="phone"
class="send__input"
placeholder="+1 (123) 456-7890"
>
</div>
<div class="send__input-group">
<label class="send__input-label" for="message">Message</label>
<textarea
id="message"
name="message"
class="send__input send__input--text"
placeholder="Tell us about your project..."
required
></textarea>
</div>
<button type="submit" class="send__btn">Send Message</button>
</form>
</div>
</div>
</section>

<!-- Contact Us -->
<section class="contact-us">
<div class="contact-us__info">
<h2 class="contact-us__title">Contact Us</h2>
<p class="contact-us__rubric">Location</p>
<a
href="https://www.google.com/maps"
target="_blank"
rel="noopener noreferrer"
class="contact-us__link"
>
123 Innovation Drive, San Francisco, CA 94102
</a>
<p class="contact-us__rubric" style="margin-top: 32px;">Follow Us</p>
<div class="contact-us__social">
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
<img src="src/images/logo/dia-logo.svg" alt="Facebook">
</a>
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
<img src="src/images/logo/dia-logo.svg" alt="Twitter">
</a>
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
<img src="src/images/logo/dia-logo.svg" alt="Instagram">
</a>
</div>
</div>
</section>

<!-- Footer -->
<footer class="footer">
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The footer logo anchor (line 318) uses 'header__logo' class instead of 'footer__logo'. Each block should have its own BEM block name.

<a href="#" class="footer__logo">
<img src="src/images/logo/dia-logo.svg" alt="Air Logo">
</a>
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The footer nav element (line 321) uses generic 'nav' class instead of 'footer__nav'. BEM requires footer-specific class names: 'footer__nav', 'footer__list', 'footer__link'. This violates BEM methodology used throughout the project.

<nav class="footer__nav">
<ul class="footer__list">
<li><a href="#our-expertise" class="footer__link">Our Expertise</a></li>
<li><a href="#process" class="footer__link">Process</a></li>
<li><a href="#testimonials" class="footer__link">Testimonials</a></li>
<li><a href="#vis-pas-res" class="footer__link">Vision</a></li>
<li><a href="#send" class="footer__link footer__link--hire">Hire Us</a></li>
</ul>
</nav>
</footer>

<script src="src/scripts/main.js"></script>
</body>
</html>
</html>
Loading
Loading