Scribd
Upload
28 views

Interface

Uploaded by

rupak15-4751
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views

Interface

Uploaded by

rupak15-4751
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

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-


hidden="true"></i></a></li>

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


hidden="true"></i></a></li>

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


hidden="true"></i></a></li>

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


hidden="true"></i></a></li>

</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">

<div class="container">

<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>

<li class="nav-item">

<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">

<li class="nav-item">

<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>

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


<h3 class="font-weight-light">Personal Info</h3>

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

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

<li><span>Birthdate</span> : 03/16/2002</li>

<li><span>Email</span> : [email protected]</li>

<li><span>Phone</span> : +8801929-543165</li>

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

</ul>

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

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


hidden="true"></i></a></li>

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


hidden="true"></i></a></li>

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


hidden="true"></i></a></li>

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


hidden="true"></i></a></li>

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


hidden="true"></i></a></li>

</ul>

</div>

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

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

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

<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>

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

<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>

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

<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>

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

<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>

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

<h6>Facebook Content Writer</h6>

<hr>

</div>

</div>
</div>

</div>

</div>

<!--Resume Section-->

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

<div class="container">

<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>

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


onclick="window.location.href='https://www.facebook.com/tsrbpage'"><i class="icon-down-
circled2"></i>VISIT</button>

<hr>

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

<P>Social Media Manager</P>

<P class="subtitle">DIU Accelerator Club.</P>


<button class="btn btn-outline-danger"
onclick="window.location.href='https://www.facebook.com/diuaccelerator'"><i class="icon-down-
circled2"></i>VISIT</button>

<hr>

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

<P>Facebook Content Writer</P>

<P class="subtitle">Creataor Admin | Jamalpur Express Facebook Page</P>

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


onclick="window.location.href='https://www.facebook.com/jpexpress.800'"><i class="icon-down-
circled2"></i>VISIT</button>

<hr>

<h6 class="title text-danger">2022 - 2016</h6>

<P>Facebook Content Writer</P>

<P class="subtitle">Admin | Lalmonirhat Express Facebook Page</P>

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


onclick="window.location.href='https://www.facebook.com/lalmoni.expresss'"><i class="icon-down-
circled2"></i>VISIT</button>

</div>

</div>

</div>

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

<div class="card">

<div class="card-header">

<div class="mt-2">

<h4>Education</h4>

<span class="line"></span>

</div>

</div>

<div class="card-body">

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

<P>Bsc in Computer Science & Engineering</P>


<P class="subtitle">Daffodil International University.</P>

<P class="subtitle">CGPA 3.60.</P>

<hr>

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

<P>Higher Secondary Cirtificate</P>

<P class="subtitle">Brahmanbaria City Model College.</P>

<P class="subtitle">GPA 5.00.</P>

<hr>

<h6 class="title text-danger">2016 - 2017</h6>

<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="card-header">

<div class="pull-left">

<h4 class="mt-2">Skills</h4>

<span class="line"></span>

</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 class="progress mb-3">

<div class="progress-bar bg-danger" role="progressbar" style="width: 85%" aria-


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

</div>

<h6>SQL</h6>

<div class="progress mb-3">

<div class="progress-bar bg-danger" role="progressbar" style="width: 80%" aria-


valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>

</div>

<h6>Graphics Designing</h6>

<div class="progress mb-3">

<div class="progress-bar bg-danger" role="progressbar" style="width: 90%" aria-


valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>

</div>

<h6>Photography</h6>

<div class="progress mb-3">

<div class="progress-bar bg-danger" role="progressbar" style="width: 90%" aria-


valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>

</div>

<h6>Content Writing</h6>

<div class="progress mb-3">

<div class="progress-bar bg-danger" role="progressbar" style="width: 90%" aria-


valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>

</div>

</div>

</div>

<div class="card">

<div class="card-header">
<div class="pull-left">

<h4 class="mt-2">Languages</h4>

<span class="line"></span>

</div>

</div>

<div class="card-body pb-2">

<h6>Bangla</h6>

<div class="progress mb-3">

<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-


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

</div

<h6>English</h6>

<div class="progress mb-3">

<div class="progress-bar bg-danger" role="progressbar" style="width: 80%" aria-


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

</div>

<h6>Hindi</h6>

<div class="progress mb-3">

<div class="progress-bar bg-danger" role="progressbar" style="width: 45%" aria-


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

</div>

<h6>Arabic</h6>

<div class="progress mb-3">

<div class="progress-bar bg-danger" role="progressbar" style="width: 67%" aria-


valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>

</div>

</div>

</div>

</div>

</div>
</div>

</section>

<section class="section bg-dark text-center">

<div class="container">

<div class="row text-center">

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

<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="col-md-6 col-lg-3">

<div class="row">

<div class="col-5 text-right text-light border-right py-3">

<div class="m-auto"><i class="ti-layers-alt icon-xl"></i></div>

</div>

<div class="col-7 text-left py-3">

<h1 class="text-danger font-weight-bold font40">5</h1>

<p class="text-light mb-1">Project Finished</p>

</div>

</div>

</div>

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


<div class="row">

<div class="col-5 text-right text-light border-right py-3">

<div class="m-auto"><i class="ti-face-smile icon-xl"></i></div>

</div>

<div class="col-7 text-left py-3">

<h1 class="text-danger font-weight-bold font40">130K</h1>

<p class="text-light mb-1">Happy Clients</p>

</div>

</div>

</div>

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

<div class="row">

<div class="col-5 text-right text-light border-right py-3">

<div class="m-auto"><i class="ti-heart-broken icon-xl"></i></div>

</div>

<div class="col-7 text-left py-3">

<h1 class="text-danger font-weight-bold font40">20</h1>

<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="container">

<div class="row">

<div class="col-lg-8">

<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>

<div class="form-group">

<input class="form-control" type="email" placeholder="Email *" required>

</div>

<div class="form-group">

<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="col-lg-4">

<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>

<div class="row mb-2">

<div class="col-1 pt-1 mr-1">

<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>

<div class="row mb-2">

<div class="col-1 pt-1 mr-1">

<i class="ti-envelope icon-md"></i>

</div>

<div class="col-10">

<h6 class="d-inline">Email :<br> <span class="text-


muted">[email protected]</span></h6>

</div>

</div>

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

<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-


hidden="true"></i></a></li>

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


hidden="true"></i></a></li>
<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-


hidden="true"></i></a></li>

</ul>

</div>

</div>

</div>

</div>

</div>

<footer class="footer py-3">

<div class="container">

<p class="small mb-0 text-light">

&copy; <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>

<!-- core -->

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

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

<!-- bootstrap 3 affix -->

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

<!-- Isotope -->


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

<!-- Google mpas -->

<script async defer src="https://maps.googleapis.com/maps/api/js?


key=AIzaSyCtme10pzgKSPeJVJrG1O3tjR6lk98o4w8&callback=initMap"></script>

<!-- JohnDoe js -->

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

</body>

</html>

You might also like