 |
| landing page for a web design society |
when you make your first product or when you start a startup it's important to have a web site and a beautiful landing page for your website.
in the picture below is an example of a landing page that we will give the source code.
for this landing page you will need the SVG code of the curves and the illustration.
 |
| illustration for the tutorial |
and these are the SVG code of the curves
blue curve
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720px" height="400px"> <path fill-rule="evenodd" fill="rgb(66, 131, 197)" d="M-0.000,442.000 C-0.000,442.000 152.183,261.320 263.000,259.000 C373.817,256.680 557.205,156.742 630.000,110.000 C681.167,49.604 712.178,0.458 794.000,-0.000 C795.000,95.116 794.000,443.000 794.000,443.000 L-0.000,442.000 Z"/> </svg>
purple curve
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720px" height="400px"> <path fill-rule="evenodd" fill="rgb(189, 121, 198)" d="M0.000,423.000 C0.000,423.000 175.045,302.329 275.000,303.000 C374.955,303.671 626.992,210.018 674.000,126.000 C721.008,41.982 793.000,0.000 793.000,0.000 L794.000,424.000 L0.000,423.000 Z"/> </svg>
and now the full source code.
Video Tutorial
I-HTML CODE
<!doctype HTML >
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="container">
<h1>Your Logo</h1>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Our services</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
</header>
<section>
<div class="container">
<div class="row">
<img src="601.jpg">
</div>
<div class="row">
<div class="text">
<h1>make your dream come true</h1>
<p>you imagine, we create <br> web design startup for all your buisness</p>
</div>
</div>
</div>
</section>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="720px" height="400px">
<path fill-rule="evenodd" fill="rgb(66, 131, 197)"
d="M-0.000,442.000 C-0.000,442.000 152.183,261.320 263.000,259.000 C373.817,256.680 557.205,156.742 630.000,110.000 C681.167,49.604 712.178,0.458 794.000,-0.000 C795.000,95.116 794.000,443.000 794.000,443.000 L-0.000,442.000 Z"/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="720px" height="400px">
<path fill-rule="evenodd" fill="rgb(189, 121, 198)"
d="M0.000,423.000 C0.000,423.000 175.045,302.329 275.000,303.000 C374.955,303.671 626.992,210.018 674.000,126.000 C721.008,41.982 793.000,0.000 793.000,0.000 L794.000,424.000 L0.000,423.000 Z"/>
</svg>
</body>
</html>
II-CSS CODE
@import url('https://fonts.googleapis.com/css?family=Lora|Open+Sans');
*{
margin: 0;
padding: 0;
outline: 0;
}
header {
padding-top: 25px;
font-family: 'Open Sans',sans-serif;
}
header .container{
position: relative;
width: 80%;
left: 50%;
transform: translateX(-50%);
}
header h1
{
color: #4283c5;
float: left;
margin:0px 0 0 35px;
}
header ul {
float: right;
margin-top: 20px;
margin-right: 25px;
}
header ul li{
display: inline-block;
margin-right: 25px;
}
header ul li a{
text-decoration: none;
font-size: 16px;
color: #000;
text-transform: uppercase;
transition: .4s;
}
a:hover{
color: #4283c5;
}
.active {
color: #bd79c6;
}
section{
padding: 100px 0 0 0;
}
section .container{
position: relative;
width: 80%;
height: 100%;
display: flex;
flex-direction: row;
left: 50%;
transform: translateX(-50%);
}
.row{
width: 50%;
}
section .container img{
width: 100%;
}
section .container .text{
position: absolute;
font-size: 2rem;
top: 50%;
transform: translateY(-50%);
font-family: 'Lora',serif;
}
.text h1{
color: #bd79c6;
}
.text p{
color: #2a2a2a;
}
svg{
position: absolute;
left: 100%;
top:100%;
transform:translate(-100%,-100%);
}
now you have a beautiful and professional landing page for your web site.
we hope that you liked this little project, please tell us in the comment what you think and what you want from us for the next project, we will try to make it for you.
Make a Professional Landing Page using HTML and CSS
Reviewed by Medics
on
March 19, 2019
Rating:
Reviewed by Medics
on
March 19, 2019
Rating:
clean , and professional, i really liked your project , can you please make for us a full web page project ?
ReplyDeletePlease compress all the codes into one downloadable folder so that it would be easier get.
ReplyDeletehello sir thank you for commenting, we will Make our file downloadable soon
Delete