CSS Topics
Day 7 :
Flexible Box Layout:
Flex.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>
<style>
.container {
display: flex;
border: 1px solid black;
height: 500px;
/* flex-direction: row; */
/* flex-direction: column; */
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-around; */
/* justify-content: space-between; */
align-items: flex-start;
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
/* align-items: stretch; */
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
}
.item {
background-color: aqua;
margin: 5px;
padding: 40px;
}
.item3 {
align-self: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">Book1</div>
<div class="item item2">Book2</div>
<div class="item item3">Book3</div>
<div class="item item4">Book4</div>
<div class="item item5">Book5</div>
</div>
</body>
</html>
Courses.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" type="text/css" href="./Home.css" />
<link rel="stylesheet" type="text/css" href="./Courses.css" />
</head>
<body>
<header>
<h1>Hema Coding School</h1>
</header>
<nav>
<a href="./Home.html">Home</a>
<a href="./Courses.html">Courses</a>
<a href="/About.html">About Us</a>
<a href="./Contact.html">Contact</a>
</nav>
<main class="courses-container">
<section class="course-card">
<h2>HTML</h2>
<p>
Learn the fundamentals of HTML for building the structure of web
pages.
</p>
</section>
<section class="course-card">
<h2>CSS</h2>
<p>
Explore the styling and layout capabilities of CSS to enhance your web
designs.
</p>
</section>
<section class="course-card">
<h2>JavaScript</h2>
<p>
Master the scripting language for dynamic and interactive web
development.
</p>
</section>
<section class="course-card">
<h2>React</h2>
<p>
Build modern, efficient, and scalable user interfaces with the React
library.
</p>
</section>
<section class="course-card">
<h2>Node.js</h2>
<p>
Learn server-side JavaScript with Node.js for building scalable
network applications.
</p>
</section>
<section class="course-card">
<h2>MongoDB</h2>
<p>
Explore the NoSQL database for building scalable and flexible
applications.
</p>
</section>
</main>
<footer>
<p>© 2024 Hema Coding School. All rights reserved.</p>
</footer>
</body>
</html>
Courses.css
h2{
color: blue;
}
.courses-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.course-card {
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 8px;
margin: 20px;
padding: 15px;
text-align: center;
flex:30%;
}
Interview Questions:
1. What is Flexbox, and what problem does it solve in web development?
2. Explain the difference between the main axis and the cross axis in Flexbox.
3. What is the purpose of the align-self property in Flexbox?
No comments:
Post a Comment