LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  

  
  

View My Portfolio

Check out some of the websites I have worked on. From custom-built sites to some of the most popular content management systems. Browse around, get inspired, and please don't hesitate to contact me with any questions.

  • Web Consulting

    Need help with a project? I can help you strategize, design, and develop your product from start to finish or help you through any point of your web strategy. Let's get in touch! I would love to chat with you about any projects, all things web design and development, and/or answer any questions you might have.

  • Site Maintenance

    Let me make the website changes you need as often as you like to ensure your website remains current and functional. I offer comprehensive web support that keeps your virtual storefront stable, secure and always open-for-business to allow you to cultivate a more dynamic and engaging presence on the web.

  • Web Development

    I don’t just manage your site, I can also build it from the ground up. I offer a full range of web development services for any type of website ranging from various content management systems and other open source software to 100% custom developed sites.

About Me

My name is David Andrew Dobrzanski and I am a passionate Web Developer. I have extensive knowledge in web development, web design, and graphic design with high proficiency in front-end web development, user-centered (UI) design, various Content Management Systems, and SEO concepts among other things. I have pixel perfect attention to detail with a hunger for constantly perfecting my craft. As an individual focused on customer satisfaction, I enjoy problem solving, pushing my abilities, and finding new ways to enhance quality and improve performance. Browse around my site, take a look at my portfolio, get inspired, and please don’t hesitate to contact me if you have any questions.

I can handle all your digital needs

Need help with a project? I can help you strategize, design, and develop your product from start to finish or help you through any point of your web strategy. I don’t just manage your site, I can also build it from the ground up. I offer a full range of web development services for any type of website ranging from various content management systems and other open source software to 100% custom developed sites.

View My Latest Projects

Check out some of the recent websites I have worked on. From custom-built sites to some of the most popular content management systems. Browse around, get inspired, and please don't hesitate to contact me with any questions.

Contact Information

Portland, Oregon
971.280.4560
dobrzanski.andrew@gmail.com

Important Info

Passionate Front-end Web Developer specializing in UI/UX Design. I have extensive knowledge in web development, web design, and graphic design with high proficiency in front-end web development, user-centered (UI) design, various Content Management Systems, and SEO concepts among other things. As an individual focused on customer satisfaction, I enjoy problem solving, pushing my abilities, and finding new ways to enhance quality and improve performance.

Copyright© 2017 All Right Reserved.
Discover. Design. Develop.
CSS
/* core styles */



#strip-banner {
  background-color: #e7e7e7;
}

body {
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  background: #fff;
  color: #333;
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: center;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

h1, h2, h3 {
  margin: 0;
  padding: 1rem 0;
}

p {
  margin: 0;
  padding: 1rem 0;
}

a {
  color: #00c5ff;
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  color: #333;
}

/* navigation */
.navigation {
  height: 7rem;
  background: #fff;
}

.brand {
  position: absolute;
  padding-top: .6rem;
  float: left;
  line-height: 7rem;
  text-transform: uppercase;
  font-size: 1.4rem;
}

.brand img {
  width: 80%;
}

.nav-container {
  max-width: 1170px;
  margin: 0 auto;
}

nav {
  float: right;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  float: left;
  position: relative;
}

nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #fff;
  color: #333;
  text-decoration: none;
  font-weight: 700;
}

nav ul li a:hover,
nav ul li a:visited:hover {
  background: #080808;
  color: #00c5ff;
}

nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}

nav ul li ul li {
  min-width: 190px;
}

nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}

.nav-list {
  position: relative;
  z-index: 1;
  margin-top: 20px;
}

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}

.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  height: 70px;
  width: 70px;
}

@media only screen and (max-width: 768px) {
  .nav-mobile {
    display: block;
  }
  nav {
    width: 100%;
    padding: 70px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }
  .nav-dropdown {
    position: static;
  }
}

@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
    margin-top: 30px;
  }
}

#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #333;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}

#nav-toggle span:before {
  top: -10px;
}

#nav-toggle span:after {
  bottom: -10px;
}

#nav-toggle.active span {
  background-color: transparent;
}

#nav-toggle.active span:before,
#nav-toggle.active span:after {
  top: 0;
}

#nav-toggle.active span:before {
  transform: rotate(45deg);
}

#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

/* social media */
.social-media li {
  display: inline-block;
  margin-right: 2rem;
}

.social-media li .fa {
  font-size: 1.2rem;
}

/* button styles */
.btn {
  display: inline-block;
  background: #333;
  color: #fff;
  text-decoration: none;
  padding: 1rem 2rem;
  border: 1px solid #666;
  margin: .5rem 0;
}

.btn:hover {
  background: #eaeaea;
  color: #333;
}

/* content button */
.content-button {
  margin-top: 3rem;
}

/* content button orange */
.content-btn-orange {
  background-color: #fcad26;
  color: #fff;
  padding: 1.5rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  text-decoration: none;
}

.content-btn-orange:hover {
    background: #00c5ff;
}

/* content button blue */
.content-btn-blue {
  background-color: #00c5ff;
  color: #fff;
  padding: 1.5rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  text-decoration: none;
}

.content-btn-blue:hover {
  background: #fcad26;
  color: #fff;
}

/* content button outline */
.content-btn-outline {
  background-color: transparent;
  color: #fff;
  padding: 1.5rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  border: 2px solid #fff;
  text-decoration: none;
}

.content-btn-outline:hover {
  background-color: #fff;
  color: #fcad26;
  padding: 1.5rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  border: 3px solid #fff;
  text-decoration: none;
}

/* animation button */
.animation-btn-1 {
  display: inline-block;
  position: relative;
  height: 65px;
  overflow: hidden;
  width: 100%;
  margin-top: 20px;
}

.animation-1 {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #00c5ff;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 58px;
  text-align: center;
  transition: color 400ms ease-in;
  font-weight: 700;
  border: 3px solid #fff;
  text-decoration: none;
  width: 95%;
}
.animation-1:before {
  content: attr(data-title) " ";
  display: inline-block;
  position: absolute;
  top: 65px;
  left: 0;
  background-color: #fff;
  color: #00c5ff;
  height: 100%;
  font-weight: bold;
  text-align: center;
  width: 100%;
  transition: top 320ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
}
.animation-1:hover {
  color: #31b0d5;
}
.animation-1:hover:before {
  top: 0;
}

/* header showcase */
#showcase {
  min-height: 570px;
  color: #fff;
  text-align: center;
}

#showcase .bg-image {
  position: absolute;
  /* background: #333 url('https://static.pexels.com/photos/247791/pexels-photo-247791.png'); */
  /* opacity: 0.4; */
  background: #333 url('http://www.adobrzanski.com/images/slider-miami-roof-top.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 675px;
  z-index: -1;
}

#showcase h1 {
  padding-top: 100px;
  padding-bottom: 0;
}

#showcase .content-wrap,
#section-a .content-wrap {
  padding: 0 1.5rem;
}

/* mouse shadow */
.mouseShadow {
  min-height: 45vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mouseShadow a {
  text-decoration: none;
  color: #fff;
}

.mouseShadow img.mainLogo {
  width: 25%;
  margin-bottom: 30px;
}

h1 {
  text-shadow: 2px 2px 0 #31b0d5;
  font-size: 40px;
  text-transform: uppercase;
  text-align: center;
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

h1 span {
  display: block;
}

h1 span.subText {
  font-size: 16px;
}

/* section a */
#section-a {
  background: #00c5ff;
  color: #fff;
  padding: 2rem;
  /*-webkit-clip-path: polygon(0% 0%, 100% 8%, 100% 100%, 0% 93%);
  clip-path: polygon(0% 0%, 100% 8%, 100% 100%, 0% 93%);*/
  -webkit-clip-path: polygon(0 0,100% 3vw,100% 100%,0 calc(100% - 3vw));
  clip-path: polygon(0 0,100% 3vw,100% 100%,0 calc(100% - 3vw));
}

#section-a .headline {
  text-align: center;
  background-color: #fff;
  height: 1px;
  margin: 20px 0 70px;
}

#section-a .headline h2 {
  background-color: #00c5ff;
  text-transform: uppercase;
  display: inline-block;
  margin: -20px auto 0;
  padding: 0 20px;
  font-weight: 700;
}

#section-a img:hover {
  transform: rotate(2deg);
}

/* section b */
#section-b {
  background: #fff;
  padding: 4rem 1rem 4rem 1rem;
}

#section-b ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#section-b ul li {
  margin-bottom: 1rem;
  background: #fff;
  color: #333;
}

#section-b .fa {
  font-size: 55px;
  color: #00c5ff;
  padding: 20px 0 0 0;
}

.card-content {
  padding: 1.5rem;
}

/* section c */
#section-c {
  background: #fff;
  color: #333;
  padding: 4rem 2rem 8rem 2rem;
}

/* section d */
#section-d .box {
  padding: 2rem;
  color: #333;
}

#section-d .box:first-child {
  background: #e7e7e7;
}

#section-d .fa {
  font-size: 20px;
  margin-right: 10px;
}

/* section e */
#section-e {
  background: #fcad26;
  color: #fff;
  padding: 4rem 2rem 6rem 2rem;
  -webkit-clip-path: polygon(0% 8%,100% 0%,100% 100%,0 calc(100% - 0%));
  clip-path: polygon(0% 8%,100% 0%,100% 100%,0 calc(100% - 0%));
}

/* section f */
#section-f {
  text-align: center;
}

#section-f img {
  width: 100%;
}

