Започва интересното - HTML структура.

programming html and css

Ето, че вече мога да представя структурата на HTML и CSS файла, които ще са скелета на нашата бъдеща тема -  http://deep-theme-template.codemyart.com. На практика продължението от тук нататък ще представлява интегрирането на този скелет в системата WordPress, което ще представи принципите за интегрираето на който и да е HTML темплейт в тази система. Това означава, че може да вземете всеки един HTML теплейт, с каквито е пълно интернет пространството и да го интегрирате така, че да се възползвате от предимствата на възможностите за редакция на съдържанието, управлението на потребителите на Вашия сайт и т.н.

Ако смятате, че труда ми си задлужава не забравяйте да харесата моята фейсбук страница: @CodeMyArt

CodeMyArt logo

Аз лично предпочитам да правя нещата от нулата, защото обичам темплейтите да са максимално оптимизирани и смятам, че това е по-добрият начин за уебдизайн. Както ще видите темплейта, който съм предложил е с респонсив дизайн, въпреки, че съм спестил неколкостотин килобайта от зареждане на Bootstrap и всички необходими за работата му файлове. По отношение на самия темплейт мога да кажа, че максимално съм се стремял да отговаря на графичния темплейт от предходната статия, но  още в първите стъпки на неговата интеграция той ще бъде модифициран така, че да може да бъде разширяван и модифициран според желанията на потребителя. Това ще ни даде допълнителни възможности да променяме темата и да модифицираме външния й вид с помощта на административния интерфейс на WordPress. Но нека не се захласвам в обяснения за великото си творение. Ще помоля да бъдете снизходителни относно дизайна, не съм дизайнер и сигурно има още много какво да се промени в това отношение. Ще съм благодарен на всякакви критични бележки и ако са основателни ще ги коригирам в процеса на работа.

Тук ще представя съдържанието на HTML и SCSS файловете, но не забравяйте да посетите направения специално за целта поддомейн http://deep-theme-template.codemyart.com и да си кажете мнението в поста към статията на страницата ни във facebook

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8" />
	<title>Deep theme Themplate</title>  
  <link rel = "stylesheet" type = "text/css" href = "css/reset.css" />
  <link type="text/css" href="css/jquery.lavalamp.css" rel="stylesheet" media="screen" />
  <link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <header>
    <div class="logo">
      <a href="#"><img src="images/deep_theme_logo.png" alt="" /></a>
    </div>
    <nav>
      <ul class="menu lavaLamp">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="top-section">
    </section>
    <section id="services">
      <div class="service left-service">
        <div class="service-image">
          <img class="picture" src="images/manicure-870857_1280.jpg" alt="" />
        </div>
        <h2><a href="#">Nail Care</a></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
      <div class="service middle-service">
        <div class="service-image">
          <img class="picture" src="images/cosmetics-2130540_1280.jpg" alt="" />
        </div>
        <h2><a href="#">Skin Care</a></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
      <div class="service right-service">
        <div class="service-image">
          <img class="picture" src="images/fashion-3308387_1280.jpg" alt="" />
        </div>
        <h2><a href="#">Hair Care</a></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </section>
    <section id="paralax">
      <h2>Don't be shy,</h2>
      <h3>Contact Us!</h3>
    </section>
    <section id="slogan">
    
    </section>
  </main>
  <footer>
    <div class="top-footer">
      <div class="logo-footer">
        <img src="images/deep_theme_logo_white.png" alt=""/>
      </div>
    </div>
    <div class="middle-footer">
      <div class="middle-footer-left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel arcu est. Vestibulum vestibulum scelerisque iaculis. Donec ac gravida est, a finibus neque.</p>
      </div>
      <div class="middle-footer-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel arcu est. Vestibulum vestibulum scelerisque iaculis. Donec ac gravida est, a finibus neque.</p>
      </div>
      <div class="middle-footer-right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel arcu est. Vestibulum vestibulum scelerisque iaculis. Donec ac gravida est, a finibus neque.</p>
      </div>
    </div>
    <div class="bottom-footer">
      <div class="social-icons">
        <ul>
          <li><a href="#"><img src='images/facebook-icon.svg'/></a></li>
          <li><a href="#"><img src='images/tweeter-icon.svg'/></a></li>
          <li><a href="#"><img src='images/messenger-icon.svg'/></a></li>
          <li><a href="#"><img src='images/skype-icon.svg'/></a></li>
        </ul>
      </div>
    </div>    
  </footer>
	<div class="copyright">
    <span><a href="#">&copy; CodeMyArt</a></span>
  </div>
  
  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing.min.js"></script>
  <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script> 
  <script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>

