API tools faq
paste
kabbo512

HTML/CSS

kabbo512
Jan 18th, 2021 (edited)
339
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.78 KB | None | 0 0
raw download clone embed print report
  1. <!-- HTML -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="preconnect" href="https://fonts.gstatic.com">
  9. <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
  10.     <link rel="stylesheet" href="style.css">
  11. </head>
  12. <body>
  13.         <section class="banner-first">
  14.             <div class="half-length">
  15.                 <h1>Hello, I'm</h1>
  16.                 <h1 class="name-highlight">Shahriar Kabbo</h1>
  17.                 <p>First, let me introduce myself. My name is Shahriar Kabbbo,Currently, I am studying CSE from Daffodil International University. and I have started the journey Of Web Developing. I have created some simple website and still learning about style and advanced work. Hope I would be a successfull web Developer.></p>
  18.                 <a class="link-button" href="https://www.linkedin.com/in/shahriar-kabbo-b30231203/" target="_blank">hire me</a>
  19.             </div>
  20.             <div class="half-length">
  21.                 <img src="images/kabbo1.png" alt="top profile pic">
  22.             </div>
  23.         </section>
  24.  
  25. <section class="banner-second">
  26.     <div class="half-length">
  27.         <img src="images/kabbo2.png" alt="top profile pic">
  28.     </div>
  29.     <div class="half-length">
  30.         <h1>About</h1>
  31.         <p>Lorem Ipsum is simply dummy text of the printing and
  32.             typesetting industry. Lorem Ipsum has been the industry's
  33.             standard dummy text ever since the 1500s, when an unknown
  34.             printer took a galley of type and scrambled it to make a type
  35.             specimen book.</p>
  36.         <a class="link-button"  href="https://www.linkedin.com/in/shahriar-kabbo-b30231203/" target="_blank">Download CV</a>
  37.     </div>
  38.    </section>
  39.  
  40.  
  41. <section class="latest-project-background">
  42.  
  43.     <div class="latest-projects">
  44.         <h3><span>Latest</span> working Project</h3>
  45.         <div class="project">
  46.             <div class="project-content">
  47.             <img src="images/image 4.png" alt="power-x-gym">
  48.             <h2>Power-x-gym (gym website)</h2>
  49.             <p>Lorem Ipsum is simply dummy text of the
  50.                 printing and typesetting industry</p>
  51.             </div>
  52.         </div>
  53.             <div class="project">
  54.                 <div class="project-content">
  55.                 <img src="images/image 5.png" alt="power-x-gym">
  56.                 <h2>Creative Agency</h2>
  57.                 <p>Lorem Ipsum is simply dummy text of the
  58.                     printing and typesetting industry</p>
  59.                 </div>
  60.             </div>
  61.                 <div class="project">
  62.                     <div class="project-content">
  63.                         <img src="images/image 8.png" alt="power-x-gym">
  64.                         <h2>Hard Rock Music</h2>
  65.                         <p>Lorem Ipsum is simply dummy text of the
  66.                             printing and typesetting industry</p>
  67.                     </div>
  68.                 </div>
  69.     </div>
  70.             </section>
  71.             <section class="work-inquiry" >
  72.                
  73.                 <div class="work-inquiry-img">
  74.                     <h1 class="flow">Work Inquiry</h1>
  75.                 <img src="images/work.png">
  76.                 <div class="position">
  77.                      <a class="link-button-chat " href="https://www.linkedin.com/in/shahriar-kabbo-b30231203/" target="_blank">Let's Chat</a>
  78.                 </div>
  79.                
  80.                
  81.             </div>
  82.             </section>
  83.  
  84.                
  85.                <section class="last-part">
  86.                    <h3>Stay Connected</h3>
  87.                     <h2>shahriarkabbo100@gmail.com</h2>
  88.                     </section>
  89.                     <div class="icon-area"></div>
  90.                
  91.                         <a href="https://www.google.com/"><img src="images/icons/1.png"></a>
  92.                  
  93.                    
  94.                         <a href="https://www.google.com/"><img src="images/icons/2.png"></a>
  95.                    
  96.                    
  97.                         <a href="https://www.google.com/"><img src="images/icons/3.png"></a>
  98.                     </div>
  99.  
  100. </body>
  101.  
  102.  
  103.  
  104. </html>
  105.  
  106.  
  107.                                              <!-- CSS  -->
  108. body{color:#3e3e3e;
  109.     font-size: 24px;
  110.     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  111. }
  112. .banner-first, .banner-second{
  113.      height:600px;
  114.     margin-top: 180px;
  115.     margin-bottom: 200px;
  116.    
  117. }
  118.  
  119. .half-length{
  120.     width:40%;
  121.     margin-left: 8%;
  122.     float: left;
  123. }
  124. h1{
  125.     font-family: 'Bebas Neue', cursive;
  126.     text-transform: uppercase;
  127.     font-size: 80px;
  128.     margin: 0px auto;
  129.     color: #363958;
  130.     font-weight: 500;
  131.    
  132. }
  133. .name-highlight{
  134.     color:#FF8367;
  135. }
  136. p span{color:#FF8367;
  137.     text-transform: capitalize;}
  138. .link-button{
  139.     margin-top: 30px;
  140.     color: white;
  141.     font-weight: 600;
  142.     text-decoration: none;
  143.     text-transform: capitalize;
  144.     background-image:linear-gradient(90deg, #FF8063, #F46060);
  145.     padding: 20px 60px;
  146.     border-radius: 5px;
  147.     display: inline-block;
  148.     box-shadow: 1px 1px 10px grey;
  149. }
  150. .half-length img{
  151.     width: 80%;
  152.     height: 80%;
  153. }
  154. .latest-project-background{
  155.     background-color: #F8F9FC;
  156.     margin-bottom: 200px;
  157.     height: 900px;
  158.     padding-top: 100px;
  159. }
  160. .latest-projects{
  161.     width: 91%;
  162.     height:800px;
  163.     margin: 0px auto;
  164.     }
  165.  
  166. .latest-projects h3{
  167.     font-family: 'Bebas Neue', cursive;
  168.     color: #363958;
  169.     text-transform: uppercase;
  170.     text-align: center;
  171.     font-size: 64px;  
  172.     letter-spacing: 0.06em;
  173. }
  174. .latest-projects h3 span{
  175.     color: #f46060;;
  176. }
  177. .project{
  178.     width: 30%;
  179.     margin-left:2.5%;
  180.     float:left;
  181.     border-radius: 10px;
  182.     background-color: white;
  183.     box-shadow: 10px 10px 40px gray;
  184. }
  185. .project-content{
  186.     padding: 15px;
  187.  
  188. }
  189.  
  190. .project img{
  191.     width: 100%;
  192. }
  193. .work-inquiry {
  194.   background-image: url("images/images/inq.png");
  195.   background-repeat: no-repeat;
  196.   background-size: cover;
  197.   background-position: center;
  198.   margin-top: 20;
  199.   width: 72%;
  200.   height: 29.8px;
  201.   margin: auto;
  202.   position: relative;
  203.   border-radius: 30px;
  204. }
  205.  
  206. .text {
  207.   position: absolute;
  208.   bottom: 45px;
  209.   left: 20px;
  210. }
  211. .text h1 {
  212.   color: white;
  213.   padding: 20px;
  214. }
  215. .btn {
  216.   color: white;
  217. }
  218.  
  219. .btn a {
  220.   color: white;
  221.   background: linear-gradient(tomato, salmon);
  222.   padding: 10px 25px;
  223.   border-radius: 5px;
  224.   text-decoration: none;
  225.   font-weight: bolder;
  226.   position: absolute;
  227.   right: 12.9px;
  228.   top: 72.8px;
  229. }
  230. .float-clear {
  231.   clear: both;
  232. }
  233.  
  234.  
  235.  
  236.  
  237. .stay-connected{
  238.   text-align:center;
  239.   padding:20px;
  240. }
  241. .stay-connected .icons img{
  242.   width: 50px;
  243.   margin:5px;
  244. }
  245.  
  246.  
  247. .work-inquiry{
  248.     margin: 0,auto;
  249.     width: 70%;
  250.    
  251.     padding-top: 20px;
  252.    
  253. }
  254. .work-inquiry-img img{
  255. width: 90%
  256. }
  257. .flow{
  258.     color: white;
  259.     position: absolute;
  260.    
  261.     padding-top: 110px;
  262.     padding-left: 100px;
  263.  
  264. }
  265.  
  266. .link-button-chat{
  267.     color: white;
  268.   background: linear-gradient(tomato, salmon);
  269.   padding: 10px 25px;
  270.   border-radius: 5px;
  271.   text-decoration: none;
  272.   font-weight: bolder;
  273.   position: absolute;
  274.   right: 12.9px;
  275.   top: 72.8px;
  276. }
  277. .position{
  278.     margin: 0,auto;
  279.     position: absolute;
  280.    padding-top: 110px;
  281.    padding-left: 1250px;
  282.    padding-bottom: 10px;
  283.    top: 20%;
  284.    transform: translate(-10%,15%);
  285.    
  286.  
  287. }
  288. .last-part{
  289. margin-top: 320px;
  290. text-align: center;
  291. }
  292.  
  293. .icon-area{
  294.       width:25%;
  295.     margin-left: 60px;
  296.    
  297.     padding-right: 20px;
  298.     float: left;
  299. }
  300.  
  301.  
  302.  
  303.  
  304. /*footer area*/
  305.  
  306. footer {
  307.   text-align: center;
  308.   font-size: 12px;
  309.   text-transform: uppercase;
  310.   font-weight: 700;
  311. }
  312.  
  313.  
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!