responsive-portfolio/index.html at main · ainycodes/responsive-portfolio · 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interior Designer Portfolio</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

    <nav>
		<div class="logo">H ● C</div>
        <ul class="nav-links">
            <li><a href="#home">Home</a></li>
            <li><a href="#my-philosophy">My Philosophy</a></li>
            <li><a href="#my-work">My Work</a></li>
            <li><a href="#my-specialization">My Specialization</a></li>
            <li><a href="#contact-section">Reach Out</a></li>
        </ul>
        <div class="hamburger">
            <i class="fa-solid fa-bars"></i>
        </div>
    </nav>
    <div class="mobile-nav">
        <ul class="mobile-nav-links">
            <li><a href="#home">Home</a></li>
            <li><a href="#my-philosophy">My Philosophy</a></li>
            <li><a href="#my-work">My Work</a></li>
            <li><a href="#my-specialization">My Specialization</a></li>
            <li><a href="#contact-section">Reach Out</a></li>
        </ul>
        <div class="close-btn">
            <i class="fas fa-times"></i>
        </div>
    </div>

    <section class="hero-section" id="home">
        <div class="container">
            <div class="header">
                <h1>Hunter Cole</h1>
                <h2>Graphic Designer</h2>
            </div>
            <div class="content">
                <div class="left-side">
                    <img src="2 (5).jpeg" alt="Graphic Designer">
                </div>
                <div class="right-side">
                    <p>Digital Art / Editorial Illustration
Visual Identity / Digital Assets
Environmental Design</p>
					<a href="">Work With Me</a>
                </div>
            </div>
        </div>
    </section>

<section class="phil-section" id="my-philosophy">
    <div class="container">
        <div class="phil-content">
            <div class="left-side">
                <h2>My Design Philosophy</h2>
            </div>
            <div class="right-side">
                <p>The medium is the message, and form creates function. Every design is a chance to make a statement, to evoke a feeling, and to communicate an idea. That's why I pay careful and deliberate attention to symbolism, patterns, and intention when creating designs for clients. No project is too small for impact, and no design is too big for enduring relevance.</p>
            </div>
        </div>
    </div>
</section>

	<section id="my-work" class="work">
    <h2>My Work</h2>
    <div class="card-container">
        <div class="card card-1">
            <img src="https://img.freepik.com/free-photo/halftone-monochrome-collage_23-2151004965.jpg?t=st=1725467978~exp=1725471578~hmac=ae001a42e8f6b4c1809c9aac4b12fc907dd33541cca8a93c1fcbcafdacf4d6a6&w=740" alt="Intentional Design">
            <p>Intentional Design</p>
        </div>
        <div class="card card-2">
            <img src="https://img.freepik.com/free-photo/halftone-monochrome-collage_23-2151004976.jpg?t=st=1725467945~exp=1725471545~hmac=3622eda970fefc7b18a5a78e171bf342f24f93f70dda224420654fbe3ba2f0bb&w=740" alt="Symbolism & Pattern">
            <p>Symbolism & Pattern</p>
        </div>
        <div class="card card-3">
            <img src="https://img.freepik.com/free-photo/halftone-monochrome-collage_23-2151004974.jpg?t=st=1725467937~exp=1725471537~hmac=08fa491fee3f18ea373c04555c671035f4a0dada0ed2d71181e268df4025fc1c&w=740" alt="Fun & Functional Branding">
            <p>Fun & Functional Branding</p>
        </div>
    </div>
</section>

	<section id="image-background-section">
    <div class="overlay">
        <h1>Every client brief is a story<br>waiting to be told.</h1>
    </div>
</section>

	<section id="my-specialization">
    <h2>What I Do</h2>
    <div class="grid-container">
        <div class="grid-box">
            <h3>Illustration</h3>
            <p>I work primarily in digital formats, delivering high quality editorial illustrations and brand assets.</p>
        </div>
        <div class="grid-box">
            <h3>Visual Identity</h3>
            <p>I am well-versed in branding. I create unique and memorable visual identities for clients.</p>
        </div>
        <div class="grid-box">
            <h3>Environmental design</h3>
            <p>I enjoy bringing 2D images into 3D spaces - graphic design made physical and tactile.</p>
        </div>
    </div>
</section>

	<section id="contact-section">
    <div class="contact-content">
        <h2>Get in Touch</h2>
        <div class="contact-info">
            <p><strong>Instagram / Behance</strong><br>@reallygreatsite</p>
            <p><strong>Studio</strong><br>123 Anywhere St., Any City, State, Country 12345</p>
            <p><strong>Email</strong><br>hello@reallygreatsite.com</p>
            <p><strong>Phone</strong><br>(123) 456 7890</p>
        </div>
    </div>
    <div class="contact-image">
        <img src="2 (1).jpeg" alt="Contact Image">
    </div>
</section>

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