Scribd
Upload
28 views

Interface

Uploaded by

rupak15-4751
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views

Interface

Uploaded by

rupak15-4751
Copyright
© © All Rights Reserved
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