Interface

Interface:
Source Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Start your development with Rupaks landing page.">
<meta name="author" content="Rupak">
<title>rupaks Landing page</title>
<script src="https://kit.fontawesome.com/bfffcc9099.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/johndoe.css">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="40" id="home">
<a href="components.html" class="btn btn-primary btn-component" data-spy="affix" data-offset-

top="600"><i class="ti-shift-left-alt"></i> Components</a>
<header class="header">
<div class="container">
<ul class="social-icons pt-3">
<li class="social-item"><a class="social-link text-light" href="#"><i class="ti-facebook" aria-

hidden="true"></i></a></li>
<li class="social-item"><a class="social-link text-light" href="#"><i class="ti-twitter" aria-

<li class="social-item"><a class="social-link text-light" href="#"><i class="ti-google" aria-

<li class="social-item"><a class="social-link text-light" href="#"><i class="ti-instagram" aria-

<li class="social-item"><a class="social-link text-light" href="#"><i class="ti-github" aria-

</ul>
<div class="header-content">
<h4 class="header-subtitle" >Hello, I am</h4>
<h1 class="header-title">Rupak</h1>
<h6 class="header-mono" >Social Media Manager|Developer|Designer</h6>
</div>
</div>
</header>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-white" data-spy="affix" data-offset-

top="510">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-

target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse mt-sm-20 navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="#home" class="nav-link">Home</a>
</li>
<a href="#about" class="nav-link">About</a>
</li>
</ul>
<ul class="navbar-nav brand">
<img src="assets/imgs/avatar.jpg" alt="" class="brand-img">
<li class="brand-txt">
<h5 class="brand-title">Fahim Tahmid Rupak</h5>
<div class="brand-subtitle">UI Designer | Developer</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<a href="#resume" class="nav-link">Resume</a>
</li>
<li class="nav-item last-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div id="about" class="row about-section">
<div class="col-lg-4 about-card">
<h3 class="font-weight-light">Who am I ?</h3>
<span class="line mb-5"></span>
<h5 class="mb-3">My name is Rupak. I grew up in Brahmanbaria, but my hometown is

Jamalpur. Currently, I am pursuing a B.Sc. in Computer Science and Engineering at Daffodil International
University. I have developed several projects, apps, and websites to help professionals with their tasks. I
am a dedicated problem-solver who thrives on new challenges. My passion for my work drives me to
continuously improve and acquire new skills. I enjoy setting and achieving goals, always striving for
excellence.
I love meeting new people and learning about their backgrounds, making connections, and
putting others at ease. Additionally, I have a keen interest in trains and railroads, and I enjoy train rides
when I have the time. Photography is another hobby I indulge in during my spare moments.</h5>
<button class="btn btn-outline-danger"

onclick="window.location.href='https://drive.google.com/file/d/1CuW1lMPiH7WbvwIRGQZfIAgWLq_x9
0vV/view?usp=sharing'"><i class="icon-down-circled2"></i> Download My CV</button>
</div>

<h3 class="font-weight-light">Personal Info</h3>
<ul class="mt40 info list-unstyled">
<li><span>Birthdate</span> : 03/16/2002</li>
<li><span>Email</span> : fahimtahmidrupak@gmail.com</li>
<li><span>Phone</span> : +8801929-543165</li>
<li><span>Address</span> : Baraipatal, Sarishabari, Jamalpur, Bangladesh.</li>
</ul>
<li class="social-item"><a class="social-link" href="#"><i class="ti-facebook" aria-

<li class="social-item"><a class="social-link" href="#"><i class="ti-twitter" aria-

<li class="social-item"><a class="social-link" href="#"><i class="ti-google" aria-

<li class="social-item"><a class="social-link" href="#"><i class="ti-instagram" aria-

<li class="social-item"><a class="social-link" href="#"><i class="ti-github" aria-

