Visionsflow-/graphic-design.html at main · nivetix/Visionsflow- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graphic Designing Demo Projects - VisionFlow</title>
    <link rel="stylesheet" href="styles.css">
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- Header and Navbar -->
    <header>
        <nav>
            <div class="logo">VisionFlow</div>
            <ul class="nav-links" id="nav-links">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html#about">About Us</a></li>
                <li><a href="index.html#team">Our Team</a></li>
                <li><a href="index.html#services">Services</a></li>
                <li><a href="index.html#contact">Contact Us</a></li>
            </ul>
            <div class="menu-toggle" id="mobile-menu">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </header>

    <!-- Graphic Designing Demo Projects Section -->
    <section id="graphic-design" class="graphic-design-section">
        <h2>Graphic Designing Demo Projects</h2>
        <div class="projects-container">
            <!-- Project 1 -->
            <div class="project-card">
                <div class="project-thumbnail">
                    <img src="v.png" alt="Project 1">
                </div>
                <h3>Branding Design</h3>
                <p>Modern branding design for a tech startup, including logo, business cards, and stationery.</p>
                <a href="#" class="view-project-button">View Project</a>
            </div>

            <!-- Project 2 -->
            <div class="project-card">
                <div class="project-thumbnail">
                    <img src="v.png" alt="Project 2">
                </div>
                <h3>Social Media Graphics</h3>
                <p>Eye-catching social media posts and banners for a fashion brand.</p>
                <a href="#" class="view-project-button">View Project</a>
            </div>

            <!-- Project 3 -->
            <div class="project-card">
                <div class="project-thumbnail">
                    <img src=".v.png" alt="Project 3">
                </div>
                <h3>Poster Design</h3>
                <p>Creative poster design for a music festival, featuring vibrant colors and typography.</p>
                <a href="#" class="view-project-button">View Project</a>
            </div>

            <!-- Project 4 -->
            <div class="project-card">
                <div class="project-thumbnail">
                    <img src="https://via.placeholder.com/300x200" alt="Project 4">
                </div>
                <h3>Packaging Design</h3>
                <p>Minimalist packaging design for a skincare product line.</p>
                <a href="#" class="view-project-button">View Project</a>
            </div>

            <!-- Project 5 -->
            <div class="project-card">
                <div class="project-thumbnail">
                    <img src="https://via.placeholder.com/300x200" alt="Project 5">
                </div>
                <h3>Illustration</h3>
                <p>Custom illustrations for a children's book, featuring playful characters and scenes.</p>
                <a href="#" class="view-project-button">View Project</a>
            </div>

            <!-- Project 6 -->
            <div class="project-card">
                <div class="project-thumbnail">
                    <img src="https://via.placeholder.com/300x200" alt="Project 6">
                </div>
                <h3>Web Design Mockups</h3>
                <p>High-fidelity mockups for a responsive e-commerce website.</p>
                <a href="#" class="view-project-button">View Project</a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <p>&copy; 2024 VisionFlow. All rights reserved. | Designed by <strong>Vineet</strong></p>
    </footer>

    <script src="script.js"></script>
</body>
</html>