<!doctypehtml><html lang=en><meta charset=UTF-8><meta content="width=device-width,initial-scale=1"name=viewport><link href=style.css rel=stylesheet><title>Canadian Car Audio</title><style media=screen>@import url(https://fonts.googleapis.com/css?family=Montserrat:300,) 400, 700&display=swap;*{padding:0;margin:0;box-sizing:border-box}html{font-size:10px;font-family:Montserrat,sans-serif;scroll-behavior:smooth}a{text-decoration:none}.container{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center}img{height:100%;width:100%;object-fit:cover}p{color:#000;font-size:1.4rem;margin-top:5px;line-height:2.5rem;font-weight:300;letter-spacing:.05rem}.section-title{font-size:4rem;font-weight:300;color:#000;margin-bottom:10px;text-transform:uppercase;letter-spacing:.2rem;text-align:center}.section-title span{color:#dc143c}.cta{display:inline-block;padding:10px 30px;color:#fff;background-color:transparent;border:2px solid #dc143c;font-size:2rem;text-transform:uppercase;letter-spacing:.1rem;margin-top:30px;transition:.3s ease;transition-property:background-color,color}.cta:hover{color:#fff;background-color:#dc143c}.brand h1{font-size:3rem;text-transform:uppercase;color:#fff}.brand h1 span{color:#dc143c}#header{position:fixed;z-index:1000;left:0;top:0;width:100vw;height:auto}#header .header{min-height:8vh;background-color:rgba(31,30,30,.24);transition:.3s ease background-color}#header .nav-bar{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;max-width:1300px;padding:0 10px}#header .nav-list ul{list-style:none;position:absolute;background-color:#1f1e1e;width:100vw;height:100vh;left:100%;top:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1;overflow-x:hidden;transition:.5s ease left}#header .nav-list ul.active{left:0}#header .nav-list ul a{font-size:2.5rem;font-weight:500;letter-spacing:.2rem;text-decoration:none;color:#fff;text-transform:uppercase;padding:20px;display:block}#header .nav-list ul a::after{content:attr(data-after);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);color:rgba(240,248,255,.021);font-size:13rem;letter-spacing:50px;z-index:-1;transition:.3s ease letter-spacing}#header .nav-list ul li:hover a::after{transform:translate(-50%,-50%) scale(1);letter-spacing:initial}#header .nav-list ul li:hover a{color:#dc143c}#header .hamburger{height:60px;width:60px;display:inline-block;border:3px solid #fff;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;z-index:100;cursor:pointer;transform:scale(.8);margin-right:20px}#header .hamburger:after{position:absolute;content:"";height:100%;width:100%;border-radius:50%;border:3px solid #fff;animation:hamburger_puls 1s ease infinite}#header .hamburger .bar{height:2px;width:30px;position:relative;background-color:#fff;z-index:-1}#header .hamburger .bar::after,#header .hamburger .bar::before{content:"";position:absolute;height:100%;width:100%;left:0;background-color:#fff;transition:.3s ease;transition-property:top,bottom}#header .hamburger .bar::after{top:8px}#header .hamburger .bar::before{bottom:8px}#header .hamburger.active .bar::before{bottom:0}#header .hamburger.active .bar::after{top:0}#hero{background-image:url(https://i.ibb.co/FxpntJ4/hero-bg.jpg);background-size:cover;background-position:top center;position:relative;z-index:1}#hero::after{content:"";position:absolute;left:0;top:0;height:100%;width:100%;background-color:#000;opacity:.7;z-index:-1}#hero .hero{max-width:1200px;margin:0 auto;padding:0 50px;justify-content:flex-start}#hero h1{display:block;width:fit-content;font-size:4rem;position:relative;color:transparent;animation:text_reveal .5s ease forwards;animation-delay:1s}#hero h1:nth-child(1){animation-delay:1s}#hero h1:nth-child(2){animation-delay:2s}#hero h1:nth-child(3){animation:text_reveal_name .5s ease forwards;animation-delay:3s}#hero h1 span{position:absolute;top:0;left:0;height:100%;width:0;background-color:#dc143c;animation:text_reveal_box 1s ease;animation-delay:.5s}#hero h1:nth-child(1) span{animation-delay:.5s}#hero h1:nth-child(2) span{animation-delay:1.5s}#hero h1:nth-child(3) span{animation-delay:2.5s}#services .services{flex-direction:column;text-align:center;max-width:1500px;margin:0 auto;padding:100px 0}#services .service-top{max-width:500px;margin:0 auto}#services .service-bottom{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:50px}#services .service-item{flex-basis:80%;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;padding:30px;border-radius:10px;background-image:url(https://i.ibb.co/2ctFN4S/img-1.jpg);background-size:cover;margin:10px 5%;position:relative;z-index:1;overflow:hidden}#services .service-item::after{content:"";position:absolute;left:0;top:0;height:100%;width:100%;background-image:linear-gradient(60deg,#29323c 0,#485563 100%);opacity:.9;z-index:-1}#services .service-bottom .icon{height:80px;width:80px;margin-bottom:20px}#services .service-item h2{font-size:2rem;color:#fff;margin-bottom:10px;text-transform:uppercase}#services .service-item p{color:#fff;text-align:left}#projects .projects{flex-direction:column;max-width:1200px;margin:0 auto;padding:100px 0}#projects .projects-header h1{margin-bottom:50px}#projects .all-projects{display:flex;align-items:center;justify-content:center;flex-direction:column}#projects .project-item{display:flex;align-items:center;justify-content:center;flex-direction:column;width:80%;margin:20px auto;overflow:hidden;border-radius:10px}#projects .project-info{padding:30px;flex-basis:50%;height:100%;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;background-image:linear-gradient(60deg,#29323c 0,#485563 100%);color:#fff}#projects .project-info h1{font-size:4rem;font-weight:500}#projects .project-info h2{font-size:1.8rem;font-weight:500;margin-top:10px}#projects .project-info p{color:#fff}#projects .project-img{flex-basis:50%;height:300px;overflow:hidden;position:relative}#projects .project-img:after{content:"";position:absolute;left:0;top:0;height:100%;width:100%;background-image:linear-gradient(60deg,#29323c 0,#485563 100%);opacity:.7}#projects .project-img img{transition:.3s ease transform}#projects .project-item:hover .project-img img{transform:scale(1.1)}#about .about{flex-direction:column-reverse;text-align:center;max-width:1200px;margin:0 auto;padding:100px 20px}#about .col-left{width:250px;height:360px}#about .col-right{width:100%}#about .col-right h2{font-size:1.8rem;font-weight:500;letter-spacing:.2rem;margin-bottom:10px}#about .col-right p{margin-bottom:20px}#about .col-right .cta{color:#000;margin-bottom:50px;padding:10px 20px;font-size:2rem}#about .col-left .about-img{height:100%;width:100%;position:relative;border:10px solid #fff}#about .col-left .about-img::after{content:"";position:absolute;left:-33px;top:19px;height:98%;width:98%;border:7px solid #dc143c;z-index:-1}#contact .contact{flex-direction:column;max-width:1200px;margin:0 auto;width:90%}#contact .contact-items{width:100%}#contact .contact-item{width:80%;padding:20px;text-align:center;border-radius:10px;padding:30px;margin:30px;display:flex;justify-content:center;align-items:center;flex-direction:column;box-shadow:0 0 18px 0 #0000002c;transition:.3s ease box-shadow}#contact .contact-item:hover{box-shadow:0 0 5px 0 #0000002c}#contact .icon{width:70px;margin:0 auto;margin-bottom:10px}#contact .contact-info h1{font-size:2.5rem;font-weight:500;margin-bottom:5px}#contact .contact-info h2{font-size:1.3rem;line-height:2rem;font-weight:500}#footer{background-image:linear-gradient(60deg,#29323c 0,#485563 100%)}#footer .footer{min-height:200px;flex-direction:column;padding-top:50px;padding-bottom:10px}#footer h2{color:#fff;font-weight:500;font-size:1.8rem;letter-spacing:.1rem;margin-top:10px;margin-bottom:10px}#footer .social-icon{display:flex;margin-bottom:30px}#footer .social-item{height:50px;width:50px;margin:0 5px}#footer .social-item img{filter:grayscale(1);transition:.3s ease filter}#footer .social-item:hover img{filter:grayscale(0)}#footer p{color:#fff;font-size:1.3rem}@keyframes hamburger_puls{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.4)}}@keyframes text_reveal_box{50%{width:100%;left:0}100%{width:0;left:100%}}@keyframes text_reveal{100%{color:#fff}}@keyframes text_reveal_name{100%{color:#dc143c;font-weight:500}}@media only screen and (min-width:768px){.cta{font-size:2.5rem;padding:20px 60px}h1.section-title{font-size:6rem}#hero h1{font-size:7rem}#services .service-bottom .service-item{flex-basis:45%;margin:2.5%}#projects .project-item{flex-direction:row}#projects .project-item:nth-child(even){flex-direction:row-reverse}#projects .project-item{height:400px;margin:0;width:100%;border-radius:0}#projects .all-projects .project-info{height:100%}#projects .all-projects .project-img{height:100%}#about .about{flex-direction:row}#about .col-left{width:600px;height:400px;padding-left:60px}#about .about .col-left .about-img::after{left:-45px;top:34px;height:98%;width:98%;border:10px solid #dc143c}#about .col-right{text-align:left;padding:30px}#about .col-right h1{text-align:left}#contact .contact{flex-direction:column;padding:100px 0;align-items:center;justify-content:center;min-width:20vh}#contact .contact-items{width:100%;display:flex;flex-direction:row;justify-content:space-evenly;margin:0}#contact .contact-item{width:30%;margin:0;flex-direction:row}#contact .contact-item .icon{height:100px;width:100px}#contact .contact-item .icon img{object-fit:contain}#contact .contact-item .contact-info{width:100%;text-align:left;padding-left:20px}}@media only screen and (min-width:1200px){#header .hamburger{display:none}#header .nav-list ul{position:initial;display:block;height:auto;width:fit-content;background-color:transparent}#header .nav-list ul li{display:inline-block}#header .nav-list ul li a{font-size:1.8rem}#header .nav-list ul a:after{display:none}#services .service-bottom .service-item{flex-basis:22%;margin:1.5%}}</style><section id=header><div class="container header"><div class=nav-bar><div class=brand><a href=#hero><h1><span>C</span>anadian <span>C</span>ar <span>A</span>udio</h1></a></div><div class=nav-list><div class=hamburger><div class=bar></div></div><ul><li><a href=#hero data-after=Home>Home</a><li><a href=#services data-after=Service>Services</a><li><a href=#projects data-after=Projects>Projects</a><li><a href=#about data-after=About>About</a><li><a href=#contact data-after=Contact>Contact</a></ul></div></div></div></section><section id=hero><div class="container hero"><div><h1>Hello, <span></span></h1><h1>My Name is <span></span></h1><h1>Arfan <span></span></h1><a href=#projects class=cta type=button>Portfolio</a></div></div></section><section id=services><div class="container services"><div class=service-top><h1 class=section-title>Serv<span>i</span>ces</h1><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum deleniti maiores pariatur assumenda quas magni et, doloribus quod voluptate quasi molestiae magnam officiis dolorum, dolor provident atque molestias voluptatum explicabo!</div><div class=service-bottom><div class=service-item><div class=icon><img src=https://img.icons8.com/bubbles/100/000000/services.png></div><h2>Web Design</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed architecto placeat beatae tenetur officia quod</div><div class=service-item><div class=icon><img src=https://img.icons8.com/bubbles/100/000000/services.png></div><h2>Web Design</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed architecto placeat beatae tenetur officia quod</div><div class=service-item><div class=icon><img src=https://img.icons8.com/bubbles/100/000000/services.png></div><h2>Web Design</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed architecto placeat beatae tenetur officia quod</div><div class=service-item><div class=icon><img src=https://img.icons8.com/bubbles/100/000000/services.png></div><h2>Web Design</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed architecto placeat beatae tenetur officia quod</div></div></div></section><section id=projects><div class="container projects"><div class=projects-header><h1 class=section-title>Recent <span>Projects</span></h1></div><div class=all-projects><div class=project-item><div class=project-info><h1>Project 1</h1><h2>Coding is Love</h2><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</div><div class=project-img><img src=https://i.ibb.co/2ctFN4S/img-1.jpg alt=img></div></div><div class=project-item><div class=project-info><h1>Project 2</h1><h2>Coding is Love</h2><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</div><div class=project-img><img src=https://i.ibb.co/2ctFN4S/img-1.jpg alt=img></div></div><div class=project-item><div class=project-info><h1>Project 3</h1><h2>Coding is Love</h2><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</div><div class=project-img><img src=https://i.ibb.co/2ctFN4S/img-1.jpg alt=img></div></div><div class=project-item><div class=project-info><h1>Project 4</h1><h2>Coding is Love</h2><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</div><div class=project-img><img src=https://i.ibb.co/2ctFN4S/img-1.jpg alt=img></div></div><div class=project-item><div class=project-info><h1>Project 5</h1><h2>Coding is Love</h2><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</div><div class=project-img><img src=https://i.ibb.co/2ctFN4S/img-1.jpg alt=img></div></div></div></div></section><section id=about><div class="container about"><div class=col-left><div class=about-img><img src=https://i.ibb.co/tmZg9vV/img-2.jpg alt=img></div></div><div class=col-right><h1 class=section-title>About <span>me</span></h1><h2>Front End Developer</h2><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores, velit alias eius non illum beatae atque repellat ratione qui veritatis repudiandae adipisci maiores. At inventore necessitatibus deserunt exercitationem cumque earum omnis ipsum rem accusantium quis, quas quia, accusamus provident suscipit magni! Expedita sint ad dolore, commodi labore nihil velit earum ducimus nulla quae nostrum fugit aut, deserunt reprehenderit libero enim!</p><a href=# class=cta>Download Resume</a></div></div></section><section id=contact><div class="container contact"><div><h1 class=section-title>Contact <span>info</span></h1></div><div class=contact-items><div class=contact-item><div class=icon><img src=https://img.icons8.com/bubbles/100/000000/phone.png></div><div class=contact-info><h1>Phone</h1><h2>+1 234 123 1234</h2><h2>+1 234 123 1234</h2></div></div><div class=contact-item><div class=icon><img src=https://img.icons8.com/bubbles/100/000000/new-post.png></div><div class=contact-info><h1>Email</h1><h2>info@gmail.com</h2><h2>abcd@gmail.com</h2></div></div><div class=contact-item><div class=icon><img src=https://img.icons8.com/bubbles/100/000000/map-marker.png></div><div class=contact-info><h1>Address</h1><h2>Fatikchhari, Chittagong, Bangladesh</h2></div></div></div></div></section><section id=footer><div class="container footer"><div class=brand><h1><span>C</span>anadian <span>C</span>ar <span>A</span>udio</h1></div><h2>Your Complete Web Solution</h2><div class=social-icon><div class=social-item><a href=#><img src=https://img.icons8.com/bubbles/100/000000/facebook-new.png></a></div><div class=social-item><a href=#><img src=https://img.icons8.com/bubbles/100/000000/instagram-new.png></a></div><div class=social-item><a href=#><img src=https://img.icons8.com/bubbles/100/000000/behance.png></a></div></div><p>Copyright © 2020 Arfan. All rights reserved</div></section>
