API tools faq
paste
Sabbir-bin

protfoliSabbiro.html

Sabbir-bin
Dec 6th, 2021 (edited)
238
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>My website</title>
  5.     <link rel="stylesheet" href="protfolio.css">
  6.     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  7.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  8.    
  9. </head>
  10. <body>
  11.     <!-- Navbar start -->
  12.     <nav class="navbar">
  13.  
  14.         <div class="max-width">
  15.             <div class="logo"><a href="#">Protfo<span>lio.</span></a></div>
  16.             <ul class="menu">
  17.                 <li><a href="#home">Home</a></li>
  18.                 <li><a href="#about">About</a></li>
  19.                 <li><a href="#services">Service</a></li>
  20.                 <li><a href="#skills">Skills</a></li>
  21.                 <li><a href="#contact">Contact</a></li>
  22.             </ul>
  23.            
  24.              
  25.              <!-- Search bar  -->
  26.  
  27.                 <div class="search-container">
  28.                 <form action="/action_page.php">
  29.                     <input type="text" placeholder="Search.." name="search">
  30.                     <button type="submit"><i class="fa fa-search"></i></button>
  31.                 </form>
  32.                 </div>
  33.                
  34.            
  35.  
  36.         </div>
  37.     </nav>
  38.     <!-- Navbar End -->
  39.  
  40.     <!-- Home section start -->
  41.  
  42.     <section class="home" id="home">
  43.         <div class="max-width">
  44.             <div class="home-content">
  45.                 <div class="text-1">Hellow, My Name Is</div>
  46.                 <div class="text-2">Sabbir Ahmed</div>
  47.                 <div class="text-3">And I Am <span>Student</span></div>
  48.                 <a href="#">Hire Me</a>
  49.             </div>
  50.         </div>
  51.  
  52.     </section>
  53.     <!-- home section end -->
  54.    
  55.         <!-- about section start -->
  56.     <section class="about" id="about">
  57.  
  58.         <div class="max-width">
  59.             <h2 class="title">About Me</h2>
  60.             <div class="about-content">
  61.                 <div class="column-left">
  62.                     <img src="s1.jpg" alt="">
  63.                 </div>
  64.                 <div class="column-right">
  65.                     <div class="text">I'm Sabbir and I'm a <span>Student.</span></div>
  66.                     <p>I am a third-year engineering student at Daffodil International University. My degree emphasis is in Software Engineering. I have learned topics SDLC, Software Requirement Specifications, System Analysis & Design Project, Structured Programming, Object-Oriented Programming, Data Structure, Algorithms Design & Analysis, Database Systems Design, Database Security, Design Pattern, Web Application Design & Development. I have learned programming languages C, C++ Python, Java, PHP, JavaScript. I can freely work with web technologies HTML, CSS, SASS, Bootstrap & Shell Scripting also Database Management (SQL, PostgreSQL, MySQL).Basic knowledge of Bootstrap, Flask, Django Frameworks. I use Windows and Linux operating systems. I enjoy being challenged and engaging with projects, problems that require me to work outside of my comfort zone and knowledge set, as continuing to learn new technologies and development techniques are important to me. I have excellent presentation skills and I'm also a good team player.
  67.                        </p>
  68.                        <a href="sabbir ahmed.pdf">Download CV</a>
  69.                </div>
  70.            </div>
  71.        </div>
  72.    </section>
  73.    <!-- about section end -->
  74.  
  75.           <!-- services section start -->
  76.    <section class="services" id="services">
  77.        <div class="max-width">
  78.            <h2 class="title">My Service</h2>
  79.            <br>
  80.            <div class="serv-content">
  81.                <div class="card">
  82.                    <div class="box">
  83.  
  84.                        <i class="fas fa-paint-brush"></i>
  85.                        <div class="text"> Web Design</div>
  86.                        <p>I’m Sabbir. I’m a designer who codes. I'm also the author of Laying the Foundations (a book about design systems, web design, and product design). I’ve worked internationally, in-house, and remotely on projects for leading brands, agencies, startups, and charities. I care deeply about creating world-class, useful, and beautiful products that help people and make a difference.</p>
  87.                    </div>
  88.                </div>
  89.                 <br>
  90.                <div class="card">
  91.                    <div class="box">
  92.                        <i class="fas fa-chart-line"></i>
  93.                        <div class="text"> Advertising</div>
  94.                        <p>I’m Sabbir. I’m a designer who codes. I'm also the author of Laying the Foundations (a book about design systems, web design, and product design). I’ve worked internationally, in-house, and remotely on projects for leading brands, agencies, startups, and charities. I care deeply about creating world-class, useful, and beautiful products that help people and make a difference.</p>
  95.                    </div>
  96.                </div>
  97.                 <br>
  98.                <div class="card">
  99.                    <div class="box">
  100.                        <i class="fas fa-code"></i>
  101.                        <div class="text"> Apps Desing</div>
  102.                        <p>I’m Sabbir. I’m a designer who codes. I'm also the author of Laying the Foundations (a book about design systems, web design, and product design). I’ve worked internationally, in-house, and remotely on projects for leading brands, agencies, startups, and charities. I care deeply about creating world-class, useful, and beautiful products that help people and make a difference.</p>
  103.                    </div>
  104.                </div>
  105.            </div>
  106.        </div>
  107.    </section>
  108.        <!-- services section end -->
  109.    <br>
  110.  
  111.  
  112.    <!-- skill part start -->
  113.  
  114.    <section class="skills" id="skills">
  115.         <div class="max-width">
  116.             <h2 class="title">My Skills</h2>
  117.             <div class="skills-content">
  118.                 <div class="column left">
  119.                     <div class="text">My creative skill & exprience</div>
  120.                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia repudiandae quasi, incidunt beatae repellendus consequuntur deserunt explicabo, iste impedit tempora labore, dolorem doloribus sapiente. Repudiandae itaque laudantium perspiciatis quo nam.</p>
  121.                    <a href="#">Read More</a>
  122.                    </div>
  123.                 <div class="column right">
  124.                     <div class="bars">
  125.                         <div class="info">
  126.                             <span>HTML</span>
  127.                             <span>90%</span>
  128.                         </div>
  129.                         <div class="line html"></div>
  130.                     </div>
  131.                     <div class="bars">
  132.                        <div class="info">
  133.                            <span>CSS</span>
  134.                            <span>70%</span>
  135.                        </div>
  136.                        <div class="line css"></div>
  137.                    </div>
  138.                    <div class="bars">
  139.                        <div class="info">
  140.                            <span>MySql</span>
  141.                            <span>50%</span>
  142.                        </div>
  143.                        <div class="line mysql"></div>
  144.                    </div>
  145.                    <div class="bars">
  146.                        <div class="info">
  147.                            <span>Bootstrap</span>
  148.                            <span>20%</span>
  149.                        </div>
  150.                        <div class="line bootstrap"></div>
  151.                    </div>
  152.                    <div class="bars">
  153.                        <div class="info">
  154.                            <span>JavaScript</span>
  155.                            <span>10%</span>
  156.                        </div>
  157.                        <div class="line javaScript"></div>
  158.                    </div>
  159.                 </div>
  160.             </div>
  161.         </div>
  162.                            
  163.                          
  164.    </section>
  165.  
  166.  
  167.    <!-- skill part end-->
  168.  
  169.    
  170.  
  171.      <!-- Contact section start -->
  172.  
  173.      <section class="contact" id="contact">
  174.        <div class="max-width">
  175.            <h2 class="title">Contact Me</h2>
  176.            <div class="contact-content">
  177.                <div class="column left">
  178.                    
  179.                    <div class="text">Get In Touch</div>
  180.                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum provident officia distinctio earum, nostrum dicta placeat quaerat doloribus impedit autem itaque labore rem laboriosam quos ullam quidem voluptates sapiente consequuntur?</p>
  181.                    
  182.                    <div class="icons">
  183.                        <div class="row">
  184.                            
  185.                            <i class="fas fa-user-alt"></i>
  186.                            <div class="info">
  187.                                <div class="head">Name</div>
  188.                                <div class="subtitle">Sabbir Ahmed</div>
  189.                            </div>
  190.                        </div>
  191.  
  192.                        <div class="row">
  193.                            <i class="fas fa-map-marker-alt"></i>
  194.                            <div class="info">
  195.                                <div class="head">Address</div>
  196.                                <div class="subtitle">Dhamondi-32, Dhaka</div>
  197.                            </div>
  198.                        </div>
  199.  
  200.                        <div class="row">
  201.                            
  202.                            <i class="fas fa-envelope"></i>
  203.                            <div class="info">
  204.                                <div class="head">Email</div>
  205.                                <div class="subtitle">sabbir926khanbd@gmail.com</div>
  206.                            </div>
  207.                        </div>
  208.                    </div>
  209.                </div>
  210.                    <div class="column right">
  211.                        <div class="text">Message Me</div>
  212.                        <form action="#">
  213.                                <div class="fields">
  214.                                    <div class="field name">
  215.                                        <input type="text" placeholder="Name" required>
  216.                                    </div>
  217.                                    <div class="field email">
  218.                                        <input type="email" placeholder="Email" required>
  219.                                    </div>
  220.                                    </div>
  221.                                    <div class="field subject">
  222.                                        <input type="text" placeholder="Subject" required>
  223.                                    </div>
  224.                                    <div class="field textarea">
  225.                                        <textarea cols="30" rows="10" placeholder="Descire Project..." required></textarea>
  226.                                    </div>
  227.                                    <div class="button">
  228.                                        <button type="submit">Send Message</button>
  229.                                    </div>
  230.                                </div>
  231.                        </form>
  232.                    </div>
  233.                </div>
  234.        </div>
  235.    </section>
  236.  
  237.  
  238.      <!-- Contact section end-->
  239.  
  240. <!-- Footer Section Start -->
  241.  
  242.    <footer>
  243.        <span>Created By <a href="#">SabbirBD</a> | <span class="far fa-copyright"></span> 2021 All rights reserved.</span>
  244.    </footer>
  245.  
  246.  
  247.  
  248.  
  249. <!-- Footer Section Start -->
  250.    
  251.    <script src="protfolio.js"></script>
  252. </body>
  253. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!