Create a Coming Soon Page Using HTML & CSS | Frontend Mentor Challenge

hello everyone welcome to this video today we are going to make this fountain mental challenge once again and today we are going to take this challenge which is coming soon page and in this video we are going to make this whole page and if you can see this is a nice page with a responsive as you can see that this page is having fully responsiveness so also we will have email validation here as you can see however there will be an email with an invalid it will have this icon and also will have an error text we will see all kind of thing in this video and if you don't know what is font and meant or you can come to font and mentor dot IO and here you will find some challenges for front-end section and here as you can see you can take this challenge and today we are going to take this challenge and we are going to make these comings on page so no more talk let's dive into the video [Music] so as you can see that I'm in the front and mentor and here we will do this challenge for today which is a base apparel coming soon page challenge and let's go to this challenge and here you will find this download button so click the download button to download all the necessary file that we need to start this challenge so once we downloaded so once we downloaded this file we will find this zip file and we can extract this so if I extract here as you can see that this is the file that we need so here as you can see we have this all the thing so what I need to do is I need to open this file in my vs code or any kind of code editor so as you can see in my visco there are the files that is included so as you can see in here we have all the images that we need in the challenge and also in the HTML file you can see that all the text that we needed is already given here and also we have a spell guide as you can see so here as you can see that you can see all the colors that we need to use in this challenge and also you can see that all the typography and all the thing that we need to start this challenge so that's fine what I need is first of all so if I open this design file as you can see that here you can see that there are the mobile design and they are at the desktop premium so if I come here as you can see that this is the desktop review and this is the text of design as you can see if you can see that and also we have a mobile design so this is the picture that is given so that we can design the page also you can see that there is another picture which is actually in the active status so here as you can see that in this email input if you give an invalid email we will have this icon and also we will have this error message so we need to make it as it is looking right now so we need to be careful about this so we need to make sure about the email validation so no more talk let's dive into the code actually so here first of all let's create two more file which will be the style dot CSS and also one more file which will be the main dot J's so basically we will use this JavaScript only for the email validation so only for email validation we will use this JavaScript so there is nothing to do with JavaScript so we will make it with HTML and CSS only and only for the email validation we will use our JavaScript so let's start so first of all in our HTML as you can see if I come here and in the mobile design because we are designing the mobile design first so as you can see that here is our header and in the header we have a logo and after that we have our image and after that's our content so that's the layout will be so here it is our design and in the body first of all let's create our header and in our head our we will have our image with a class of logo and in our source let's say that it is in the image so if you go to the image you will have a logo dot SVG so that's fine so this is a good thing that you will find in front inventory you have all the setup given to you you just need to code and design the thing so that's why I will Arbeit so in the alternative tag let's use the brand or logo let's use logo and that's what we need so if I open it with a live server so here as you can see that that's our logo this is the SVG so after the SVG let's create a DVD class of fontina so in this container we will have to deep first one will be the column left or only left I think okay and also we need to another deep with the class of right so this will be the left and this will be the right deal so in the left if I come here in our design Dexter bit and as you consider it in the left we have our content which is this heading and in the right we have our image so if I come here so in the left we will have our content so let's copy this all content here and paste it here so and in the right we will have our image so for the image we will use it as a background image so we do not need any kind of content inside our right tip we will simply use the background image for this tip so this will work so let's go to our left deep as you can see here in the left deep we have these heading which is the bigger heading so let's give it a h1 so inside this h1 this will be our text and if you notice that we have some background here so line break so after the we are we have a line break also after the word coming we also have a back point or line break so let's give it here so after the we are we have a br or line break also after the coming we have this beer and if you can notice that here we have to define style so for the first part we have color and in the second part which is the coming soon we have different kind of style so what I need to do is we need to wrap it with a span so let's wrap it with Destin so cottage and make the eye span tag and paste each here so as you can see so we will design this part with this espan so there will be no issue so after that let's come here in our prep rub so here as you can see so this text will be in our program so let's make a break up tech and paste it here so that's fine so after that here as you can see in our design we have a email input here as we can seen so let's make a form for that so the form and here the action will be the hash and for the form we will have an input and this input type will be the email and here we will have a placeholder let's say that for the placeholder we will have this email address so let's copy or cut and paste it here so fine and also if you can notice that in here we have a button in this button we have a arrow and also in our design in our image we have this arrow as you can see I can arrow so here in our input after the input let's create a button with a type of submit and here we will have our image and for the source it feels in the image we have this icon arrow and also here in the alternative let's say that submit fine so if I come to my design so there it is as you can see all the content is in place so let's stand it here so let's set it here so now what I need to do is I need to link our stylesheet' so here after this one link CSS which is Award as tell sheet so that's fine so also link our chess here in the bottom so after this footer let's link our j/s so this is the main dot yes so that's fine so let's come to our Estelle CSS and here first of all if I come here in our file we have this file which is a style guide if I open this file here as you can see so in the bottom you can see this typography and in this type of graph II we have a font family of this font so we need to add it from the Google font so let's come here in the Google font so fonts google.com and if I open it if you can see that so this is the font so what I need is we need to 304 and 600 font weight so let's come here and let's this is the 300 and this is the 400 and the last one is the 600 which is the semi Volt so once you've selected let's come to the embed and import and copy this import so let's come here so paste it in the style dot CSS so that's for our font so after that let's come here to our style so let's do a universal selector and remove all the padding and margin so this will remove all the unexpected padding and margin so after that box sizing will be border box so fine as you can see there is no more extra gap so after that let's come here in the body so as you can see in our body we have this font which is this one so let's copy the font family name so in the body let's apply it so let us say there so let's say that font family will be this one so also make sure that they have a code and also let us give it as sensory for fallback font family so after that font size will be 16 pixel and that's what we need for our body and as you can see the font family is now in place so after these let's come here in our so for now let's say that display:none so we will just I'll it that time so as you can see there is no header for now so we will assign this header in a beech letter so after that let's come here in our container so in the container let's say that mean width will be not mean with mean height so let's say that minimum height will be 100 VH and we will have a width of 100% and let's say that this play will be flags and aligned items will be Center and justified content will be Center so as you can see our content is now in center perfect so let's come here and let's come here in the container we have these left which is the left depth so in here let's say that we shall have a width of 100% and let's say that height will be Auto and also let's come here in the container also for the right we need to make it a width of 100% and let's say that for the right the height will be 250 pixel so once again we are designing the mobile design first so for this one we need 250 pixel off right and let's come here and place the image which would be the background image so background-image:url and here if I come to the image you can see a hero mobile JPEG so let's come here as you can see that there's our image so here as you can see when we give it a display of flex in this container it is making a flex direction of Rho which is the by default choice so we need to make it flex Direction column so as you can see it is working but one more thing we need our picture which is this one in the top so if I come to our mobile design as you can see that we needs our picture in the top so for that what we need to do is we need to make sure column reverse so which will reverse the column so as you can see now our picture is in the top and also you can see that it is in the top position of our container so for that what I need is I need to make sure about the justify content which is this one and make it flags and which will make it in the top so let's come here now in the right and let's say that background size will be the cover and also make sure about these so that's looking fine and also let's say that background position will be Center and center BG position will be Center and also for the why we need Center perfect so after that let's come here in our left we will need some padding in the top so let's come here and if I come to our mobile design varieties so you can see that we have padding in the top also in the left and also in the right so we need some padding from the both site in the left and right also for the top and bottom so let's come here in the top let's say that 50 pixel and in the left not in the left it is in for the right 30 big cell for the bottom zero pixel and 30 bigs all for the left perfect as you can see we have some gap here which is looking better so after that what we need is we need to make sure that our text-align easy in center so let's come here in the container and let's say that text-align will be the center so as you can see that our text is now in center perfect so now let's design our heading so this heading is in our container in our left deep so this is the heading so for the heading let's say that so for the heading let's say that font size will be about 3.2 m and also say that font weight will be 200 because if I come so if I come here as you can see that that's a light weight so that's why we need to make sure that it is font weight 200 and after that let's say the text transform will be uppercase and also let's give it a color so for the color as you can see we have a dark pink types color so if I come here this will be the color so let's apply it here so as you can see that we have the same color which is perfectly fine and also makes some line height as you can see we need some line head of 3.5 bream or fact yeah and also let's give it some letter spacing let's say 0.5 M will work yeah points I am looking good so that's fine so what I need is now we need to make sure about this bottom part which is coming soon so for that we can target our span because we give because we wrapped this part with a span so if I come here in the HTML you can see that in this part only for this part we have this S Pen so let's select this S Pen and let's say that color will be a dark color so which is the dark cover if I come here so this is the dark grayish color so if I copy this and paste as you can see this is the dark color and also we need to increase our font weight so font weight will be let's say that 600 perfect as you can see you that's fine looking okay after that let's come here for the program so in the container in the left we have a program so let's say that max wait for this program will be let's give it 450 pixel and also make sure that margin is zero Auto so that we will have a middle so so so that we will have this text in the middle so after that let us have a color of let's give it same color which is for our h1 so these pink color that's not pink I know but I don't know what is the name of this color so for now let's say it pink so also let's make some line height so for the line height here we can use 1.5 bream you are looking fine so we need to make some margin for the top and bottom so for the margin top let's give it 20 pixel and also margin bottom let's give it 40 pixel so that's perfect as you can see we have enough gap here so after that let's come to our form so in the container we have this form and in the form we need to make sure that the position is relative and display will be block and height will be about would let's say that 50 pixel because we have only one thing here in this form which is our email so for this email we need 50 pixel will be enough for the height so it will be 100 percent and 2 margin will be 0 and also perfect so let's come here so as you can see that container we have a typo here so that's fine now so container and in this form we have a field of input only one field so that's why we can use input directly so position let's say that absolute and let's say that wit will be 100% for the field and height will be 100% and also let's say that there will be no outline outline will be none and border-radius will be 50 pixel which will make a rounded shape border so let's position it so let's say that it will be left 0 and also let's say that it will be in the top 0 perfect so we need to make it so as you can see that we have something borders so let's say that for the border what I will use 1 pixel 1 pixel solid and we will use this pink border so let's copy this and as you can see that we have this one pixel border so perfect if I come here as you can see so let's make this button so before that as you can see we have some padding here so let's make some padding for our placeholder so here let's say that padding left will be about 50 pixel so 50 pixel is too much let's say that 30 pigs amia 30 pixel is looking good so perfect so also make sure that the font-family for this field is our default one which is the Joseph's in so this font will be the font for our email input value and also make sure have a fallback so if I hone I will write as you can see that this is the Josephine so perfect and also let's increase the font size a little bit one point one rim perfect as you can see that so that's looking good so after that let's create this button so let's come here in the container in the form we have a button with the type of submit so cursor for this button will be the pointer and position will be absolute and right will be zero so it will be in the right side so as you can see this is the button and also let's make it top zero we do not need it so let's also make it up zero so so let's also make it top zero so that it is perfectly in position and let's say that we will have a height of 100 percent and also make sure that we will have a we top above which 70 pixel so this will make this button and also let's make the border radius which will be the 50 pixel and make it like that perfect and the last thing is we do not need any outline so our outline will be the none and also make sure we don't have any border so border will be none so perfect as you can see and the last thing is we need a background so for the background if I come here as you can see we have a gradient background and if you come to the color we have these two gradients the first one is our white and this is the second one which we will need for our button so copy this gradient and paste here so for the gradient let's say that background image we'll be linear gradient and paste it here and just remove this from and - and if I save as you can see this is looking perfect so the last thing is we need a box shadow so for the box shadow let's say that zero pixel and zero pixel and 18 pixel and one pixel and let's give it a dark color which is this one what it is yeah this one so it is looking good so let's decrease the opacity a little bit so it is looking fine as you can see ya lookin fine so after that let's give it a hover statement because we have a active statement as you can see when I am active so when this button is active means when I am hovering it we will have this color change as you can see we have this color so let's come here and let's make it so for the button when we will have a rich let's make a change for our background image and let's say that the background image so let me copy the linear gradient for this background so I just change a little bit more as you can see this is looking similar so and we also need to change our box shadow so let's come here in the box shadow and let me copy the box shadow and paste it here so if you can see we have this kind of active or hover statement here so that's looking fine perfect we do not need any kind of transition it is looking fine now so if you can see that in the placeholder for our email it is having a style so let's give it a style for our placeholder so in the container in the forum in our input so if we will have a placeholder so let's select this placeholder and let's say that we will have the color for this placeholder which will be actually this color which we used previously so as you can see this color is looking perfect and also make sure that we have an opacity loss here so let's give it a 0.8 so looking perfect so that's it for the button so let's make it responsive so as you can see that it is not responsive so for that mo file it is looking good and for the desktop it is not looking for for the desktop we need to make it like that so before that we need to make sure about our heading so for now we don't have any kind of heading here so as you can see so let's come back to our header so here as you can see so here let's say that remove this display:none if I save as you can see that that's our header so let's give it a height of auto so as you can see and we need some padding let's say that padding will be about 30 bigs of fine and we need to make it a little bit as smaller so let's say that which will be about 150 pixel that's not for our header the width will be for our image actually so in the header we have this image and this width will be for this image perfect as you can see we have this header so as you can see that our design is almost identical to our this picture so looking fine as you can see and the last thing is we have so and the last thing is we need to have background so as you can see that there is a linear background we need to make it for our container so if I come here in our container we need to make AG linear background so for that background-image:linear-gradient and this gradient will be our first gradient here so let's copy this and paste it here and just remove this form and - fine as you can see we have this gradient in the background perfect so after that what I need is we need to make it for our desktop so let's come here in our media query so let's create a media query so media only screen and let's give it a mean width of 768 pixel so this will be the breakpoint and let's say that for the header as you can see so let's start with the header in the header when I'm in our desktop the position will be absolute so if I come here as you can see when I am in the desktop it is in absolute but when I am in the mobile it is the kind of initial state so for the desktop it is looking good perfect and also let's give it a margin in the left of 10% so we will have a kind of margin here and also let's come here in the container and as you can see that for the container we need to make it something like that the column so let's give it a flex direction of column so it will make it something like that not column actually it will be the row so as you can see that it is already taking place in the layout so also let's say that padding top we do not need any padding for the top we'll be the zero and also padding-bottom we do not need any padding for the bottom let's also give it zero perfect so let's come to our right side known so in the container we have this right side and here let's say that wit will be 80% perfect and also let's say that height will be about hundred VH so as you can see that it is 100 th side so as you can see that this image is not looking good and we have already a separate image for our desktop so let's so let's bring it here so background-image:url if you come to the image folder here you can see that hero desktop JPEG so as you can see this is looking better now so perfect as you can see that after that let's come to our left side so in the container let's come to the left and here what I need is so for the left let's say that height will be 100 VH so if I give it height hundred VH as you can see that the position of the content is in the top so we need to make some padding in the top so that it come in the center so let's give it a 28 VH of padding as you can see that now it is kind of center and also make sure that we have a align man so let's say the text-align:left if I give it something like that so as you can see that almost looking good so we need to make sure that we will have a padding left also 10% so as you can see that so that's fine and if you come to our text of design here as you can see that if i zoom in so in the background we have a pattern here as you can see that for the background we have a pattern so we also have this pattern in our image folder we need to position it here so let's come here in the background image let's bring the image so this is the BGP background background as VG so here as you can see that it is looking good so we need to make it position Center so BG position will be the center for the boat and also make sure that size of the background is cover not contain cover let's give it a width of 100% so that's what we need for the left so let's a style our h1 so for the container will have this h1 so let's say that texture line is already in the center we do not need and let's say that font size will be about 5m line height let's give it point 5 point 5 gram so you can see that it is kind of not working because we need to make sure that it is inside the left so now it is working perfectly as you can see so let's also increase the font size for our program so in the container in the left we have this playground and let's say that for the program we will not have any kind of margin left so zero as you can see it is looking perfect now and also let's say that font size will be 1 point 1 R M perfect so let's also give some style for our button so we need to increase the size of the button so let's come here let's say that container form so in the form let's make it margin left 0 and also let's increase the button size so inside the form we have a button so let's give it a width of about 80 pixel which is a little bit of bigger so fine as you can see it is looking good so as you can see that it is not looking good for our forum we need to make sure about this forum so if I come here in the forum we have a width of 100% and so after that if I give it a max width of 400 pixel it will be good as you can see that this is the max width for this forum perfect looking good so that's what we need for our design purpose so it is almost looking identical as you can see that here okay good and also we need to make sure about this header image we need to increase it a little bit so inside this header I am D the width will be let's make it 120 pixel or 5200 so if I come here so as you can see it is kind of 180 yeah 1 it is looking good I think yeah looking perfect as you can see that's here so the last thing is we need to work about our email validation so if I come here here what is the image here it is so if I come here as you can see that Hawaiian there is a invalid email we will have a text in the bottom and we will have a icon here so for that what I need is in the style so let's come here in the HTML so what I need is in our HTML we need to place the text and also the icon here so before these button the submit button so if I decrease the size so before these sub button let's have a image which will have a class of a tour icon so this icon will be hidden so whenever there will be an arrow we will make it visible so perfect and let's give it the icon here so it is in our image folder and here you will find this icon error perfect and after this pattern we will have a prop and also inspect grab we will have a class which will have a plus of error text so this will be also the hidden for the initial so when there will be a invalid email this will be visible so let's give it a message and let's say that please provide valid email perfect so that's what we need and here as you can see that this is our text which is the error text and we can't see our icon before this media query let's come here and let's say that in the container form under the form we have a class of error text or error icon so let's come for the icon first so let's give it a display:inline-block and also make a position of absolute so if I give it absolute position we can see it so let's position it so let's give it a top of about 24% which will make it center and also make the right about 40 pixel so if I make it 40 pixel we can't see it because it is under this button so let's increase the right let's make it Eddie yeah Eddie is looking good so let's say that 80 75 yeah 75 is looking perfect in place so if I come here as you can see I think we need some more space so 85 will be good if I come here and see yeah looking good as you can see so also let's make this text here so for the text let's say that I can instead of icon let's give it the class erode text and let's say that position will be absolute and what I need is I need to make sure the left is 30 pixel and also we will have a top of 40 pixel perfect it is in place already and font size of one Ram young goat and for now display a nun so it will be hidden and also make sure that the icon is displayed nun so we can remove this here from here so as you can see these all are now display:none and when we will have an error we will bring it back so let's come here in the js4 our email validation so before that let's grab our form so constant form equals to document dot query selector and here let's grab the form so it is in the container you will have a form so we can so we can grab it from like that and also let's grab our field email field so let's say that email and it is will be the form under the form we will have a input so we have only one input so this will work so but make sure about the type is email so now it is perfect so it will grab the form and the even field and let's say that when we will submit the phone so in the form let's add a even listener and the event will be a submit so hina bar I will submit this form Hart I need so first of all we need to prevent the default behavior so e dot prevent default and there's a method actually so also make sure that we have this event here e so after that let's get our actual email from this email field so let's come here let's say that lat email value equals to e mail dot value perfect and we need to check this email value so let's control of it from soul dot log email value so if I open our in aspect tool and here if in the console let's give each I email something like that and he tendered and as you can see that the value is perfectly console.log so our code is working so we have the value now which is our actual email and we need to check it the validation of this email so for that we need to use red X so which is the regular expression actually so for that let's come here in the Google and search for red X email validation so if I come here so if I come here to this one here I will find this which is a good example and here as you can see that if I copy and paste it here and considered it is a function and it will take an email which is the parameter and what it will do is it will check this email with this regular expression as you can see that so this is the regular expression and this will filter the email and check all the thing that this is a email with a valid or not valid so once we will check it will return us something so let's say that in an if-else statement we will validate email so we will call this validate email function and we will pass our inner value so whenever there is no error in this email what we will can do is we can say that console.log these is a valid email and for else let's say that console dot log email is invalid perfect so let's come here and check it so if I come here and inspect and open our console so let's give it a invalid perfect email is invalid and if I give it a valid one something like that and as you can see that this is a valid email perfect so instead of console logging these thing what we can do is we can add a class in our form so let's say that whenever there is an error instead of console logging these this email is invalid what I can do is in the form in the class list we can add their class which is error perfect so whenever there is no error means the email is valid what I can do is I can remove this class form our form so instead of adding we can make remove so what it'll do is if there is any kind of error it will add a class which is error and if there is no kind of error or that the email is validate perfectly this will remove the error plus so let's check it so if in aspect in our element here as you can see that this is the form while this yeah this is the form and if I give it a a mail of something invalid check the form we have a class of error but whenever I will have a perfect email this will remove the class so perfect so now what I can do is I can a style with this form plus so here let's say that whenever in our form there is a class of error our error icon will be visible so let's copy this and paste it here so let's say that display will be block so let's give it a try so if there is invalid email this is now visible so let's also make visible to our text so let us copy this and paste it we can do it in one line but let's give it like that so if I give it this plug block also for our text so as you can see that whenever there is an error class or error we have this text in the bottom and also I can perfect so let's give it a perfect email nothing is doing if I give it a invalid perfect working so the last thing is as you can see that whenever I have a error we will have a border of something this red color so let's do it so let's say that one of our our four has an error what Annie trees in the input I will have a border of two pixel solids and the color will be this red color which is this soft rent so as you can see it is looking good so this is totally perfect as you can see that so that's what we need for not for this so that's what we need for this one so I think that's it if I come here and let's check our email validation and even validation is working let's check our responsiveness so it is looking good perfect also perfect as you can see that here and that's it for this video you will find all the necessary code and all the necessary links in the description you can find the source code and also find these challenge all the link in the description check it out and that's it for this video thanks for watching and also if you are taking this challenge let me know join our Facebook group link in the description also so I will happy to see your work please let me know so join our Facebook group let's have a chat and discuss if you have any problem with this code and that's it for this video thanks for watching and I will see you in the next video till then bye bye khuda Hafiz [Music]

Channel: WEB CIFAR

Views: 4,979

Keywords: Coming Soon Page, coming soon website, how to make coming soon page, under maintenance website, under maintenance website design, under maintenance page, under maintenance site, HTML CSS, Website Design, html, frontend mentor, design to html/css, programming tutorial, static website, coming soon page, base apparel, how to activate coming soon mode, coming soon wordpress plugin, ultimate coming soon page, create a coming soon page, website under construction, web cifar, coding

Id: z351aUaYZm0

Length: 52min 26sec (3146 seconds)

Published: Wed Apr 15 2020