API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 26th, 2019
1,682
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.13 KB | None | 0 0
raw download clone embed print report
  1. <html lang="en"><head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  5.     <link rel="stylesheet" href="style.css">
  6.     <!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> -->
  7.  
  8.     <title>Demian Sims</title>
  9. </head>
  10.  
  11. <body>
  12.     <header style="padding-bottom: 0px;margin-bottom: 10px;">
  13.         <div class="container">
  14.         <div id="header-text" class="container">
  15.             <h1 style="margin-bottom: 15px;">Demian Sims</h1><br>
  16.             <h5 style="margin-bottom: 20px;"><em>Coder | Developer | Designer</em></h5><br>
  17.             <em style="margin-top: 10px;">From musician to developer: After a great career
  18.                 in music, I've made the
  19.                 exciting transition to developer and software engineer.
  20.             </em><br>
  21.             <div id="icons">
  22.                 <a href="https://github.com/dsound-zz" target="_blank">
  23.                     <img src="src/photos/GitHub-Mark-64px.png" alt="github link" id="github"></a>
  24.                 <a href="https://www.linkedin.com/in/demiansims/" target="_blank">
  25.                     <img src="src/photos/sm-icons-linkedIn-In-tm.png" alt="linkedin link" id="linkedin"></a><br>
  26.  
  27.             </div>
  28.         </div>
  29.         <div id="profile-pic"></div>
  30.         </div>
  31. </header>
  32.  
  33.     <div class="grid-container" style="margin-top: 28px;padding-top: 0px;">
  34.         <section class="coder-cards">
  35.             <h2>Coder Cards</h2><br>
  36.             <a href="https://codercards-app.herokuapp.com" target="_blank" class="site-image"><img src="src/photos/Screen Shot 2019-06-01 at 12.53.08 PM.png" alt="codercards"></a>
  37.         </section>
  38.         <aside class="coder-cards-aside">
  39.             <p class="tech-description" style="text-align:center"><em>HTML5 | CSS3 | React | Rails | JWT | Bcrypt</em>
  40.             </p>
  41.             <p class="app-description">A nifty flash card app with a coding theme for beginners and OG's alike to hone
  42.                 their
  43.                 skills
  44.                 in all things coding terms, syntax and scripts, or anything you want!
  45.                 A user can create an account, decks and cards to edit or delete at anytime. I went looking
  46.                     for a flashcard app to help studying code and remember that I know how to code.
  47.                 </p>
  48.         </aside>
  49.         <section class="faunagram">
  50.             <h2>Faunagram</h2><br>
  51.             <a href="https://www.youtube.com/watch?v=3c2oa2vBglw" target="_blank" class="site-image"><img src="src/photos/Screen Shot 2019-06-01 at 12.58.07 PM.png" alt="faunagram"></a>
  52.  
  53.         </section>
  54.         <aside class="faunagram-aside">
  55.             <p class="tech-description"><em>HTML5 | CSS3 | React | React Routes | Semantic-UI-React | Rails | JWT | Bcrypt | Active
  56.                     Storage | AWS</em></p>
  57.             <p class="app-description" id="faunagram-desc">An app where users can share all things urban wildlife. As
  58.                 our cities clean
  59.                 up, wild life returns and one can see some very interesting creatures. Of course your common squirrel,
  60.                 Robin, pigeon and rat are welcome too!
  61.             </p>
  62.  
  63.         </aside>
  64.  
  65.  
  66.         <section class="upsidedown">
  67.             <h2>The Upside Down</h2><br>
  68.             <a href="https://the-upside-down-client.herokuapp.com/" target="_blank" class="site-image"><img src="src/photos/Screen Shot 2019-05-27 at 12.55.44 PM.png"></a>
  69.         </section>
  70.         <aside class="upsidedown-aside">
  71.             <p class="tech-description" id="upsidedown" style="text-align:center"><em>HTML5 | CSS3 | Javascript |
  72.                     Rails | Waffles</em></p>
  73.             <p class="app-description">Ready to enter The Upside Down? The Upside Down is a game inspired by the
  74.                 Netflix TV series Stranger
  75.                 Things,
  76.                 featuring
  77.                 two characters from the series: Eleven and Demogorgon. Wrote this with my Flatiron cohort, Joyce Kwon!
  78.             </p>
  79.             <div id="protip">
  80.                 <p></p><em>Pro tip: Use headphones for optimal experience!</em></div>
  81.         </aside>
  82.     </div>
  83.  
  84.     <footer>
  85.         <div class="tech" style="text-align:center">React - Redux - Javascript ES6 - Ruby on Rails - HTML5 - CSS3 - SQL</div>
  86.         <a href="https://docs.google.com/document/d/1kwes-CPKZTioWEKJqL6MuHujvnBIHhdtLi8hChP5IJg/edit?usp=sharing" target="_blank" id="resume" download="">
  87.             <img src="src/photos/icons8-resume-80.png" alt="resume link">
  88.             <p style="text-decoration: none">resume</p></a>
  89.        
  90.         <h2> <a href="mailto:[email protected]" id="email">[email protected]</a></h2>
  91.         <div id="photo-credit">Photo credit: David Laspina</div>
  92.     </footer>
  93.  
  94.  
  95.  
  96. </body></html>
  97.  
  98.  
  99. ------------------------
  100. ---------CSS------------
  101. ------------------------
  102.  
  103.  
  104. /* testing */
  105.  
  106. @import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
  107. @import url("https://fonts.googleapis.com/css?family=Noto+Sans+KR|Raleway&display=swap");
  108.  
  109. * {
  110.   margin: 0;
  111.   padding: 0;
  112.   box-sizing: border-box;
  113. }
  114.  
  115. body {
  116.   font-family: "Raleway", sans-serif;
  117.   font-size: 30px;
  118.    background: #067371;
  119. }
  120.  
  121. .grid-container {
  122.   justify-content: center;
  123.   align-content: center;
  124.   margin: auto;
  125.   width: 80vw;
  126.   padding: 1em;
  127.   display: grid;
  128.   grid-template-columns: repeat(2, 1fr);
  129.   grid-template-rows: auto;
  130.   grid-gap: 1em;
  131.   margin-bottom: 20px;
  132. }
  133.  
  134. header,
  135. footer {
  136.   /*! width: 100vw; */
  137.  
  138. }
  139.  
  140. header {
  141.   display: flex;
  142.   flex-direction: row;
  143.   justify-content: space-evenly;
  144.   height: 60vh;
  145.   margin-bottom: 1em;
  146.   position: relative;
  147.   padding: 1em;
  148.   font-family: "Raleway", sans-serif;
  149.   color: black;
  150.   /*! background: url("src/photos/Dark Skies.png") no-repeat,
  151.     url("src/photos/IMG_5532-rotated.jpg") no-repeat; */
  152.   background-position: left 80%, right top 40%;
  153.   /*! background-size: 100%, 40%, auto; */
  154.   background-blend-mode: lighten;
  155.   background-color: white;
  156.   /*! width: 100%; */
  157. }
  158.  
  159. #profile-pic {
  160.   width: 40%;
  161.   height: 70%;
  162.   background-image: url(https://i.imgur.com/kgX5CK6.png);
  163.   background-size: cover;
  164.   background-repeat: no-repeat;
  165.   /*! border: 1px solid grey; */
  166.   background-position: center;
  167.   margin-top: 5%;
  168.   box-shadow: 1px 1px #7fffd47a;
  169. }
  170.  
  171. /* header #profile-pic img {
  172.   max-height: 100%;
  173.   mix-blend-mode: lighten;
  174. } */
  175.  
  176. #header-text {
  177.   /*! overflow-wrap: break-word; */ /*! word-wrap: break-word; */
  178.    /*! position: relative; */
  179.    /*! visibility: visible; */
  180.    /*! padding-right: 4em; */
  181.    /*! right: 5em; */  
  182.    /*! top: 2em; */
  183.    /*! height: 25em; */
  184.    width: 25em;
  185.   display: flex;
  186.   flex-direction: column;
  187.   /*! padding-top: 4em; */
  188. }
  189.  
  190. #linkedin {
  191.   height: 2.75em;
  192.   width: auto;
  193. }
  194.  
  195.  
  196. #icons {
  197.   display: flex;  
  198.   height: 4em;
  199.   width: auto;
  200.   /*! margin-left: 16em; */  
  201.   margin-top: 30px;
  202. }
  203.  
  204. #linkedin {
  205.   display: absolute;
  206.   height: 2.75em;
  207.   width: auto;
  208.  
  209.  
  210. }
  211.  
  212. #linkedin:hover {
  213.   height: 3em;
  214.   width: auto;
  215. }
  216.  
  217. #github {
  218.   display: absolute;
  219.   height: 3em;
  220.   width: auto;
  221.   margin-right: 1em;  
  222. }
  223.  
  224.  
  225. #github:hover {
  226.   background: white;
  227.   border-radius: 50%;  
  228. }
  229.  
  230. #resume {
  231.   display: absolute;
  232.   height: 4em;
  233.   width: auto;
  234.   size: 10px;
  235. }
  236.  
  237. #resume:link {
  238.   text-decoration: none;
  239.   color: black;
  240. }
  241.  
  242. #resume:visited {
  243.   text-decoration: none;
  244.   color: rgba(220, 220, 220, 0.831);
  245. }
  246.  
  247. #email:link {
  248.   text-decoration: none;
  249.   color: lightseagreen;
  250. }
  251.  
  252. #email:visited {
  253.   text-decoration: none;
  254.   color: rgba(220, 220, 220, 0.831);
  255. }
  256.  
  257. section,
  258. aside {
  259.   font-family: "Raleway", sans-serif;
  260.   border: 2px solid white;
  261.   border-radius: 10px;
  262.   /*! border-style: ridge; */  
  263.   /*! background: rgb(87, 97, 130); */
  264.   color: black;
  265.   background-color: white;
  266. }
  267.  
  268. section {
  269.   /* max-width: 100%; */
  270.   height: auto;
  271.   align-items: center;
  272.   justify-content: center;
  273.   text-align: center;
  274.   position: relative;
  275.   padding-top: 0.88em;
  276.  
  277. }
  278.  
  279. aside {
  280.   /* max-width: 100%; */
  281.   height: auto;
  282.   position: relative;
  283.   align-items: left;
  284.   justify-content: center;
  285.   justify-self: center;
  286.   padding-top: 3em;
  287.   padding-right: 2em;
  288.  
  289. }
  290.  
  291. /* #coolthings {
  292.     color: lightgoldenrodyellow;
  293. } */
  294.  
  295. .tech-description {
  296.   padding-top: 0.50em;
  297.   padding-left: 1em;
  298.   text-align: center;
  299.   justify-self: center;
  300.   font-weight: bold;
  301. }
  302.  
  303. .app-description {
  304.   padding-top: 3em;
  305.   padding-left: 1em;
  306. }
  307.  
  308.  
  309.  
  310. footer {
  311.   font-family: sans-serif;
  312.   /*! background: url("src/photos/Dark Skies.png") no-repeat; */
  313.   color: rgba(245, 245, 245, 0.945);
  314.   align-items: center;
  315.   justify-content: center;
  316.   text-align: center;
  317.   padding: 10px 0;
  318.   background-size: cover;
  319.   background-color: white;
  320.   color: black;
  321. }
  322.  
  323. section img {
  324.   max-width: 100%;
  325.   height: auto;
  326. }
  327.  
  328. #protip {
  329.   padding-top: 1em;
  330.   padding-left: 1em;
  331.   font-size: 1em;
  332.   font-weight: bold;
  333. }
  334.  
  335. #photo-credit {
  336.   font-size: 10px;
  337.   color: black;
  338. }
  339.  
  340. .tech {
  341.   font-size: 25px;
  342. }
  343.  
  344. .container {
  345.   /*! margin: 0 auto; */
  346.   width: 65vw;
  347.   display: flex;
  348.  
  349.   height: 100%;
  350. }
  351. /* Smart phones portrait */
  352. @media only screen and (min-width: 320px) and (max-width: 479px)
  353. {  
  354.   body {
  355.     font-size: 16px;
  356.   }
  357.   .grid-container {
  358.     grid-template-columns: repeat(1, 1fr);
  359.   }
  360.   .coder-cards {
  361.     grid-column: span 1;
  362.   }
  363.  
  364.   .coder-cards-aside {
  365.     grid-column: span 1;
  366.   }
  367.  
  368.   .faunagram {
  369.     grid-column: span 1;
  370.   }
  371.  
  372.   .faunagram-aside {
  373.     grid-column: span 1;
  374.   }
  375.  
  376.   .upsidedown {
  377.     grid-column: span 1;
  378.   }
  379.  
  380.   .upsidedown-aside {
  381.     grid-column: span 1;
  382.   }
  383.  
  384.     .container, .grid-container {
  385.     width: 100%;
  386.   }
  387.  
  388.  }
  389.  
  390.  /* smartphone landscape  */
  391. @media only screen and (min-width: 480px) and (max-width: 767px)
  392. {
  393.    body {
  394.     font-size: 1em;
  395.   }
  396.    #header-text {
  397.     padding-right: 4em;
  398.   }
  399.   .grid-container {
  400.     grid-template-columns: repeat(1, 1fr);
  401.   }
  402.   .coder-cards {
  403.     grid-column: span 1;
  404.   }
  405.  
  406.   .coder-cards-aside {
  407.     grid-column: span 1;
  408.   }
  409.  
  410.   .faunagram {
  411.     grid-column: span 1;
  412.   }
  413.  
  414.   .faunagram-aside {
  415.     grid-column: span 1;
  416.   }
  417.  
  418.   .upsidedown {
  419.     grid-column: span 1;
  420.   }
  421.  
  422.   .upsidedown-aside {
  423.     grid-column: span 1;
  424.   }
  425.  
  426.     .container, .grid-container {
  427.     width: 100%;
  428.   }
  429.  
  430. }
  431.  
  432. /* Tablest portrait mode  */
  433. @media only screen and (min-width: 768px) and (max-width: 991px)
  434. {
  435.    body {
  436.     font-size: 1.4em;
  437.   }
  438.    #header-text {
  439.     padding-right: 5em;
  440.   }
  441.   .grid-container {
  442.     grid-template-columns: repeat(1, 1fr);
  443.   }
  444.   .coder-cards {
  445.     grid-column: span 1;
  446.   }
  447.  
  448.   .coder-cards-aside {
  449.     grid-column: span 1;
  450.   }
  451.  
  452.   .faunagram {
  453.     grid-column: span 1;
  454.   }
  455.  
  456.   .faunagram-aside {
  457.     grid-column: span 1;
  458.   }
  459.  
  460.   .upsidedown {
  461.     grid-column: span 1;
  462.   }
  463.  
  464.   .upsidedown-aside {
  465.     grid-column: span 1;
  466.   }
  467.  
  468.     .container, .grid-container {
  469.     width: 100%;
  470.   }
  471.  
  472. }
  473.  
  474. /* Tablet landscape and desktop  */
  475. @media only screen and (min-width: 992px) and (max-width: 1024px)
  476. {
  477.    body {
  478.     font-size: 1.4em;
  479.   }
  480.    #header-text {
  481.     padding-right: 5em;
  482.   }
  483.   .coder-cards {
  484.     grid-column: 1 / span 1;
  485.   }
  486.  
  487.   .coder-cards-aside {
  488.     grid-column: 2 / span 1;
  489.   }
  490.  
  491.   .faunagram {
  492.     grid-column: 1 / span 1;
  493.   }
  494.  
  495.   .faunagram-aside {
  496.     grid-column: 2 / span 1;
  497.   }
  498.  
  499.   .upsidedown {
  500.     grid-column: 1 / span 1;
  501.   }
  502.  
  503.   .upsidedown-aside {
  504.     grid-column: 2 / span 1;
  505.   }
  506.  
  507. }
  508.  
  509. /* Large screens */
  510. @media only screen and (min-width: 1025px) and (max-width: 1992px)
  511. {
  512.    body {
  513.     font-size: 1.75em;
  514.   }
  515.  
  516.   #header-text {
  517.     padding-right: 6em;
  518.     margin-top: 5%;
  519.     margin-bottom: 10px;
  520.     padding-left: 5%;
  521.   }
  522.   .coder-cards {
  523.     grid-column: 1 / span 1;
  524.   }
  525.  
  526.   .coder-cards-aside {
  527.     grid-column: 2 / span 1;
  528.   }
  529.  
  530.   .faunagram {
  531.     grid-column: 1 / span 1;
  532.   }
  533.  
  534.   .faunagram-aside {
  535.     grid-column: 2 / span 1;
  536.   }
  537.  
  538.   .upsidedown {
  539.     grid-column: 1 / span 1;
  540.   }
  541.  
  542.   .upsidedown-aside {
  543.     grid-column: 2 / span 1;
  544.   }
  545. }
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!