|
<title>HTML CSS 소스 B</title>
https://www.tutorjoes.in/bootcamp/single_in_html_css_in_tamil
index_html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Day-8 | Single Page Design</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="home">
<header>
<a href="#"><img src="images/logo.png" alt=""></a>
<ul id="menu">
<li><a href="#home">Home</a></li>
<li class="center"><a href="#service">Service</a></li>
<li class="up"><a href="#price">Pricing</a></li>
<li class="right"><a href="#product">Products</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="search">
<input type="text" id="txtSearch" placeholder="Search Text Here">
<img src="images/search.png">
</div>
</header>
<div class="home-box">
<div class="banner">
<h1><span>Tutor Joes</span> Software Solution</h1>
<p>Learn More Be Smart</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.<br>Accusamus dignissimos incidunt repudiandae praesentium quasi eligendi?
<a href="#">Read Mode</a>
</p>
</div>
<div class="login">
<h3>User Login</h3>
<form action="#">
<div class="form-group">
<label>User Name</label>
<input type="text" placeholder="User Name">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="Password">
</div>
<button>Login</button>
</form>
</div>
</div>
</section>
<section id="service">
<h2>Our Services</h2>
<p>We offer the best web development solutions. </p>
<div class="card">
<div class="card-box">
<div class="img img1">
<img src="images/design.png" alt="">
</div>
<div class="content">
<h3>Ui Design</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, commodi ullam culpa suscipit deserunt temporibus.</p>
</div>
</div>
<div class="card-box">
<div class="img img2">
<img src="images/laptop.png" alt="">
</div>
<div class="content">
<h3>Web Dev</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, commodi ullam culpa suscipit deserunt temporibus.</p>
</div>
</div>
<div class="card-box">
<div class="img img3">
<img src="images/mobile.png" alt="">
</div>
<div class="content">
<h3>Mobile Apps</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, commodi ullam culpa suscipit deserunt temporibus.</p>
</div>
</div>
<div class="card-box">
<div class="img img4">
<img src="images/cloud.png" alt="">
</div>
<div class="content">
<h3>Seo</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, commodi ullam culpa suscipit deserunt temporibus.</p>
</div>
</div>
</div>
</section>
<section id="price">
<h2>Plans & Pricing</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis dicta alias <u>assumenda harum</u> doloribus voluptatum a ad similique possimus nihil?</p>
<div class="box-holder">
<div class="box">
<div class="box-title b1">
<h5>Hatchling Plan</h5>
<h3>$29</h3>
<p>Per Month</p>
</div>
<div class="box-content">
<ul>
<li class="tick">Unlimited Support</li>
<li class="tick">5 GB Server Space</li>
<li class="tick">2 Users Per Project</li>
<li class="wrong">Email Intergration</li>
<li class="wrong">Unlimited Download</li>
</ul>
<a href="#">Choose Plan</a>
</div>
</div>
<div class="box">
<div class="box-title b2">
<h5>Baby Plan</h5>
<h3>$48</h3>
<p>Per Month</p>
</div>
<div class="box-content">
<ul>
<li class="tick">Unlimited Support</li>
<li class="tick">5 GB Server Space</li>
<li class="tick">2 Users Per Project</li>
<li class="tick">Email Intergration</li>
<li class="wrong">Unlimited Download</li>
</ul>
<a href="#">Choose Plan</a>
</div>
</div>
<div class="box">
<div class="box-title b3">
<h5>Business Plan</h5>
<h3>$99</h3>
<p>Per Month</p>
</div>
<div class="box-content">
<ul>
<li class="tick">Unlimited Support</li>
<li class="tick">5 GB Server Space</li>
<li class="tick">2 Users Per Project</li>
<li class="tick">Email Intergration</li>
<li class="tick">Unlimited Download</li>
</ul>
<a href="#">Choose Plan</a>
</div>
</div>
</div>
</section>
<section id="product">
<div class="product-img">
<img src="images/product.jpg" alt="">
</div>
<div class="details">
<span>Headphones</span>
<h3>Beats EP</h3>
<p class="des">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque architecto porro unde maxime delectus veniam deserunt sunt saepe ducimus culpa?. Atque architecto porro unde maxime delectus veniam deserunt sunt saepe ducimus </p>
<p>Color</p>
<div class="color-box">
<div class="color c1">✓</div>
<div class="color c2"></div>
<div class="color c3"></div>
</div>
<p>Cable Configuration</p>
<div class="button-box">
<button>Straight</button>
<button>Coiled</button>
<button>Long-coiled</button>
</div>
<p>How to configurate your headphones</p>
<span class="price">148$</span>
<a href="#" class="btnCart"> Add to cart</a>
</div>
</section>
<section id="contact">
<div class="contact-box">
<h2>Contact Form</h2>
<form action="">
<table>
<tr>
<td><label for="">Your Name</label></td>
<td><input type="text" placeholder="Your Name"></td>
</tr>
<tr>
<td><label for="">Your Email</label></td>
<td><input type="email" placeholder="Your Email"></td>
</tr>
<tr>
<td><label for="">Email Subject</label></td>
<td><input type="text" placeholder="Your Name"></td>
</tr>
<tr>
<td><label for="">1+1=</label></td>
<td><input type="text" placeholder="Your Name"></td>
</tr>
<tr class="txtArea">
<td colspan="2"><!DOCTYPE html>
<html lang="en">
<head>
<title>Day-8 | Single Page Design</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="home">
<header>
<a href="#"><img src="images/logo.png" alt=""></a>
<ul id="menu">
<li><a href="#home">Home</a></li>
<li class="center"><a href="#service">Service</a></li>
<li class="up"><a href="#price">Pricing</a></li>
<li class="right"><a href="#product">Products</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="search">
<input type="text" id="txtSearch" placeholder="Search Text Here">
<img src="images/search.png">
</div>
</header>
<div class="home-box">
<div class="banner">
<h1><span>Tutor Joes</span> Software Solution</h1>
<p>Learn More Be Smart</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.<br>Accusamus dignissimos incidunt repudiandae praesentium quasi eligendi?
<a href="#">Read Mode</a>
</p>
</div>
<div class="login">
<h3>User Login</h3>
<form action="#">
<div class="form-group">
<label>User Name</label>
<input type="text" placeholder="User Name">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="Password">
</div>
<button>Login</button>
</form>
</div>
</div>
</section>
<section id="service">
<h2>Our Services</h2>
<p>We offer the best web development solutions. </p>
<div class="card">
<div class="card-box">
<div class="img img1">
<img src="images/design.png" alt="">
</div>
<div class="content">
<h3>Ui Design</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, commodi ullam culpa suscipit deserunt temporibus.</p>
</div>
</div>
<div class="card-box">
<div class="img img2">
<img src="images/laptop.png" alt="">
</div>
<div class="content">
<h3>Web Dev</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, commodi ullam culpa suscipit deserunt temporibus.</p>
</div>
</div>
<div class="card-box">
<div class="img img3">
<img src="images/mobile.png" alt="">
</div>
<div class="content">
<h3>Mobile Apps</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, commodi ullam culpa suscipit deserunt temporibus.</p>
</div>
</div>
<div class="card-box">
<div class="img img4">
<img src="images/cloud.png" alt="">
</div>
<div class="content">
<h3>Seo</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, commodi ullam culpa suscipit deserunt temporibus.</p>
</div>
</div>
</div>
</section>
<section id="price">
<h2>Plans & Pricing</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis dicta alias <u>assumenda harum</u> doloribus voluptatum a ad similique possimus nihil?</p>
<div class="box-holder">
<div class="box">
<div class="box-title b1">
<h5>Hatchling Plan</h5>
<h3>$29</h3>
<p>Per Month</p>
</div>
<div class="box-content">
<ul>
<li class="tick">Unlimited Support</li>
<li class="tick">5 GB Server Space</li>
<li class="tick">2 Users Per Project</li>
<li class="wrong">Email Intergration</li>
<li class="wrong">Unlimited Download</li>
</ul>
<a href="#">Choose Plan</a>
</div>
</div>
<div class="box">
<div class="box-title b2">
<h5>Baby Plan</h5>
<h3>$48</h3>
<p>Per Month</p>
</div>
<div class="box-content">
<ul>
<li class="tick">Unlimited Support</li>
<li class="tick">5 GB Server Space</li>
<li class="tick">2 Users Per Project</li>
<li class="tick">Email Intergration</li>
<li class="wrong">Unlimited Download</li>
</ul>
<a href="#">Choose Plan</a>
</div>
</div>
<div class="box">
<div class="box-title b3">
<h5>Business Plan</h5>
<h3>$99</h3>
<p>Per Month</p>
</div>
<div class="box-content">
<ul>
<li class="tick">Unlimited Support</li>
<li class="tick">5 GB Server Space</li>
<li class="tick">2 Users Per Project</li>
<li class="tick">Email Intergration</li>
<li class="tick">Unlimited Download</li>
</ul>
<a href="#">Choose Plan</a>
</div>
</div>
</div>
</section>
<section id="product">
<div class="product-img">
<img src="images/product.jpg" alt="">
</div>
<div class="details">
<span>Headphones</span>
<h3>Beats EP</h3>
<p class="des">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque architecto porro unde maxime delectus veniam deserunt sunt saepe ducimus culpa?. Atque architecto porro unde maxime delectus veniam deserunt sunt saepe ducimus </p>
<p>Color</p>
<div class="color-box">
<div class="color c1">✓</div>
<div class="color c2"></div>
<div class="color c3"></div>
</div>
<p>Cable Configuration</p>
<div class="button-box">
<button>Straight</button>
<button>Coiled</button>
<button>Long-coiled</button>
</div>
<p>How to configurate your headphones</p>
<span class="price">148$</span>
<a href="#" class="btnCart"> Add to cart</a>
</div>
</section>
<section id="contact">
<div class="contact-box">
<h2>Contact Form</h2>
<form action="">
<table>
<tr>
<td><label for="">Your Name</label></td>
<td><input type="text" placeholder="Your Name"></td>
</tr>
<tr>
<td><label for="">Your Email</label></td>
<td><input type="email" placeholder="Your Email"></td>
</tr>
<tr>
<td><label for="">Email Subject</label></td>
<td><input type="text" placeholder="Your Name"></td>
</tr>
<tr>
<td><label for="">1+1=</label></td>
<td><input type="text" placeholder="Your Name"></td>
</tr>
<tr class="txtArea">
<td colspan="2">
<label for="">Your Message</label>
<textarea></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button class="btnSend">Send Email</button>
<button class="btnSend">Clear</button>
</td>
</tr>
</table>
</form>
</div>
</section>
</body>
</html>
<label for="">Your Message</label>
<textarea></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button class="btnSend">Send Email</button>
<button class="btnSend">Clear</button>
</td>
</tr>
</table>
</form>
</div>
</section>
</body>
</html>
<title>HTML CSS 소스 A</title>
html
|
첫댓글 @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Poppins:wght@300;400;500;700&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
body{
font-family: 'Poppins', sans-serif;
color:white;
}
h2{font-weight: normal;}
section{
width: 100%;
height: 100vh;
}
#home{background: #2c3e50;}
#service{background: aliceblue;color:#333}
#price{background: #2B2933;}
#product{
background: #fff;
color: #42484D;
display: flex;
justify-content: center;
min-height:100vh;;
}
#contact{
background: #c0392b;
display: fl