Table of contents
- In this part after html we gonna learn CSS and Bootstrap.
- CSS
- B> so we can write css in 3 palces :→
- file structure for understanding the docs.
- c> let's design a SignUp page :->
- and nextly we deploy it on vercel and make it live that we can see that here is the link:→
- d>here we will get over all idea of selecting the the element:→
- e> box model in CSS:->
- f> design all type of nav bar (three type of nav bar)
- In this section at first try and then read the code :→
- And in which section you can’t understand the code go to “Mdn” website to ubderstand better.
- so, now I have deployed these 3 navbar and deployed it in vercel too.:→ (all 3 navbar :-> click on this to see) .
- here we learnt about many new things like:->
- 14>display:block :→ make the elemnt block level element and these thing is same for display:inline & display:none
- it’s nothing but the boilerplate code for using the ::after( )
- or read documentation for more details.(MDN)
- g>In part of css we will make a custom coming soon page :→
- And here is the deployed link :→ here is the deployed link click here!
- h>Master class on flex-box and we have not tried the coding part in this section. We will see it in the project section
- i> here we start about notes and Grid :→
- here is the code part
- -by Ayush (Full Stack dev.)
- web project to make :→
- the solution will be given in the nest part
- Here we will see the coding part of the css project with boot-strap :→
- Here is the deployed link :→ Click Me to see the Web-Page
- here the output and make it responsive too.
- In this section of we will see missing section of CSS and more over understand the bit and peices of ui devlopment .
- Take care of these things will be benifical.
- Conclusion :→
Description:
Unlock the power of CSS to create visually stunning websites. This guide covers everything from basic styling, layouts, and responsive design to advanced techniques like animations and grid systems. Perfect for beginners and web developers looking to enhance their design skills.
In this part after html we gonna learn CSS and Bootstrap.
CSS
a>overview of modern CSS:->
1> cascading style sheet
2> we only have to know about the basics of CSS and learn along the way
3>CSS libary:->
a>bootstrap
b>meteralize CSS
c>tailwind CSS
d>tailwind ui
e>shadcn ui
f>acetertinity ui
g>magic ui
h>daisy ui
i>mui
j>ant design
k>flow bite
B> so we can write css in 3 palces :→
a>there 3 palces are:->
1>in the html body part
2>in there part of html
3>in the separate file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3 pace css</title>
<style>
.sample {
background-color: black;
}
</style>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="sample" style="color: aquamarine">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio
ratione facilis, ducimus quia laborum doloribus et quaerat, debitis id
aperiam consectetur unde architecto nobis quasi? Libero soluta aliquid
facilis nam! Quos voluptatum sequi nemo commodi suscipit perspiciatis
mollitia quae qui fugit modi est natus, explicabo quisquam doloribus
doloremque, ipsa labore sint corporis aliquam laborum minima incidunt
magnam veritatis iste? Quam?
</div>
</body>
</html>
.sample{
font-size: larger;
}
file structure for understanding the docs.
b> there chole CSS is consist of 2 thing :→
1>selecting the element.
2>styling the element.
c> let's design a SignUp page :->
then we will learn about CSS styling and all this will give us enough confidence to go ahead. so let's built it with html and CSS.We will build signup page together. and to learn it what term you don’t understand just go to w3 school and learn about that and follow along or leave this part and do it after learning these thing but it is highly recomended to try this at first.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>login</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
/* note:->
by . we will select the class
and with # we will select the id
*/
background-color: aliceblue;
border-radius: 8px;
padding: 30px;
width: 300px;
}
h2 {
color: rgb(35, 92, 176);
text-align: center;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
}
input {
margin-bottom: 15px;
padding: 10px;
border-radius: 5px;
background-color: aliceblue;
}
button {
padding: 10px;
border-radius: 8px;
background-color: rgb(35, 92, 176);
color: white;
}
button:hover {
background-color: red;
}
</style>
</head>
<body>
<div class="card">
<h2>SignUp</h2>
<form>
<input type="text" placeholder="Name" /><input
type="email"
name=""
id=""
placeholder="E-mail"
/>
<input type="password" name="" id="" placeholder="password" />
<button>SignUp</button>
<div class="copyriright"
style="
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
"
>
by © ayushBatman
</div>
</form>
</div>
</body>
</html>
and nextly we deploy it on vercel and make it live that we can see that here is the link:→
https://sign-up-ui-ten.vercel.app/
d>here we will get over all idea of selecting the the element:→
Preresquite:->
1>Dom-> document object model --> tree structure --> that's how browser render html css . It's also in JavaScript.
2>in main div there are child only and incidance
3>main div named as parent and same child are
css selector are:-> 1>universal css selector →*{ }
2>tag selector :→ p{ }
3>class selector:—> .header{}
4>id selector :—>#header{ }
5> attribute selector:—> input[type="text"]{ }
adv selector (not much needed except pseudo class selector)
6>desander selector :→ div p{ }
7>child selector :→ div > p{ }
8> pseudo class selector a:hover{}
est there are 3 more selector they are not that imp so that I don't add them.
All of these practical we will see in the project or mini-project section
e> box model in CSS:->
1>padding = give more space
2>margin= gap between two element
3>border = size how(solid/dotted) color
4>border-radius = make the border rounded
f> design all type of nav bar (three type of nav bar)
In this section at first try and then read the code :→
And in which section you can’t understand the code go to “Mdn” website to ubderstand better.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>All Types of Navbar</title>
<style>
* {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
sans-serif;
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
}
header {
padding: 10px;
background-color: #f0f0f0;
}
.navbar h2 {
color: rgb(255, 0, 0);
}
.nav-1 ul {
display: flex;
justify-content: space-around;
align-items: center;
}
.nav-1 a {
color: rgb(0, 109, 204);
position: relative;
}
nav button {
color: aliceblue;
background-color: rgba(39, 22, 234, 0.751);
padding: 7px 15px;
margin-left: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
nav button:hover {
background-color: rgb(0, 0, 0);
color: rgba(246, 246, 246, 0.751);
}
.nav-1 a::after {
content: "";
height: 2px;
width: 100%;
background-color: blue;
position: absolute;
bottom: 0;
left: 0;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
}
.nav-1 a:hover::after {
transform: scaleX(1);
}
/* Media query for mobile responsiveness */
@media (max-width: 600px) {
nav ul {
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
nav li {
margin-bottom: 0.75rem;
}
}
.nav-2 {
background-color: rgb(64, 61, 61);
display: block;
width: 100%;
}
.nav-2 li {
margin: 10px;
padding: 5px;
}
.nav-2 a {
color: #f0f0f0;
width: 100%;
}
.nav-2 a:hover {
background-color: #000000;
}
.nav-2 li:hover {
background-color: blue;
}
.nav-3 {
margin: 0;
padding: 0;
background-color: rgb(0, 174, 255);
}
.nav-3 ul {
display: flex;
justify-content: space-around;
align-items: center;
}
.nav-3 li {
margin: 10px;
padding: 10px;
}
.nav-3 a {
color: #f0f0f0;
display: block;
margin: 5px;
padding: 5px;
}
.nav-3 .drp-content {
display: none;
}
.nav-3 .drp {
position: relative;
}
.nav-3 .drp:hover .drp-content {
display: block;
position: absolute;
background-color: blueviolet;
padding: 2.5px;
margin: 5px;
border-radius: 10px;
}
.nav-3 .drp-content a {
color: rgb(253, 248, 248);
}
.nav-3 .drp-content a:hover {
background-color: gray;
border-radius: 5px;
}
</style>
</head>
<body>
<header class="navbar">
<h2>Variation-1: Nav1</h2>
<nav class="nav-1" style="margin-bottom: 20px">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact-me">Contact</a></li>
<button>Sign Up</button>
</ul>
</nav>
<hr />
<nav class="nav-2" style="margin: 15px">
<h2>Variation-2:navbar-2(like "X")</h2>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#aboutus">About us</a></li>
<li><a href="#contact">Contact</a></li>
<button>Sign Up</button>
</ul>
</nav>
<hr />
<nav class="nav-3" style="margin: 10px">
<h2>Variation-3:navbar3</h2>
<ul>
<li><a href="#Home">Home</a></li>
<li class="drp">
<a href="#About"
>About
<div class="drp-content">
<a href="#batman">Batman</a>
<a href="#lucifer">Lucifer</a>
<a href="flirter">Flirter</a>
</div>
</a>
</li>
<li><a href="#Contact">Contact</a></li>
<li><button>Sign Up</button></li>
</ul>
</nav>
</header>
<h3
style="
color: #1daf7c;
justify-content: center;
display: flex;
align-items: end;
"
>
© by Ayush_the_BATMaN
</h3>
</body>
</html>
so, now I have deployed these 3 navbar and deployed it in vercel too.:→ (all 3 navbar :-> click on this to see) .
here we learnt about many new things like:->
1> use of semantic element (header and nav)
2> text-decoration -none 3> list-style-type -none
4> position: relative and position: absolute
5> position absolute = actually extract the elements from the DOM and instert it again in different psotion (nav1 and nav3) IN nav-1
6>scale-x(0)= doesnot show anything
7>scale(1)= show at x axis
8>where position relative is used position absolute is must be used 9>transition and transformation
10>In transition we use "transformation"
11> transition:→ a> (back-ground/transformation) b>time(0.3s) c>type(ease in-ease out)
12>rest of the things we will learn on the go.
13>::after{
content: “ “
height: ( control the size of the dash:→{“ “) )
width:
position : absolute( take out it from the dom )
transformation:(initial) transition: transformation 0.3s ease-in-ease-out }
14>display:block :→ make the elemnt block level element and these thing is same for display:inline & display:none
15> flex direction and many-more
it’s nothing but the boilerplate code for using the ::after( )
or read documentation for more details.(MDN)
g>In part of css we will make a custom coming soon page :→
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coming Soon Page</title>
<style>
/* Reset margin and padding */
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* Ensure the html and body take full height */
html, body {
height: 100%; /* Makes the body take the full height of the viewport */
}
/* Apply the background gradient to the body */
body {
background: linear-gradient(135deg, #8a2be2, #4169e1);
display: flex;
justify-content: center;
align-items: center;
max-height: 100vh;
min-height: 100vh;
}
.card {
background-color: aliceblue;
padding: 20px;
text-align: center;
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 350px;
/* Allow card to scale down on smaller screens */
max-width: 100%;
}
img {
height: auto;
width: 100px;
margin-bottom: 20px;
}
input[type="email"], input[type="text"] {
width: 100%;
padding: 8px;
margin: 10px 0;
border: 0.9px solid #ccc;
border-radius: 5px;
font-size: 1rem;
}
button {
color: #8a2be2;
width: 100%; /* Make button take full width on smaller screens */
padding: 12px;
margin: 6px;
border-radius: 5px;
border: none;
background-color: #8a2be2;
color: white;
transition: background-color 0.3s ease-in-out;
}
button:hover {
background-color: #4169e1;
}
/* Media Queries for Responsiveness */
@media (max-width: 768px) {
.card {
width: 90%; /* Ensure the card width doesn't exceed 90% of screen width */
padding: 15px; /* Reduce padding on smaller screens */
}
img {
width: 80px; /* Make the image smaller on smaller screens */
}
input[type="email"], input[type="text"] {
padding: 5px;
}
button {
padding: 10px; /* Make the button more compact */
}
}
@media (max-width: 480px) {
.card {
width: 100%; /* Ensure card width is 100% on extremely small screens */
padding: 10px;
}
img {
width: 70px; /* Further reduce image size on very small screens */
}
input[type="email"], input[type="text"] {
font-size: 0.8rem; /* Slightly smaller font size */
}
button {
padding: 10px 15px; /* Adjust button padding */
}
}
</style>
</head>
<body>
<div class="card">
<form action="#home">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToQMQh6H7Kl5rY8vvMsZrStEIFEi_tdek1BA&s" alt="Batman">
<h3>BATMaN is tired! Type your message here</h3>
<input type="email" placeholder="Enter your email">
<input type="text" placeholder="Enter your message">
<button type="submit">Send</button>
</form>
<h3>© by Ayush_the_BATMaN420</h3>
</div>
</body>
</html>
And here is the deployed link :→ here is the deployed link click here!
h>Master class on flex-box and we have not tried the coding part in this section. We will see it in the project section
here are notes flex box :→
flexbox masterclass:->
1>main access( l to r )
2>other access (t to b)
3>default flex (make l to r that is row)
4>space-between= space in between
5>align=t to b
6>wrap make use the space don't change
5 imp thing in flexbox are:->
1>default flex(row)
2>flex-d:-> column
3>space-between
4>align-items=center ( top to bottom)
5>flex-warp
i> here we start about notes and Grid :→
here is their notes:→
grid-masterclass-intro
1> there is gtc and gtr in grid
2> gtc control the left to right
3> gtr control the top to bottom width
4> gtr and gtc has repeat(no of time it will repeat(col/row) and the there is mount)
5>no of column= is ( 1st argument*2nd argument)
6>to use grid column and grid row the main parent must be in (display:-> grid)
7>grid-coloumn=1/3( 1 to 3 not exact 3 means 1 to 2)
here gtc and gtr means grid-template-coloumn and row
here is the code part
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid-basic-intro</title>
<style>
* {
padding: 0;
margin: 0;
text-align: center;
}
.grid-container {
background: red;
color: white;
border: 1px solid white;
display: grid;
}
.content {
display: grid;
/* grid-template-columns: 1fr 2fr 1fr; */
/* no of coloumn is ( 1st argument*2nd argument) */
/*repert(no of column and next number give fraction) */
grid-template-columns: repeat(3,1fr 2fr 1fr);
/* row to to left to right and coloumn go top to bottom */
gap: 5px;
}
.item-1{
/* grid-column: 1/3;
grid-row: 1/3; */
}
.item-1,
.item-2,
.item-3,
.item-4,
.item-5,
.item-6,
.item-7,
.item-8,
.item-9
{
border: 2px solid wheat;
}
/* .item-2{
border: 2px solid white;
} */
/* .item-3{
border: 2px solid white;
}
.item-4{
border: 2px solid white;
} */
</style>
</head>
<body>
<div class="grid-container">
<div class="content">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
</div>
</body>
</html>
here is the output :→
-by Ayush (Full Stack dev.)
CSS Project to learn about CSS try it:→
web project to make :→
the solution will be given in the nest part
we will be write it with the help of “BOOT-STRAP” and basic CSS.
Here we will see the coding part of the css project with boot-strap :→
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css-project</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<style>
* {
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
.carausol {
margin-top: 5px;
margin-left: 3px;
margin-right: 5px;
border: 2px solid black;
padding: 5px;
}
.carousel-item {
height: 75vh;
}
.card-group {
display: flex;
flex-wrap: wrap;
padding: 5px;
margin: 5px;
}
@media (max-width: 576px) {
.carousel-item {
height: 50%;
}
.card-group {
margin-top: 10px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: rgba(0, 0, 0, 0.5);
}
.buttonab {
display: none;
}
}
</style>
</head>
<body>
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<a
href="https://www.linkedin.com/in/ayush-basak1/"
target="_blank"
rel="noopener noreferrer"
>
<img
src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg?auto=compress&cs=tinysrgb&w=600"
class="d-block w-100"
alt="..."
style="object-fit: cover"
/>
</a>
<div class="carousel-caption top-0 mt-4" id="1st-c">
<p class="mt-4 fs-4 fw-bold">World Tour and Cherish every moment</p>
<h1
class="mb-5 fs-8 text-uppercase display-1 fw-bolder"
>
Ayush Travels
</h1>
<a
href="https://www.linkedin.com/in/ayush-basak1/"
target="_blank"
type="button"
class="btn btn-light mb-5 px-4 py-2 fw-bold fs-4"
style="color: darkblue"
>Let's Go</a
>
</div>
</div>
<div class="carousel-item">
<img
src="https://images.pexels.com/photos/416920/pexels-photo-416920.jpeg?auto=compress&cs=tinysrgb&w=600"
class="d-block w-100"
alt="..."
style="object-fit: cover"
/>
<div class="carousel-caption top-0 mt-4">
<p class="mt-4 fs-4 fw-bold" style="color: rgb(255, 219, 176)">
let's catch up on Instagram
</p>
<h1 class="mb-5 fs-8 text-uppercase display-1 fw-bolder">
Ayush Travels
</h1>
<a
href="https://www.instagram.com/unknownn692/profilecard/?igsh=ajI1YmI1NzhicTl0"
target="_blank"
type="button"
class="btn btn-light mb-4 px-4 py-2 fw-bold fs-4 buttonab"
style="color: darkblue"
>Let's Talk!</a
>
</div>
</div>
<div class="carousel-item">
<img
src="https://images.pexels.com/photos/206359/pexels-photo-206359.jpeg?auto=compress&cs=tinysrgb&w=600"
class="d-block w-100"
alt="..."
style="object-fit: cover"
/>
<div class="carousel-caption top-0 mt-4">
<p class="mt-4 fs-4 fw-bold">Let's Go For A thriling Journey</p>
<h1
class="mb-5 fs-8 text-uppercase display-1 fw-bolder"
style="display: flex; justify-self: center; align-self: center"
>
Ayush Travels
</h1>
<a
href="https://www.linkedin.com/in/ayush-basak1/"
target="_blank"
type="button"
class="btn btn-light mb-5 px-4 py-2 fw-bold fs-4"
style="color: darkblue"
>Let's Go</a
>
</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExample"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExample"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div
class="card-group"
style="
margin-top: 10px;
gap: 10px;
"
>
<div
class="card"
style="padding: 5px; border: 2px solid gray; box-shadow: 1px 2px"
>
<img
src="https://images.pexels.com/photos/933054/pexels-photo-933054.jpeg?auto=compress&cs=tinysrgb&w=600"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h4 class="card-title">Himachal</h4>
<p class="card-text">
Himachal Pradesh is a scenic Himalayan state in northern India,
known for its lush landscapes, temples, trekking, and culture.
</p>
<a
href="https://www.instagram.com/unknownn692/profilecard/?igsh=ajI1YmI1NzhicTl0"
target="_blank"
class="btn btn-primary"
style="padding: 10"
>Click Me to see it on YT</a
>
</div>
</div>
<div
class="card"
style="padding: 5px; border: 2px solid gray; box-shadow: 1px 2px"
>
<img
src="https://images.pexels.com/photos/724712/pexels-photo-724712.jpeg?auto=compress&cs=tinysrgb&w=600"
target="_blank"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Ire-Land</h5>
<p class="card-text">
Ireland is a beautiful island with lush landscapes, rich history,
vibrant culture, ancient castles, and welcoming people.
</p>
<a
href="https://www.instagram.com/p/C_41PbvyBRp/?igsh=MWQyODhpMTlueGt0aw=="
target="_blank"
class="btn btn-primary"
style="padding: 10"
>Click Me to see it on YT</a
>
</div>
</div>
<div
class="card"
style="padding: 5px; border: 2px solid gray; box-shadow: 1px 2px 3px"
>
<img
src="https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?auto=compress&cs=tinysrgb&w=600"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Khasmir</h5>
<p class="card-text">
Kashmir, known for its breathtaking landscapes, snow-capped
mountains, Dal Lake, rich culture, and beautiful gardens, is often
called paradise.
</p>
<a
href="https://www.instagram.com/p/C_40w6cyY-p/?igsh=MWgzNnQxcHRnZ2k2ag=="
target="_blank"
class="btn btn-primary"
style="padding: 10"
>Click Me to see it on YT</a
>
</div>
</div>
</div>
<h1
style="
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
"
>
© By Ayush(full stack dev)
</h1>
</body>
</html>
Here is the deployed link :→ Click Me to see the Web-Page
here the output and make it responsive too.
In this section of we will see missing section of CSS and more over understand the bit and peices of ui devlopment .
Take care of these things will be benifical.
1>to make button center we can just use full width and it can be in centre.
2> how to make "cards" in the CSS part ?
"bg-gray-700 px-8 py-6 rounded-md shadow-lg w-full max-w-md sm:px-10 sm:py-8 md:max-w-lg"
// make the card
3> how to design the responsive design for the mobile screen ?
bg-gray-700 px-8 py-6 rounded-md shadow-lg w-full max-w-md sm:px-10 sm:py-8 md:max-w-lg"
4> how to design equal and non-equal part of design?
ui part:→
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./output.css" rel="stylesheet" />
<title>Login</title>
</head>
<body class="bg-gray-900 flex justify-center items-center min-h-screen">
<div class="bg-gray-700 px-8 py-6 rounded-md shadow-lg w-full max-w-md sm:px-10 sm:py-8 md:max-w-lg">
<h2 class="text-red-300 text-3xl text-center mb-4 font-bold mt-4">Login</h2>
<form>
<div class="email mb-4">
<label for="email">
<span class="block text-red-400 text-2xl font-medium mb-2">Email:</span>
<input
class="bg-black text-white p-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-lime-400 w-full"
type="email"
id="email"
placeholder="Enter your email"
/>
</label>
</div>
<div class="password mb-4">
<label for="password">
<span class="block text-red-400 text-2xl font-medium mb-2">Password:</span>
<input
class="bg-black text-white p-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-lime-400 w-full"
type="password"
id="password"
placeholder="Enter your password"
/>
</label>
</div>
<button
class="bg-blue-500 w-full text-white text-xl mt-4 px-4 py-2 rounded-lg font-medium hover:bg-blue-700 mb-2 shadow-2xl"
type="submit"
>
Login
</button>
</form>
<h3 class="text-white text-center mt-4 font-semibold">© by ayush_the_batman</h3>
</div>
</body>
</html>
Here's a summary for your CSS blog:
Conclusion :→
This blog serves as a comprehensive starting point for anyone venturing into the world of web design with CSS. We covered the foundational concepts of CSS, from selectors and properties to layout techniques, ensuring you have the building blocks for creating visually appealing web pages. With the basics of frameworks like Bootstrap and Tailwind CSS, you are now equipped to leverage pre-built components and utility classes for rapid development.
Whether you're designing from scratch or enhancing existing projects, this guide sets the stage for your journey toward mastering CSS. Practice consistently, explore the endless possibilities, and watch your designs come to life!