Create a Website using HTML & CSS from Scratch in 20Min Challenge
Source Code
Index.html
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="mainheader">
<div class="logo">
<img src="images/logo.png">
</div>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">about</a>
<a href="https://www.thapatechnical.com" target="_blank">contact</a>
</nav>
<div class="menubtn">
<button> HelpLine</button>
</div>
</div>
<!-- DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi
Believe me, all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :) -->
<main>
<section class="left-sec">
<h2> We Are Here For Your Care</h2>
<h1> We The Best Doctors</h1>
<p>We are here for your care 24/7. Any help just call us.</p>
<button>
Make an appointment
</button>
</section>
<section class="right-sec">
<figure>
<img src="images/mainbg.png">
</figure>
</section>
</main>
</header>
</body>
</html>
style.css
*{
margin: 0; padding: 0;
box-sizing: border-box;
font-family: 'Josefin Sans', sans-serif;
}
header{
width: 100%;
height: 100vh;
background-image: url('../images/bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.mainheader{
width: 100%;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
.mainheader .logo img{
width: 250px; height: 70px;
padding-left: 60px;
}
.mainheader nav{
width: 450px;
display: flex;
justify-content: space-around;
align-items: center;
}
.mainheader nav a{
text-decoration: none;
color: black;
text-transform: uppercase;
}
.menubtn{
margin-right: 60px;
}
.mainheader button{
padding: 10px 45px;
text-align: center;
font-size: 14px;
color: #fff;
border: none;
background-image: linear-gradient(to right,#649bff,#0070fa,#649bff);
border-radius: 10px;
}
main{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
main .right-sec{
padding-right: 70px;
}
main .left-sec{
padding-left: 100px;
}
.left-sec h2{
font-size: 20px;
text-transform: capitalize;
font-weight: lighter;
color: #242424;
margin-top: 100px;
}
.left-sec h1{
font-size: 55px;
text-transform: capitalize;
font-weight: 700;
margin: 15px 0;
}
.left-sec p{
margin-bottom: 20px;
}
.left-sec button{
padding: 15px 45px;
text-align: center;
font-size: 14px;
color: #fff;
border: none;
background-image: linear-gradient(to right,#649bff,#0070fa,#649bff);
border-radius: 10px;
}
Awosome sir.
ReplyDeleteLove this post.
ReplyDeleteRegards
Programmics!
Awesome sir...i want mainbg.png image for my use or you send me link form where i can download it.
ReplyDeleteGenius
ReplyDeleteBhai thoda slow betaya ker kyo ki beginner
ReplyDeletebro comment section kise add kiya ?
ReplyDeleteSir can you please provide me with the manibg.png
ReplyDeleteand thank sir your explanation is just outstanding .
That's the main issue sir pls give the image
DeleteOXM bro good work !
ReplyDeletehttps://www.mooljisweets.tk/
ReplyDeleteNice post. I was checking constantly this blog and I’m impressed! Extremely useful info specially the last part I care for such information a lot. I was seeking this certain info for a long time. Thank you and good luck. website agency san francisco
ReplyDeletefind the mainbg.png here
ReplyDeletehttps://technext.github.io/medisen/img/ability_img.png
thanks me later:)
happy coding:
Thank you bro
DeleteThanks a lot buddy
DeleteLove you
Deletethanks bro
DeleteThanks for sharing nice information with us. i like your post and all you share with us is uptodate and quite informative, i would like to bookmark the page so i can come here again to read you, as you have done a wonderful job. Ect
ReplyDeleteHlw sir there is a problem in this website making I was unable to dwnload image from canvas logo like you
ReplyDeletewhere u take that image
ReplyDelete👍❤
ReplyDeleteAwesome bro
ReplyDeleteGreat article by the great author, it is very massive and informative but still preaches the way to sound like that it has some beautiful thoughts described so I really appreciate this article. Web designer san Francisco
ReplyDeleteHere I had read the content you had posted about Web Design. It is very interesting so please keep updating like this. In Fact, it will be useful for Maine web design company. I am expecting much more posts from visit on theportwebdesign.
ReplyDeleteGreat job for publishing such a nice article. Your article isn’t only useful but it is additionally really informative. Thank you because you have been willing to share information with us.
ReplyDeleteWebsite Development Miami
Great job for publishing such a nice article. Your article isn’t only useful but it is additionally really informative. Thank you because you have been willing to share information with us.
ReplyDeleteSan Antonio website design
Decent Article! I loved your blog since what you said in your article is straightforward. Find out about website design seattle visit graticle.com
ReplyDeleteSir pl provide me the link of the img(the doctor one)...I need it ..Sir plzzzzz provide me..I am not bale to find that image..as soons as anyone see my comment pl reply..
ReplyDeletehttps://mega.nz/file/blZ2VbJS#C05RWrlfls-yDHFByw6tHYk3AECapIAUsqLEgUVpvAs
ReplyDeleteFull project
Is impressed subscribe my channel
https://www.youtube.com/channel/UCS0dCdgMiThpUl1reVovdMw
give me the picture
ReplyDeleteThis information is meaningful and magnificent which you have shared here about the web design . I am impressed by the details that you have shared in this post and It reveals how nicely you understand this subject. I would like to thank you for sharing this article here. Miami web design company
ReplyDeleteI really appreciate your work. I am very impressed by this post. I would like to suggest you that please keep sharing such type of info. Thanks...accountant web design
ReplyDeleteThe information is really great and the article is well –researched and contains some best knowledge regarding it. Thanks for sharing it. Maine website Design
ReplyDeleteI came to this blog and it helped me to add few new points to my knowledge. we provide Brand Agency in Orange County at affordable charges. to know more visit our website.
ReplyDeleteThis really is both equally a very good information when i rather definitely preferred verifying. This may not be at all times i always get likely to see a challenge. Software House
ReplyDeletewonderful post. this is very well written and unique. Thank you for sharing this post here. keep sharing this in future. Best Web Design Service Birmingham
ReplyDeleteYou have a real ability to write a content that is helpful for us. Thank you for your efforts in sharing such blogs to us. Web Design & Development Services
ReplyDeleteI read this article. I think You put a great deal of exertion to make this article. I like your work. Email Harvester
ReplyDeleteI found lots of valuable information in your article and also I will suggest top reading this article. It is a gainful article. If you are looking for the Website Reseller Hosting then you can contact to at Eleven2.com
ReplyDeletebest
ReplyDeleteClearly, It is an engaging article for us which you have provided here about web designing This is a great resource to enhance knowledge about it.bvtravel portal development company online Thank you.
ReplyDeleteSir index page banane ke baad jab mai webpage ko zoom karta hu to sare elements disturb ho jate hain.
ReplyDeleteAur website mobile par responsive nahi dikhti.
Please Help
thanks alot sir ji
ReplyDelete