-
Notifications
You must be signed in to change notification settings - Fork 0
/
project.html
149 lines (119 loc) · 6.9 KB
/
project.html
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- in mobile set initial zoom level of page to 100%, set site size to equal device width not a larger canvas that is shrunk down-->
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Cassidy Pelacek Project</title>
<!-- Link to reset or normalize before main.css
only choose one -->
<link href="css/grid.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a href="index.html" class="logo"><img src="images/cassID-logo.svg" alt="cass ID logo"> </a>
<input type="checkbox" id="menu-bar">
<label for="menu-bar"><img src="images/green-star.svg" class="menu-star"> </label>
<nav class="navbar">
<ul>
<li id="section1Btn"><a href="#">contact <img src="images/cassID-star.svg" class="link-star"></a> </li>
<li id="section2Btn" ><a href="#">works<img src="images/cassID-star.svg" class="link-star"> </a></li>
<li id="section3Btn"><a href="index.html">about me<img src="images/cassID-star.svg" class="link-star"></a> </li>
<li id="section4Btn"><a href="index.html">testimonials<img src="images/cassID-star.svg" class="link-star"></a> </li>
</ul>
</nav>
</header>
<main>
<section class="title grid-con">
<h1 class="col-span-full ">Seven <img class="title-star" src="images/cassID-star.svg" alt="logo star"></h1>
<div class="sorting-buttons-container title-buttons col-start-1 col-span-full m-col-start-1 m-col-span-6">
<div class="sorting-buttons"><p>DESIGN</p></div>
<div class="sorting-buttons "><p>MOTION</p></div>
</div>
<div class="project-base col-span-4 m-col-span-6">
<p> Company</p>
<p>Role: Designer, Developer</p>
</div>
<div class="project-base col-span-4 m-col-span-6 ">
<p>URL : Innactive</p>
<p>Year: 2024</p>
</div>
</section>
<div class="full-width-grid-con secondary-background-fill">
<div class="project-about grid-con">
<h1 class="col-span-full">About</h1>
<p class="col-span-full">little project about section talking about the main parts covered like design, what was the general overview of the project. </p>
<p class="col-span-full"> little project about section talking about the main parts covered like design, what was the general overview of the project.</p>
<img class="about-image col-span-2 m-col-span-6" src="images/seven-1.png" alt="placeholder">
<img class="about-image col-span-2 m-col-span-6" src="images/seven-2.png" alt="placeholder">
</div>
</div>
<section class="full-width-grid-con feedback">
<div class="grid-con">
<h1 class="col-span-full">Challenges & Feedback</h1>
<p class="col-span-full"><span>Feedback:</span>feedback and suggestions and what was taken from it</p>
<p class="col-span-full"><span>Challenges:</span> challenges and what was needed to be done to change said challenges to reach goals</p>
<div class="keywords col-span-full"><p>KEYWORDS, FUN, COLOURS, DESIGN</p></div>
</div>
</section>
<section class="full-width-grid-con photo-gallery">
<div class="grid-con">
<img class="col-span-full" src="images/seven-3.jpg" alt="placeholder">
<img class="col-span-2 m-col-span-6" src="images/seven-4.png" alt="placeholder">
<img class="col-span-2 m-col-span-6" src="images/seven-5.jpg" alt="placeholder">
<img class="col-span-2 m-col-span-6" src="images/seven-6.jpg" alt="placeholder">
<img class="col-span-2 m-col-span-6" src="images/seven-7.png" alt="placeholder">
</div>
</section>
<section class="toolkit grid-con">
<h1 class="col-span-full">Toolkit</h1>
<img class="col-span-1 m-col-start-3 m-col-span-2" src="images/illustrator.svg" alt="illustrator logo">
<img class="col-span-1 m-col-span-2 " src="images/after-effects.svg" alt="after-effects logo">
<img class="col-span-1 m-col-span-2 " src="images/photoshop.svg" alt="photoshop logo">
<img class="col-span-1 m-col-span-2" src="images/lightroom.svg" alt="lightroom logo">
</section>
</main>
<footer>
<section class="contact" id="section1">
<h1>CONTACT</h1>
<h2>TIME TO REACH OUT?</h2>
<!-- Section for contact form -->
<form action="/submit" method="POST" class="contact-form grid-con">
<div class="col-span-full l-col-start-2 l-col-end-7">
<input type="text" id="first-name" name="first-name" placeholder="First Name" required>
</div>
<div class="col-span-full l-col-start-7 l-col-end-12">
<input type="text" id="last-name" name="last-name" placeholder="Last Name" required>
</div>
<div class="col-span-full l-col-start-2 l-col-end-12 ">
<input type="email" id="email" name="email" placeholder="sayhello@gmail.com" required>
</div>
<div class="col-span-full l-col-start-2 l-col-end-12 ">
<textarea id="message" name="message" placeholder="lets talk about the piece of ID you are missing!" rows="4" required></textarea>
</div>
<div class="col-start-3 col-span-2 m-col-start-10 m-col-span-3 l-col-start-10 l-col-end-12">
<button type="submit">SEND</button>
</div>
</form>
</section>
<div class="bottom-footer">
<p>wow! made it all the way here! <br>
might as well check out a bit more!</p>
<ul class="footer-svg">
<li> <a href=""><img src="images/instagram-svgrepo-com (1).svg" alt="instagram logo"></a></li>
<li> <a href="" ><img src="images/linkedin-161-svgrepo-com.svg" alt="linkedin logo"></a></li>
<li> <a href="" ><img src="images/github-svgrepo-com.svg" alt="github logo"></a></li>
<li> <a href="" ><img src="images/spotify-162-svgrepo-com.svg" alt="spotify logo"></a></li>
</ul>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.0/ScrollToPlugin.min.js"></script>
<script src="js/main.js"></script>
<script src="js/scroll-animation.js"></script>
</body>
</html>