API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 21st, 2019
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.62 KB | None | 0 0
raw download clone embed print report
  1. <!---------------------------------------------------------- HTML INFO ------------------------------------------------------>
  2.  
  3. <!doctype html>
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.  
  9.       <link rel="stylesheet" href="css/bootstrap.min.css" >
  10.       <link rel="stylesheet" href="css/JDdev.css" >
  11.       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  12.  
  13.     <title>JS Portfolio</title>
  14.   </head>
  15.   <body>
  16.      
  17. <!---------------------------------------------------------- NAVBAR ------------------------------------------------------>
  18.      
  19. <div>
  20. <nav class="JD-nav navbar navbar-expand-md navbar-dark" style="background-color:black; color:white;">
  21.     <a href="#"><span class="JD-brand"><span style="font-size: 32px; color:#4AA4FF;">JS</span><span style="font-size:22px;">dev</span></span></a>
  22.    
  23.    
  24.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"  style="margin-right: 1rem;">
  25.     <span class="navbar-toggler-icon"></span>
  26.   </button>
  27.   <div class="collapse navbar-collapse " id="navbarNav">
  28.     <ul class="navbar-nav ml-auto"  style="margin-right: 1rem;">
  29.       <li class="nav-item JS-nav-item">
  30.         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  31.       </li>
  32.       <li class="nav-item JS-nav-item">
  33.         <a class="nav-link" href="#">Work</a>
  34.       </li>
  35.       <li class="nav-item JS-nav-item">
  36.         <a class="nav-link" href="#">Projects</a>
  37.       </li>
  38.       <li class="nav-item JS-nav-item">
  39.         <a class="nav-link" href="#">Contact</a>
  40.       </li>
  41.     </ul>
  42.   </div>
  43. </nav>
  44. </div>
  45.      
  46.  
  47.      
  48. <!---------------------------------------------------------- COVER PAGE ------------------------------------------------------>    
  49.      
  50. <div class="JS-cover-image" style="position: relative;">
  51.     <span class="JS-cover-overlay"></span>
  52.     <span class="JS-cover-triangle"></span>
  53.  
  54.     <div class="container" style="padding-top: 15em; padding-bottom: 15em;">
  55.  
  56.         <div class="row">
  57.             <div class="col-7 my-auto">
  58.                 <h1 class="JS-cover-text" style="font-weight: bold; font-size:75px;">JACOB SMITH</h1>
  59.                 <h4 class="JS-cover-text" style="font-weight: normal; font-size: 22px;">PROGRAMMING AND GRAPHIC DESIGN</h4>
  60.             </div>
  61.             <div class="col-5 my-auto">
  62.                 <img src="images/isoPhone.svg" class="img-fluid float-right" alt="Responsive image" style="width: 100%; height: auto;">
  63.             </div>
  64.         </div>
  65.     </div>
  66. </div>
  67.      
  68.          
  69.      
  70.      
  71.      
  72.      
  73. <!---------------------------------------------------------- PANNELS ------------------------------------------------------>    
  74. <div style="padding-bottom: 1em">
  75.     <div class="JD-panel"  style="border-color: #FB2F2F; position: relative;">
  76.         <span class="JS-panel-triangle" style="background-color: #FB2F2F;"></span>
  77.         <div class="container">
  78.             <div class="row JS-panel-content">
  79.                 <div class="col-6 my-auto">
  80.                     <h1 class="JS-panel-header">Programming</h1>
  81.                     <h4 class="JS-panel-text">FLUENT IN C#, HTML, CSS, AND GOOD UNDERSTANDING OF PROGRAMMING CONCEPTS AND PROBLEM SOLVING</h4>
  82.                     <div class="my-auto" style="padding-top: 1em;"><button type="button" class="btn-lg btn-JS my-auto"  style="background-color:#FB2F2F;">Portfolio <i class="fas fa-caret-right fa-lg my-auto"></i></button></div>
  83.                 </div>
  84.                 <div class="col-6 my-auto">
  85.                     <img src="images/isoprogramming.svg" class="img-fluid float-right" alt="Responsive image">
  86.                 </div>
  87.             </div>
  88.         </div>
  89.     </div>
  90. </div>  
  91.  
  92.      
  93.      
  94. <div style="padding-bottom: 1em">
  95.     <div class="JD-panel"  style="border-color: #2FA9FB; position: relative;">
  96.         <span class="JS-panel-triangle" style="background-color: #2FA9FB;"></span>
  97.         <div class="container">
  98.             <div class="row JS-panel-content">
  99.                 <div class="col-6 my-auto">
  100.                     <h1 class="JS-panel-header">Graphic Design</h1>
  101.                     <h4 class="JS-panel-text">10 years of graphic design work for self and clients. proficient in photoshop, illustrator, adobe xd, and SketchUp. </h4>
  102.                     <div class="my-auto" style="padding-top: 1em;"><button type="button" class="btn-lg btn-JS my-auto" style="background-color:#2FA9FB;">Portfolio <i class="fas fa-caret-right fa-lg my-auto"></i></button></div>
  103.                 </div>
  104.                 <div class="col-6 my-auto">
  105.                     <img src="images/isographicdesign.svg" class="img-fluid float-right" alt="Responsive image">
  106.                 </div>
  107.             </div>
  108.         </div>
  109.     </div>
  110. </div>  
  111.  
  112.    
  113.    
  114. <div style="padding-bottom: 1em">
  115.     <div class="JD-panel"  style="border-color: #2FFB43; position: relative;">
  116.         <span class="JS-panel-triangle" style="background-color: #2FFB43;"></span>
  117.         <div class="container">
  118.             <div class="row JS-panel-content">
  119.                 <div class="col-6 my-auto">
  120.                     <h1 class="JS-panel-header">Web dev</h1>
  121.                     <h4 class="JS-panel-text">Experience creating custom and functional website frontends with and without frameworks.</h4>
  122.                     <div class="my-auto" style="padding-top: 1em;"><button type="button" class="btn-lg btn-JS my-auto"  style="background-color:#2FFB43;">Portfolio <i class="fas fa-caret-right fa-lg my-auto"></i></button></div>
  123.                 </div>
  124.                 <div class="col-6 my-auto">
  125.                     <img src="images/isowebdev.svg" class="img-fluid float-right" alt="Responsive image">
  126.                 </div>
  127.             </div>
  128.         </div>
  129.     </div>
  130. </div>    
  131.  
  132.      
  133. <!---------------------------------------------------------- FOOTER ------------------------------------------------------>
  134. <div class="JS-footer">
  135.    
  136. </div>
  137.      
  138.      
  139.      
  140. <!---------------------------------------------------------- SCRIPTS ------------------------------------------------------>
  141.  
  142.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  143.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  144.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  145.   </body>
  146. </html>
  147.  
  148.  
  149. @import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
  150.  
  151. body{
  152.     background-color: #333333;
  153. }
  154.  
  155. a:link {
  156.     color: white;
  157.     text-decoration: none;
  158. }
  159.  
  160. /* visited link */
  161. a:visited {
  162.     color: white;
  163.     text-decoration: none;
  164. }
  165.  
  166. /* mouse over link */
  167. a:hover {
  168.     color: white;
  169.     text-decoration: none;
  170. }
  171.  
  172. /* selected link */
  173. a:active {
  174.     color: white;
  175.     text-decoration: none;
  176. }
  177.  
  178. .JD-nav{
  179.     font-family: 'Roboto', sans-serif;
  180.     font-weight: bold;
  181.     color: white;
  182.    
  183.     position: relative;
  184.     display: -ms-flexbox;
  185.     display: flex;  
  186.     -ms-flex-wrap: wrap;
  187.     flex-wrap: wrap;
  188.     align-items: center;
  189.     justify-content: space-between;
  190.     padding: .10rem;
  191.    
  192.     position:fixed;
  193.     top:0;
  194.     z-index: 100;
  195.     width: 100%;
  196. }
  197.  
  198. .JS-nav-item{
  199.     padding-left: 1em;
  200.     padding-right: 1em;
  201. }
  202.  
  203. .navbar-dark .navbar-nav .nav-link {
  204.     color: rgb(255, 255, 255);
  205. }
  206.  
  207. .JD-nav-content{
  208.     font-family: 'Roboto', sans-serif;
  209.     font-weight: bold;
  210.     color: white;
  211.     margin-right: 1rem;
  212.     margin-left: 1rem;
  213.  
  214. }
  215.  
  216. .JD-brand{
  217.     font-family: 'Roboto', sans-serif;
  218.     display: inline-block;
  219.     padding-top: 0px;
  220.     padding-bottom: 0px;
  221.     margin-left: 1rem;
  222.     font-size: 0px;
  223.     line-height: normal;
  224.     white-space: nowrap;
  225.     -webkit-user-select: none;
  226.     -khtml-user-select: none;
  227.     -moz-user-select: none;
  228.     -ms-user-select: none;
  229.     user-select: none;
  230.  
  231. }
  232.  
  233. .JS-cover{
  234.     padding-left: 10rem;
  235.     padding-right: 10rem;
  236.     padding-top: 20rem;
  237.     padding-bottom: 20rem;
  238. }
  239.  
  240. .JS-cover-image{
  241.     background-image: url(../images/programmingbackground.png);
  242.     background-position: center;
  243.     background-repeat: no-repeat;  
  244.     background-size: cover;
  245. }
  246.  
  247. .JS-cover-overlay {
  248.     background: rgba(53, 144, 204, 0.85);
  249.     position: absolute;
  250.     width: 100%;
  251.     height: 100%;
  252.     z-index: 0;
  253.     background-position: center;
  254.     background-repeat: no-repeat;
  255.     background-size: cover;
  256. }
  257.  
  258. .JS-cover-text{
  259.     color: white;
  260.     font-family: 'Roboto', sans-serif;
  261. }
  262.  
  263. .JS-cover-triangle {
  264.     background: #2FA9FB;
  265.     position:absolute;
  266.     margin-left: 50%;
  267.     width: 100%;
  268.     height: 100%;
  269.     z-index: 0;
  270.     background-position: center;
  271.     background-repeat: no-repeat;
  272.     background-size: cover;
  273.    
  274.    
  275. -webkit-clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
  276. clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
  277. }
  278.  
  279. .JD-panel{
  280.     background-color: white;
  281.     color: black;
  282.     width: 100%;
  283.     border-top-width: 1em;
  284.     border-top-style: solid;
  285.     border-bottom-width: 1em;
  286.     border-bottom-style: solid;
  287.     border-color: red;
  288. }
  289.  
  290. .JS-panel-triangle {
  291.  
  292.     background: red;
  293.     position:absolute;
  294.     margin-left: 50%;
  295.     width: 100%;
  296.     height: 101%;
  297.     margin-top: -1px;
  298.     z-index: 0;
  299.     background-position: center;
  300.     background-repeat: no-repeat;
  301.     background-size: cover;
  302.     -webkit-clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
  303.     clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
  304. }
  305.  
  306. .JS-panel-content{
  307.     padding-top: 2.5em;
  308.     padding-bottom: 2.5em;
  309. }
  310.  
  311.  
  312. .JS-panel-header{
  313.     font-size: 60px;
  314.     font-weight: bold;
  315.     text-transform: capitalize;
  316. }
  317.  
  318. .JS-panel-text{
  319.     font-size: 20px;
  320.     font-weight: normal;
  321.     text-transform: uppercase;
  322. }
  323.  
  324. .btn-JS {
  325.     color: #fff;
  326.     border-radius: 0px;
  327.     background-color: #dc3545;
  328.     border-color: #dc3545;
  329.     border-color: rgba(255, 255, 255, 0);
  330.     font-size: 26px;
  331.     font-weight: bold;
  332.  
  333. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!