</ul>
</div>
<h3 class="font-weight-light">My Expertise</h3>
<div class="row">
<div class="col-1 text-danger pt-1"><i class="fa-solid fa-cube"></i></div>
<div class="col-10 ml-auto mr-3">
<h6>3D Modeler</h6>
<hr>
</div>
</div>
<div class="row">
<div class="col-1 text-danger pt-1"><i class="fa-solid fa-palette"></i></div>
<h6>UI/UX Design</h6>
<hr>
</div>
</div>
<div class="row">
<div class="col-1 text-danger pt-1"><i class="fa-brands fa-python"></i></div>
<h6>Python Development</h6>
<hr>
</div>
</div>
<div class="row">
<div class="col-1 text-danger pt-1"><i class="fa-solid fa-photo-film"></i></div>
<h6>Media Manager</h6>
<hr>
</div>
</div>
<div class="row">
<div class="col-1 text-danger pt-1"><i class="fa-brands fa-square-facebook"></i></div>
<h6>Facebook Content Writer</h6>
<hr>
</div>
</div>
</div>
</div>
</div>

<section class="section" id="resume">
<h2 class="mb-5"><span class="text-danger">My</span> Resume</h2>
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-header">
<div class="mt-2">
<h4>Expertise</h4>
<span class="line"></span>
</div>
</div>
<div class="card-body">
<h6 class="title text-danger">2020 - Present</h6>
<P>3D Modeler</P>
<P class="subtitle"> Trainm Simulator Recreating- Bangladesh</P>

onclick="window.location.href='https://www.facebook.com/tsrbpage'"><i class="icon-down-
circled2"></i>VISIT</button>
<hr>
<P>Social Media Manager</P>
<P class="subtitle">DIU Accelerator Club.</P>

onclick="window.location.href='https://www.facebook.com/diuaccelerator'"><i class="icon-down-
<hr>
<h6 class="title text-danger">2020 - 2016</h6>
<P>Facebook Content Writer</P>
<P class="subtitle">Creataor Admin | Jamalpur Express Facebook Page</P>

onclick="window.location.href='https://www.facebook.com/jpexpress.800'"><i class="icon-down-
<hr>
<P>Facebook Content Writer</P>
<P class="subtitle">Admin | Lalmonirhat Express Facebook Page</P>

onclick="window.location.href='https://www.facebook.com/lalmoni.expresss'"><i class="icon-down-
</div>
</div>
</div>
<div class="card">
<div class="mt-2">
<h4>Education</h4>
</div>
</div>
<div class="card-body">
<P>Bsc in Computer Science & Engineering</P>

<P class="subtitle">Daffodil International University.</P>
<P class="subtitle">CGPA 3.60.</P>
<hr>
<P>Higher Secondary Cirtificate</P>
<P class="subtitle">Brahmanbaria City Model College.</P>
<P class="subtitle">GPA 5.00.</P>
<hr>
<P>Secondary School Cirtificate</P>
<P class="subtitle">Nabinagar Pilot Model High School.</P>
<P class="subtitle">GPA 4.94.</P>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="pull-left">
<h4 class="mt-2">Skills</h4>
</div>
</div>
<div class="card-body pb-2">
<h6> Python</h6>
<div class="progress mb-3">
<div class="progress-bar bg-danger" role="progressbar" style="width: 97%" aria-

valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h6>Java</h6>

</div>
<h6>SQL</h6>

</div>
<h6>Graphics Designing</h6>

</div>
<h6>Photography</h6>

</div>
<h6>Content Writing</h6>

</div>
</div>
</div>
<div class="card">
<div class="pull-left">
<h4 class="mt-2">Languages</h4>
</div>
</div>
<div class="card-body pb-2">
<h6>Bangla</h6>

</div
<h6>English</h6>

</div>
<h6>Hindi</h6>

</div>
<h6>Arabic</h6>

