Working with slider in dev branch
This commit is contained in:
parent
696af07edd
commit
327d13742e
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 5503
|
||||
}
|
||||
BIN
images/elink.webp
Normal file
BIN
images/elink.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
images/evil.webp
Normal file
BIN
images/evil.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
images/involv.webp
Normal file
BIN
images/involv.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
47
index.html
Normal file
47
index.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Creating image Slider</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<h1>Featured Projects</h1>
|
||||
<p>Learn how we are delivering cutting-edge solutions and transforming businesses.</p>
|
||||
<div class="featured-projects">
|
||||
<div class="project-description">
|
||||
<h1 id="project-title">EarthLink Fiber Internet</h1>
|
||||
<p id="project-text">
|
||||
Earthlink epitomizes leadership in digital innovation, seamlessly blending advanced technology with unbeatable connectivity. Our team led the development and design efforts for their digital infrastructure, ensuring seamless integration and optimal performance.
|
||||
</p>
|
||||
<div class="indicators">
|
||||
<span id="indicator-0" onclick="goToProject(0)" class="active"></span>
|
||||
<span id="indicator-1" onclick="goToProject(1)"></span>
|
||||
<span id="indicator-2" onclick="goToProject(2)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-cards">
|
||||
<img id="image-1" class="active" src="images/elink.webp" alt="EarthLink Project" onclick="nextProject()">
|
||||
<img id="image-2" src="images/evil.webp" alt="Involvvely Project" onclick="nextProject()">
|
||||
<img id="image-3" src="images/involv.webp" alt="Evil Genius Project" onclick="nextProject()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="logos">
|
||||
<div class="logos-slide">
|
||||
<img src="./logos/3m.svg" alt="3M Logo" />
|
||||
<img src="./logos/barstool-store.svg" alt="Barstool Store Logo" />
|
||||
<img src="./logos/budweiser.svg" alt="Budweiser Logo" />
|
||||
<img src="./logos/buzzfeed.svg" alt="Buzzfeed Logo" />
|
||||
<img src="./logos/forbes.svg" alt="Forbes Logo" />
|
||||
<img src="./logos/macys.svg" alt="Macy's Logo" />
|
||||
<img src="./logos/menshealth.svg" alt="Men's Health Logo" />
|
||||
<img src="./logos/mrbeast.svg" alt="MrBeast Logo" />
|
||||
</div>
|
||||
</footer>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
3
logos/3m.svg
Normal file
3
logos/3m.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="94" height="50" viewBox="0 0 94 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M73.9018 1.10773L67.1751 29.0647L60.4293 1.10773H40.9454V11.4313C38.5779 2.39727 29.8926 0.131471 22.1318 0.00275999C12.6692 -0.123522 2.18442 4.06565 1.82075 16.8493H14.9082C14.9082 12.9904 18.3667 10.7805 21.6326 10.8363C25.6426 10.8023 27.4871 12.5509 27.5798 15.2732C27.4419 17.6362 26.0775 19.2803 21.6659 19.2803H17.2638V28.5572H21.2595C23.5295 28.5572 26.6884 29.82 26.812 33.1228C26.9641 37.0594 24.2853 38.7885 20.9885 38.8225C15.1032 38.5991 13.5843 33.98 13.5843 30.007H0C0.0570469 32.6832 -0.0285235 50.1272 21.2618 49.9985C31.4613 50.0932 38.8846 45.7122 40.9787 39.6725V48.9299H54.0804V18.7679L61.3254 48.9299H73.0319L80.303 18.8019V48.9567H93.6709V1.10773H73.9018ZM40.9882 28.9992C39.3195 25.473 36.9711 23.9309 35.6495 23.4427C38.4234 22.1823 39.8758 20.4727 40.9882 17.0655V28.9992Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 935 B |
3
logos/barstool-store.svg
Normal file
3
logos/barstool-store.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.9 KiB |
3
logos/budweiser.svg
Normal file
3
logos/budweiser.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
7
logos/buzzfeed.svg
Normal file
7
logos/buzzfeed.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="220" height="40" viewBox="0 0 220 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.394531 39.0476V0H17.0519C24.151 0 27.8019 4.74509 27.8019 9.94084C27.8019 14.792 24.8863 18.1321 21.3621 18.9008C25.3933 19.5371 28.5372 23.5929 28.5372 28.4441C28.5372 34.3555 24.8356 39.0476 17.6858 39.0476H0.394531ZM19.6887 11.4253C19.6887 9.01303 18.0154 7.31646 15.3279 7.31646H8.35561V15.5077H15.3279C18.0154 15.5077 19.6887 13.9437 19.6887 11.4253ZM20.424 27.2777C20.424 24.8123 18.7506 22.8242 15.6575 22.8242H8.35561V31.7312H15.6828C18.6239 31.7312 20.424 30.0876 20.424 27.2777ZM31.3515 27.1755V10.4762H38.642V26.9406C38.642 30.2544 40.6326 32.6549 44.5106 32.6549C48.3368 32.6549 50.3533 30.2544 50.3533 26.9406V10.4762H57.618V27.1494C57.618 34.1422 53.4556 39.0476 44.5364 39.0476C35.6172 39.0476 31.3515 34.09 31.3515 27.1755Z" fill="currentColor"/>
|
||||
<path d="M59.4941 39.0476V33.4248L71.9135 17.0362H59.4941V10.4762H81.7756V15.8581L69.1246 32.4876H82.0083V39.0476H59.4941Z" fill="currentColor"/>
|
||||
<path d="M84.8225 39.0476V33.4248L97.2419 17.0362H84.8225V10.4762H107.104V15.8581L94.453 32.4876H107.337V39.0476H84.8225Z" fill="currentColor"/>
|
||||
<path d="M109.213 39.0476V0H135.479V7.31619H117.283V15.5076H130.981V22.8238H117.283V39.0476H109.213Z" fill="currentColor"/>
|
||||
<path d="M133.603 25.2117C133.603 17.0663 139.563 10.4762 147.908 10.4762C156.2 10.4762 161.746 16.7764 161.746 25.8971V27.6369H141.196C141.714 31.0638 144.461 33.9371 149.152 33.9371C151.51 33.9371 154.697 32.9354 156.485 31.1956L159.75 36.0986C157.004 38.6556 152.65 40 148.374 40C139.952 40 133.603 34.227 133.603 25.2117ZM147.908 16.5391C143.399 16.5391 141.429 19.7287 141.144 22.523H154.775C154.542 19.8342 152.702 16.5391 147.908 16.5391ZM162.684 25.2117C162.684 17.0663 168.644 10.4762 176.988 10.4762C185.281 10.4762 190.827 16.7764 190.827 25.8971V27.6369H170.277C170.795 31.0638 173.542 33.9371 178.232 33.9371C180.591 33.9371 183.778 32.9354 185.566 31.1956L188.831 36.0986C186.084 38.6556 181.731 40 177.455 40C169.033 40 162.684 34.227 162.684 25.2117ZM176.988 15.5867C172.479 15.5867 170.51 18.7764 170.225 21.5706H183.856C183.622 18.8818 181.783 15.5867 176.988 15.5867ZM193.641 39.0476V11.4286H204.824C213.588 11.4286 219.907 16.6378 219.907 25.2252C219.907 33.7868 213.614 39.0476 204.876 39.0476H193.641ZM212.808 25.2252C212.808 20.9444 210.207 17.3856 205.11 17.3856H200.585V33.0906H205.11C209.973 33.0906 212.808 29.3255 212.808 25.2252Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
1
logos/forbes.svg
Normal file
1
logos/forbes.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="fs-icon fs-icon--forbes-logo" viewBox="0 0 200 54"><path d="M113.3 18.2c0-5.8.1-11.2.4-16.2L98.4 4.9v1.4l1.5.2c1.1.1 1.8.5 2.2 1.1.4.7.7 1.7.9 3.2.2 2.9.4 9.5.3 19.9 0 10.3-.1 16.8-.3 19.3 5.5 1.2 9.8 1.7 13 1.7 6 0 10.7-1.7 14.1-5.2 3.4-3.4 5.2-8.2 5.2-14.1 0-4.7-1.3-8.6-3.9-11.7-2.6-3.1-5.9-4.6-9.8-4.6-2.6 0-5.3.7-8.3 2.1zm.3 30.8c-.2-3.2-.4-12.8-.4-28.5.9-.3 2.1-.5 3.6-.5 2.4 0 4.3 1.2 5.7 3.7 1.4 2.5 2.1 5.5 2.1 9.3 0 4.7-.8 8.5-2.4 11.7-1.6 3.1-3.6 4.7-6.1 4.7-.8-.2-1.6-.3-2.5-.4zM41 3H1v2l2.1.2c1.6.3 2.7.9 3.4 1.8.7 1 1.1 2.6 1.2 4.8.8 10.8.8 20.9 0 30.2-.2 2.2-.6 3.8-1.2 4.8-.7 1-1.8 1.6-3.4 1.8l-2.1.3v2h25.8v-2l-2.7-.2c-1.6-.2-2.7-.9-3.4-1.8-.7-1-1.1-2.6-1.2-4.8-.3-4-.5-8.6-.5-13.7l5.4.1c2.9.1 4.9 2.3 5.9 6.7h2V18.9h-2c-1 4.3-2.9 6.5-5.9 6.6l-5.4.1c0-9 .2-15.4.5-19.3h7.9c5.6 0 9.4 3.6 11.6 10.8l2.4-.7L41 3zm-4.7 30.8c0 5.2 1.5 9.5 4.4 12.9 2.9 3.4 7.2 5 12.6 5s9.8-1.7 13-5.2c3.2-3.4 4.7-7.7 4.7-12.9s-1.5-9.5-4.4-12.9c-2.9-3.4-7.2-5-12.6-5s-9.8 1.7-13 5.2c-3.2 3.4-4.7 7.7-4.7 12.9zm22.3-11.4c1.2 2.9 1.7 6.7 1.7 11.3 0 10.6-2.2 15.8-6.5 15.8-2.2 0-3.9-1.5-5.1-4.5-1.2-3-1.7-6.8-1.7-11.3C47 23.2 49.2 18 53.5 18c2.2-.1 3.9 1.4 5.1 4.4zm84.5 24.3c3.3 3.3 7.5 5 12.5 5 3.1 0 5.8-.6 8.2-1.9 2.4-1.2 4.3-2.7 5.6-4.5l-1-1.2c-2.2 1.7-4.7 2.5-7.6 2.5-4 0-7.1-1.3-9.2-4-2.2-2.7-3.2-6.1-3-10.5H170c0-4.8-1.2-8.7-3.7-11.8-2.5-3-6-4.5-10.5-4.5-5.6 0-9.9 1.8-13 5.3-3.1 3.5-4.6 7.8-4.6 12.9 0 5.2 1.6 9.4 4.9 12.7zm7.4-25.1c1.1-2.4 2.5-3.6 4.4-3.6 3 0 4.5 3.8 4.5 11.5l-10.6.2c.1-3 .6-5.7 1.7-8.1zm46.4-4c-2.7-1.2-6.1-1.9-10.2-1.9-4.2 0-7.5 1.1-10 3.2s-3.8 4.7-3.8 7.8c0 2.7.8 4.8 2.3 6.3 1.5 1.5 3.9 2.8 7 3.9 2.8 1 4.8 2 5.8 2.9 1 1 1.6 2.1 1.6 3.6 0 1.4-.5 2.7-1.6 3.7-1 1.1-2.4 1.6-4.2 1.6-4.4 0-7.7-3.2-10-9.6l-1.7.5.4 10c3.6 1.4 7.6 2.1 12 2.1 4.6 0 8.1-1 10.7-3.1 2.6-2 3.9-4.9 3.9-8.5 0-2.4-.6-4.4-1.9-5.9-1.3-1.5-3.4-2.8-6.4-4-3.3-1.2-5.6-2.3-6.8-3.3-1.2-1-1.8-2.2-1.8-3.7s.4-2.7 1.3-3.7 2-1.4 3.4-1.4c4 0 6.9 2.9 8.7 8.6l1.7-.5-.4-8.6zm-96.2-.9c-1.4-.7-2.9-1-4.6-1-1.7 0-3.4.7-5.3 2.1-1.9 1.4-3.3 3.3-4.4 5.9l.1-8-15.2 3v1.4l1.5.1c1.9.2 3 1.7 3.2 4.4.6 6.2.6 12.8 0 19.8-.2 2.7-1.3 4.1-3.2 4.4l-1.5.2v1.9h21.2V49l-2.7-.2c-1.9-.2-3-1.7-3.2-4.4-.6-5.8-.7-12-.2-18.4.6-1 1.9-1.6 3.9-1.8 2-.2 4.3.4 6.7 1.8l3.7-9.3z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
9
logos/macys.svg
Normal file
9
logos/macys.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="1000" height="272" viewBox="0 0 1000 272" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M111.2 0L85.1 80.2H0L68.7 129.8L42.9 210.4L111.2 160.8L179.8 210.4L153.7 129.8L222 80.2H137.3L111.2 0Z" fill="currentColor"/>
|
||||
<path d="M460.799 73.1002C455.599 67.9002 449.999 64.1002 442.899 61.9002C436.199 59.3002 428.299 58.2002 419.799 58.2002C411.199 58.2002 403.399 59.7002 395.499 63.1002C387.699 66.5002 381.299 71.3002 376.099 76.5002L375.699 76.9002C373.099 79.9002 370.799 82.9002 368.999 86.2002C367.499 89.2002 365.999 91.8002 365.299 94.0002C364.599 92.5002 363.399 89.9002 361.899 87.3002C359.299 82.4002 356.999 78.7002 355.199 77.2002C349.999 71.2002 343.999 67.1002 336.199 63.8002C328.399 60.4002 320.199 58.9002 310.799 58.9002C304.799 58.9002 296.199 59.6002 286.899 64.1002C276.099 69.3002 267.099 77.5002 260.799 89.5002V62.7002H252.199V212.3H260.799V127.2C260.799 117.5 261.899 109.3 264.199 101.8C266.399 94.3002 269.799 88.7002 274.299 83.1002C277.999 77.9002 283.599 73.8002 289.999 71.2002C296.299 68.2002 303.099 66.7002 310.099 67.1002C318.699 67.5002 326.099 69.0002 332.899 72.0002C339.199 75.0002 344.499 79.5002 348.899 84.7002C352.599 89.9002 355.199 94.4002 356.699 99.6002C358.899 105.9 359.699 113.4 359.699 123.9V212H368.299V127.7C368.299 117.3 368.699 108.7 370.499 101.6C372.399 94.9002 374.999 89.7002 380.199 82.9002C384.699 76.9002 390.299 72.8002 398.099 69.8002C404.399 67.6002 411.499 66.1002 418.199 66.1002C425.699 66.1002 431.999 67.2002 437.999 69.5002C443.999 71.8002 448.399 75.1002 452.599 79.2002C457.799 84.4002 461.599 90.8002 463.799 99.0002C466.399 107.2 467.499 116.5 467.499 128.1V212H476.099L477.599 127.7C477.599 115.4 476.099 104.6 473.099 95.6002C470.499 86.6002 466.699 78.7002 460.799 73.1002Z" fill="currentColor"/>
|
||||
<path d="M630.498 100.7C625.998 90.3001 617.398 79.8001 606.198 72.3001C593.098 63.3001 577.498 58.9001 561.098 58.9001C531.298 58.9001 512.998 72.3001 502.498 83.9001C489.798 98.1001 482.398 117.5 482.398 137.3C482.398 157.1 489.898 176.5 502.498 190.7C512.598 201.9 531.198 215.7 561.098 215.7C576.398 215.7 590.198 212 602.498 204.9C614.098 197.4 623.398 187.7 630.498 174.7V212.4H639.098V63.1001H630.498V100.7ZM625.698 109.3C627.198 113.4 628.698 117.5 629.398 121.6C630.498 126.1 630.898 130.9 630.898 135C631.298 139.9 630.898 144.3 630.198 148.4C629.498 153.3 628.298 157.4 626.798 161.1C621.898 174.9 613.398 186.8 601.798 194.7C590.598 202.9 576.398 207 561.898 207C540.298 207 522.398 199.2 509.298 185C498.098 172.3 490.998 154.8 490.998 136.5C490.998 116.7 498.498 99.2001 511.098 86.1001C524.198 73.4001 541.698 66.0001 561.098 66.0001C575.298 66.0001 589.098 70.1001 600.298 77.2001C611.898 85.8001 620.798 96.6001 625.698 109.3Z" fill="currentColor"/>
|
||||
<path d="M672 85.4001C679.8 78.3001 687.7 73.8 695.5 70.5C703.3 67.5 711.9 65.6 722.4 65.6H723.1C735.8 65.6 748.8 69.3 759.7 75.7C772.4 83.9 782.1 95.1001 787.3 109.3L787.7 110H797.4L796.7 108.5C790.7 91.7001 779.5 77.9 764.6 69C752.3 61.5 737.4 57.8 722.8 57.8C701.2 57.8 681.4 66 666.8 80.6C652.2 95.2 644 115.3 644 136.9C644 157 651.8 176.4 664.5 190.6C679.1 206.6 699.6 215.2 724.2 215.2C740.2 215.2 755.9 210.3 768.6 201.4C781.3 192.5 791 180.1 796.6 165.2L797.3 163.7H787.6L787.2 164.4C783.5 175.2 775.6 185.7 765.2 193.1C753.3 202.4 738 206.9 722.3 206.9C713 206.9 704 205 695.4 201.7C686.8 198 679.7 193.1 673 187.1C666.3 180.4 661.4 172.9 657.7 164C654 155.4 652.1 145.7 652.1 136C652.1 126.3 654.3 116.2 657.7 107.3C660.8 98.9001 666 91.4001 672 85.4001ZM772.7 84.7C779.4 91 785 99.3 788.7 109C785 99.6 779.4 91.8 772.7 84.7Z" fill="currentColor"/>
|
||||
<path d="M918.198 62.3H908.498L908.098 63C908.098 63.7 893.498 97.7 878.998 132L850.298 199.5L823.098 132C805.598 87.2 795.498 63.3 795.498 63L795.098 62.3H785.398L845.098 211.2L818.198 271.6H827.898L828.298 270.9C828.298 270.9 828.998 269 830.198 266C834.698 255.6 846.998 226.8 861.198 194.4C864.898 185.8 868.698 176.9 872.798 167.9L907.898 86.9001C913.898 73.1001 917.598 64.1 917.598 63.8L918.198 62.3Z" fill="currentColor"/>
|
||||
<path d="M985.398 139.5C977.198 133.5 967.098 130.5 956.998 128.3L955.898 127.9C944.298 124.5 936.898 121.2 931.998 117.5C926.398 112.6 923.398 106.7 922.998 97.7C922.998 93.6 923.398 89.5 924.898 86.1C925.998 82.4 928.298 79.4 930.898 76.4C933.898 73 937.598 70.8 941.298 68.9C945.798 67 950.298 66.3 955.098 66.3H955.798C960.298 66.3 964.398 67 967.698 68.5C971.398 70 974.798 72.2 977.398 74.8C979.998 77.4 982.298 80.8 983.698 84.5C985.198 88.2 985.898 92.3 985.898 96.8V97.9H994.498V97C994.498 86.2 990.398 76.5 983.698 69.4C976.598 62.3 966.898 59 954.998 59C944.598 59 934.498 62.4 926.998 68.3C918.398 75.4 914.298 85.5 914.298 97.8C914.698 109.4 918.798 117.9 926.198 124.3C933.998 130.6 944.498 134 954.898 136.6C967.598 139.6 976.498 143.7 982.098 148.9C988.098 154.9 990.698 162 991.098 172V173.1C991.098 178 990.398 182.8 988.498 186.5C986.598 190.6 984.398 194.3 980.998 197.3C977.998 200.7 973.898 203.3 969.798 205.1C965.298 207 960.498 207.7 955.598 207.7C944.798 207.7 935.098 204.3 928.398 198C921.698 191.3 918.298 182.3 917.998 171.5V170.4L909.398 170.8V172.7C909.398 173.1 909.398 173.4 909.398 173.8C909.398 179 910.498 183.9 912.398 188.7C914.298 193.6 916.898 198 920.598 201.4C925.098 205.9 930.298 209.6 936.298 211.8C942.298 214 948.598 215.5 955.698 215.5C961.998 215.5 967.998 214 973.598 211.8C979.198 209.2 983.998 205.8 988.198 201.7C991.898 197.6 995.298 192.7 997.198 187.5C999.398 182.3 1000.2 176.7 999.798 170.7C999.198 156.3 994.298 146.3 985.398 139.5Z" fill="currentColor"/>
|
||||
<path d="M913.298 51.1001L923.398 44.0001L933.498 51.1001L929.398 39.2001L939.798 31.7001H927.498L923.398 20.1001L919.698 31.7001H907.398L917.098 39.2001L913.298 51.1001Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.6 KiB |
1
logos/menshealth.svg
Normal file
1
logos/menshealth.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 608 125"><path fill="currentColor" d="M207.202 20.722h5.402v15.669h6.754l6.214-24.854V1.543h-18.37v19.179zm-82.124 21.342c4.052 0 5.942 3.242 5.942 28.637h-13.236c.54-25.395 2.701-28.637 7.294-28.637zm24.583 51.059h-8.645v2.972c0 12.427-3.513 18.37-10.807 18.37-8.374 0-12.426-5.404-12.426-33.77v-2.16h32.957c0-33.229-7.294-46.196-25.663-46.196-18.37 0-30.257 18.91-30.257 48.088 0 28.905 11.346 44.573 30.797 44.573 16.749 0 24.043-9.455 24.043-29.445v-2.432h.001zM379.08 42.064c4.052 0 5.943 3.242 5.943 28.637h-12.492c.54-25.395 1.956-28.637 6.549-28.637zm24.583 51.059h-8.645v2.972c0 12.427-3.512 18.37-10.806 18.37-8.375 0-11.682-5.404-11.682-33.77v-2.16h32.213c0-33.229-7.294-46.196-25.664-46.196s-30.256 18.91-30.256 48.087c0 28.906 11.347 44.574 30.797 44.574 16.749 0 24.043-9.455 24.043-29.445v-2.432zM523.067 125c12.157 0 17.29-7.564 17.29-18.371V93.123h-8.104v13.506c0 5.675-.811 7.564-3.512 7.564-2.432 0-3.242-1.621-3.242-6.754V42.604h14.858V34.23h-14.588V9.106h-8.375L504.967 35.31h-7.294v7.024h6.483v59.972c.001 15.67 2.703 22.694 18.911 22.694zm-62.674-68.618c0-16.749-7.563-23.772-23.772-23.772s-27.285 11.616-27.285 25.394v5.403h18.641V50.709c0-7.294 1.621-9.995 5.673-9.995 4.053 0 5.673 2.431 5.673 9.995v14.859c-24.583 8.373-32.147 14.588-32.147 35.389 0 16.209 6.483 24.043 17.56 24.043 9.455 0 13.778-6.484 16.209-10.535v8.914h24.043v-7.295h-4.593V56.382h-.002zm140.746 59.702V52.059c0-13.237-5.943-19.45-16.479-19.45-12.697 0-17.83 9.455-17.83 9.455V.462l-26.744 2.972v7.023h6.213v105.627h-4.322v7.295h29.717v-7.295h-4.322v-55.92c0-9.725 2.701-13.777 7.563-13.777 3.512 0 4.862 2.161 4.862 7.564v62.133h-4.862v7.295h32.147v-7.295h-5.943zM439.322 73.131v27.555c0 8.105-1.62 11.348-6.213 11.348-3.511 0-5.133-2.973-5.133-12.697 0-16.48 1.351-20.532 11.346-26.206zm-94.616 42.953V8.837h6.214V1.812h-37.011v7.024h7.564v50.247h-23.772V8.837h7.834V1.812h-37.551v7.024h6.484v107.247h-6.484v7.295h37.551v-7.295h-7.834V67.459h23.772v48.625h-7.564v7.295h37.011v-7.295h-6.214zm148.645 0V.462l-27.825 2.972v7.023h6.754v105.627h-4.322v7.295h31.877v-7.295h-6.484zM266.634 99.336c0-28.635-30.796-30.527-30.796-49.438 0-6.483 3.241-9.725 8.374-9.725 7.834 0 11.887 7.834 12.427 24.312h7.023V37.471s-7.834-4.862-19.721-4.862c-14.317 0-25.934 8.104-25.934 24.583 0 27.015 29.986 30.798 29.986 49.167 0 7.295-3.512 10.807-9.186 10.807-8.645 0-12.967-7.564-13.507-26.205h-7.023v29.177S226.922 125 239.618 125c15.67 0 27.016-8.916 27.016-25.664zM90.769 116.084V8.837h5.673V1.812H64.835L49.167 70.16 32.418 1.812H0v7.024h6.754v107.247H0v7.295h24.853v-7.295h-7.834v-75.37l19.721 82.665h11.346l19.45-83.205v75.91h-7.294v7.295h36.2v-7.295h-5.673v.001zm119.674 0V52.059c0-13.237-5.942-19.45-16.208-19.45-12.697 0-17.83 9.455-17.83 9.455v-9.455l-27.015 2.972v7.294h6.214v73.209h-6.483v7.295h32.146v-7.295h-4.322v-55.92c0-9.725 2.702-13.777 7.564-13.777 3.512 0 4.862 2.161 4.862 7.564v62.133h-4.862v7.295h30.256v-7.295h-4.322z"/>></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
12
logos/mrbeast.svg
Normal file
12
logos/mrbeast.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 39 KiB |
53
scripts.js
Normal file
53
scripts.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
var copy = document.querySelector(".logos-slide").cloneNode(true);
|
||||
document.querySelector(".logos").appendChild(copy);
|
||||
const projects = [
|
||||
{
|
||||
title: "EarthLink Fiber Internet",
|
||||
text: "Earthlink epitomizes leadership in digital innovation, seamlessly blending advanced technology with unbeatable connectivity. Our team led the development and design efforts for their digital infrastructure, ensuring seamless integration and optimal performance.",
|
||||
imageId: "image-1"
|
||||
},
|
||||
{
|
||||
title: "Evil Genius Games",
|
||||
text: "Evil Genius Games redefines immersive gaming experiences with their innovative tabletop RPGs. Our collaboration focused on creating a seamless digital platform to support their creative storytelling and gaming mechanics.",
|
||||
imageId: "image-2"
|
||||
},
|
||||
{
|
||||
title: "Involvvely",
|
||||
text: "Involvvely simplifies team collaboration with innovative tools designed to enhance productivity and communication. We developed a platform that empowers teams to work smarter and achieve their goals efficiently.",
|
||||
imageId: "image-3"
|
||||
}
|
||||
];
|
||||
|
||||
let currentProjectIndex = 0;
|
||||
|
||||
function updateProjectDisplay() {
|
||||
const titleElement = document.getElementById("project-title");
|
||||
const textElement = document.getElementById("project-text");
|
||||
|
||||
// Update title and text
|
||||
titleElement.textContent = projects[currentProjectIndex].title;
|
||||
textElement.textContent = projects[currentProjectIndex].text;
|
||||
|
||||
// Update active image
|
||||
document.querySelectorAll(".project-cards img").forEach((img, index) => {
|
||||
img.classList.toggle("active", index === currentProjectIndex);
|
||||
});
|
||||
|
||||
// Update indicators
|
||||
document.querySelectorAll(".indicators span").forEach((indicator, index) => {
|
||||
indicator.classList.toggle("active", index === currentProjectIndex);
|
||||
});
|
||||
}
|
||||
|
||||
function nextProject() {
|
||||
currentProjectIndex = (currentProjectIndex + 1) % projects.length;
|
||||
updateProjectDisplay();
|
||||
}
|
||||
|
||||
function goToProject(index) {
|
||||
currentProjectIndex = index;
|
||||
updateProjectDisplay();
|
||||
}
|
||||
|
||||
// Initialize display
|
||||
updateProjectDisplay();
|
||||
204
styles.css
Normal file
204
styles.css
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack elements vertically */
|
||||
justify-content: flex-start; /* Align items at the top */
|
||||
align-items: center;
|
||||
min-height: 100vh; /* Use min-height for scrolling */
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.featured-projects {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
max-width: 1200px;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.project-description {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.project-description h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.project-description p {
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.indicators {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.indicators span {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 0 5px;
|
||||
background-color: #ccc;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.indicators span.active {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
.project-cards {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px; /* Adds space between images */
|
||||
}
|
||||
|
||||
.project-cards img {
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.5s, box-shadow 0.5s; /* Adds smooth transition effects */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project-cards img:hover {
|
||||
transform: scale(1.05); /* Slightly enlarges the image on hover */
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Adds shadow effect on hover */
|
||||
}
|
||||
|
||||
.project-cards img.active {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* Stronger shadow for active image */
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.logos {
|
||||
overflow: hidden;
|
||||
padding: 60px 0;
|
||||
background: white;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logos:before,
|
||||
.logos:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.logos:before {
|
||||
left: 0;
|
||||
background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
|
||||
}
|
||||
|
||||
.logos:after {
|
||||
right: 0;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
|
||||
}
|
||||
|
||||
.logos:hover .logos-slide {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.logos-slide {
|
||||
display: inline-block;
|
||||
animation: 35s slide infinite linear;
|
||||
}
|
||||
|
||||
.logos-slide img {
|
||||
height: 50px;
|
||||
margin: 0 40px;
|
||||
}
|
||||
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.featured-projects {
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.project-description h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.project-description p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.project-cards {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.project-cards img {
|
||||
width: 150px;
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
.logos-slide img {
|
||||
height: 40px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.project-description h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.project-description p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.project-cards img {
|
||||
width: 120px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.logos-slide img {
|
||||
height: 30px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue