Create a Website using HTML & CSS from Scratch in 20Min Challenge

Source Code

Index.html

<!DOCTYPE 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>



<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;
}

33 comments:

Ajeet KushwahaJuly 30, 2019 at 11:31 PM
Awosome sir.
Prateek SinghSeptember 5, 2019 at 8:27 AM
Love this post.

Regards
Programmics!
rushi@1786September 8, 2019 at 9:40 AM
Awesome sir...i want mainbg.png image for my use or you send me link form where i can download it.

UnknownSeptember 10, 2019 at 5:19 AM
Genius
UnknownSeptember 11, 2019 at 7:03 PM
Bhai thoda slow betaya ker kyo ki beginner
AnonymousSeptember 21, 2019 at 8:26 AM
bro comment section kise add kiya ?
sanskarOctober 15, 2019 at 12:35 AM
Sir can you please provide me with the manibg.png
and thank sir your explanation is just outstanding .
Muddusar ZulfiqarOctober 30, 2019 at 2:24 PM
OXM bro good work !
Homemade CakesNovember 2, 2019 at 8:29 AM
https://www.mooljisweets.tk/
ElizaJanuary 1, 2020 at 3:06 AM
Nice 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
UnknownFebruary 25, 2020 at 9:00 AM
find the mainbg.png here
https://technext.github.io/medisen/img/ability_img.png
thanks me later:)

happy coding:
yoyoMay 26, 2020 at 1:21 PM
Thanks 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
kunalJuly 14, 2020 at 8:49 AM
Hlw sir there is a problem in this website making I was unable to dwnload image from canvas logo like you
UnknownJuly 19, 2020 at 8:12 AM
where u take that image
UnknownJuly 26, 2020 at 8:44 PM
👍❤
UnknownAugust 19, 2020 at 4:51 AM
Awesome bro
wfixerSeptember 6, 2020 at 10:50 PM
Great 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
theportwebdesignSeptember 7, 2020 at 11:07 AM
Here 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.
First Image ConsultingSeptember 12, 2020 at 5:04 AM
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.
Website Development Miami
funnelboostmediaSeptember 14, 2020 at 5:28 AM
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.
San Antonio website design
Rozer BaineSeptember 14, 2020 at 11:26 PM
Decent Article! I loved your blog since what you said in your article is straightforward. Find out about website design seattle visit graticle.com
UnknownSeptember 21, 2020 at 9:06 AM
Sir 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..
Editting Hero September 30, 2020 at 9:55 PM
https://mega.nz/file/blZ2VbJS#C05RWrlfls-yDHFByw6tHYk3AECapIAUsqLEgUVpvAs

Full project

Is impressed subscribe my channel
https://www.youtube.com/channel/UCS0dCdgMiThpUl1reVovdMw
UnknownOctober 3, 2020 at 4:17 AM
give me the picture
First Image ConsultingOctober 19, 2020 at 1:28 AM
This 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
aaronssdNovember 3, 2020 at 11:32 PM
I 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
theportwebdesignNovember 9, 2020 at 2:25 PM
The information is really great and the article is well –researched and contains some best knowledge regarding it. Thanks for sharing it. Maine website Design
stephenhornyak.comNovember 17, 2020 at 5:30 AM
I 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.
dkNovember 21, 2020 at 2:00 AM
This 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