</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section bg-dark text-center">
<div class="row text-center">
<div class="row ">
<div class="col-5 text-right text-light border-right py-3">
<div class="m-auto"><i class="ti-alarm-clock icon-xl"></i></div>
</div>
<div class="col-7 text-left py-3">
<h1 class="text-danger font-weight-bold font40">500</h1>
<p class="text-light mb-1">Hours Worked</p>
</div>
</div>
</div>
<div class="row">
<div class="m-auto"><i class="ti-layers-alt icon-xl"></i></div>
</div>
<p class="text-light mb-1">Project Finished</p>
</div>
</div>
</div>

<div class="row">
<div class="m-auto"><i class="ti-face-smile icon-xl"></i></div>
</div>
<h1 class="text-danger font-weight-bold font40">130K</h1>
<p class="text-light mb-1">Happy Clients</p>
</div>
</div>
</div>
<div class="row">
<div class="m-auto"><i class="ti-heart-broken icon-xl"></i></div>
</div>
<p class="text-light mb-1">Awared Achievement</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="section contact" id="contact">
<div id="map" class="map"></div>

<div class="row">
<div class="contact-form-card">
<h4 class="contact-title">Send a message</h4>
<form action="">
<div class="form-group">
<input class="form-control" type="text" placeholder="Name *" required>
</div>
<input class="form-control" type="email" placeholder="Email *" required>
</div>
<textarea class="form-control" id=" placeholder="Message *" rows="7"

required></textarea>
</div>
<div class="form-group ">
<button type="submit" class="form-control btn btn-primary" >Send

Message</button>
</div>
</form>
</div>
</div>
<div class="contact-info-card">
<h4 class="contact-title">Get in touch</h4>
<div class="row mb-2">
<div class="col-1 pt-1 mr-1">
<i class="ti-mobile icon-md"></i>

</div>
<div class="col-10 ">
<h6 class="d-inline">Phone : <br> <span class="text-

muted"></span>01760653348</h6>
</div>
</div>
<i class="ti-map-alt icon-md"></i>
</div>
<div class="col-10">
<h6 class="d-inline">Address :<br> <span class="text-muted">Baraipatal Sarishabari

Jamalpur NoWhere Bangladesh.</span></h6>
</div>
</div>
<i class="ti-envelope icon-md"></i>
</div>
<div class="col-10">
<h6 class="d-inline">Email :<br> <span class="text-

muted">fahimtahmidrupak@gmail.com</span></h6>
</div>
</div>
<li class="social-item"><a class="social-link text-dark" href="#"><i class="ti-facebook"

aria-hidden="true"></i></a></li>
<li class="social-item"><a class="social-link text-dark" href="#"><i class="ti-twitter" aria-

<li class="social-item"><a class="social-link text-dark" href="#"><i class="ti-google" aria-

<li class="social-item"><a class="social-link text-dark" href="#"><i class="ti-instagram"
aria-hidden="true"></i></a></li>
<li class="social-item"><a class="social-link text-dark" href="#"><i class="ti-github" aria-

</ul>
</div>
</div>
</div>
</div>
</div>
<footer class="footer py-3">
<p class="small mb-0 text-light">
© <script>document.write(new Date().getFullYear())</script> Created With <i class="ti-

heart text-danger"></i> By <a href="https://sites.google.com/diu.edu.bd/fahimtahmidrupak"
target="_blank"><span class="text-danger" title="Bootstrap 4 Themes and
Dashboards">Rupak</span></a>
</p>
</div>
</footer>

<script src="assets/vendors/jquery/jquery-3.4.1.js"></script>
<script src="assets/vendors/bootstrap/bootstrap.bundle.js"></script>

<script src="assets/vendors/bootstrap/bootstrap.affix.js"></script>


<script src="assets/vendors/isotope/isotope.pkgd.js"></script>

<script async defer

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtme10pzgKSPeJVJrG1O3tjR6lk98o4w8&call
back=initMap"></script>

<script src="assets/js/johndoe.js"></script>
</body>
</html>

