THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

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

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>

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

24 comments:

  1. Awesome sir...i want mainbg.png image for my use or you send me link form where i can download it.

    ReplyDelete
  2. Bhai thoda slow betaya ker kyo ki beginner

    ReplyDelete
  3. bro comment section kise add kiya ?

    ReplyDelete
  4. Sir can you please provide me with the manibg.png
    and thank sir your explanation is just outstanding .

    ReplyDelete
    Replies
    1. That's the main issue sir pls give the image

      Delete
  5. 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

    ReplyDelete
  6. find the mainbg.png here
    https://technext.github.io/medisen/img/ability_img.png
    thanks me later:)

    happy coding:

    ReplyDelete
  7. 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

    ReplyDelete
  8. Hlw sir there is a problem in this website making I was unable to dwnload image from canvas logo like you

    ReplyDelete
  9. 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

    ReplyDelete
  10. 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.

    ReplyDelete
  11. 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

    ReplyDelete
  12. 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

    ReplyDelete
  13. Decent Article! I loved your blog since what you said in your article is straightforward. Find out about website design seattle visit graticle.com

    ReplyDelete