Skip to content

Commit a83d141

Browse files
DivyanshSood5DivyanshSood5
committed
add website2 - ScaleX blog/insights page
1 parent 235a338 commit a83d141

9 files changed

Lines changed: 294 additions & 0 deletions

‎website2/assets/fonts/fonnts.com-Area_Normal_Bold.otf‎

180 KB
Binary file not shown.

‎website2/assets/fonts/fonnts.com-Area_Normal_ExtraBold.otf‎

182 KB
Binary file not shown.

‎website2/assets/fonts/fonnts.com-Area_Normal_Regular.otf‎

179 KB
Binary file not shown.

‎website2/assets/images/image1.png‎

180 KB
Loading

‎website2/assets/images/image2.png‎

72.9 KB
Loading

‎website2/assets/images/image3.png‎

241 KB
Loading

‎website2/assets/images/logo.png‎

19.2 KB
Loading

‎website2/assets/index.css‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
/* custom fonts from the Area family */
2+
@font-face {
3+
font-family: areaNormal;
4+
src: url(./assets/fonts/fonnts.com-Area_Normal_Regular.otf);
5+
}
6+
7+
@font-face {
8+
font-family: areaBold;
9+
src: url(./assets/fonts/fonnts.com-Area_Normal_Bold.otf);
10+
}
11+
12+
@font-face {
13+
font-family: areaExtraBold;
14+
src: url(./assets/fonts/fonnts.com-Area_Normal_ExtraBold.otf);
15+
}
16+
17+
* {
18+
margin: 0;
19+
padding: 0;
20+
box-sizing: border-box;
21+
}
22+
23+
html,
24+
body {
25+
height: 100vh;
26+
width: 100vw;
27+
font-family: "areaNormal";
28+
background-color: #000000;
29+
color: #ffffff;
30+
}
31+
32+
/* fixed height so main content can use padding-top to clear it */
33+
nav {
34+
position: absolute;
35+
top: 0;
36+
width: 100%;
37+
height: 100px;
38+
display: flex;
39+
justify-content: space-between;
40+
}
41+
42+
.logo {
43+
display: flex;
44+
align-items: center;
45+
flex-basis: 25%;
46+
justify-content: center;
47+
gap: 10px;
48+
font-family: 'areaBold';
49+
font-weight: bolder;
50+
font-size: larger;
51+
}
52+
53+
/* logo is upside-down in the asset, flip it */
54+
.logo img {
55+
transform: rotate(-180deg);
56+
height: 30%;
57+
}
58+
59+
.navLinks {
60+
flex-basis: 50%;
61+
}
62+
63+
.navLinks ul {
64+
height: 100%;
65+
display: flex;
66+
justify-content: space-evenly;
67+
align-items: center;
68+
list-style: none;
69+
}
70+
71+
.navLinks li:hover {
72+
color: #fc4708;
73+
cursor: pointer;
74+
border-bottom: solid #fc4708;
75+
scale: 1.05;
76+
}
77+
78+
.button {
79+
display: flex;
80+
justify-content: center;
81+
align-items: center;
82+
flex-basis: 25%;
83+
}
84+
85+
.getstarted {
86+
background-color: #121212;
87+
border-radius: 8px;
88+
height: 50%;
89+
width: 130px;
90+
border: none;
91+
outline: none;
92+
color: #ffffff;
93+
font-size: medium;
94+
}
95+
96+
.getstarted:hover {
97+
color: #fc4708;
98+
border: solid;
99+
cursor: pointer;
100+
scale: 1.05;
101+
background-color: #000;
102+
}
103+
104+
main {
105+
display: flex;
106+
flex-direction: column;
107+
height: 100%;
108+
padding-top: 100px;
109+
}
110+
111+
header {
112+
font-family: "areaExtraBold";
113+
font-size: 50px;
114+
display: flex;
115+
justify-content: center;
116+
align-items: center;
117+
text-align: center;
118+
}
119+
120+
.navButtons {
121+
display: flex;
122+
justify-content: center;
123+
gap: 10px;
124+
padding: 20px 0;
125+
}
126+
127+
/* pill-shaped filter tabs */
128+
.quickNavbuttons {
129+
color: #ffffff;
130+
height: 45px;
131+
font-size: large;
132+
padding: 0 20px;
133+
border-radius: 9999px;
134+
border: none;
135+
outline: none;
136+
background-color: #121212;
137+
}
138+
139+
/* "All" tab stays orange - active state */
140+
.quickNavbuttons:first-child {
141+
background-color: #fc4708;
142+
}
143+
144+
.quickNavbuttons:hover {
145+
background-color: #fc4708;
146+
scale: 1.05;
147+
cursor: pointer;
148+
}
149+
150+
.cards {
151+
display: flex;
152+
flex-basis: 60%;
153+
justify-content: center;
154+
gap: 2%;
155+
}
156+
157+
.card {
158+
flex-basis: 18%;
159+
border-radius: 20px;
160+
background-color: #0f0f0e;
161+
}
162+
163+
.image {
164+
width: 100%;
165+
height: 60%;
166+
border-radius: 20px;
167+
}
168+
169+
.image img {
170+
object-fit: cover;
171+
border-radius: 20px;
172+
width: 100%;
173+
height: 100%;
174+
}
175+
176+
.description {
177+
display: flex;
178+
height: 40%;
179+
flex-direction: column;
180+
gap: 15px;
181+
padding: 1% 8%;
182+
justify-content: center;
183+
}
184+
185+
/* warm orange tag pill inside cards */
186+
.descbutton button {
187+
text-align: center;
188+
font-size: large;
189+
height: 35px;
190+
padding: 0 20px;
191+
border-radius: 9999px;
192+
color: #eb8754;
193+
border: none;
194+
outline: none;
195+
background-color: #521c0a;
196+
}
197+
198+
.description span {
199+
font-size: smaller;
200+
color: #707070;
201+
font-weight: bold;
202+
}
203+
204+
.description p {
205+
font-size: large;
206+
font-weight: bolder;
207+
}