Interface

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Interface

Uploaded by

Copyright:

Available Formats

Interface:

Source Code: <!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="description" content="Start your development with Rupaks landing page.">

<meta name="author" content="Rupak">

<title>rupaks Landing page</title>

<script src="https://kit.fontawesome.com/bfffcc9099.js" crossorigin="anonymous"></script>

<link rel="stylesheet" href="assets/css/johndoe.css">

<body data-spy="scroll" data-target=".navbar" data-offset="40" id="home">

<a href="components.html" class="btn btn-primary btn-component" data-spy="affix" data-offset-

<ul class="social-icons pt-3">

<li class="social-item"><a class="social-link text-light" href="#"><i class="ti-facebook" aria-

<li class="social-item"><a class="social-link text-light" href="#"><i class="ti-twitter" aria-

<li class="social-item"><a class="social-link text-light" href="#"><i class="ti-google" aria-

<li class="social-item"><a class="social-link text-light" href="#"><i class="ti-instagram" aria-

<li class="social-item"><a class="social-link text-light" href="#"><i class="ti-github" aria-

<h6 class="header-mono" >Social Media Manager|Developer|Designer</h6>

<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-white" data-spy="affix" data-offset-

<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-

<div class="collapse mt-sm-20 navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">

<a href="#home" class="nav-link">Home</a>

<a href="#about" class="nav-link">About</a>

<ul class="navbar-nav brand">

<img src="assets/imgs/avatar.jpg" alt="" class="brand-img">

<h5 class="brand-title">Fahim Tahmid Rupak</h5>

<div class="brand-subtitle">UI Designer | Developer</div>

<a href="#resume" class="nav-link">Resume</a>

<li class="nav-item last-item">

<a href="#contact" class="nav-link">Contact</a>

<div id="about" class="row about-section">

<div class="col-lg-4 about-card">

<h3 class="font-weight-light">Who am I ?</h3>

<span class="line mb-5"></span>

<h5 class="mb-3">My name is Rupak. I grew up in Brahmanbaria, but my hometown is

<button class="btn btn-outline-danger"

<div class="col-lg-4 about-card">

<span class="line mb-5"></span>

<ul class="mt40 info list-unstyled">

<li><span>Address</span> : Baraipatal, Sarishabari, Jamalpur, Bangladesh.</li>

<ul class="social-icons pt-3">

<li class="social-item"><a class="social-link" href="#"><i class="ti-facebook" aria-

<li class="social-item"><a class="social-link" href="#"><i class="ti-twitter" aria-

<li class="social-item"><a class="social-link" href="#"><i class="ti-google" aria-

<li class="social-item"><a class="social-link" href="#"><i class="ti-instagram" aria-

<li class="social-item"><a class="social-link" href="#"><i class="ti-github" aria-

<div class="col-lg-4 about-card">

<h3 class="font-weight-light">My Expertise</h3>

<span class="line mb-5"></span>

<div class="col-1 text-danger pt-1"><i class="fa-solid fa-cube"></i></div>

<div class="col-10 ml-auto mr-3">

<div class="col-1 text-danger pt-1"><i class="fa-solid fa-palette"></i></div>

<div class="col-10 ml-auto mr-3">

<div class="col-1 text-danger pt-1"><i class="fa-brands fa-python"></i></div>

<div class="col-10 ml-auto mr-3">

<div class="col-1 text-danger pt-1"><i class="fa-solid fa-photo-film"></i></div>

<div class="col-10 ml-auto mr-3">

<div class="col-1 text-danger pt-1"><i class="fa-brands fa-square-facebook"></i></div>

<div class="col-10 ml-auto mr-3">

<h6>Facebook Content Writer</h6>

<section class="section" id="resume">

<h2 class="mb-5"><span class="text-danger">My</span> Resume</h2>

<div class="col-md-6 col-lg-4">

<h6 class="title text-danger">2020 - Present</h6>