HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="F.css">
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Webpage Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="navbar">
<div class="icon">
<h2 class="logo">techmaker</h2>
</div>
<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">DESIGN</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="search">
<input class="srch" type="search" name="" placeholder="Type To text">
<a href="#"> <button class="btn">Search</button></a>
</div>
</div>
<div class="content">
<h1>Web Design & <br><span>Development</span> <br>Course</h1>
<button class="cn"><a href="#">JOIN US</a></button>
<div class="form">
<h2>Login Here</h2>
<input type="email" name="email" placeholder="Enter Email Here">
<input type="password" name="" placeholder="Enter Password Here">
<button class="btnn"><a href="#">Login</a></button>
<p class="link">Don't have an account<br>
<a href="f2.html" >Sign up </a> here</a></p>
<p class="liw">Log in with</p>
<div class="icons">
<a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
<a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#"><ion-icon name="logo-google"></ion-icon></a>
<a href="#"><ion-icon name="logo-skype"></ion-icon></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.main{
width: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(1.jpg);
background-position: center;
background-size: cover;
height: 100vh;
}
.navbar{
width: 1200px;
height: 75px;
margin: auto;
}
.icon{
width: 200px;
float: left;
height: 70px;
}
.logo{
color: #ff7200;
font-size: 35px;
font-family: Arial;
padding-left: 20px;
float: left;
padding-top: 10px;
margin-top: 5px
}
.menu{
width: 400px;
float: left;
height: 70px;
}
ul{
float: left;
display: flex;
justify-content: center;
align-items: center;
}
ul li{
list-style: none;
margin-left: 62px;
margin-top: 27px;
font-size: 14px;
}
ul li a{
text-decoration: none;
color: #fff;
font-family: Arial;
font-weight: bold;
transition: 0.4s ease-in-out;
}
ul li a:hover{
color: #ff7200;
}
.search{
width: 330px;
float: left;
margin-left: 270px;
}
.srch{
font-family: 'Times New Roman';
width: 200px;
height: 40px;
background: transparent;
border: 1px solid #ff7200;
margin-top: 13px;
color: #fff;
border-right: none;
font-size: 16px;
float: left;
padding: 10px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.btn{
width: 100px;
height: 40px;
background: #ff7200;
border: 2px solid #ff7200;
margin-top: 13px;
color: #fff;
font-size: 15px;
border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
transition: 0.2s ease;
cursor: pointer;
}
.btn:hover{
color: #000;
}
.btn:focus{
outline: none;
}
.srch:focus{
outline: none;
}
.content{
width: 1200px;
height: auto;
margin: auto;
color: #fff;
position: relative;
}
.content .par{
padding-left: 20px;
padding-bottom: 25px;
font-family: Arial;
letter-spacing: 1.2px;
line-height: 30px;
}
.content h1{
font-family: 'Times New Roman';
font-size: 50px;
padding-left: 20px;
margin-top: 9%;
letter-spacing: 2px;
}
.content .cn{
width: 160px;
height: 40px;
background: #ff7200;
border: none;
margin-bottom: 10px;
margin-left: 20px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
transition: .4s ease;
}
.content .cn a{
text-decoration: none;
color: #f11717;
transition: .3s ease;
}
.cn:hover{
background-color: #fff;
}
.content span{
color: #baa898;
font-size: 65px
}
.form{
width: 250px;
height: 380px;
background: linear-gradient(to top, rgba(12, 11, 12, 0.8)50%,rgba(0,0,0,0.8)50%);
position: absolute;
top: -20px;
left: 450px;
transform: translate(0%,-5%);
border-radius: 75px;
padding: 25px;
}
.form h2{
width: 220px;
font-family: sans-serif;
text-align: center;
color: #d84d1f;
font-size: 22px;
background-color: #fff;
border-radius: 100px;
margin: 2px;
padding: 8px;
}
.form input{
width: 240px;
height: 35px;
background: transparent;
border-bottom: 1px solid #2aa8f1;
border-top: none;
border-right: none;
border-left: none;
color: #fff;
font-size: 15px;
letter-spacing: 1px;
margin-top: 30px;
font-family: sans-serif;
}
.form input:focus{
outline: none;
}
::placeholder{
color: #fff;
font-family: Arial;
}
.btnn{
width: 240px;
height: 40px;
background: #d276b0;
border: none;
margin-top: 30px;
font-size: 18px;
border-radius: 100px;
cursor: pointer;
color: #fff;
transition: 0.4s ease;
}
.btnn:hover{
background: #fff;
color: #ade51f0b;
}
.btnn a{
text-decoration: none;
color: #000;
font-weight: bold;
}
.form .link{
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
padding-top: 20px;
text-align: center;
}
.form .link a{
text-decoration: none;
color: #320fca;
}
.liw{
padding-top: 15px;
padding-bottom: 10px;
text-align: center;
}
.icons a{
text-decoration: none;
color: #fff;
}
.icons ion-icon{
color: #fff;
font-size: 30px;
padding-left: 14px;
padding-top: 5px;
transition: 0.3s ease;
}
.icons ion-icon:hover{
color: #383d2b;
}
Certainly! Here are some tips for working with HTML and CSS:
Use a CSS Reset: Include a CSS reset at the beginning of your stylesheet to normalize default styles across different browsers. This helps ensure consistent styling and avoid unexpected layout issues.
Keep it organized: Use proper indentation and comments to make your code more readable and maintainable. Organize your CSS stylesheets into sections or modules based on their functionality to improve code organization.
Responsive design: Design your websites to be responsive, meaning they adapt to different screen sizes and devices. Use media queries to apply different styles based on the viewport width, and consider using CSS frameworks like Bootstrap or Foundation to speed up the development process.
Semantic HTML: Use semantic HTML tags (e.g., <header>, <nav>, <section>, <article>, etc.) to provide meaning and structure to your content. This improves accessibility and makes your code easier to understand.
Avoid inline styles: Instead of applying styles directly to HTML elements using the style attribute, separate your CSS code into an external stylesheet. This promotes separation of concerns and makes it easier to manage and update your styles.
Use meaningful class and ID names: Choose descriptive class and ID names that reflect the purpose of the element or the content it represents. This improves code readability and makes it easier to understand and maintain your stylesheets.
Optimize images: Optimize images by compressing them without compromising quality. Large image files can slow down your website's loading time. Tools like ImageOptim or TinyPNG can help reduce file sizes.
Test on multiple browsers and devices: Ensure your website looks and functions correctly on different browsers (Chrome, Firefox, Safari, etc.) and devices (desktop, tablet, mobile). Use browser developer tools and online testing services to validate your designs and identify any compatibility issues.
Learn and use CSS preprocessors: Consider using CSS preprocessors like Sass or Less. They provide additional features such as variables, nesting, and mixins, which can help you write cleaner and more efficient CSS code.
Stay up-to-date: Keep up with the latest HTML and CSS standards and best practices. Follow reputable web development resources, blogs, and forums to stay informed about new techniques, trends, and browser updates.
Remember, practice is key to becoming proficient in HTML and CSS. Experiment, try new things, and continuously improve your skills.
9 Comments
Thank you bro
ReplyDeleteNice blog
ReplyDeleteThank you for front page design.
ReplyDeleteHiii🤣🤣
ReplyDeleteHi sanatani
ReplyDeleteHelp me ðŸ˜ðŸ˜
ReplyDeleteWhat can be done in the database 🤔🤔
ReplyDeleteHiiiii
ReplyDeletethank you
ReplyDelete