In this video, I'm going to show you how to create a website hero section design with HTML and CSS by jishaansinghal
Code Start:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to create a website hero section design with html and css by jishaansinghal</title>
</head>
<style>
body{
margin: 0;
padding: 0;
background: #000;
}
.wrapper{
background-image: linear-gradient(
rgba(0,0,0,0.2),
rgba(0,0,0,0.2)
), url(12.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
}
.main_header{
padding: 20px;
display: flex;
justify-content: space-between;
color: #fff;
font-size: 30px;
}
.logo,.close{
background: #000;
height: 40px;
width: 40px;
border-radius: 50%;
text-align: center;
line-height: 40px;
user-select: none;
cursor: pointer;
}
h1{
text-align: center;
position: absolute;
bottom: 0%;
left: 50%;
transform: translate(-50%);
color: #fff;
font-weight: bold;
font-size: 70px;
}
h1::selection{
background: #000;
}
</style>
<body>
<header>
<div class="wrapper">
<div class="main_header">
<div class="logo">G</div>
<div class="close">✖</div>
</div>
<div class="secondary_header">
<h1>A week in Sydney</h1>
</div>
</div>
</header>
</body>
</html>
Code End
keywords:
web design, web development, css, html, web design bangla, squarespace, bangla tutorial, ui design, ux, design trends, html website, free bangla tutorial, web design tutorial for beginners, web design bangla tutorial full, ওয়েব ডিজাইন টিউটোরিয়াল, বেসিক ওয়েব ডিজাইন, ফ্রিল্যান্সিং, আউটসোর্সিং, how to learn web design, web design photoshop, responsive web design bangla tutorial, web design courses, web development tutorials for beginners, html tutorial, make a squarespace website, create a website, create a squarespace website, squarespace tutorial, squarespace website, responsive web design, website, ux design, digital trends, user interface design, web design inspiration, christmas, css tutorial, how to use squarespace, squarespace tutorial for beginners, squarespace for beginners, html and css, how to make website, computer engineering, web design tutorial, html and css website design, ui, 2018, basic web design tutorial, html css bangla tutorial, বাংলা ভাষায় ওয়েব ডিজাইন, bangla tutorial on html, html css in bangla, most, popular, web, sites, interner, world, visits, monthly, visitors, pageviews, traffic, websites, website development, ecommerce website, squarespace tutorials, squarespace summit, how to create a squarespace website, build a websites, build a squarespace website, squarespace customization, squarespace help, squarespace popups, squarespace mailchimp, squarespace mailchimp popup, basic web design, web design (interest), graphic design tutorial, freelancing tutorial, how to make a website, make a website, wordpress, wordpress tutorial, wordpress website, how to make a wordpress website, how to create a website, wordpress tutorial for beginners, how to make a website using wordpress, web hosting, how to build a website, india, domain, wordpress basics, websitelearners, wordpress blog, trends, graphic designer, ui ux, ui ux design, web developer, web designer, user experience, web design business, digital design, web flow, web design 2021, ui/ux, website ui design, user interface, 2021 trends, web design trends 2021, web design trends, ui/ux design, uiux, design trends 2021, website trends 2020, javascript, christmas website, xmas, christmas web design, christmas css button, christmas css effect, christmas website effect, christmas website animation, snow background, christmas website background, christmas web design animation, cool web design ideas, 3d, business degrees, business management, what can you do with a business management degree, print phase, entrepreneurship, management, businesss management, business management course, managing a business, grow business, business strategy, increase sales, business growth, business tips, successful business, how to be successful in business, basics of business management, what businesses should do, the basics of business management, james sinclair, small business, business, website building tutorial, squarespace make a website, build a website, how i make websites, is squarespace worth it, best website builder, square space, square space tutorial, square website tutorial, how to use squarespace website creator, how to build a squarespace website, squarespace 2021, how to build a squarespace website 2021, easy tutorials, front end design, visual arts, html tutorials, css tutorials, how to create website, technology, education, engineering, programming, coding, #goingremote, squarespace version 7.1, how to create your own website with squarespace, squarespace 7.1, squarespace 7.1 training, how to use squarespace 7.1, get started with squarespace, create your own website, squarespace 7.1 tutorial, beginner squarespace 7.1 tutorial, create a website for your business, how to get started with squarespace, how to setup squarespace, what is web design, ওয়েব ডিজাইন, ওয়েব ডিজাইন কি?, why learn web design, web design bangla tutorial, kanak, md. kamruzzaman, md. kamruzzaman kanak, kanaktheboss, web design and development, কি এবং কেন, ওয়েব ডিজাইন কেন শিখবো, sohag360, sohag360 (bengali), become a graphic designer 2020, freelance web designer, graphic designer job, ran segall, web design business 2020, web design freelance, web design freelancer, web designer career, web design 2020, web design inspiration 2020, flux academy, top 5 websites every graphic designer should visit, top 5 websites every web designer should visit, best online graphic design websites, best websites to learn graphic design, web design best practices 2020, bangla business tips, bengali business tips, warren buffett, warren buffet, business lesson from warren buffett, business ideas, small business ideas, bangla motivational video, bangla business motivation, bengali business motivation, life solution, life solution channel, how to make parallax scrolling website, javascript parallax effect, javascript parallax effects, javascrpt parallax website, parallax scrolling website using html css javascript, how to create a parallax scrolling effect, simple parallax website, javascript parallax website, websites parallax scrolling, simple parallax scrolling effect, create a parallax scrolling website javascript, parallax scrolling tutorial, parallax web design, parallax website html css, websites for students, top 5 websites for students, top 10 secret websites for students, best websites for students, best websites for job, best websites for knowledge, amazing websites for intern, free downloads, download, books, technicalsky, html css website design, make website using html and css, craete website using html and css, complete website design, full website design, make resonsive website, responsive website design, learning, computer science, html coding, design trends 2022, ui design trends, ux design trends, new design trends, ux trends, ui trends, user experience trends, user interface trends, uxd, uxui, ux/ui, user experience design, user experience designer, user interface designer, digital design trends, design tutorial, photoshop, illustrator, adobe premiere, 3d illustration, app design, landing page tutorial, squarespace blogging tutorial for begginers., how to customize your squarespace blog page, squarespace blog, blogging tips squarespace, squarespace blog design, how to blog with squarespace, squarespace blog customization, how to start a squarespace blog, squarespace for bloggers, blogging tips, squarespace blog post template, squarespace blogger, guide to blogging in squarespace, paige brunton, complete website using html css and javascript, complete website using html and css, complete website in html and css, responsive website using html and css, responsive website html css, html css complete website, complete responsive website using html css, website from scratch, html css website design tutorial, responsive website using htm5 css3, html css responsive website, html css website, responsive website, html and css full website in hindi, html css website hindi, website html css hindi, html css website tutorial in hindi, create a website using html and css in hindi, animated website in hindi, create animated website using html css hindi, animated website html css, animated website design in hindi, html5 css3 website in hindi, website using html5 css3 hindi, animated html5 css3 website, html5 website, css3 website, html5 in hindi, css3, html5, website code hindi, howtomakeballoonflower, floralballoon, diyballoonflower, balloontutorial, diy crafts, home decore, diy woolen flowers, diy woolen crafts, easy woolen flowers making, woolen flowers how to make, woolen flower tutorial, woolen handmade flower, diy stitching, embroidery hacks and tricks, sewing hacks and tricks, easy embroidery, how to make easy flowers, handmade flowers, easy flower craft ideas, rose flower diy, rose flower, how tomake ballon flower, flower for fooldani, finance girl, how to make money online, earn money online, make money online, money, make money, earn money from home, finance tips, best ways to make money, easiest ways to earn money, online income, finance, earn money from google, google money, google sites that pay you, get paid from google sites, earn money from google sites, learn web design, learn ux, learn ui, ui tutorial, ux tutorial, dev ed, developedbyed, coderstrust bangladesh, freelance jobs, freelancer, upwork, fiverr, self employed, freelancing training in bangladesh, graphic design, digital marketing, outsourcing, responsive webdesign row code, bootstrap, testing debugging, responsivemediaquery, freelancing, responsive web design tutorial, responsive web design tutorial bangla, work from home jobs, responsive web bangla
Comments
Post a Comment