.thumb-item {
  overflow: hidden;
  margin: 10px 15px;
  display: inline-block;
  position: relative;
}

.caption-title {
  color: #fff;
}

.caption-desc {
  color: #eee;
  font-style: italic;
  font-size: 14px;
}

.cbp-wrapper-outer, .cbp-wrapper, .cbp-wrapper-helper {
  list-style-type: none;
  padding: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.cbp-caption-overlayBottomAlong .cbp-caption:hover .cbp-caption-defaultWrap {
  -webkit-transform: translateY(-15px);
  transform: translateY(-15px);
}

.cbp-caption-overlayBottomAlong .cbp-caption-defaultWrap, .cbp-caption-overlayBottomAlong .cbp-caption-activeWrap {
  -webkit-transition: -webkit-transform .35s;
  transition: transform .35s;
}

.cbp-caption-overlayBottomAlong .cbp-caption:hover .cbp-caption-activeWrap {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

.cbp-caption-active .cbp-caption-activeWrap {
  width: 100%;
  position: absolute;
}

.cbp-l-caption-alignCenter {
  display: table;
  width: 100%;
  height: 100%;
}

.cbp-l-caption-alignCenter .cbp-l-caption-body {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.cbp-caption-activeWrap {
  background-color: #222;
  height: 60px;
}

/* footer */
#main-footer {
  padding: 2rem;
  background: #080808;
  color: #fff;
  text-align: center;
}

#main-footer a {
  color: #00c5ff;
  text-decoration: none;
}

/* media queries */
@media (min-width: 768px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr repeat(2, minmax(auto, 45rem)) 1fr;
  }
  
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  
  .brand img {
    width: 100%;
  }

  #section-a {
    padding: 5rem 2rem 8rem 2rem;
  }

  #section-a .content-wrap {
    padding: 0 7.5rem;
  }

  #section-a .content-text {
    columns: 2;
    column-gap: 2rem;
  }

  #section-a .content-text p {
    padding-top: 0;
    text-align: left;
  }

  .content-wrap,
  #section-b ul {
    grid-column: 2/4;
  }

  .box,
  #main-footer div {
    grid-column: span 2;
  }

  #section-b ul {
    display: flex;
    justify-content: space-around;
  }

  #section-b ul li {
    width: 31%;
  }

  #section-d .box:first-child {
    -webkit-clip-path: polygon(0% 0%,100% 11%,100% 100%,0 calc(100% - 0vw));
    clip-path: polygon(0% 0%,100% 11%,100% 100%,0 calc(100% - 0vw));
  }

  #section-e {
    -webkit-clip-path: polygon(2% 8%,100% 0%,98% 100%,0 calc(100% - 3vw));
    clip-path: polygon(2% 8%,100% 0%,98% 100%,0 calc(100% - 3vw));
  }
  
  #section-f.grid {
    display: grid;
    grid-template-columns: 1fr repeat(2, minmax(auto, 40rem)) 1fr;
    padding: 4rem 2rem 8rem 2rem;
  }
  
  h1 {
    text-shadow: 2px 2px 0 #31b0d5;
    font-size: 80px;
  }

  h1 span.subText {
    font-size: 30px;
  }
}

JS
   $(function() {
      // If a link has a dropdown, add sub menu toggle.
      $('nav ul li a:not(:only-child)').click(function(e) {
        $(this).siblings('.nav-dropdown').toggle();
        // Close one dropdown when selecting another
        $('.nav-dropdown').not($(this).siblings()).hide();
        e.stopPropagation();
      });
      // Clicking away from dropdown will remove the dropdown class
      $('html').click(function() {
        $('.nav-dropdown').hide();
      });
      // Toggle open and close nav styles on click
      $('#nav-toggle').click(function() {
        $('nav ul').slideToggle();
      });
      // Hamburger to X toggle
      $('#nav-toggle').on('click', function() {
        this.classList.toggle('active');
      });
    });

// mouse shadow
const mouseShadow = document.querySelector('.mouseShadow');
    const text = mouseShadow.querySelector('h1');

    function shadow(e) {
      const width = mouseShadow.offsetWidth;
      const height = mouseShadow.offsetHeight;
      const walk = 100; // 100px
      let { offsetX: x, offsetY: y } = e;

      if (this !== e.target) {
        x = x + e.target.offsetLeft;
        y = y + e.target.offsetTop;
      }

    const xWalk = Math.round((x / width * walk) - (walk / 2));
    const yWalk = Math.round((y / height * walk) - (walk / 2));

    text.style.textShadow = `
      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
      ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
      ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
      ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
    `;

  //  const { offsetWidth: width, offsetHeight: height } = hero; // es6 destructering
  }

  mouseShadow.addEventListener('mousemove', shadow);
Term
Wed, 12/27/2017 - 07:05

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv