![\"Navbar](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P01-Navigation/images/nav-no.png\" "\\"navbar")
\n Become a master of the world by creating a landing page for\nthe worlds best shoe store, your shoe store.
"},{"id":"T0E6OlNlY3Rpb24tNDU2NQ==","title":"Making A plan","htmlContent":"All websites need a home page, and shoe selling is no exception. We are going to create a homepage from scratch, while practicing modern design tools, and best practices, all without aid of any libraries or frameworks.
To start we will plan out the different sections and features we would like to have on our website.
Because this is going to be mostly just a static webpage, we will have only few user stories. Let define them:
With all this in mind we are ready to start!
"},{"id":"T0E6OlNlY3Rpb24tNDU2Ng==","title":"Getting started","htmlContent":"The first thing that we need to do is create a directory for our files.
From your Terminal, navigate to where you'd like to create a new folder and execute the following command:
mkdir we-sell-shoes
Navigate into the directory you just created with the command:
cd we-sell-shoes"},{"id":"T0E6OlNlY3Rpb24tNDU2Nw==","title":"Create your first file","htmlContent":"
Next, you'll need to create a new file called index.html. This is where the page will live.
You can do this by executing the following commands in your terminal:\n\ntouch index.html\n
Now all that's left to do is open index.html inside your favorite text editor. If you use Atom, you can use the following command from your terminal:
atom .
Now that we've created our files, we're ready to put our shoes on the production line.
"},{"id":"T0E6OlNlY3Rpb24tNDU2OA==","title":"HTML Template","htmlContent":"The first thing we're going to do is add in a basic HTML Template.
Inside of index.html, please write the following:
<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\">\n <title>We Sell Shoes</title>\n </head>\n <body>\n\n </body>\n</html>
Once we have our basic HTML5 boilerplate we're ready to create a few more files that will help us out.
"},{"id":"T0E6OlNlY3Rpb24tNDU2OQ==","title":"Adding An External Stylesheet and Javascript File","htmlContent":"In order to avoid messy code, we'll use two extra files to organize our CSS and Javascript.
Inside of the terminal we will create two new files with the following line of code:
touch index.js && touch styles.css
Adding && after any command in the terminal lets you run as many commands as you want in order.
Now that we've got our separate files, we will need to import them into our HTML.
"},{"id":"T0E6OlNlY3Rpb24tNDU3MA==","title":"Importing Our Files!","htmlContent":"Inside of index.html, let's add the following lines of code:
<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\">\n <title>We Sell Shoes</title>\n\n <!-- Link in our stylesheet -->\n <link rel=\"stylesheet\" href=\"./styles.css\">\n <!-- Make sure this is inside of our <head> -->\n\n </head>\n <body>\n\n <!-- Link in our Javascript file -->\n <script src=\"index.js\"></script>\n <!-- Make sure this is below our closing <body> -->\n\n </body>\n</html>
You'll notice that we organize our Stylesheets in our head, and our javascript files right before our closing body tag.
We put our stylesheets in the head because we want the browser to load our styles before it loads the rest of the page. Likewise we put our Javascript at the closing body tag because we want the browser to load our scripts after everything else loads.
"},{"id":"T0E6OlNlY3Rpb24tNDU3MQ==","title":"Onward","htmlContent":"We now have a basic template ready to be used.
And just like that we're all set and ready for some shoe customers!
"}]},"next":{"id":"T0E6OlBhZ2UtMTIyNQ==","slug":"creating-the-navbar","title":"Creating The Navigation"},"previous":{"id":"T0E6OlBhZ2UtMTIyNQ==","slug":"creating-the-navbar","title":"Creating The Navigation"}},{"id":"T0E6OlBhZ2UtMTIyNQ==","title":"Creating The Navigation","slug":"creating-the-navbar","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNDU3Mg==","title":"Creating The Navigation","htmlContent":"One of the most important parts of a website is their navigation menu. Typically, these are navigation bars at the top of a webpage, but some websites put their navigation on the side.
For this project we will put our navigation on the top of the page.
"},{"id":"T0E6OlNlY3Rpb24tNDU3Mw==","title":"Navbar Mark-up","htmlContent":"To begin, let's add the following HTML inside of our <body>:
<body>\n\n <div class=\"nav-bar\">\n <nav>\n <div class=\"nav-links\">\n <a class=\"nav-btn logo\" href=\"#home\"><img height=\"50px\" src=\"https://www.shareicon.net/download/2016/07/31/804695_running_512x512.png\"></a>\n <a class=\"nav-btn right\" href=\"#cart\"><img height=\"40px\" src='http://findicons.com/files/icons/1700/2d/512/cart.png'></a>\n </div>\n </nav>\n </div>\n\n <script src=\"index.js\"></script>\n</body>
The first thing we did was wrap our elements inside of a parent div called nav-bar. Inside of this div we added in our <nav> tag. Next we added another parent div to store our links into.
We decided to use a logo for the Home button, and we also added in a shopping cart.
Right now our page looks like this:
In order to get it to look like a navbar, we will need to give it some CSS. We will do bit by bit inside of our styles.css file.
"},{"id":"T0E6OlNlY3Rpb24tNDU3NA==","title":"Styleing the Navbar","htmlContent":"At the top of our page in styles.css lets add a comment that tells us what section we're in, and a few styles:
/***********\nNAVBAR\n***********/\n\n.nav-bar {\n z-index: 10;\n width: 100%;\n box-shadow: 0px 0px 1px rgba(0,0,0,.3);\n}
We give our parent navbar class a higher z-index and a width of 100% so it goes across the page.
The next thing we'll use CSS3 Flexbox to make our nav-links display horizontally.
Flexbox allows us to layout elements easily. In order to use it, we need to give our parent <div> a display: flex; property. We then specify that it should be a row, and that we want to justify our content to the beginning.
We will use a bunch of different flexbox styles throughout this tutorial.
.navbar {\n z-index: 10;\n width: 100%;\n}\n\n.nav-links {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n height: 50px;\n width: 100%;\n background: white;\n}
That should get our elements to display horizontally. Let's add a few more styles to remove the text-decoration and list-style-type (those bullet points), and then on hover, let's add a little animation using the CSS attribute transform.
.nav-btn {\n text-decoration: none;\n list-style-type: none;\n color: black;\n margin-left: 2rem;\n transition: all 200ms;\n}\n\n.nav-btn:hover {\n transform: scale(1.1);\n}
The transition property was given the attribute: all 200ms. A CSS transition defines the unit of time it takes to transition a change in property values. The all keyword let's us attach a transition to everything.
Let's continue:
.nav-btn.logo {\n transition: all 300ms;\n}\n\n.nav-btn.logo:hover {\n transform: scale(1.1) rotate(5deg) translateX(10px);\n}\n\n.nav-btn.right {\n margin-left: 85%;\n transition: all 300ms;\n}\n\n.nav-btn.right:hover {\n transform: scale(1.1) rotate(3deg);\n}
Your page should now look something like this:
You'll notice that it isn't quite flush with the borders of the browser yet. This is because the <body> tag actually adds a little bit of margin. We can get rid of that with the following styles:
body {\n margin: 0;\n}\n\n/***********\nNAVBAR\n***********/
There we go, that fixed it.
If you hover over one of the images, you'll notice that some interesting things happen to them. This is because we applied some element state rules in our CSS.
/*you should already have this code, no need to write it again*/\n\n.nav-btn.logo:hover {\n transform: scale(1.1) rotate(5deg) translateX(10px);\n}
After any selector, if you add :hover, you'll be able to change the way it looks when hovered. Feel free to mess with these styles as you wish. You aren't limited to the transform property.
See this for more information on CSS psuedo classes.
We will revisit the navbar in the future.
"},{"id":"T0E6OlNlY3Rpb24tNDU3NQ==","title":"Going forward","htmlContent":"Now that we've finished our navbar, it's time to add in our Hero Section!
"}]},"next":{"id":"T0E6OlBhZ2UtMTIyNg==","slug":"creating-the-hero","title":"Creating the Hero!"},"previous":{"id":"T0E6OlBhZ2UtMTIyNg==","slug":"creating-the-hero","title":"Creating the Hero!"}},{"id":"T0E6OlBhZ2UtMTIyNg==","title":"Creating the Hero!","slug":"creating-the-hero","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNTQxMg==","title":"Creating the Hero!","htmlContent":"Here comes one of the coolest parts of the landing page. We will build it step by step so you can get a good idea of how to replicate this in future projects. We're going to build a \"Hero\" section at the top of our website. The \"Hero\" is an image and text that makes the product or user of a product the hero of the page.
"},{"id":"T0E6OlNlY3Rpb24tNTQxMw==","title":"Let's create the Hero!","htmlContent":"The first thing we will do is create the full-sized div with a nice background image.
<div class=\"nav-bar\">\n ...\n</div>\n\n<div class=\"hero\">\n\n\n</div>
Next we will style our Hero div a bit.
/* stlyes.css */\n...\n\n/*******************\nHERO\n*******************/\n\n.hero {\n height: calc(99vh - 50px);\n width: 100%;\n background: linear-gradient(rgba(44, 62, 80,.6), rgba(44, 62, 80,.6)), url('https://image.ibb.co/nyaXSK/IMG_5247.jpg');\n background-position: center;\n background-size: cover;\n background-repeat: no-repeat;\n}
The height property is using a speciall CSS3 reserved word: calc. Calc allows you to do a Calculation inside your CSS. It's... awesome. In this case we are taking a value of 99vh - 50px. This means, we want the styled element to take up 99% of the view height (99vh), minus 50 pixels (- 50px). We do this because we want to show a little bit of the next part so that people will know they should scroll downward.
We also make use of linear-gradients to darken the photo a bit. This is so when we add text it will stand out a little better.
You are more than welcome to change the background image as well.
"},{"id":"T0E6OlNlY3Rpb24tNTQxNA==","title":"Adding some text","htmlContent":"We're going to add in a big bold heading that tells the user exactly what our website is about. Lets add this markup!
<div class=\"hero-overlay-text\">\n <h1>We Sell Shoes!</h1>\n <a class=\"btn-cta\" href=\"#\">Shop Now</a>\n</div>
Here we have a parent Div, a heading, and a call to action button.
We can now add the following styles:
.hero {\n /*you already have these*/\n}\n\n.hero-overlay-text {\n z-index: 5;\n height: calc(100vh - 50px);\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: white;\n font-family: 'Roboto', sans-serif;\n}\n\n.hero-overlay-text h1 {\n margin-top: 0rem;\n font-size: 10rem;\n font-family: 'Roboto', sans-serif;\n font-weight: 300;\n}
Before we do anything else, take a look at some of the font-family properties we use.
In order to use the roboto font, we need to import it from google fonts.
We can import google fonts by placing another link tag in our head above our styles link.
<head>\n\n...\n\n<!--add this above the stylesheet link-->\n<link href=\"https://fonts.googleapis.com/css?family=Oswald:200,300,400|Roboto:100,200,300,400\" rel=\"stylesheet\">\n\n<!--you already have this one -->\n<link rel=\"stylesheet\" href=\"styles.css\">\n</head>
Now we are able to use the roboto font.
Now we should define a pretty call to action button.
\nA Call To Action is what you'd like the user to do on your site. In the case of this landing page is we want them to buy shoes, and to buy them, they need to shop for them. So our call to action button will say \"Shop Now\".
\n\nClass Naming Conventions - We want variable names to say what the variable is and be short. We name our class btn-cta because \"btn\" is an abbreviation for \"button\" and \"cta\" is the standard industry abbreviation for \"Call To Action\".
\n.btn-cta {\n background-color: rgba(253, 253, 253, 1);\n color: #616161;\n border-radius: 40px;\n border: 1px solid #C1C1C1;\n padding: 10px 0;\n text-decoration: none;\n width: 15rem;\n text-align: center;\n transition: all 200ms;\n box-shadow: 0 2px 0px rgba(0,0,0,.3);\n}\n\n.btn-cta:hover {\n /*transform: scale(1.02);*/\n box-shadow: 0 2px 1px rgba(0,0,0,.3);\n}
Your page should now look something like this:
"},{"id":"T0E6OlNlY3Rpb24tNTQxNg==","title":"Onward","htmlContent":"We've now got a pretty nice looking hero section. In the next section we will add a section to show off our clients.
"}]},"next":{"id":"T0E6OlBhZ2UtMTIyNw==","slug":"showcasing-our-clients","title":"Client Showcase"},"previous":{"id":"T0E6OlBhZ2UtMTIyNw==","slug":"showcasing-our-clients","title":"Client Showcase"}},{"id":"T0E6OlBhZ2UtMTIyNw==","title":"Client Showcase","slug":"showcasing-our-clients","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNDU4MA==","title":"Client Showcase","htmlContent":"Many website, especially ones for startups like to showcase different clients that use their products/software.
We are going to do the same on our landing page.
"},{"id":"T0E6OlNlY3Rpb24tNDU4MQ==","title":"Client markup","htmlContent":"Let's start again by adding in some markup of the images of our clients. I just grabbed some stock images from the internet as placeholders.
</div><!--closing hero div-->\n\n<div class=\"clients\">\n <p class=\"clients-header\">Our Happy Clients</p>\n <div class=\"client-images\">\n <img height=\"100px\" src=\"http://www.stickpng.com/assets/images/58419ce2a6515b1e0ad75a69.png\" />\n <img height=\"100px\" src=\"https://cdn.bleacherreport.net/images/team_logos/328x328/yeezy.png\" />\n <img height=\"100px\" src=\"https://digitalimpact.org/wp-content/uploads/2013/05/US-WhiteHouse-Logo-square-72078_490x480.png\" />\n <img height=\"100px\" src=\"https://i.pinimg.com/originals/1e/aa/93/1eaa93626c2579bd6175526256af9cd8.png\" />\n <img height=\"100px\" src=\"http://www.stickpng.com/assets/images/580b585b2edbce24c47b2b21.png\" />\n </div>\n</div>
Feel welcome to change the images as needed!
We've created a parent div with the clients class, we have some text to show what this section is for, and we have a child div that contains some images of corporate logos.
Refresh to see what this looks like with just raw HTML, and then we can add some styles.
"},{"id":"T0E6OlNlY3Rpb24tNDU4Mg==","title":"Adding Styles","htmlContent":"At the bottom of our stylesheet lets add in the following:
/*******************\nclients\n*******************/\n\n.clients {\n height: 10rem;\n width: 100%;\n background: #ecf0f1;\n}
We'll get a section that looks a bit like this, but we're not yet done with adding styles that will space everything out.
So let's add some more styles in order to get our images inline:
...\n\n.client-images {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n width: 100%;\n height: 100%;\n}
This will lay our images out rather nicely. The next thing we can do is fix the heading:
...\n\n.clients-header {\n margin: 0;\n padding-top: 1rem;\n text-align: center;\n font-size: 1.4rem;\n font-family: roboto;\n font-weight: 400;\n}
Setting the margin to 0 gets rid of the extra white space above. Feel free to play with the font size if you want.
We give it a font-weight of 400 to bold the font slightly.
In order to make our images a little more lively, we can add some transitions and hover effects.
.client-images img {\n transition: all 200ms;\n}\n\n.client-images img:hover {\n transform: scale(1.2);\n}
This gives us a nice scale effect on hover. Feel free to adjust this as you wish.
"},{"id":"T0E6OlNlY3Rpb24tNDU4NA==","title":"onward","htmlContent":"Our landing page is really starting to come together. In the next section we will add a newsletter subscription panel.
"}]},"next":{"id":"T0E6OlBhZ2UtMTIyOA==","slug":"building-the-subscribe-form","title":"Subscribe Form 1"},"previous":{"id":"T0E6OlBhZ2UtMTIyOA==","slug":"building-the-subscribe-form","title":"Subscribe Form 1"}},{"id":"T0E6OlBhZ2UtMTIyOA==","title":"Subscribe Form 1","slug":"building-the-subscribe-form","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNDU4NQ==","title":"Subscribe Form 1","htmlContent":"One of the most important aspects of modern landing pages is directing users to sign up for newsletters.
We are going to create an input field with a subscribe button, and wrap it over a nice parallax effect background.
"},{"id":"T0E6OlNlY3Rpb24tNDU4Ng==","title":"Adding in the Markup","htmlContent":"Let's start again by adding in some HTML:
</div><!--end of clients section-->\n\n<div class=\"subscribe\">\n <h1>Get unique designs in your inbox</h1>\n <h3>Receive our monthly newsletter with special offers</h3>\n <div class=\"sub-fields\">\n <form>\n <input type=\"email\" class=\"form-control\" placeholder=\"Your e-mail\"><button class=\"btn-subscribe\">Subscribe</button>\n </form>\n </div>\n</div>
As always, feel free to change some of the text as you wish.
We want our subscribe div to take up a sufficient amount of space, and add a background image to it. Our sub-fields will have some styles that will get our input and button tags aligned in a row.
With our new style plan, we can begin to add some CSS.
"},{"id":"T0E6OlNlY3Rpb24tNDU4Nw==","title":"Adding Styles and a Background Image","htmlContent":"At the bottom of our stylesheet lets add these lines of CSS:
/******************\n subscribe\n ******************/\n\n .subscribe {\n height: 50vh;\n width: 100%;\n background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('https://images.pexels.com/photos/637076/pexels-photo-637076.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: white;\n }
Take note of background-attachment: fixed;. This is what adds the parallax effect onto our image.
The next bit we can add is add the headings:
.subscribe h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n font-family: roboto;\n font-weight: 300;\n }\n\n .subscribe h3 {\n margin: 0;\n font-size: 1.5rem;\n margin-bottom: 1rem;\n font-family: roboto;\n font-weight: 200;\n }
We give the larger header a higher font-weight so that we can tell it's a title, and that the h3 is a subtitle.
Now we can add some styles for the input and buttons:
First we'll take a page from Bootstrap and make a Utility Class that we can add to any form input to style it called form-control.
.form-control {\n border-radius: 4px;\n border: solid 1px gray;\n font-size: 2rem;\n padding: .3rem;\n padding-left: 1rem;\n transition: all 200ms;\n}
Now we have to make the button look good:
.btn-subscribe {\n margin-left: 1rem;\n font-size: 2rem;\n padding-top: .3rem;\n padding-bottom: .3rem;\n padding-left: 2rem;\n padding-right: 2rem;\n border: none;\n border-radius: 4px;\n color: white;\n background: #e74c3c;\n transition: all 200ms;\n cursor: pointer;\n}
We added a transition effect to both of these so that we can style some animations on hover. Lets do that now:
.form-control:hover {\n transform: scale(1.05);\n}\n\n.btn-subscribe:hover {\n transform: scale(1.05);\n}
As always, feel free to experiment with these hover effects to insure a pleasent experience for the end user.
We should now have a page that looks like this:
"},{"id":"T0E6OlNlY3Rpb24tNDU4OA==","title":"Onward","htmlContent":"The next step is creating the gallery. This is one of the most important parts of any shop. Without a gallery our users won't be able to view our products.
We will also introduce CSS Grid in this section so stay tuned.
"}]},"next":{"id":"T0E6OlBhZ2UtMTIyOQ==","slug":"building-the-subscribe-form-PiA=","title":"Building the Gallery"},"previous":{"id":"T0E6OlBhZ2UtMTIyOQ==","slug":"building-the-subscribe-form-PiA=","title":"Building the Gallery"}},{"id":"T0E6OlBhZ2UtMTIyOQ==","title":"Building the Gallery","slug":"building-the-subscribe-form-PiA=","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNDU4OQ==","title":"Building the Gallery","htmlContent":"The gallery is one of the coolest things about this tutorial. We'll take it slow together so you can replicate this with ease in the future.
"},{"id":"T0E6OlNlY3Rpb24tNDU5MA==","title":"Mark it up","htmlContent":"Let's start off with some very basic mark up shall we?
</div><!--end of subscribe div-->\n\n<div class=\"gallery-sec\">\n <div class=\"gallery\">\n <h1 class=\"g-header\">Browse Our Shop</h1>\n\n <div class=\"panel a\"><div>Booties</div></div>\n <div class=\"panel b\"><div>Streeties</div></div>\n <div class=\"panel tall-panel c\"><div>Joggies</div></div>\n <div class=\"panel d\"><div>Floppies</div></div>\n <div class=\"panel e\"><div>Dressies</div></div>\n <div class=\"panel f\"><div>Rollies</div></div>\n <div class=\"panel tall-panel g\"><div>Sneakies</div></div>\n <div class=\"panel tall-panel h\"><div>Edgies</div></div>\n <div class=\"panel i\"><div>Campies</div></div>\n <div class=\"panel j\"><div>Cheeties</div></div>\n </div>\n</div>
The gallery-sec div will hold our gallery.
The gallery itself will be inside of the gallery div.
Each item inside of the gallery div will have the panel class, a few will hold the tall-panel class, and the each will lettered from a to j, so that we can give each one a unique background.
We can now add some CSS to create our gallery.
"},{"id":"T0E6OlNlY3Rpb24tNDU5MQ==","title":"Adding some styles","htmlContent":"Inside of our stylesheet, at the bottom, lets add these:
/*******************\ngallery\n*******************/\n\n\n.gallery-sec {\n /*padding: .3rem;*/\n margin-right: .3rem;\n height: 130vh;\n background: #ecf0f1;\n height: 130vh;\n width: 100%;\n padding: 3px;\n padding-top: 10px;\n padding-bottom: 10px;\n}\n\n.gallery {\n height: 100%;\n width: 90%;\n /*overflow-x: hidden;*/\n display: grid;\n grid-gap: 10px;\n perspective: 800px;\n}
The same way we setup flexbox by using display: flex, we set up grid by doing: display: grid.
The grid-gap property defines the space in between each grid item.
Perspective is used to create a 3D space. You'll see why in a bit. For now let's keep going:
.gallery {\n display: flex;\n flex-wrap: wrap;\n}\n\n.gallery {\n display: grid;\n margin: 0 auto;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n grid-auto-rows: minmax(150px, auto);\n}
The reason why we have a few different instances of the gallery class is so we can target different things with it.
Currently CSS Grid isn't supported by all browsers, so we can default it to flexbox when grid isn't supported.
So we've given it a display: grid, with a grid-gap: 10px. This is so theres a little bit of space between each grid item. The perspective we've added to the grid is going to help with some 3d transformations on the grid items for a cool interactive effect.
We then set the number of grid-template-columns to repeat(auto-fill, minmax(200px. 1fr)) which makes the columns repeat as many times as there is space, and gives each item the ability to be as tall as we want. We do this same thing for rows, by setting it to auto-rows which creates as many rows as needed.
If you want to become a master of CSS grid, I reccomend: http://cssgridgarden.com/
Move onward with our styles, we will add the following CSS below what we previously added:
.panel {\n /* needed for the flex layout*/\n margin-left: 5px;\n margin-right: 5px;\n flex: 1 1 200px;\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n box-shadow: 1px 2px 6px rgba(0,0,0,.3);\n transition: all 300ms;\n transform-style: preserve-3d;\n background-size: cover;\n background-position: center;\n}\n\n\n.tall-panel {\n grid-row-end: span 2;\n}\n\n.g-header\n {\n margin-left: 5px;\n margin-right: 5px;\n flex: 0 1 100%;\n grid-column: 1 / -1;\n}\n\n.gallery > * {\n background-color: #fff;\n color: #000;\n border-radius: 5px;\n padding: 20px;\n font-size: 150%;\n margin-bottom: 10px;\n}\n\n.g-header {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 3rem;\n background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('https://images.pexels.com/photos/267320/pexels-photo-267320.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-size: cover;\n background-position: center;\n color: white;\n}\n\n.a {\n background: url('https://images.pexels.com/photos/266840/pexels-photo-266840.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-size: cover;\n}\n\n.b {\n background: url('https://images.pexels.com/photos/812875/pexels-photo-812875.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-size: cover;\n}\n\n.c {\n background: url('https://images.pexels.com/photos/421160/pexels-photo-421160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-position: -70px;\n}\n\n.d {\n background: url('https://images.pexels.com/photos/112285/pexels-photo-112285.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-size: cover;\n}\n\n.e {\n background: url('https://images.pexels.com/photos/293405/pexels-photo-293405.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-size: cover; \n}\n\n.f {\n background: url('https://images.pexels.com/photos/1994/red-vintage-shoes-sport.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-repeat: no-repeat;\n background-size: cover; \n background-position: -40px;\n}\n\n\n.g {\n background: url('https://images.pexels.com/photos/373964/pexels-photo-373964.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-position: -100px;\n background-size: cover;\n}\n\n.h {\n background: url('https://images.pexels.com/photos/247203/pexels-photo-247203.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-size: cover; \n}\n\n.i {\n background: url('https://images.pexels.com/photos/40383/shoes-rock-climbing-hiking-walking-40383.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-size: cover; \n}\n\n.j {\n background: url('https://images.pexels.com/photos/116150/pexels-photo-116150.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-position: 0px -60px;\n}\n\n.panel div {\n background: rgba(0,0,0,.3);\n padding: 5px;\n color: white;\n}\n\n/* We need to set the margin used on flex items to 0 as we have gaps in grid. */\n\n@supports (display: grid) {\n .gallery > * {\n margin: 0;\n }\n}
Wow! That was a lot. So let's explain a little bit of what we did. We gave each item it's own background, and we gave a few the tall-panel class in addition.
We set each item to be the same width and height so that everything lines up well. The tall-panel class has a bit more height than the others which gives a diverse effect.
We gave our .panel class a transform-style: preserve-3d so that we can do some fun 3d transforms on hover. Let's go ahead and do that now!
you already have this .panel class.\n.panel {\n /* needed for the flex layout*/\n margin-left: 5px;\n margin-right: 5px;\n flex: 1 1 200px;\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n box-shadow: 1px 2px 6px rgba(0,0,0,.3);\n transition: all 300ms;\n transform-style: preserve-3d;\n}\n\nadd these lines below\n.panel:hover {\n transform: scale(1.01) translateY(-5px) rotateX(10deg) rotateY(2deg) skewY(4deg);\n box-shadow: 1px 4px 9px rgba(0,0,0,.5);\n z-index: 3;\n}
I encourage you to mess around with these properties and watch what happens. You can create some really interesting effects. It's worth tweaking things like scale, and rotateX/rotateY to see what you can do.
We should now have something that looks a little like this:
"},{"id":"T0E6OlNlY3Rpb24tNDU5Mg==","title":"Onward","htmlContent":"In the next session, we will add another subscribe panel with parallax. This should be pretty easy because we already have most of the CSS we will need for it.
"}]},"next":{"id":"T0E6OlBhZ2UtMTIzMA==","slug":"subscribe-form-2","title":"Subscribe Form 2"},"previous":{"id":"T0E6OlBhZ2UtMTIzMA==","slug":"subscribe-form-2","title":"Subscribe Form 2"}},{"id":"T0E6OlBhZ2UtMTIzMA==","title":"Subscribe Form 2","slug":"subscribe-form-2","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNDU5Mw==","title":"Subscribe Form 2","htmlContent":"On landing pages it's important to repeat things several times, especially actions you want your users to take. This is why we will repeat the subscribe form a few more times throughout this process.
"},{"id":"T0E6OlNlY3Rpb24tNDU5NA==","title":"Mark it up","htmlContent":"Underneath our gallery, lets add the following:
<div class=\"subscribe subscribe-2\">\n <h1>\"Nobody has better shoes than them!\"</h1>\n <h3>- Turd Ferguson, Shoe Fanatic</h3>\n <div class=\"sub-fields\">\n <form>\n <input type=\"email\" class=\"form-control\" placeholder=\"Your e-mail\"><button class=\"btn-email\">Subscribe</button>\n </form>\n </div>\n</div>
Awesome! You'll notice that this looks exactly like our other subscribe form. The only thing that changed is that we appended a -2 to the subscribe class. This is so we can use a different background. Let's go ahead and do that now.
"},{"id":"T0E6OlNlY3Rpb24tNDU5NQ==","title":"Style it up","htmlContent":"Underneath our old styles, let's add this:
/****************\nsubscribe 2\n****************/\n\n.subscribe-2 {\n height: 50vh;\n width: 100%;\n background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('https://images.pexels.com/photos/450059/pexels-photo-450059.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: white;\n}
Believe it or not, that's all we have to do.
This is the power of CSS! We can reuse old classes whenever we want.
let's take another look at what we've created.
"},{"id":"T0E6OlNlY3Rpb24tNDU5Ng==","title":"Onward","htmlContent":"Next thing up is some testimonials. This is going to be another interesting section.
"}]},"next":{"id":"T0E6OlBhZ2UtMTIzMQ==","slug":"subscribe-form-2-7mg=","title":"Testimonials Part 1"},"previous":{"id":"T0E6OlBhZ2UtMTIzMQ==","slug":"subscribe-form-2-7mg=","title":"Testimonials Part 1"}},{"id":"T0E6OlBhZ2UtMTIzMQ==","title":"Testimonials Part 1","slug":"subscribe-form-2-7mg=","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNDU5Nw==","title":"Testimonials Part 1","htmlContent":"Testimonials are super important! In the digital age, nobody wants to purchase something unless the reviews are good.
We can establish some slight rapport with our customers by adding in some testimonials.
"},{"id":"T0E6OlNlY3Rpb24tNDU5OA==","title":"Marking it up!","htmlContent":"Let's do some mark-up shall we?
<div class=\"testimonials\">\n <h1 class=\"testimonial-title\">Testimonials</h1>\n <div class=\"tests first\">\n <div class=\"testimonial testimonial-1\">\n <img src=\"http://infasme.com/wp-content/uploads/2017/05/Faces-400x400px-1_1_07-scalia-testimonial.jpg\" class=\"testimonial-image\" />\n <div class=\"testimonial-quote\">This product was amazing.<p> - John Setzen</p></div>\n </div>\n\n <div class=\"testimonial testimonial-2\">\n <img src=\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjvtBy5YBKiYcLTPgiQXdPNUK0c4cma-EoXPPuay1ba4-7kJLj\" class=\"testimonial-image\" />\n <div class=\"testimonial-quote\">This product was great. <p>- John Setzen's Twin Brother</p></div>\n </div>\n\n <div class=\"testimonial testimonial-3\">\n <img src=\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbJAJEmKnMZWlu3aXB-5J9kqlppVCOH-xlFYQKuNWQY1BwpMsD\" class=\"testimonial-image\" />\n <div class=\"testimonial-quote\">This product was pretty good. <p>- Professional John Setzen Look Alike</p></div>\n </div>\n </div>\n\n <div class=\"dots\">\n <div id=\"prev\" class=\"dot\"></div> <div id=\"next\" class=\"dot\"></div> <div id=\"next-next\" class=\"dot\"></div>\n </div>\n\n</div>
We have a lot of markup for these testimonials because we want them to be interactive. The dots class you see will be used to navigate through our testimonials.
Let's get some styles going now.
"},{"id":"T0E6OlNlY3Rpb24tNDU5OQ==","title":"Making our testimonials stylish","htmlContent":"This is going to be a little in depth, so bare with me.
/**********\ntestimonials\n**********/\n\n.testimonials {\n margin-top: -2rem;\n height: 80vh;\n width: 100%;\n background: #ecf0f1;\n}\n\n.testimonial-title {\n padding-top: 1rem;\n text-align: center;\n}\n\n.tests {\n position: absolute;\n width: 300%;\n display: flex;\n transition: all 400ms;\n}\n\n.tests.first {\n right: -200%;\n}\n\n.tests.second {\n right: -100%;\n}\n\n.tests.third {\n right: 0%;\n}\n\n\n.testimonial {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.test1 {\n position: absolute;\n left: 0;\n}\n\n.test2 {\n position: absolute;\n left: 33%;\n}\n\n.test3 {\n position: absolute;\n left: 66%;\n}\n\n\n.testimonial-image {\n border: solid 8px white;\n border-radius: 50%;\n height: 272px;\n width: 272px;\n}\n\n.testimonial-quote {\n margin-top: 1rem;\n border: solid 15px white;\n border-radius: 2px;\n background: white;\n}\n\n.testimonial-quote p {\n text-align: center;\n margin-bottom: 0;\n}\n\n.dots {\n align-self: baseline;\n margin-top: 28rem;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 100%;\n}\n\n.dot {\n border: solid 1px black;\n border-radius: 100%;\n height: 8px; width: 8px;\n margin-right: 1rem;\n transition: all 200ms;\n}\n\n.dot:hover {\n background: black;\n}
What's going on here?
We gave our .tests class a width of 300% and our indivdual testimonials a width of 100%. This is because we want each one to take up 100% of the page.
Since we don't want them all to appear at once, we give them a position: absolute, and set their styles so they appear off the page.
Theres a problem though...
Oh No! We can drift off the side of the page. Let's quickly fix that!
this is the top of your CSS File\nbody {\n margin: 0;\n /*add this line below*/\n overflow-x: hidden;\n}
That should do it!
But now a new problem presents itself, now that we can't scroll to them, there's no way to see them.
This is where javascript comes into play.
We will add our interactive javascript in part two.
"},{"id":"T0E6OlNlY3Rpb24tNDYwMA==","title":"Onward","htmlContent":"In the next section we will add functional javascript to make our testimonials work.
"}]},"next":{"id":"T0E6OlBhZ2UtMTIzMg==","slug":"P08-Testimonials-Part-2","title":"Testimonials Part 2"},"previous":{"id":"T0E6OlBhZ2UtMTIzMg==","slug":"P08-Testimonials-Part-2","title":"Testimonials Part 2"}},{"id":"T0E6OlBhZ2UtMTIzMg==","title":"Testimonials Part 2","slug":"P08-Testimonials-Part-2","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNDYwMQ==","title":"Testimonials Part 2","htmlContent":"So we left off with having the styles complete, now we need to add some functionality with javascript.
"},{"id":"T0E6OlNlY3Rpb24tNDYwMg==","title":"Plan it out","htmlContent":"Let's first plan out what we'd like to implement.
We can infer from these what we may need to implement:
With these in mind, let's begin!
"},{"id":"T0E6OlNlY3Rpb24tNDYwMw==","title":"Define our Variables","htmlContent":"First we will define our variables at the top of our scripts.js file.
/*************\ntestimonial section\n**************/\n\n//three dots\nconst nextNext = document.getElementById('next-next')\nconst next = document.getElementById('next');\nconst prev = document.getElementById('prev');\n\n//individual testimonials\nconst testimonial1 = document.querySelector('.testimonial1');\nconst testimonial2 = document.querySelector('.testimonial2');\nconst testimonial3 = document.querySelector('.testimonial3')\n\n//testimonial parent container\nconst tests = document.querySelector('.tests');
These are all going to use const, because they will not change.
"},{"id":"T0E6OlNlY3Rpb24tNDYwNA==","title":"Interval Timers","htmlContent":"We want the testimonials to automatically cycle through. Let's add these lines of code below our variables.
let nextNextInt = window.setInterval(function() {\n //check for and remove second class\n if (tests.classList.contains('second')) {\n tests.classList.remove('second');\n\n //add the class which shows the third testimonial\n tests.classList.add('third');\n }\n\n}, 4000)\n\n\nlet nextint = window.setInterval(function() {\n //check for and remove first class\n if (tests.classList.contains('first')) {\n tests.classList.remove('first');\n\n //add the class that shows the second testimonial\n tests.classList.add('second');\n }\n\n}, 8000)\n\nlet prevint = window.setInterval(function() {\n //check for and remove third class\n if (tests.classList.contains('third')) {\n tests.classList.remove('third');\n\n //add the class that has the first testimonial\n tests.classList.add('first');\n }\n}, 16000)
The way this works, is the next actions won't occur unless the testimonial parent container already contains the class that shows the testimonial closest on the right.
This should cycle us through the all the testimonials on repeat.
To learn more about the setInterval method, check out this resource: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
"},{"id":"T0E6OlNlY3Rpb24tNDYwNQ==","title":"Event Listeners","htmlContent":"By default, we show the testimonial associated with the .prev class. We want to create an event listener that let's us move to the next one. Let's do it step by step.
Put this code at the bottom.
//Create a reusable function for clicking on the dots.\nfunction dotClick(oldClassOne, oldClassTwo, newClass) {\n if (tests.classList.contains(oldClassOne)) {\n tests.classList.remove(oldClassOne);\n }\n\n if (tests.classList.contains(oldClassTwo)) {\n tests.classList.remove(oldClassTwo)\n }\n\n window.clearInterval(nextNextInt);\n window.clearInterval(nextint);\n window.clearInterval(prevint);\n tests.classList.add(newClass);\n}
Because we can click any dot no matter what position we're in, we have to remove the other classes because we add the one that brings us where we need to go.
We will go in depth on eventListeners and DOM Manipulation in the Make Cookies tutorial.
Now we can add the others below:
nextNext.addEventListener(\"click\", function() {\n\n dotClick('second', 'first', 'third');\n\n})\n\n\n\nnext.addEventListener(\"click\", function() {\n\n dotClick('first', 'third', 'second');\n\n})\n\nprev.addEventListener(\"click\", function() {\n\n dotClick('second', 'third', 'first');\n\n})\n\n////////////////// end of testimonial section
we call the dotClick function we defined above, and pass in the class names we need to get rid of in the first two parameters, and the class name we want to add in the third.
Nice, we now have an interactive testimonial section.
"},{"id":"T0E6OlNlY3Rpb24tNDYwNg==","title":"Onward","htmlContent":"The next session will give us a bit of a break, as we will just be adding in a third subscribe section.
"}]},"next":{"id":"T0E6OlBhZ2UtMTIzMw==","slug":"subscribe-form-3","title":"Subscribe Form 3"},"previous":{"id":"T0E6OlBhZ2UtMTIzMw==","slug":"subscribe-form-3","title":"Subscribe Form 3"}},{"id":"T0E6OlBhZ2UtMTIzMw==","title":"Subscribe Form 3","slug":"subscribe-form-3","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNDYwNw==","title":"Subscribe Form 3","htmlContent":"Let's add in our third subscribe section.
"},{"id":"T0E6OlNlY3Rpb24tNDYwOA==","title":"Mark it up","htmlContent":"Underneath our testimonials, lets add the following:
<div class=\"subscribe subscribe-3\">\n <h1>\"I would kill for these shoes!\"</h1>\n <h3>- Genghis Khan, Famous Barbarian</h3>\n <div class=\"sub-fields\">\n <form>\n <input type=\"email\" class=\"form-control\" placeholder=\"Your e-mail\"><button class=\"btn-subscribe\">Subscribe</button>\n </form>\n </div>\n</div>
Now we can add in a new background.
"},{"id":"T0E6OlNlY3Rpb24tNDYwOQ==","title":"Style it up","htmlContent":"Underneath our other styles, let's add this:
/****************\nsubscribe 3\n****************/\n\n/****************\nsubscribe 3\n****************/\n\n.subscribe-3 {\n height: 50vh;\n width: 100%;\n background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('https://images.pexels.com/photos/631986/pexels-photo-631986.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: white;\n}
Great!
let's take another look at what we've created.
"},{"id":"T0E6OlNlY3Rpb24tNDYxMA==","title":"Onward","htmlContent":"Next thing is the FAQ section. Lets get right to it!
"}]},"next":{"id":"T0E6OlBhZ2UtMTIzNA==","slug":"FAQ-Section","title":"FAQ Section"},"previous":{"id":"T0E6OlBhZ2UtMTIzNA==","slug":"FAQ-Section","title":"FAQ Section"}},{"id":"T0E6OlBhZ2UtMTIzNA==","title":"FAQ Section","slug":"FAQ-Section","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNDYxMQ==","title":"FAQ Section","htmlContent":"Most online stores seem to have a section for frequently asked questions. We are going to have one as well.
In this section we will create an Accordian style FAQ panel from scratch.
"},{"id":"T0E6OlNlY3Rpb24tNDYxMg==","title":"Mark our territory","htmlContent":"Let's begin by getting the markup out of the way.
Put this code below the third subscribe form:
<div class=\"faq\">\n <h2>Frequently Asked Questions</h2>\n <div class=\"faq-container\">\n <button class=\"accordion\">How do I tie my shoes?</button>\n <div class=\"faq-panel\">\n <p>Lace them together.</p>\n </div>\n\n <button class=\"accordion\">I lost one of my shoes, can I purchase just one?</button>\n <div class=\"faq-panel\">\n <p>No.</p>\n </div>\n\n <button class=\"accordion\">You don't carry the shoes in my size.</button>\n <div class=\"faq-panel\">\n <p>Tough luck</p>\n </div>\n </div>\n</div>
Awesome work. Feel free to change/add questions as you wish.
It's time to add some styles to create the accordion.
"},{"id":"T0E6OlNlY3Rpb24tNDYxMw==","title":"Style time","htmlContent":"Make sure this is at the bottom of your stylesheet.
/**********\nfaq-panel\n************/\n\n\n.faq {\n width: 100%;\n background: white;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-bottom: 2rem;\n}\n\n.faq h2 {\n text-align: center;\n}\n\n.faq-container {\n width: 60%;\n}\n\n\n.accordion {\n background-color: #eee;\n color: #444;\n cursor: pointer;\n padding: 18px;\n width: 100%;\n text-align: left;\n border: none;\n outline: none;\n transition: 0.4s;\n font-weight: 600;\n}\n\n/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */\n.active, .accordion:hover {\n background-color: #ccc;\n}\n\n/* Style the accordion panel. Note: hidden by default */\n.faq-panel {\n padding: 0 18px;\n background-color: white;\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.2s ease-out;\n}\n\n.accordion:after {\n content: '\\02795'; /* Unicode character for \"plus\" sign (+) */\n font-size: 13px;\n color: #777;\n float: right;\n margin-left: 5px;\n}\n\n.active:after {\n content: \"\\2796\"; /* Unicode character for \"minus\" sign (-) */\n}
Awesome. Now it looks like a pretty good accordion.
But we can't interact with it yet. Let's fix that.
"},{"id":"T0E6OlNlY3Rpb24tNDYxNA==","title":"Making the FAQ Section interactive","htmlContent":"We need to use some client side Javascript in order to get our FAQ Section to work properly.
Let's add this to the bottom of our code:
/////////////FAQ accordion section///////////////\n\n\n//delcare default vars\nconst acc = document.getElementsByClassName(\"accordion\");\n\n//loop through all accordion buttons\nfor (let i = 0; i < acc.length; i++) {\n\n //trigger an event after click\n acc[i].addEventListener(\"click\", function() {\n\n //add in the active class\n\n //select sibling element\n\n //if sibling is open, close it, if closed, open it\n if (panel.style.maxHeight){\n //panel is open\n\n } else {\n //panel is closed\n\n }\n });\n}
Great. We're almost done. We still have some blanks to fill in.
//add in the active class\nthis.classList.toggle(\"active\");
We defined our active class in our stylesheet.
//select sibling element\nlet panel = this.nextElementSibling;
The panel will be the div below that contains our answer.
//if sibling is open, close it, if closed, open it\nif (panel.style.maxHeight){\n //panel is open open\n panel.style.maxHeight = null; //add this line\n\n} else {\n //panel is closed\n panel.style.maxHeight = panel.scrollHeight + \"px\"; //add this line\n}
Great! That's how we make a nice FAQ Accordion in vanilla JS.
Let's take a look at what the finished FAQ should look like:
"},{"id":"T0E6OlNlY3Rpb24tNDYxNQ==","title":"Onward","htmlContent":"The next section of our website is going to be the footer!
"}]},"next":{"id":"T0E6OlBhZ2UtMTIzNQ==","slug":"FAQ-Section-7os=","title":"Create The Footer"},"previous":{"id":"T0E6OlBhZ2UtMTIzNQ==","slug":"FAQ-Section-7os=","title":"Create The Footer"}},{"id":"T0E6OlBhZ2UtMTIzNQ==","title":"Create The Footer","slug":"FAQ-Section-7os=","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNDYxNg==","title":"Create The Footer","htmlContent":"In the last section we created an FAQ accordion. In this section we are going to create the Footer of the website!
We are in the home stretch. Let's dive right into it.
"},{"id":"T0E6OlNlY3Rpb24tNDYxNw==","title":"Adding the markup","htmlContent":"Below our FAQ Section, let's add in our Footer Markup:
<div class=\"footer\">\n <div class=\"container\">\n <div class=\"footer-cta\">\n <h3>We sell shoes</h3>\n <p>Please, please, please, buy our shoes.</p>\n <br />\n <a class=\"call-to-action-btn\" href=\"#\">Shop Now</a>\n\n </div>\n <div class=\"footer-links\">\n <h3>Links</h3>\n <li><a href=\"#\">Home</a></li>\n <li><a href=\"#\">Contact Us</a></li>\n <li><a href=\"#\">Shop</a></li>\n <li><a href=\"#\">Careers</a></li>\n <li><a href=\"#\">Investors</a></li>\n </div>\n\n </div>\n</div>\n<div class=\"footer-copyright\">\n <div class=\"container row\">\n <div>© 2018 Copyright by We Sell Shoes</div>\n <div class=\"more-links\">More Links</div>\n </div>\n</div>
Our footer is built in two section, the top part and the bottom part. The top part contains information and some relevant links, and the bottom shows the copy right info.
Now that we've got in our footer html lets go ahead and add some styles.
At the bottom of your stylesheet, add the following:
/**************\nFooter\n**************/\n\n.footer {\n height: 30vh;\n margin: 0;\n background: #34495e;\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: roboto;\n}\n\n.container {\n width: 80%;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n\n.footer-cta {\n display: flex;\n flex-direction: column;\n}\n\n.footer-cta p {\n margin: 0;\n}\n\nh3 {\n margin-top: 0;\n}\n\n.footer-links {\n text-align: left;\n}\n\n.footer-links li {\n list-style: none;\n}\n\n\n.footer-links a {\n text-decoration: none;\n color: white;\n text-align: left;\n}\n\n.footer-copyright {\n height: 5vh;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #2c3e50;\n color: white;\n}\n\n.row {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n\n.more-links {\n cursor: pointer;\n}
Awesome. Now we've got a pretty radical footer.
Our website is now mostly done, let's take a quick look again!
But we're still not done, there's one final thing we need to do.
"},{"id":"T0E6OlNlY3Rpb24tNDYxOQ==","title":"Onward","htmlContent":"In the next section we are going to create a popup form with an incentive to subscribe.
"}]},"next":{"id":"T0E6OlBhZ2UtMTIzNg==","slug":"The-Popup-Form","title":"The Popup Form"},"previous":{"id":"T0E6OlBhZ2UtMTIzNg==","slug":"The-Popup-Form","title":"The Popup Form"}},{"id":"T0E6OlBhZ2UtMTIzNg==","title":"The Popup Form","slug":"The-Popup-Form","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNDYyMA==","title":"The Popup Form","htmlContent":"Alright, this is the final section, so get excited.
We are going to create a pop-up form, and it's going to be awesome.
Lets first start with adding a button to the navbar.
"},{"id":"T0E6OlNlY3Rpb24tNDYyMQ==","title":"Mark It","htmlContent":"Inside of of navigation menu, let's add the following:
<!--you already have this-->\n<div class=\"nav-bar\">\n <nav>\n <ul class=\"nav-links\">\n <li><a class=\"nav-btn logo\" href=\"#home\"><img height=\"50px\" src=\"https://www.shareicon.net/download/2016/07/31/804695_running_512x512.png\"></a></li>\n\n <!--add this part-->\n <li><a id=\"sub-btn\" class=\"nav-btn\" href=\"#contact\">Subscribe</a></li>\n\n <!--you already have this-->\n <li><a class=\"nav-btn right\" href=\"#cart\"><li><img height=\"40px\" src='http://findicons.com/files/icons/1700/2d/512/cart.png'></a></li>\n </ul>\n </nav>\n</div>
You'll notice that this button has an id on it, this means we are planning to add some functionality to it with javascript.
Before we continue though, lets change a few styles in the navbar:
.nav-btn.right {\n margin-left: 80%; /*made this smaller*/\n transition: all 300ms;\n}\n\n\n.nav-links {\n height: 50px;\n width: 100%;\n background: white;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n font-family: roboto; /*made font-family roboto*/\n}
Great, now we are set to add the next part, which is the markup for the pop-up itself.
"},{"id":"T0E6OlNlY3Rpb24tNDYyMg==","title":"Pop it","htmlContent":"At the top of our index.html file, right after the opening
<body>\n <!--everything below this line-->\n\n <div id=\"pop-up-layer\" class=\"pop-up-layer\">\n <div id=\"pop-up\" class=\"pop-up\">\n <h1 class=\"pop-up-title\">Get Rewards!</h1>\n <h2 class=\"pop-up-sub\">Subscribe for 15% off at checkout!</h2>\n <div class=\"sub-fields\">\n <input class=\"form-control\" placeholder=\"Your e-mail\"><button class=\"btn-subscribe\">Subscribe</button>\n </div>\n <button id=\"close-pop-up\" class=\"close-btn\">X</button>\n </div>\n </div>\n\n<!--everything above this line-->\n<div class=\"nav-bar\">
Let's talk about this. We have a pop-up-layer that everything is nested into.
This pop-up layer is going to take up the entire page, it will be a transparent overlay.
Then we have the form itself, an incentive to subscribe, and a closing X button to exit the modal.
Now we are ready to add some styles.
"},{"id":"T0E6OlNlY3Rpb24tNDYyMw==","title":"Pop In Style!","htmlContent":"We are going to do some fun stuff with this pop-up. Let's get started.
At the top of our stylesheet, let's add the following:
body {\n margin: 0;\n -webkit-font-smoothing: subpixel-antialiased; /*If you don't have this, add it in! */\n overflow-x: hidden;\n}\n\n/*everything below this line*/\n\n/*******\nPopup\n********/\n\n\n@keyframes hop-down {\n 0% {\n transform: scale(.1) translateY(200px);\n }\n\n\n 100% {\n transform: scale(1) translateY(0px;);\n }\n\n}
Let's stop right here and explain what this is. When we use the @keyframes selector, that means we are creating an animation. You've probably been exposed to CSS Animations before, and many developers make use of libraries such as animate.css and Woah.css.
We just made our very own animation for the pop-up form.
All we're doing here, is specifying the state the element should be in at 0% of the animation, and then 100%. CSS Magic does the rest for us. If we want to, we can specify other percents as well, such as 50% to give a halfway mark, and much more.
For a more in depth look on some interesting animations I suggest you check out the source code for this.
Let's continue:
.pop-up-layer {\n opacity: 0%;\n display: none; /*we will change this with javascript*/\n position: fixed;\n height: 100vh;\n width: 100%;\n background: rgba(44, 62, 80,.6); /*this is our overlay color*/\n z-index: 100; /*makes our layer above the rest of the page.*/\n}\n\n.pop-up {\n position: fixed; /*this makes our pop-up attached to the screen*/\n top: 0; left: 0; right: 0; bottom: 0;\n margin: auto; /*aligns our popup to the center*/\n height: 15rem;\n width: 40rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: #2c3e50;\n border-radius: 16px;\n box-shadow: 0 4px 3px rgba(0,0,0,.3);\n z-index: 10000000; /*Makes our pop-up above everything*/\n animation: hop-down;\n animation-duration: 100ms;\n animation-fill-mode: both;\n animation-timing-function: linear;\n}
At the bottom of .pop-up we see some animation functions.
We set the animation name by just calling the @keyframes we created.\nWe can change the duration to anything we want, in this case, we want our animation to be pretty quick.
The fill-mode of both makes our animation retain it's state before and after the animation occurs.
And the timing function of linear makes our animation move steadily. For more information on timing functions check this out.
Now we can pretty safely add in the rest.
.pop-up-title {\n position: absolute;\n padding-top: 1rem;\n padding-bottom: 1rem;\n top: 0;\n left: 0;\n background: white;\n margin-top: 0;\n width: 100%;\n text-align: center;\n color: black;\n font-weight: 300;\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n font-family: roboto;\n}\n\n.pop-up-sub {\n padding-top: 1rem;\n text-align: center;\n color: white;\n font-weight: 300;\n font-family: roboto;\n}\n\n.close-btn {\n position: absolute;\n top: 0; /* we put this button at */\n right: 0rem; /* the top right */\n margin-top: 0rem;\n background: #e74c3c;\n color: white;\n border: none;\n font-size: 20px;\n transition: all 200ms;\n cursor: pointer;\n border-top-right-radius: 16px;\n border-bottom-left-radius: 16px;\n padding-left: 12px;\n padding-bottom: 8px;\n padding-top: 5px;\n padding-right: 9px;\n}\n\n.close-btn:hover {\n background: #c0392b;\n}
And those are all the styles we need. We're in the home stretch now. Let's add in some javascript.
"},{"id":"T0E6OlNlY3Rpb24tNDYyNA==","title":"Scripting our Pop-Up!","htmlContent":"We'll get straight into it.
At the top of your javascript file, let's add the following:
/////////popup//////////////\n\n//declare default vars\nconst popUp = document.getElementById('pop-up');\nconst popUpLayer = document.getElementById('pop-up-layer');\nconst closeModal = document.getElementById('close-pop-up');\n\n//nav-bar button\nconst subBtn = document.getElementById('sub-btn');
Great, now we can add some event listeners below.
//navbar button click makes the popup appear\nsubBtn.addEventListener(\"click\", () => {\n popUpLayer.style.display = 'flex';\n})\n\n//close model click makes the popup disappear\ncloseModal.addEventListener(\"click\", function() {\n popUpLayer.style.display = 'none';\n})
Awesome, now all we have to do is make the pop-up appear after a certain amount of time.
let popUpSeconds = 40;\n\n//trigger popup after seconds variable\nlet popUpFun = window.setInterval(function() {\n popUpLayer.style.display = 'flex';\n\n window.clearInterval(popUpFun);\n\n}, popUpSeconds * 1000);\n\n///////////////////
We multiply the popUpSeconds by 1000 because intervals keep track of milleseconds.
We should now have a pop-up that looks like this:
"},{"id":"T0E6OlNlY3Rpb24tNDYyNQ==","title":"Onward","htmlContent":"We've established some awesome CSS and JS skills for building static landing pages.
I encourage you to work with some of these skills a little bit more so that you can master these concepts!
"}]},"next":null,"previous":null}]}},"page":{"id":"T0E6OlBhZ2UtMTIyNg==","title":"Creating the Hero!","slug":"creating-the-hero","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNTQxMg==","title":"Creating the Hero!","htmlContent":"Here comes one of the coolest parts of the landing page. We will build it step by step so you can get a good idea of how to replicate this in future projects. We're going to build a \"Hero\" section at the top of our website. The \"Hero\" is an image and text that makes the product or user of a product the hero of the page.
"},{"id":"T0E6OlNlY3Rpb24tNTQxMw==","title":"Let's create the Hero!","htmlContent":"The first thing we will do is create the full-sized div with a nice background image.
<div class=\"nav-bar\">\n ...\n</div>\n\n<div class=\"hero\">\n\n\n</div>
Next we will style our Hero div a bit.
/* stlyes.css */\n...\n\n/*******************\nHERO\n*******************/\n\n.hero {\n height: calc(99vh - 50px);\n width: 100%;\n background: linear-gradient(rgba(44, 62, 80,.6), rgba(44, 62, 80,.6)), url('https://image.ibb.co/nyaXSK/IMG_5247.jpg');\n background-position: center;\n background-size: cover;\n background-repeat: no-repeat;\n}
The height property is using a speciall CSS3 reserved word: calc. Calc allows you to do a Calculation inside your CSS. It's... awesome. In this case we are taking a value of 99vh - 50px. This means, we want the styled element to take up 99% of the view height (99vh), minus 50 pixels (- 50px). We do this because we want to show a little bit of the next part so that people will know they should scroll downward.
We also make use of linear-gradients to darken the photo a bit. This is so when we add text it will stand out a little better.
You are more than welcome to change the background image as well.
"},{"id":"T0E6OlNlY3Rpb24tNTQxNA==","title":"Adding some text","htmlContent":"We're going to add in a big bold heading that tells the user exactly what our website is about. Lets add this markup!
<div class=\"hero-overlay-text\">\n <h1>We Sell Shoes!</h1>\n <a class=\"btn-cta\" href=\"#\">Shop Now</a>\n</div>
Here we have a parent Div, a heading, and a call to action button.
We can now add the following styles:
.hero {\n /*you already have these*/\n}\n\n.hero-overlay-text {\n z-index: 5;\n height: calc(100vh - 50px);\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: white;\n font-family: 'Roboto', sans-serif;\n}\n\n.hero-overlay-text h1 {\n margin-top: 0rem;\n font-size: 10rem;\n font-family: 'Roboto', sans-serif;\n font-weight: 300;\n}
Before we do anything else, take a look at some of the font-family properties we use.
In order to use the roboto font, we need to import it from google fonts.
We can import google fonts by placing another link tag in our head above our styles link.
<head>\n\n...\n\n<!--add this above the stylesheet link-->\n<link href=\"https://fonts.googleapis.com/css?family=Oswald:200,300,400|Roboto:100,200,300,400\" rel=\"stylesheet\">\n\n<!--you already have this one -->\n<link rel=\"stylesheet\" href=\"styles.css\">\n</head>
Now we are able to use the roboto font.
Now we should define a pretty call to action button.
\nA Call To Action is what you'd like the user to do on your site. In the case of this landing page is we want them to buy shoes, and to buy them, they need to shop for them. So our call to action button will say \"Shop Now\".
\n\nClass Naming Conventions - We want variable names to say what the variable is and be short. We name our class btn-cta because \"btn\" is an abbreviation for \"button\" and \"cta\" is the standard industry abbreviation for \"Call To Action\".
\n.btn-cta {\n background-color: rgba(253, 253, 253, 1);\n color: #616161;\n border-radius: 40px;\n border: 1px solid #C1C1C1;\n padding: 10px 0;\n text-decoration: none;\n width: 15rem;\n text-align: center;\n transition: all 200ms;\n box-shadow: 0 2px 0px rgba(0,0,0,.3);\n}\n\n.btn-cta:hover {\n /*transform: scale(1.02);*/\n box-shadow: 0 2px 1px rgba(0,0,0,.3);\n}
Your page should now look something like this:
"},{"id":"T0E6OlNlY3Rpb24tNTQxNg==","title":"Onward","htmlContent":"We've now got a pretty nice looking hero section. In the next section we will add a section to show off our clients.
"}]},"next":{"id":"T0E6OlBhZ2UtMTIyNw==","slug":"showcasing-our-clients","title":"Client Showcase"},"previous":{"id":"T0E6OlBhZ2UtMTIyNw==","slug":"showcasing-our-clients","title":"Client Showcase"}}}},"staticQueryHashes":[]}![\"navbar](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P01-Navigation/images/nav-s.png\" "\\"navbar")
\n ![\"Hero](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P02-Hero-Section/images/hero2.png\" "\\"Completed")
\n ![\"unstyled](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P03-Client-Showcase/images/clients1.png\" "\\"unstyled")
\n ![\"Subscribe](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P04-Subscribe-Panel/images/landing.png\" "\\"subscribe")
\n ![\"make](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P05-Gallery-Showcase/images/MakeCookies.gif\" "\\"Make")
\n ![\"animated](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P06-Subscribe-Form-2/images/cookies.gif\" "\\"make")
\n ![\"oh](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P07-Testimonials-Part-1/images/ohno.gif\" "\\"Oh")
\n ![\"Testimonial](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P08-Testimonials-Part-2/images/cycle.gif\" "\\"Testimonial")
\n ![\"testimonial](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P08-Testimonials-Part-2/images/cycle2.gif\" "\\"Testimonial")
\n ![\"animated](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P09-Subscribe-Form-3/images/cookies.gif\" "\\"make")
\n ![\"faq\"](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P10-FAQ-Section/images/faq.gif\" "\\"faq\\"")
\n ![\"We](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P11-Creating-The-Footer/images/shoes.gif\" "\\"We")
\n ![\"pop-up!\"](\"https://cdn.rawgit.com/MakeSchool-Tutorials/We-Sell-Shoes/master/P12-The-Popup-Form/images/popup.gif\" "\\"Pop-up!\\"")
\n