SCSS:

@import url('https://fonts.googleapis.com/css?family=EB+Garamond:400,700');

$headings: 'EB Garamond', serif;

$blue: #000080;
$pink: #e70052;

body{
  margin:0;
  padding:0;
  font-family:$headings;
  font-size:20px;
  
}

header{
  width:100%;
  min-height:60px;
  border-bottom:20px solid #000080;
  display:flex;
  align-items:center;
  
  .logo{
    position:absolute;
    left:20px;
    
    img{
      display:block;
      height:40px;
      width:auto;
    }
  }
  
  nav{
    position:absolute;
    right:20px;
    
    ul{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-direction:row;
      
      li a{
        text-decoration:none;
        padding:0 5px;
        color:#888;
        font-size:20px;
        transition:all 0.5s;
        
        &:hover{
          color:#fff;
        }
      }
    }
  }   
}

section#top-section{
  height:100vh;
  
  background-image:url('../images/woman-804072_1280.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}

section#services{
  padding:100px 0;
  display:flex;
  flex-direction:row;
  justify-content:center;
  
  .service{
    width:30%;
    overflow:hidden;
    padding:0 30px;
    box-sizing:border-box;
    text-align:center;
    
    .service-image{
      width:100%;
      position:relative;
      padding-top:66.6%;
      overflow:hidden;
      
      img{
        display:block;
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
      }
    }
    
    h2{
      width:100%;
      font-family: $headings;
      
      a{
        display:block;
        width:100%;
        line-height:35px;
        text-transform:uppercase;
        background-color: $pink;
        text-decoration:none;
        color:#fff;
        transition:all 0.5s;
        
        &:hover{
          background-color: #000;
        }
      }
    }
  }
}

section#paralax{
  min-height:400px;
  background-image:url('../images/people-2605526_1280.jpg');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  
  h2, h3{
    font-family: $headings;
    color:#fff;
    text-transform:uppercase;
    font-size:4rem;
    letter-spacing: 1.1rem;
    margin:1.1rem;
    text-align:center;
  }
}

footer{
  background-color: $blue;
  color:#fff;
  
  .top-footer{
    padding:60px 0;
    
    img{
      display:block;
      height:60px;
      width:auto;
      margin: 0 auto;
    }
  }
  
  .middle-footer{
    display:flex;
    flex-direction:row;
    justify-content:center;
    
    >div{
      width:30%;
      padding:0 30px;
      box-sizing:border-box;
      
      p{
        line-height:30px;
      }
    }
  }
  
  .social-icons{  
    padding:50px 0;
    
    ul{
      display:flex;
      flex-direction:row;
      justify-content:center;
      margin:0;
      padding:0;
      list-style:none;
      
      li{
        margin:10px;
        
        img{
          display:block;
          
          width:40px;
          height:auto;
        }
      }
    }
  }
}

.copyright{
  text-align:center;
  
  span{
    line-height:30px;
    font-weight:bold;
    
    a{
      text-decoration:none;
      color:#000;
      transition:all 0.5s;
      
      &:hover{
        color:$pink;
      }
    }
  }
}

.lavalamp{
  width:initial;
}

.lavalamp-object{
  background-color:#ff0066;
}

@media all and(max-width:720px){
  section#services{
    flex-direction:column;
    
    .service{
      width:100%;
    }
  }
  
  footer{
    .middle-footer{
      flex-direction:column;
      
      >div{
        width:100%;
      }
    }
    
    .top-footer{
      img{
        height:30px;
      }
    }
  }
  
  section#paralax{    
    background-attachment:scroll;
    
    h2, h3{      
      font-size:2.5rem;
    }
  }
  
  header{
    flex-direction:column;
    
    .logo{
      position:relative;
      padding-top:30px;
      left:0;
      img{
        height:35px;
        width:auto;
        margin:0 auto;
      }
    }
    
    nav{
      position:relative;
      
      ul{
        list-style:none;
        margin:0;
        padding:0;
        display:flex;
        flex-direction:column;
        
        li a{
          text-decoration:none;
          padding:0 5px;
          color:#888;
          font-size:20px;
          transition:all 0.5s;
          
          &:hover{
            color:#fff;
          }
        }
      }
    }   
  }   

  .lavalamp{
    height:initial;
  }
}

JavaScript:

$(document).ready(function(){
  
  $('.lavaLamp').lavalamp({
      fx: "backout",
      speed: 700,
      easing: 'easeOutBack',
      click: function(event, menuItem) {
          return true;
      }
  });
  
})