How To Make a Landing Page Using HTM, CSS | HTML & CSS Tutorial
<!DOCTYPE html> [ https://cafe.daum.net/GKFDYDLF/bZhL/3 ]
<html lang="KO"_"KR"_Yoon">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device=1.0">
<meta name="keyword" content="부트스트렙5: https://getbootstrap.kr/ ">
<meta name="author" content="https://seonggyun.edublogs.org/ ">
<link rel="stylesheet" href="style.css" href="css/style.css">>
<title>Make A Webssite Landing page</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
*{
margin: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<nav>
<h1> LOGO</h1>
<ul>
<li><a href="home" class="active">Home</a></li>
<li><a href="about"> About </a></li>
<li><a href="services"> Services </a></li>
<li><a href="portfolio"> Portfolio </a></li>
<li><a href="contact"> Contact </a></li>
</ul>
</nav>
<div class="content">
<h1>Design And Development</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicingelit, sed do eiusmod
temppor incididunt</p>
<a href="#">Learn More</a>
</div>
</div>
</body>
</html>
index_html tag
꿀팁: https://fonts.google.com https://fonts.google.com/specimen/Roboto
LOGO Home About Services Portfolio Contact
Design And Development
Lorem ipsum dolor sit amet consectetur adipisicing
elit, sed do eiusmod temppor incididunt
Learn More
index_html tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Web page CSS -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Simple lightbox CSS -->
<link rel="stylesheet" href="assets/css/simple-lightbox.min.css" />
<!-- Favicons -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/icons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/icons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="assets/icons/favicon-16x16.png"
/>
<title>JabTV Landing Page</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");
/* CSS Variables */
:root {
--normal-font: 400;
--bold-font: 600;
--bolder-font: 900;
--primary-color: #0652dd;
--secondary-color: #ea2027;
--line-height: 1.7rem;
--transition: 0.4s ease-in;
}
/* Smooth scroll effect */
html {
scroll-behavior: smooth;
}
/* Resets */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: var(--transition);
}
body {
font-family: "Roboto", sans-serf;
}
ul li {
list-style-type: none;
}
a {
text-decoration: none;
color: var(--primary-color);
}
a:hover {
color: var(--secondary-color);
}
</style>
</head>
<body>
<!-- Navbar -->
<!-- Dark/light theme switcher -->
<!-- Bars -->
<!-- Hero section -->
<!-- About section -->
<!-- Lightbox image gallery -->
<!-- Jab TV Stakeholders -->
<!-- Email subscription -->
<!-- Social icons -->
<!-- Scroll to top button -->
<!-- Web page script -->
<script src="assets/js/app.js"></script>
<!-- Ion icons CDN -->
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<!-- Simple lightbox -->
<script src="assets/js/simple-lightbox.min.js"></script>
<script>
// Simple lightbox initializer
</script>
</body>
</html>
How To Make a Landing Page Using HTM, CSS | HTML & CSS Tutorial