01 Week: Natours Project, Setup and First Steps

Exercise files to publish on your server, HTML/CSS

Problem Set

Files to publish on your server:

Blog Questions

  • Describe how the files are organized for the Natours project and how they are linked together.
    Within the Natours the file we will have a folder for each version. Within each version folder, the corresponding files will be inside. This allows for you to easily create new versions of the files without having to change the links in each.
  • Describe two interesting new pieces of CSS or CSS techniques you learned in this first set of tutorials. Include a code sample with Enlightener
.header {
    height:95vh;
    background-image: linear-gradient(
        to right,
        #7ed56f2a,#28b485),url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
    position: relative;
    clip-path: polygon(0 0,100% 0, 100% 75vh, 0 100% );
   
}

I found the positioning of the header to be interesting because this would have been very helpful to have understood while I was creating my first final project. Also the gradient is a nice effect to make images left is distracting.

.btn:hover{
    transform: translateY(3px);
    box-shadow: 0 10px 20px rgba(0,0,0,.2) ;
}
.btn:active{
    transform: translateY(-1px);
    box-shadow: 0 5px 10x rgba(0,0,0,.2) ;
} 

I think overlaying mutiple buttons then animating each to get the desired effect is pretty smart.

Leave a comment

Your email address will not be published. Required fields are marked *

css.php