-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstaruts.html
130 lines (103 loc) · 4.62 KB
/
staruts.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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Staruts Construction & Projects |Occxlnce Creative Studio</title>
<link rel="shortcut icon" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://use.typekit.net/zhq0vyf.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" href="oversight.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="pilot.css">
<link rel="stylesheet" href="css/nabar.css">
</head>
<body>
<header class="header">
<a href="index.html" class="logo">OCCXLNCE</a>
<i class='bx bx-menu' id="menu-icon"></i>
<nav class="navbar">
<a href="about.html">About</a>
<a href="portfolio.html">Work</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<div class="nav-bg"></div>
<br>
<br>
<br>
<div class="myslider">
<div class="list">
<div class="item">
<img src="img/scpcover.png" alt="">
</div>
</div>
<div class="buttons">
<button id="prev"><</button>
<button id="next">></button>
</div>
<ul class="dots">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="custom-card">
<div class="custom-content">
<p class="custom-heading">Staruts Construction & Project</p>
<p class="custom-paragraph">
<b>WEB DEVELOPMENT </b>
<br>
<br>
<b>Year | 2024 </b>
<a href="https://starutsconstruction.co.za">Preview Link</a>
</p>
</div>
</div>
<section class="full sec-p">
<p><br>
<br>
At Occxlnce Creative Studio (OCS), we were approached to take over the development of the Stratus Construction and Projects Pty (Ltd) website after the project had been outsourced to us by another developer. The client needed a platform that could effectively showcase their construction services, completed projects, and career opportunities in a professional and user-friendly manner. We collaborated with the existing materials and input from Stratus to create a site that reflects their dedication to quality and precision in construction while offering potential clients and partners easy access to vital company information. Our goal was to transform the website into a strategic tool for generating leads, sharing their portfolio, and promoting their business values.
<br>
<br>
To execute this, OCS leveraged modern web technologies such as HTML5, CSS3, and JavaScript, ensuring a responsive and visually appealing site across both desktop and mobile devices. We implemented key features like an intuitive navigation system, a detailed services page, and a portfolio section that provides in-depth descriptions of past projects. The careers page was built to streamline the job application process, while the contact form and detailed contact page were optimized for easy communication with Stratus. With a focus on delivering a seamless user experience and maintaining brand consistency, OCS delivered a robust and functional website that positions Stratus Construction as a leading player in their industry.
</p>
</section>
<div class="cursor-wrap js-cursor-wrap">
<div class="cursor js-cursor">
<svg height="60" width="60" class="circle">
<circle cx="30" cy="30" r="26" stroke="#FD1F03" stroke-width="1.9" fill="transparent" />
</svg>
</div>
</div>
<!-- JAVASCRIPT FILES -->
<script src="css/cursor.js">
</script>
<script src="oversight.js">
</script>
<script src="pilot.js">
</script>
<script src="css/nabar.js">
</script>
<script src="dropdown.js">
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/ScrollTrigger.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js'></script><script src="./script.js"></script>
<script>
const menuIcon = document.querySelector('#menu-icon');
const navbar = document.querySelector('.navbar');
const navbg = document.querySelector('.nav-bg');
menuIcon.addEventListener('click', () => {
menuIcon.classList.toggle('bx-x');
navbar.classList.toggle('active');
navbg.classList.toggle('active');
});
</script>
</body>
</html>