- CTRL ALT News
- Posts
- Beginner Responsive AI Landing Page | Source Code | HTML & Tailwind CSS
Beginner Responsive AI Landing Page | Source Code | HTML & Tailwind CSS
Are you looking to learn how to build a modern landing page for an AI company? Then this is the right place. In the following article, I will show you, how to build an amazing landing page with a navbar, hero section, features section (Created with bento grids), and a pricing section.
CTRL ALT News
November 29th, 2023
Beginner Responsive AI Landing Page | Source Code | HTML & Tailwind CSS
Get the source code here.
Are you looking to learn how to build a modern landing page for an AI company? Then this is the right place. In the following article, I will show you, how to build an amazing landing page with a navbar, hero section, features section (Created with bento grids), and a pricing section.
Disclaimer: The name, features list, and pricing structure of the AI company for the landing page were randomly generated from an AI. Any resemblance to a real-life company is purely coincidental.
Watch the video version here:
Setting up the workspace
The first thing we need to do is create our workspace. This is very simple.
First, create a folder of any name.
Second, create a file called “index.html”, inside the folder.
Third, create a file called “styles.css”, inside the folder.
Now the workspace is set up!
Setting up our project
Now that we have set up our workspace, we need to set up the base of our HTML and CSS files.
Let’s start with the CSS file, “styles.css”. In the file, paste the following code:
:root {
--color-background: #010101;
--color-purple: #5f32b2;
--color-white: #fefdfd;
}
body {
color: var(--color-white)
}
body::-webkit-scrollbar {
display: none;
}
#stars {
width: 1px;
height: 1px;
box-shadow: 779px 1331px rgba(255, 255, 255, 0.35), 324px 42px rgba(255, 255, 255, 0.35), 303px 586px rgba(255, 255, 255, 0.35),
1312px 276px rgba(255, 255, 255, 0.35), 451px 625px rgba(255, 255, 255, 0.35), 521px 1931px rgba(255, 255, 255, 0.35), 1087px 1871px rgba(255, 255, 255, 0.35),
36px 1546px rgba(255, 255, 255, 0.35), 132px 934px rgba(255, 255, 255, 0.35), 1698px 901px rgba(255, 255, 255, 0.35), 1418px 664px rgba(255, 255, 255, 0.35),
1448px 1157px rgba(255, 255, 255, 0.35), 1084px 232px rgba(255, 255, 255, 0.35), 347px 1776px rgba(255, 255, 255, 0.35), 1722px 243px rgba(255, 255, 255, 0.35),
1629px 835px rgba(255, 255, 255, 0.35), 479px 969px rgba(255, 255, 255, 0.35), 1231px 960px rgba(255, 255, 255, 0.35), 586px 384px rgba(255, 255, 255, 0.35),
164px 527px rgba(255, 255, 255, 0.35), 8px 646px rgba(255, 255, 255, 0.35), 1150px 1126px rgba(255, 255, 255, 0.35), 665px 1357px rgba(255, 255, 255, 0.35),
1556px 1982px rgba(255, 255, 255, 0.35), 1260px 1961px rgba(255, 255, 255, 0.35), 1675px 1741px rgba(255, 255, 255, 0.35),
1843px 1514px rgba(255, 255, 255, 0.35), 718px 1628px rgba(255, 255, 255, 0.35), 242px 1343px rgba(255, 255, 255, 0.35), 1497px 1880px rgba(255, 255, 255, 0.35),
1364px 230px rgba(255, 255, 255, 0.35), 1739px 1302px rgba(255, 255, 255, 0.35), 636px 959px rgba(255, 255, 255, 0.35), 304px 686px rgba(255, 255, 255, 0.35),
614px 751px rgba(255, 255, 255, 0.35), 1935px 816px rgba(255, 255, 255, 0.35), 1428px 60px rgba(255, 255, 255, 0.35), 355px 335px rgba(255, 255, 255, 0.35),
1594px 158px rgba(255, 255, 255, 0.35), 90px 60px rgba(255, 255, 255, 0.35), 1553px 162px rgba(255, 255, 255, 0.35), 1239px 1825px rgba(255, 255, 255, 0.35),
1945px 587px rgba(255, 255, 255, 0.35), 749px 1785px rgba(255, 255, 255, 0.35), 1987px 1172px rgba(255, 255, 255, 0.35), 1301px 1237px rgba(255, 255, 255, 0.35),
1039px 342px rgba(255, 255, 255, 0.35), 1585px 1481px rgba(255, 255, 255, 0.35), 995px 1048px rgba(255, 255, 255, 0.35), 524px 932px rgba(255, 255, 255, 0.35),
214px 413px rgba(255, 255, 255, 0.35), 1701px 1300px rgba(255, 255, 255, 0.35), 1037px 1613px rgba(255, 255, 255, 0.35), 1871px 996px rgba(255, 255, 255, 0.35),
1360px 1635px rgba(255, 255, 255, 0.35), 1110px 1313px rgba(255, 255, 255, 0.35), 412px 1783px rgba(255, 255, 255, 0.35), 1949px 177px rgba(255, 255, 255, 0.35),
903px 1854px rgba(255, 255, 255, 0.35), 700px 1936px rgba(255, 255, 255, 0.35), 378px 125px rgba(255, 255, 255, 0.35), 308px 834px rgba(255, 255, 255, 0.35),
1118px 962px rgba(255, 255, 255, 0.35), 1350px 1929px rgba(255, 255, 255, 0.35), 781px 1811px rgba(255, 255, 255, 0.35), 561px 137px rgba(255, 255, 255, 0.35),
757px 1148px rgba(255, 255, 255, 0.35), 1670px 1979px rgba(255, 255, 255, 0.35), 343px 739px rgba(255, 255, 255, 0.35), 945px 795px rgba(255, 255, 255, 0.35),
576px 1903px rgba(255, 255, 255, 0.35), 1078px 1436px rgba(255, 255, 255, 0.35), 1583px 450px rgba(255, 255, 255, 0.35), 1366px 474px rgba(255, 255, 255, 0.35),
297px 1873px rgba(255, 255, 255, 0.35), 192px 162px rgba(255, 255, 255, 0.35), 1624px 1633px rgba(255, 255, 255, 0.35), 59px 453px rgba(255, 255, 255, 0.35),
82px 1872px rgba(255, 255, 255, 0.35), 1933px 498px rgba(255, 255, 255, 0.35), 1966px 1974px rgba(255, 255, 255, 0.35), 1975px 1688px rgba(255, 255, 255, 0.35),
779px 314px rgba(255, 255, 255, 0.35), 1858px 1543px rgba(255, 255, 255, 0.35), 73px 1507px rgba(255, 255, 255, 0.35), 1693px 975px rgba(255, 255, 255, 0.35),
1683px 108px rgba(255, 255, 255, 0.35), 1768px 1654px rgba(255, 255, 255, 0.35), 654px 14px rgba(255, 255, 255, 0.35), 494px 171px rgba(255, 255, 255, 0.35),
1689px 1895px rgba(255, 255, 255, 0.35), 1660px 263px rgba(255, 255, 255, 0.35), 1031px 903px rgba(255, 255, 255, 0.35), 1203px 1393px rgba(255, 255, 255, 0.35),
1333px 1421px rgba(255, 255, 255, 0.35), 1113px 41px rgba(255, 255, 255, 0.35), 1206px 1645px rgba(255, 255, 255, 0.35), 1325px 1635px rgba(255, 255, 255, 0.35),
142px 388px rgba(255, 255, 255, 0.35), 572px 215px rgba(255, 255, 255, 0.35), 1535px 296px rgba(255, 255, 255, 0.35), 1419px 407px rgba(255, 255, 255, 0.35),
1379px 1003px rgba(255, 255, 255, 0.35), 329px 469px rgba(255, 255, 255, 0.35), 1791px 1652px rgba(255, 255, 255, 0.35), 935px 1802px rgba(255, 255, 255, 0.35),
1330px 1820px rgba(255, 255, 255, 0.35), 421px 1933px rgba(255, 255, 255, 0.35), 828px 365px rgba(255, 255, 255, 0.35), 275px 316px rgba(255, 255, 255, 0.35),
707px 960px rgba(255, 255, 255, 0.35), 1605px 1554px rgba(255, 255, 255, 0.35), 625px 58px rgba(255, 255, 255, 0.35), 717px 1697px rgba(255, 255, 255, 0.35),
1669px 246px rgba(255, 255, 255, 0.35), 1925px 322px rgba(255, 255, 255, 0.35), 1154px 1803px rgba(255, 255, 255, 0.35), 1929px 295px rgba(255, 255, 255, 0.35),
1248px 240px rgba(255, 255, 255, 0.35), 1045px 1755px rgba(255, 255, 255, 0.35), 166px 942px rgba(255, 255, 255, 0.35), 1888px 1773px rgba(255, 255, 255, 0.35),
678px 1963px rgba(255, 255, 255, 0.35), 1370px 569px rgba(255, 255, 255, 0.35), 1974px 1400px rgba(255, 255, 255, 0.35), 1786px 460px rgba(255, 255, 255, 0.35),
51px 307px rgba(255, 255, 255, 0.35), 784px 1400px rgba(255, 255, 255, 0.35), 730px 1258px rgba(255, 255, 255, 0.35), 1712px 393px rgba(255, 255, 255, 0.35),
416px 170px rgba(255, 255, 255, 0.35), 1797px 1932px rgba(255, 255, 255, 0.35), 572px 219px rgba(255, 255, 255, 0.35), 1557px 1856px rgba(255, 255, 255, 0.35),
218px 8px rgba(255, 255, 255, 0.35), 348px 1334px rgba(255, 255, 255, 0.35), 469px 413px rgba(255, 255, 255, 0.35), 385px 1738px rgba(255, 255, 255, 0.35),
1357px 1818px rgba(255, 255, 255, 0.35), 240px 942px rgba(255, 255, 255, 0.35), 248px 1847px rgba(255, 255, 255, 0.35), 1535px 806px rgba(255, 255, 255, 0.35),
236px 1514px rgba(255, 255, 255, 0.35), 1429px 1556px rgba(255, 255, 255, 0.35), 73px 1633px rgba(255, 255, 255, 0.35), 1398px 1121px rgba(255, 255, 255, 0.35),
671px 1301px rgba(255, 255, 255, 0.35), 1404px 1663px rgba(255, 255, 255, 0.35), 740px 1018px rgba(255, 255, 255, 0.35), 1600px 377px rgba(255, 255, 255, 0.35),
785px 514px rgba(255, 255, 255, 0.35), 112px 1084px rgba(255, 255, 255, 0.35), 1915px 1887px rgba(255, 255, 255, 0.35), 1463px 1848px rgba(255, 255, 255, 0.35),
687px 1115px rgba(255, 255, 255, 0.35), 1268px 1768px rgba(255, 255, 255, 0.35), 1729px 1425px rgba(255, 255, 255, 0.35),
1284px 1022px rgba(255, 255, 255, 0.35), 801px 974px rgba(255, 255, 255, 0.35), 1975px 1317px rgba(255, 255, 255, 0.35), 1354px 834px rgba(255, 255, 255, 0.35),
1446px 1484px rgba(255, 255, 255, 0.35), 1283px 1786px rgba(255, 255, 255, 0.35), 11px 523px rgba(255, 255, 255, 0.35), 1842px 236px rgba(255, 255, 255, 0.35),
1355px 654px rgba(255, 255, 255, 0.35), 429px 7px rgba(255, 255, 255, 0.35), 1033px 1128px rgba(255, 255, 255, 0.35), 157px 297px rgba(255, 255, 255, 0.35),
545px 635px rgba(255, 255, 255, 0.35), 52px 1080px rgba(255, 255, 255, 0.35), 827px 1520px rgba(255, 255, 255, 0.35), 1121px 490px rgba(255, 255, 255, 0.35),
9px 309px rgba(255, 255, 255, 0.35), 1744px 1586px rgba(255, 255, 255, 0.35), 1014px 417px rgba(255, 255, 255, 0.35), 1534px 524px rgba(255, 255, 255, 0.35),
958px 552px rgba(255, 255, 255, 0.35), 1403px 1496px rgba(255, 255, 255, 0.35), 387px 703px rgba(255, 255, 255, 0.35), 1522px 548px rgba(255, 255, 255, 0.35),
1355px 282px rgba(255, 255, 255, 0.35), 1532px 601px rgba(255, 255, 255, 0.35), 1838px 790px rgba(255, 255, 255, 0.35), 290px 259px rgba(255, 255, 255, 0.35),
295px 598px rgba(255, 255, 255, 0.35), 1601px 539px rgba(255, 255, 255, 0.35), 1561px 1272px rgba(255, 255, 255, 0.35), 34px 1922px rgba(255, 255, 255, 0.35),
1024px 543px rgba(255, 255, 255, 0.35), 467px 369px rgba(255, 255, 255, 0.35), 722px 333px rgba(255, 255, 255, 0.35), 1976px 1255px rgba(255, 255, 255, 0.35),
766px 983px rgba(255, 255, 255, 0.35), 1582px 1285px rgba(255, 255, 255, 0.35), 12px 512px rgba(255, 255, 255, 0.35), 617px 1410px rgba(255, 255, 255, 0.35),
682px 577px rgba(255, 255, 255, 0.35), 1334px 1438px rgba(255, 255, 255, 0.35), 439px 327px rgba(255, 255, 255, 0.35), 1617px 1661px rgba(255, 255, 255, 0.35),
673px 129px rgba(255, 255, 255, 0.35), 794px 941px rgba(255, 255, 255, 0.35), 1386px 1902px rgba(255, 255, 255, 0.35), 37px 1353px rgba(255, 255, 255, 0.35),
1467px 1353px rgba(255, 255, 255, 0.35), 416px 18px rgba(255, 255, 255, 0.35), 187px 344px rgba(255, 255, 255, 0.35), 200px 1898px rgba(255, 255, 255, 0.35),
1491px 1619px rgba(255, 255, 255, 0.35), 811px 347px rgba(255, 255, 255, 0.35), 924px 1827px rgba(255, 255, 255, 0.35), 945px 217px rgba(255, 255, 255, 0.35),
1735px 1228px rgba(255, 255, 255, 0.35), 379px 1890px rgba(255, 255, 255, 0.35), 79px 761px rgba(255, 255, 255, 0.35), 825px 1837px rgba(255, 255, 255, 0.35),
1980px 1558px rgba(255, 255, 255, 0.35), 1308px 1573px rgba(255, 255, 255, 0.35), 1488px 1726px rgba(255, 255, 255, 0.35),
382px 1208px rgba(255, 255, 255, 0.35), 522px 595px rgba(255, 255, 255, 0.35), 1277px 1898px rgba(255, 255, 255, 0.35), 354px 552px rgba(255, 255, 255, 0.35),
161px 1784px rgba(255, 255, 255, 0.35), 614px 251px rgba(255, 255, 255, 0.35), 526px 1576px rgba(255, 255, 255, 0.35), 17px 212px rgba(255, 255, 255, 0.35),
179px 996px rgba(255, 255, 255, 0.35), 467px 1208px rgba(255, 255, 255, 0.35), 1944px 1838px rgba(255, 255, 255, 0.35), 1140px 1093px rgba(255, 255, 255, 0.35),
858px 1007px rgba(255, 255, 255, 0.35), 200px 1064px rgba(255, 255, 255, 0.35), 423px 1964px rgba(255, 255, 255, 0.35), 1945px 439px rgba(255, 255, 255, 0.35),
1377px 689px rgba(255, 255, 255, 0.35), 1120px 1437px rgba(255, 255, 255, 0.35), 1876px 668px rgba(255, 255, 255, 0.35), 907px 1324px rgba(255, 255, 255, 0.35),
343px 1976px rgba(255, 255, 255, 0.35), 1816px 1501px rgba(255, 255, 255, 0.35), 1849px 177px rgba(255, 255, 255, 0.35), 647px 91px rgba(255, 255, 255, 0.35),
1984px 1012px rgba(255, 255, 255, 0.35), 1336px 1300px rgba(255, 255, 255, 0.35), 128px 648px rgba(255, 255, 255, 0.35), 305px 1060px rgba(255, 255, 255, 0.35),
1324px 826px rgba(255, 255, 255, 0.35), 1263px 1314px rgba(255, 255, 255, 0.35), 1801px 629px rgba(255, 255, 255, 0.35), 1614px 1555px rgba(255, 255, 255, 0.35),
1634px 90px rgba(255, 255, 255, 0.35), 1603px 452px rgba(255, 255, 255, 0.35), 891px 1984px rgba(255, 255, 255, 0.35), 1556px 1906px rgba(255, 255, 255, 0.35),
121px 68px rgba(255, 255, 255, 0.35), 1676px 1714px rgba(255, 255, 255, 0.35), 516px 936px rgba(255, 255, 255, 0.35), 1947px 1492px rgba(255, 255, 255, 0.35),
1455px 1519px rgba(255, 255, 255, 0.35), 45px 602px rgba(255, 255, 255, 0.35), 205px 1039px rgba(255, 255, 255, 0.35), 793px 172px rgba(255, 255, 255, 0.35),
1562px 1739px rgba(255, 255, 255, 0.35), 1056px 110px rgba(255, 255, 255, 0.35), 1512px 379px rgba(255, 255, 255, 0.35), 1795px 1621px rgba(255, 255, 255, 0.35),
1848px 607px rgba(255, 255, 255, 0.35), 262px 1719px rgba(255, 255, 255, 0.35), 477px 991px rgba(255, 255, 255, 0.35), 483px 883px rgba(255, 255, 255, 0.35),
1239px 1197px rgba(255, 255, 255, 0.35), 1496px 647px rgba(255, 255, 255, 0.35), 1649px 25px rgba(255, 255, 255, 0.35), 1491px 1946px rgba(255, 255, 255, 0.35),
119px 996px rgba(255, 255, 255, 0.35), 179px 1472px rgba(255, 255, 255, 0.35), 1341px 808px rgba(255, 255, 255, 0.35), 1565px 1700px rgba(255, 255, 255, 0.35),
407px 1544px rgba(255, 255, 255, 0.35), 1754px 357px rgba(255, 255, 255, 0.35), 1288px 981px rgba(255, 255, 255, 0.35), 902px 1997px rgba(255, 255, 255, 0.35),
1755px 1668px rgba(255, 255, 255, 0.35), 186px 877px rgba(255, 255, 255, 0.35), 1202px 1882px rgba(255, 255, 255, 0.35), 461px 1213px rgba(255, 255, 255, 0.35),
1400px 748px rgba(255, 255, 255, 0.35), 1969px 1899px rgba(255, 255, 255, 0.35), 809px 522px rgba(255, 255, 255, 0.35), 514px 1219px rgba(255, 255, 255, 0.35),
374px 275px rgba(255, 255, 255, 0.35), 938px 1973px rgba(255, 255, 255, 0.35), 357px 552px rgba(255, 255, 255, 0.35), 144px 1722px rgba(255, 255, 255, 0.35),
1572px 912px rgba(255, 255, 255, 0.35), 402px 1858px rgba(255, 255, 255, 0.35), 1544px 1195px rgba(255, 255, 255, 0.35), 667px 1257px rgba(255, 255, 255, 0.35),
727px 1496px rgba(255, 255, 255, 0.35), 993px 232px rgba(255, 255, 255, 0.35), 1772px 313px rgba(255, 255, 255, 0.35), 1040px 1590px rgba(255, 255, 255, 0.35),
1204px 1973px rgba(255, 255, 255, 0.35), 1268px 79px rgba(255, 255, 255, 0.35), 1555px 1048px rgba(255, 255, 255, 0.35), 986px 1707px rgba(255, 255, 255, 0.35),
978px 1710px rgba(255, 255, 255, 0.35), 713px 360px rgba(255, 255, 255, 0.35), 407px 863px rgba(255, 255, 255, 0.35), 461px 736px rgba(255, 255, 255, 0.35),
284px 1608px rgba(255, 255, 255, 0.35), 103px 430px rgba(255, 255, 255, 0.35), 1283px 1319px rgba(255, 255, 255, 0.35), 977px 1186px rgba(255, 255, 255, 0.35),
1966px 1516px rgba(255, 255, 255, 0.35), 1287px 1129px rgba(255, 255, 255, 0.35), 70px 1098px rgba(255, 255, 255, 0.35), 1189px 889px rgba(255, 255, 255, 0.35),
1126px 1734px rgba(255, 255, 255, 0.35), 309px 1292px rgba(255, 255, 255, 0.35), 879px 764px rgba(255, 255, 255, 0.35), 65px 473px rgba(255, 255, 255, 0.35),
1003px 1959px rgba(255, 255, 255, 0.35), 658px 791px rgba(255, 255, 255, 0.35), 402px 1576px rgba(255, 255, 255, 0.35), 35px 622px rgba(255, 255, 255, 0.35),
529px 1589px rgba(255, 255, 255, 0.35), 164px 666px rgba(255, 255, 255, 0.35), 1876px 1290px rgba(255, 255, 255, 0.35), 1541px 526px rgba(255, 255, 255, 0.35),
270px 1297px rgba(255, 255, 255, 0.35), 440px 865px rgba(255, 255, 255, 0.35), 1500px 802px rgba(255, 255, 255, 0.35), 182px 1754px rgba(255, 255, 255, 0.35),
1264px 892px rgba(255, 255, 255, 0.35), 272px 1249px rgba(255, 255, 255, 0.35), 1289px 1535px rgba(255, 255, 255, 0.35), 190px 1646px rgba(255, 255, 255, 0.35),
955px 242px rgba(255, 255, 255, 0.35), 1456px 1597px rgba(255, 255, 255, 0.35), 1727px 1983px rgba(255, 255, 255, 0.35), 635px 801px rgba(255, 255, 255, 0.35),
226px 455px rgba(255, 255, 255, 0.35), 1396px 1710px rgba(255, 255, 255, 0.35), 849px 1863px rgba(255, 255, 255, 0.35), 237px 1264px rgba(255, 255, 255, 0.35),
839px 140px rgba(255, 255, 255, 0.35), 1122px 735px rgba(255, 255, 255, 0.35), 1280px 15px rgba(255, 255, 255, 0.35), 1318px 242px rgba(255, 255, 255, 0.35),
1819px 1148px rgba(255, 255, 255, 0.35), 333px 1392px rgba(255, 255, 255, 0.35), 1949px 553px rgba(255, 255, 255, 0.35), 1878px 1332px rgba(255, 255, 255, 0.35),
467px 548px rgba(255, 255, 255, 0.35), 1812px 1082px rgba(255, 255, 255, 0.35), 1067px 193px rgba(255, 255, 255, 0.35), 243px 156px rgba(255, 255, 255, 0.35),
483px 1616px rgba(255, 255, 255, 0.35), 1714px 933px rgba(255, 255, 255, 0.35), 759px 1800px rgba(255, 255, 255, 0.35), 1822px 995px rgba(255, 255, 255, 0.35),
1877px 572px rgba(255, 255, 255, 0.35), 581px 1084px rgba(255, 255, 255, 0.35), 107px 732px rgba(255, 255, 255, 0.35), 642px 1837px rgba(255, 255, 255, 0.35),
166px 1493px rgba(255, 255, 255, 0.35), 1555px 198px rgba(255, 255, 255, 0.35), 819px 307px rgba(255, 255, 255, 0.35), 947px 345px rgba(255, 255, 255, 0.35),
827px 224px rgba(255, 255, 255, 0.35), 927px 1394px rgba(255, 255, 255, 0.35), 540px 467px rgba(255, 255, 255, 0.35), 1093px 405px rgba(255, 255, 255, 0.35),
1140px 927px rgba(255, 255, 255, 0.35), 130px 529px rgba(255, 255, 255, 0.35), 33px 1980px rgba(255, 255, 255, 0.35), 1147px 1663px rgba(255, 255, 255, 0.35),
1616px 1436px rgba(255, 255, 255, 0.35), 528px 710px rgba(255, 255, 255, 0.35), 798px 1100px rgba(255, 255, 255, 0.35), 505px 1480px rgba(255, 255, 255, 0.35),
899px 641px rgba(255, 255, 255, 0.35), 1909px 1949px rgba(255, 255, 255, 0.35), 1311px 964px rgba(255, 255, 255, 0.35), 979px 1301px rgba(255, 255, 255, 0.35),
1393px 969px rgba(255, 255, 255, 0.35), 1793px 1886px rgba(255, 255, 255, 0.35), 292px 357px rgba(255, 255, 255, 0.35), 1196px 1718px rgba(255, 255, 255, 0.35),
1290px 1994px rgba(255, 255, 255, 0.35), 537px 1973px rgba(255, 255, 255, 0.35), 1181px 1674px rgba(255, 255, 255, 0.35),
1740px 1566px rgba(255, 255, 255, 0.35), 1307px 265px rgba(255, 255, 255, 0.35), 922px 522px rgba(255, 255, 255, 0.35), 1892px 472px rgba(255, 255, 255, 0.35),
384px 1746px rgba(255, 255, 255, 0.35), 392px 1098px rgba(255, 255, 255, 0.35), 647px 548px rgba(255, 255, 255, 0.35), 390px 1498px rgba(255, 255, 255, 0.35),
1246px 138px rgba(255, 255, 255, 0.35), 730px 876px rgba(255, 255, 255, 0.35), 192px 1472px rgba(255, 255, 255, 0.35), 1790px 1789px rgba(255, 255, 255, 0.35),
928px 311px rgba(255, 255, 255, 0.35), 1253px 1647px rgba(255, 255, 255, 0.35), 747px 1921px rgba(255, 255, 255, 0.35), 1561px 1025px rgba(255, 255, 255, 0.35),
1533px 1292px rgba(255, 255, 255, 0.35), 1985px 195px rgba(255, 255, 255, 0.35), 728px 729px rgba(255, 255, 255, 0.35), 1712px 1936px rgba(255, 255, 255, 0.35),
512px 1717px rgba(255, 255, 255, 0.35), 1528px 483px rgba(255, 255, 255, 0.35), 313px 1642px rgba(255, 255, 255, 0.35), 281px 1849px rgba(255, 255, 255, 0.35),
1212px 799px rgba(255, 255, 255, 0.35), 435px 1191px rgba(255, 255, 255, 0.35), 1422px 611px rgba(255, 255, 255, 0.35), 1718px 1964px rgba(255, 255, 255, 0.35),
411px 944px rgba(255, 255, 255, 0.35), 210px 636px rgba(255, 255, 255, 0.35), 1502px 1295px rgba(255, 255, 255, 0.35), 1434px 349px rgba(255, 255, 255, 0.35),
769px 60px rgba(255, 255, 255, 0.35), 747px 1053px rgba(255, 255, 255, 0.35), 789px 504px rgba(255, 255, 255, 0.35), 1436px 1264px rgba(255, 255, 255, 0.35),
1893px 1225px rgba(255, 255, 255, 0.35), 1394px 1788px rgba(255, 255, 255, 0.35), 1108px 1317px rgba(255, 255, 255, 0.35),
1673px 1395px rgba(255, 255, 255, 0.35), 854px 1010px rgba(255, 255, 255, 0.35), 1705px 80px rgba(255, 255, 255, 0.35), 1858px 148px rgba(255, 255, 255, 0.35),
1729px 344px rgba(255, 255, 255, 0.35), 1388px 664px rgba(255, 255, 255, 0.35), 895px 406px rgba(255, 255, 255, 0.35), 1479px 157px rgba(255, 255, 255, 0.35),
1441px 1157px rgba(255, 255, 255, 0.35), 552px 1900px rgba(255, 255, 255, 0.35), 516px 364px rgba(255, 255, 255, 0.35), 1647px 189px rgba(255, 255, 255, 0.35),
1427px 1071px rgba(255, 255, 255, 0.35), 785px 729px rgba(255, 255, 255, 0.35), 1080px 1710px rgba(255, 255, 255, 0.35), 504px 204px rgba(255, 255, 255, 0.35),
1177px 1622px rgba(255, 255, 255, 0.35), 657px 34px rgba(255, 255, 255, 0.35), 1296px 1099px rgba(255, 255, 255, 0.35), 248px 180px rgba(255, 255, 255, 0.35),
1212px 1568px rgba(255, 255, 255, 0.35), 667px 1562px rgba(255, 255, 255, 0.35), 695px 841px rgba(255, 255, 255, 0.35), 1608px 1247px rgba(255, 255, 255, 0.35),
751px 882px rgba(255, 255, 255, 0.35), 87px 167px rgba(255, 255, 255, 0.35), 607px 1368px rgba(255, 255, 255, 0.35), 1363px 1203px rgba(255, 255, 255, 0.35),
1836px 317px rgba(255, 255, 255, 0.35), 1668px 1703px rgba(255, 255, 255, 0.35), 830px 1154px rgba(255, 255, 255, 0.35), 1721px 1398px rgba(255, 255, 255, 0.35),
1601px 1280px rgba(255, 255, 255, 0.35), 976px 874px rgba(255, 255, 255, 0.35), 1743px 254px rgba(255, 255, 255, 0.35), 1020px 1815px rgba(255, 255, 255, 0.35),
1670px 1766px rgba(255, 255, 255, 0.35), 1890px 735px rgba(255, 255, 255, 0.35), 1379px 136px rgba(255, 255, 255, 0.35), 1864px 695px rgba(255, 255, 255, 0.35),
206px 965px rgba(255, 255, 255, 0.35), 1404px 1932px rgba(255, 255, 255, 0.35), 1923px 1360px rgba(255, 255, 255, 0.35), 247px 682px rgba(255, 255, 255, 0.35),
519px 1708px rgba(255, 255, 255, 0.35), 645px 750px rgba(255, 255, 255, 0.35), 1164px 1204px rgba(255, 255, 255, 0.35), 834px 323px rgba(255, 255, 255, 0.35),
172px 1350px rgba(255, 255, 255, 0.35), 213px 972px rgba(255, 255, 255, 0.35), 1837px 190px rgba(255, 255, 255, 0.35), 285px 1806px rgba(255, 255, 255, 0.35),
1047px 1299px rgba(255, 255, 255, 0.35), 1548px 825px rgba(255, 255, 255, 0.35), 1730px 324px rgba(255, 255, 255, 0.35), 1346px 1909px rgba(255, 255, 255, 0.35),
772px 270px rgba(255, 255, 255, 0.35), 345px 1190px rgba(255, 255, 255, 0.35), 478px 1433px rgba(255, 255, 255, 0.35), 1479px 25px rgba(255, 255, 255, 0.35),
1994px 1830px rgba(255, 255, 255, 0.35), 1744px 732px rgba(255, 255, 255, 0.35), 20px 1635px rgba(255, 255, 255, 0.35), 690px 1795px rgba(255, 255, 255, 0.35),
1594px 569px rgba(255, 255, 255, 0.35), 579px 245px rgba(255, 255, 255, 0.35), 1398px 733px rgba(255, 255, 255, 0.35), 408px 1352px rgba(255, 255, 255, 0.35),
1774px 120px rgba(255, 255, 255, 0.35), 1152px 1370px rgba(255, 255, 255, 0.35), 1698px 1810px rgba(255, 255, 255, 0.35), 710px 1450px rgba(255, 255, 255, 0.35),
665px 286px rgba(255, 255, 255, 0.35), 493px 1720px rgba(255, 255, 255, 0.35), 786px 5px rgba(255, 255, 255, 0.35), 637px 1140px rgba(255, 255, 255, 0.35),
764px 324px rgba(255, 255, 255, 0.35), 927px 310px rgba(255, 255, 255, 0.35), 938px 1424px rgba(255, 255, 255, 0.35), 1884px 744px rgba(255, 255, 255, 0.35),
913px 462px rgba(255, 255, 255, 0.35), 1831px 1936px rgba(255, 255, 255, 0.35), 1527px 249px rgba(255, 255, 255, 0.35), 36px 1381px rgba(255, 255, 255, 0.35),
1597px 581px rgba(255, 255, 255, 0.35), 1530px 355px rgba(255, 255, 255, 0.35), 949px 459px rgba(255, 255, 255, 0.35), 799px 828px rgba(255, 255, 255, 0.35),
242px 1471px rgba(255, 255, 255, 0.35), 654px 797px rgba(255, 255, 255, 0.35), 796px 594px rgba(255, 255, 255, 0.35), 1365px 678px rgba(255, 255, 255, 0.35),
752px 23px rgba(255, 255, 255, 0.35), 1630px 541px rgba(255, 255, 255, 0.35), 982px 72px rgba(255, 255, 255, 0.35), 1733px 1831px rgba(255, 255, 255, 0.35),
21px 412px rgba(255, 255, 255, 0.35), 775px 998px rgba(255, 255, 255, 0.35), 335px 1945px rgba(255, 255, 255, 0.35), 264px 583px rgba(255, 255, 255, 0.35),
158px 1311px rgba(255, 255, 255, 0.35), 528px 164px rgba(255, 255, 255, 0.35), 1978px 574px rgba(255, 255, 255, 0.35), 717px 1203px rgba(255, 255, 255, 0.35),
734px 1591px rgba(255, 255, 255, 0.35), 1555px 820px rgba(255, 255, 255, 0.35), 16px 1943px rgba(255, 255, 255, 0.35), 1625px 1177px rgba(255, 255, 255, 0.35),
1236px 690px rgba(255, 255, 255, 0.35), 1585px 1590px rgba(255, 255, 255, 0.35), 1737px 1728px rgba(255, 255, 255, 0.35), 721px 698px rgba(255, 255, 255, 0.35),
1804px 1186px rgba(255, 255, 255, 0.35), 166px 980px rgba(255, 255, 255, 0.35), 1850px 230px rgba(255, 255, 255, 0.35), 330px 1712px rgba(255, 255, 255, 0.35),
95px 797px rgba(255, 255, 255, 0.35), 1948px 1078px rgba(255, 255, 255, 0.35), 469px 939px rgba(255, 255, 255, 0.35), 1269px 1899px rgba(255, 255, 255, 0.35),
955px 1220px rgba(255, 255, 255, 0.35), 1137px 1075px rgba(255, 255, 255, 0.35), 312px 1293px rgba(255, 255, 255, 0.35), 986px 1762px rgba(255, 255, 255, 0.35),
1103px 1238px rgba(255, 255, 255, 0.35), 428px 1993px rgba(255, 255, 255, 0.35), 355px 570px rgba(255, 255, 255, 0.35), 977px 1836px rgba(255, 255, 255, 0.35),
1395px 1092px rgba(255, 255, 255, 0.35), 276px 913px rgba(255, 255, 255, 0.35), 1743px 656px rgba(255, 255, 255, 0.35), 773px 502px rgba(255, 255, 255, 0.35),
1686px 1322px rgba(255, 255, 255, 0.35), 1516px 1945px rgba(255, 255, 255, 0.35), 1334px 501px rgba(255, 255, 255, 0.35), 266px 156px rgba(255, 255, 255, 0.35),
455px 655px rgba(255, 255, 255, 0.35), 798px 72px rgba(255, 255, 255, 0.35), 1059px 1259px rgba(255, 255, 255, 0.35), 1402px 1687px rgba(255, 255, 255, 0.35),
236px 1329px rgba(255, 255, 255, 0.35), 1455px 786px rgba(255, 255, 255, 0.35), 146px 1228px rgba(255, 255, 255, 0.35), 1851px 823px rgba(255, 255, 255, 0.35),
1062px 100px rgba(255, 255, 255, 0.35), 1220px 953px rgba(255, 255, 255, 0.35), 20px 1826px rgba(255, 255, 255, 0.35), 36px 1063px rgba(255, 255, 255, 0.35),
1525px 338px rgba(255, 255, 255, 0.35), 790px 1521px rgba(255, 255, 255, 0.35), 741px 1099px rgba(255, 255, 255, 0.35), 288px 1489px rgba(255, 255, 255, 0.35),
700px 1060px rgba(255, 255, 255, 0.35), 390px 1071px rgba(255, 255, 255, 0.35), 411px 1036px rgba(255, 255, 255, 0.35), 1853px 1072px rgba(255, 255, 255, 0.35),
1446px 1085px rgba(255, 255, 255, 0.35), 1164px 874px rgba(255, 255, 255, 0.35), 924px 925px rgba(255, 255, 255, 0.35), 291px 271px rgba(255, 255, 255, 0.35),
1257px 1964px rgba(255, 255, 255, 0.35), 1580px 1352px rgba(255, 255, 255, 0.35), 1507px 1216px rgba(255, 255, 255, 0.35), 211px 956px rgba(255, 255, 255, 0.35),
985px 1195px rgba(255, 255, 255, 0.35), 975px 1640px rgba(255, 255, 255, 0.35), 518px 101px rgba(255, 255, 255, 0.35), 663px 1395px rgba(255, 255, 255, 0.35),
914px 532px rgba(255, 255, 255, 0.35), 145px 1320px rgba(255, 255, 255, 0.35), 69px 1397px rgba(255, 255, 255, 0.35), 982px 523px rgba(255, 255, 255, 0.35),
257px 725px rgba(255, 255, 255, 0.35), 1599px 831px rgba(255, 255, 255, 0.35), 1636px 1513px rgba(255, 255, 255, 0.35), 1250px 1158px rgba(255, 255, 255, 0.35),
1132px 604px rgba(255, 255, 255, 0.35), 183px 102px rgba(255, 255, 255, 0.35), 1057px 318px rgba(255, 255, 255, 0.35), 1247px 1835px rgba(255, 255, 255, 0.35),
1983px 1110px rgba(255, 255, 255, 0.35), 1077px 1455px rgba(255, 255, 255, 0.35), 921px 1770px rgba(255, 255, 255, 0.35), 806px 1350px rgba(255, 255, 255, 0.35),
1938px 1992px rgba(255, 255, 255, 0.35), 855px 1260px rgba(255, 255, 255, 0.35), 902px 1345px rgba(255, 255, 255, 0.35), 658px 1908px rgba(255, 255, 255, 0.35),
1845px 679px rgba(255, 255, 255, 0.35), 712px 1482px rgba(255, 255, 255, 0.35), 595px 950px rgba(255, 255, 255, 0.35), 1784px 1992px rgba(255, 255, 255, 0.35),
1847px 1785px rgba(255, 255, 255, 0.35), 691px 1004px rgba(255, 255, 255, 0.35), 175px 1179px rgba(255, 255, 255, 0.35), 1666px 1911px rgba(255, 255, 255, 0.35),
41px 61px rgba(255, 255, 255, 0.35), 971px 1080px rgba(255, 255, 255, 0.35), 1830px 1450px rgba(255, 255, 255, 0.35), 1351px 1518px rgba(255, 255, 255, 0.35),
1257px 99px rgba(255, 255, 255, 0.35), 1395px 1498px rgba(255, 255, 255, 0.35), 1117px 252px rgba(255, 255, 255, 0.35), 1779px 597px rgba(255, 255, 255, 0.35),
1346px 729px rgba(255, 255, 255, 0.35), 1108px 1144px rgba(255, 255, 255, 0.35), 402px 691px rgba(255, 255, 255, 0.35), 72px 496px rgba(255, 255, 255, 0.35),
1673px 1604px rgba(255, 255, 255, 0.35), 1497px 974px rgba(255, 255, 255, 0.35), 1865px 1664px rgba(255, 255, 255, 0.35), 88px 806px rgba(255, 255, 255, 0.35),
918px 77px rgba(255, 255, 255, 0.35), 244px 1118px rgba(255, 255, 255, 0.35), 256px 1820px rgba(255, 255, 255, 0.35), 1851px 1840px rgba(255, 255, 255, 0.35),
605px 1851px rgba(255, 255, 255, 0.35), 634px 383px rgba(255, 255, 255, 0.35), 865px 37px rgba(255, 255, 255, 0.35), 943px 1024px rgba(255, 255, 255, 0.35),
1951px 177px rgba(255, 255, 255, 0.35), 1097px 523px rgba(255, 255, 255, 0.35), 985px 1700px rgba(255, 255, 255, 0.35), 1243px 122px rgba(255, 255, 255, 0.35),
768px 1070px rgba(255, 255, 255, 0.35), 468px 194px rgba(255, 255, 255, 0.35), 320px 1867px rgba(255, 255, 255, 0.35), 1850px 185px rgba(255, 255, 255, 0.35),
380px 1616px rgba(255, 255, 255, 0.35), 468px 1294px rgba(255, 255, 255, 0.35), 1122px 1743px rgba(255, 255, 255, 0.35), 884px 299px rgba(255, 255, 255, 0.35),
1300px 1917px rgba(255, 255, 255, 0.35), 1860px 396px rgba(255, 255, 255, 0.35), 1270px 990px rgba(255, 255, 255, 0.35), 529px 733px rgba(255, 255, 255, 0.35),
1975px 1347px rgba(255, 255, 255, 0.35), 1885px 685px rgba(255, 255, 255, 0.35), 226px 506px rgba(255, 255, 255, 0.35), 651px 878px rgba(255, 255, 255, 0.35),
1323px 680px rgba(255, 255, 255, 0.35), 1284px 680px rgba(255, 255, 255, 0.35), 238px 1967px rgba(255, 255, 255, 0.35), 911px 174px rgba(255, 255, 255, 0.35),
1111px 521px rgba(255, 255, 255, 0.35), 1150px 85px rgba(255, 255, 255, 0.35), 794px 502px rgba(255, 255, 255, 0.35), 484px 1856px rgba(255, 255, 255, 0.35),
1809px 368px rgba(255, 255, 255, 0.35), 112px 953px rgba(255, 255, 255, 0.35), 590px 1009px rgba(255, 255, 255, 0.35), 1655px 311px rgba(255, 255, 255, 0.35),
100px 1026px rgba(255, 255, 255, 0.35), 1803px 352px rgba(255, 255, 255, 0.35), 865px 306px rgba(255, 255, 255, 0.35), 1077px 1019px rgba(255, 255, 255, 0.35),
1335px 872px rgba(255, 255, 255, 0.35), 1647px 1298px rgba(255, 255, 255, 0.35), 1233px 1387px rgba(255, 255, 255, 0.35), 698px 1036px rgba(255, 255, 255, 0.35),
659px 1860px rgba(255, 255, 255, 0.35), 388px 1412px rgba(255, 255, 255, 0.35), 1212px 458px rgba(255, 255, 255, 0.35), 755px 1468px rgba(255, 255, 255, 0.35),
696px 1654px rgba(255, 255, 255, 0.35), 1144px 60px rgba(255, 255, 255, 0.35);
}This code seems complicated, but it is not. It only sets up some basic variables and creates the styles needed for the star background.
Now let’s go to the HTML file, “index.html”. Here you also need to paste the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="./styles.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
background: '#010101',
cardBackground: "#050505",
border: "#101010",
purple: '#9d4edd',
lightPurple: "#c77dff",
darkPurple: "#7b2cbf",
offWhite: '#fefdfd',
},
keyframes: {
blinkBackground: {
"50%": {
filter: "brightness(.75) blur(256px)",
transform: "scale(1)"
},
"0%, 100%": {
filter: "brightness(.25) blur(256px)",
transform: "scale(.75)"
},
}
},
animation: {
"blinkBackground": "blinkBackground 15s linear infinite"
}
}
}
}
</script>
</head>
<body class="bg-background w-screen h-fit overflow-x-hidden">
</body>
</html>The code is simply the base of our project. We import our styles, Tailwind, and icons, and configure our TailwindCSS configs.
Your project is now set up.
Stars
The first thing we need to do is create the stars. Simply paste the following code into the body of your project:
<div id="stars"></div>Navbar
Now we need to create the navbar. The following code is the navbar for our project, it should be put after the stars:
<!--
Navbar
-->
<div class="w-full h-16 border-b border-border bg-background flex px-4 py-0 justify-end">
<ul class="flex h-full items-center gap-4 text-mds">
<li><a href="#" class="hover:text-lightPurple transition-colors">Home</a></li>
<li><a href="#features" class="hover:text-lightPurple transition-colors">Features</a></li>
<li><a href="#pricing" class="hover:text-lightPurple transition-colors">Prices</a></li>
<li>
<button class="py-2 px-4 bg-purple rounded text-sm hover:bg-darkPurple transition-colors">Sign Up</button>
</li>
</ul>
</div>Features
The following code is the code for our features section (and the bento grids). The code should be put after the navbar:
<!--
Bento Grid
-->
<div class="w-full min-h-[calc(100vh-4rem-1px)] h-fit p-4 flex flex-col items-center justify-center relative gap-12"
id="features">
<h6 class="text-6xl font-bold"> Features</h6>
<div class="absolute h-full w-full max-w-5xl bg-purple rounded-full -z-10 blur-[256px] animate-blinkBackground">
</div>
<div
class="w-full h-fit max-w-7xl grid xl:grid-cols-4 xl:grid-rows-2 gap-8 grid-cols-1 grid-rows-6 sm:grid-cols-2 sm:grid-rows-3">
<div class="h-80 flex flex-col bg-cardBackground border border-border rounded-xl p-8 gap-4">
<div class="w-full h-1/3 flex flex-col gap-4">
<h4 class="text-lg font-bold">Conversion Optimization</h4>
<hr class="border-[1px] border-border ">
<p class="text-sm text-gray-400">Uses AI to optimize landing pages and ads to increase conversion rates.</p>
</div>
<div class="h-2/3 h-full w-full flex items-center justify-center">
<i
class="bi bi-graph-up text-7xl bg-gradient-to-tr from-lightPurple to-purple bg-clip-text text-transparent"></i>
</div>
</div>
<div class="h-80 flex flex-col bg-cardBackground border border-border rounded-xl p-8 xl:col-span-2 gap-4">
<div class="w-full h-1/3 flex flex-col gap-4">
<h4 class="text-lg font-bold">Competitive Intelligence</h4>
<hr class="border-[1px] border-border">
<p class="text-sm text-gray-400">Monitors your competitors' marketing efforts and metrics to identify
opportunities and
optimize your own strategy.</p>
</div>
<div class="h-2/3 h-full w-full flex items-center justify-center">
<i class="bi bi-cpu text-7xl bg-gradient-to-tr from-lightPurple to-purple bg-clip-text text-transparent"></i>
</div>
</div>
<div class="h-80 flex flex-col bg-cardBackground border border-border rounded-xl p-8 gap-4 xl:col-start-4">
<div class="w-full h-1/3 flex flex-col gap-4">
<h4 class="text-lg font-bold">Analytics</h4>
<hr class="border-[1px] border-border">
<p class="text-sm text-gray-400">Provides detailed analytics to identify opportunities.</p>
</div>
<div class="h-2/3 h-full w-full flex items-center justify-center">
<i
class="bi bi-pie-chart text-7xl bg-gradient-to-tr from-lightPurple to-purple bg-clip-text text-transparent"></i>
</div>
</div>
<div class="h-80 flex flex-col bg-cardBackground border border-border rounded-xl p-8 gap-4 xl:row-start-2">
<div class="w-full h-1/3 flex flex-col gap-4">
<h4 class="text-lg font-bold">Campaign Automation</h4>
<hr class="border-[1px] border-border">
<p class="text-sm text-gray-400">Automates repetitive marketing tasks to save time.</p>
</div>
<div class="h-2/3 h-full w-full flex items-center justify-center">
<i class="bi bi-gear text-7xl bg-gradient-to-tr from-lightPurple to-purple bg-clip-text text-transparent"></i>
</div>
</div>
<div class="h-80 flex flex-col bg-cardBackground border border-border rounded-xl p-8 gap-4 xl:row-start-2">
<div class="w-full h-1/3 flex flex-col gap-4">
<h4 class="text-lg font-bold">Lead Scoring</h4>
<hr class="border-[1px] border-border">
<p class="text-sm text-gray-400">Scores and prioritizes leads based on fit and readiness to buy.</p>
</div>
<div class="h-2/3 h-full w-full flex items-center justify-center">
<i
class="bi bi-crosshair text-7xl bg-gradient-to-tr from-lightPurple to-purple bg-clip-text text-transparent"></i>
</div>
</div>
<div
class="h-80 flex flex-col bg-cardBackground border border-border rounded-xl p-8 gap-4 xl:row-start-2 xl:col-span-2">
<div class="w-full h-1/3 flex flex-col gap-4">
<h4 class="text-lg font-bold">Personalization</h4>
<hr class="border-[1px] border-border">
<p class="text-sm text-gray-400">Customizes messaging and offers for each visitor to improve engagement.</p>
</div>
<div class="h-2/3 h-full w-full flex items-center justify-center">
<i
class="bi bi-person text-7xl bg-gradient-to-tr from-lightPurple to-purple bg-clip-text text-transparent"></i>
</div>
</div>
</div>
</div>Pricing
The last thing we need is the pricing section. The following code should be put after our features section:
<!--
Bento Grid
-->
<div class="w-full min-h-[calc(100vh-4rem-1px)] h-fit p-4 flex flex-col items-center justify-center relative gap-12"
id="features">
<h6 class="text-6xl font-bold"> Features</h6>
<div class="absolute h-full w-full max-w-5xl bg-purple rounded-full -z-10 blur-[256px] animate-blinkBackground">
</div>
<div
class="w-full h-fit max-w-7xl grid xl:grid-cols-4 xl:grid-rows-2 gap-8 grid-cols-1 grid-rows-6 sm:grid-cols-2 sm:grid-rows-3">
<div class="h-80 flex flex-col bg-cardBackground border border-border rounded-xl p-8 gap-4">
<div class="w-full h-1/3 flex flex-col gap-4">
<h4 class="text-lg font-bold">Conversion Optimization</h4>
<hr class="border-[1px] border-border ">
<p class="text-sm text-gray-400">Uses AI to optimize landing pages and ads to increase conversion rates.</p>
</div>
<div class="h-2/3 h-full w-full flex items-center justify-center">
<i
class="bi bi-graph-up text-7xl bg-gradient-to-tr from-lightPurple to-purple bg-clip-text text-transparent"></i>
</div>
</div>
<div class="h-80 flex flex-col bg-cardBackground border border-border rounded-xl p-8 xl:col-span-2 gap-4">
<div class="w-full h-1/3 flex flex-col gap-4">
<h4 class="text-lg font-bold">Competitive Intelligence</h4>
<hr class="border-[1px] border-border">
<p class="text-sm text-gray-400">Monitors your competitors' marketing efforts and metrics to identify
opportunities and
optimize your own strategy.</p>
</div>
<div class="h-2/3 h-full w-full flex items-center justify-center">
<i class="bi bi-cpu text-7xl bg-gradient-to-tr from-lightPurple to-purple bg-clip-text text-transparent"></i>
</div>
</div>
<div class="h-80 flex flex-col bg-cardBackground border border-border rounded-xl p-8 gap-4 xl:col-start-4">
<div class="w-full h-1/3 flex flex-col gap-4">
<h4 class="text-lg font-bold">Analytics</h4>
<hr class="border-[1px] border-border">
<p class="text-sm text-gray-400">Provides detailed analytics to identify opportunities.</p>
</div>
<div class="h-2/3 h-full w-full flex items-center justify-center">
<i
class="bi bi-pie-chart text-7xl bg-gradient-to-tr from-lightPurple to-purple bg-clip-text text-transparent"></i>
</div>
</div>
<div class="h-80 flex flex-col bg-cardBackground border border-border rounded-xl p-8 gap-4 xl:row-start-2">
<div class="w-full h-1/3 flex flex-col gap-4">
<h4 class="text-lg font-bold">Campaign Automation</h4>
<hr class="border-[1px] border-border">
<p class="text-sm text-gray-400">Automates repetitive marketing tasks to save time.</p>
</div>
<div class="h-2/3 h-full w-full flex items-center justify-center">
<i class="bi bi-gear text-7xl bg-gradient-to-tr from-lightPurple to-purple bg-clip-text text-transparent"></i>
</div>
</div>
<div class="h-80 flex flex-col bg-cardBackground border border-border rounded-xl p-8 gap-4 xl:row-start-2">
<div class="w-full h-1/3 flex flex-col gap-4">
<h4 class="text-lg font-bold">Lead Scoring</h4>
<hr class="border-[1px] border-border">
<p class="text-sm text-gray-400">Scores and prioritizes leads based on fit and readiness to buy.</p>
</div>
<div class="h-2/3 h-full w-full flex items-center justify-center">
<i
class="bi bi-crosshair text-7xl bg-gradient-to-tr from-lightPurple to-purple bg-clip-text text-transparent"></i>
</div>
</div>
<div
class="h-80 flex flex-col bg-cardBackground border border-border rounded-xl p-8 gap-4 xl:row-start-2 xl:col-span-2">
<div class="w-full h-1/3 flex flex-col gap-4">
<h4 class="text-lg font-bold">Personalization</h4>
<hr class="border-[1px] border-border">
<p class="text-sm text-gray-400">Customizes messaging and offers for each visitor to improve engagement.</p>
</div>
<div class="h-2/3 h-full w-full flex items-center justify-center">
<i
class="bi bi-person text-7xl bg-gradient-to-tr from-lightPurple to-purple bg-clip-text text-transparent"></i>
</div>
</div>
</div>
</div>Rounding up
Congratulations! You have now created your landing page. But how do I see it? Simply open the “index.html” file, by double-clicking it. The landing page should now be in your browser. You can also use VS Code extensions such as “Live Server”, to view it.