‎website2/index.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>ScaleX | Growth & Tech Insights</title>
8+
<link rel="stylesheet" href="./assets/index.css">
9+
<link rel="shortcut icon" href="./assets/images/logo.png" type="image/x-icon">
10+
</head>
11+
12+
<body>
13+
<!-- top nav - logo left, links center, cta right -->
14+
<nav>
15+
<div class="logo">
16+
<img src="./assets/images/logo.png" alt="">
17+
<span>ScaleX</span>
18+
</div>
19+
<div class="navLinks">
20+
<ul>
21+
<li>Home</li>
22+
<li>About Us</li>
23+
<li>Blogs</li>
24+
<li>Contact Us</li>
25+
</ul>
26+
</div>
27+
<div class="button">
28+
<button class="getstarted">Get Started</button>
29+
</div>
30+
</nav>
31+
32+
<main>
33+
<header>
34+
<h1>Insights & Blogs</h1>
35+
</header>
36+
37+
<!-- filter tabs, "All" is active by default -->
38+
<section class="navButtons">
39+
<button class="quickNavbuttons">All</button>
40+
<button class="quickNavbuttons">Tech</button>
41+
<button class="quickNavbuttons">SaaS</button>
42+
<button class="quickNavbuttons">Marketing</button>
43+
</section>
44+
45+
<!-- blog cards -->
46+
<section class="cards">
47+
<div class="card">
48+
<div class="image">
49+
<img src="./assets/images/image1.png" alt="">
50+
</div>
51+
<div class="description">
52+
<div class="descbutton">
53+
<button>Tech</button>
54+
</div>
55+
<p>The Ultimate Guide To <br> SaaS Marketing</p>
56+
<span>May 23, 2025</span>
57+
</div>
58+
</div>
59+
<div class="card">
60+
<div class="image">
61+
<img src="./assets/images/image2.png" alt="">
62+
</div>
63+
<div class="description">
64+
<div class="descbutton">
65+
<button>SaaS</button>
66+
</div>
67+
<p>5 Key Trends In SaaS <br> Growth For 2025</p>
68+
<span>May 23, 2025</span>
69+
</div>
70+
</div>
71+
<div class="card">
72+
<div class="image">
73+
<img src="./assets/images/image3.png" alt="">
74+
</div>
75+
<div class="description">
76+
<div class="descbutton">
77+
<button>Marketing</button>
78+
</div>
79+
<p>How Data-Driven <br> Strategies Are Important</p>
80+
<span>May 23, 2025</span>
81+
</div>
82+
</div>
83+
</section>
84+
</main>
85+
</body>
86+
87+
</html>

0 commit comments

Comments
 (0)