After walking through the boring rigorous stuffs, you deserve some fun project.
It’s time to walk through a practical example and apply your newly acquired Flexbox skills.
Out of the lack of a creative option, I came up with a web page layout.
Here’s what the finished layout looks like, and it is completely laid out with Flexbox.
So where do you start?
Whenever building a layout with flexbox, you should start by looking out for what sections of your layout may stand out as flex-containers. You may then leverage the powerful alignment properties flexbox makes available.
<!–Header–>
<div class="header" , style="background-image: url(img/bscHCS.jpg);">
<h1>BSc. (Hons) Computer Science</h1>
</div>.header {
display: flex;
padding: 25px;
text-align: center;
background: #1abc9c;
color: white;
background-position:left;
background-size: cover;
}
.header h1{
box-sizing: border-box;
background-color: #f5f5f5;
padding: 5px 15px;
color: #333333;
border-radius: 5px;
}<!–Navbar–>
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Contact</a></li>
<input id="search" type="search" name="" placeholder="search">
</ul>
</div>/* Style the top navigation bar */
.navbar{
/* flex: 1;
text-align: left; */
display: flex;
background-color: black;
}
.navbar ul li{
box-sizing: border-box;
list-style: none;
display: inline-block;
padding: 0px 38px;
position: relative;
}
.navbar ul li a{
padding: 14px 20px;
border-radius: 5px;
color:white;
text-decoration: none;
font-size: 18px;
font-weight: 500;
}
/* Change color on hover */
.navbar a:hover {
background-color: whitesmoke;
color: black;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 25%;
background-color: #ffd3d3;
padding: 20px;
text-align: left;
}
/* Main column */
.main {
flex: 75%;
background-color: white;
padding: 20px;
}
<!-- The flexible grid (content) -->
<div class="row">
<div class="side">
<h2>Important Links</h2>
<h4>1<sup>st</sup> Semester Subject are :</h4>
<ol><a href="https://www.javatpoint.com/cpp-tutorial" target="main">
<li>
C++
</li>
</a>
<li>
CSA
</li>
<li>
AECC
</li>
<li>
GE-English
</li>
</ol>
<h4>2<sup>nd</sup> Semester Subject are :</h4>
<ol><a href="https://www.javatpoint.com/java-tutorial" target="main">
<li>
Java
</li>
</a>
<li>
DS
</li>
<li>
EVS
</li>
<li>
GE-Linear Algebra
</li>
</ol>
<h4>3<sup>rd</sup> Semester Subject are :</h4>
<ol>
<li>
OS
</li>
<a href="https://www.javatpoint.com/data-structure-tutorial">
<li>
Data Structurs
</li>
</a>
<li>
Computer Networks
</li>
<li>
Web Design and Development
</li>
<li>
GE-Differential Equation
</li>
</ol><br>
</ul><br>
</div>
<div class="main">
<h2>Web Design and Development</h2>
<p>This course will introduce students to the fundamental concepts of web
development. This course will equip students with the ability to design
and develop a dynamic website using technologies like HTML, CSS, JavaScript,
PHP and MySQL on platform like WAMP/XAMP/LAMP.
</p><br>
<p>
<b>Introduction</b> :- Introduction to Static and Dynamic Websites (Website Designing and Anatomy of Webpage)<br><br>
<b>HTML, CSS & DOM </b>:- Introduction to HTML and CSS (Basic Tags, Lists, Handling Graphics, Tables, Linking, Frames, Forms), Introduction to DOM<br><br>
<b>JavaScript </b>:- Introduction to JavaScript (Basic Programming Techniques & Constructs, GET/POST Methods, Operators, Functions, DOM Event handling, Forms Validation, Cookies), Inter-page communication and form data handling using JavaScript<br><br>
<b>PHP: Backend Of Websites </b>:- Introduction to PHP (Working, Difference with other technologies like JSP and ASP), PHP Programming Techniques (Data types, Operators, Arrays, Loops, Conditional statements, Functions, Regular expressions)<br><br>
<b>Databases in Websites</b> :- Form Data Handling with PHP, Database connectivity and handling using PHP-MySQL
</p>
</div>
</div><!– Footer –>
<div class="footer">
Contact Us: <email>abc@gmail.com</email>
</div>
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: black;
color: white;
}
Wow. I can’t believe you got to this point. That’s great! You’re becoming a Flexbox ninja now.
Next, you will see how Flexbox can help with responsive designs.
Project1.html
<!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">
<title>BSc. (Hons) Computer Science</title>
<style type="text/css">
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial;
margin-left: 10px;
background-image: url(img/bg.jpg);
background-size: cover;
}
/* Header/logo Title */
.header {
display: flex;
padding: 25px;
text-align: center;
background: #1abc9c;
color: white;
background-position:left;
background-size: cover;
}
.header h1{
box-sizing: border-box;
background-color: #f5f5f5;
padding: 5px 15px;
color: #333333;
border-radius: 5px;
}
/* Style the top navigation bar */
.navbar{
/* flex: 1;
text-align: left; */
display: flex;
background-color: black;
}
.navbar ul li{
box-sizing: border-box;
list-style: none;
display: inline-block;
padding: 0px 38px;
position: relative;
}
.navbar ul li a{
padding: 14px 20px;
border-radius: 5px;
color:white;
text-decoration: none;
font-size: 18px;
font-weight: 500;
}
input,textarea{
padding: 6px;
border: solid white;
border-radius: 5px;
margin-left: 20.8em;
}
/* Change color on hover */
.navbar a:hover {
background-color: whitesmoke;
color: black;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
background-color: #1abc9c;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 25%;
background-color: #ffd3d3;
padding: 20px;
text-align: left;
}
/* Main column */
.main {
flex: 75%;
background-color: white;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: black;
color: white;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}
</style>
</head>
<body>
<!--Header-->
<div class="header" , style="background-image: url(img/bscHCS.jpg);">
<h1>BSc. (Hons) Computer Science</h1>
</div>
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Contact</a></li>
<input id="search" type="search" name="" placeholder="search">
</ul>
</div>
<!-- The flexible grid (content) -->
<div class="row">
<div class="side">
<h2>Important Links</h2>
<h4>1<sup>st</sup> Semester Subject are :</h4>
<ol><a href="https://www.javatpoint.com/cpp-tutorial" target="main">
<li>
C++
</li>
</a>
<li>
CSA
</li>
<li>
AECC
</li>
<li>
GE-English
</li>
</ol>
<h4>2<sup>nd</sup> Semester Subject are :</h4>
<ol><a href="https://www.javatpoint.com/java-tutorial" target="main">
<li>
Java
</li>
</a>
<li>
DS
</li>
<li>
EVS
</li>
<li>
GE-Linear Algebra
</li>
</ol>
<h4>3<sup>rd</sup> Semester Subject are :</h4>
<ol>
<li>
OS
</li>
<a href="https://www.javatpoint.com/data-structure-tutorial">
<li>
Data Structurs
</li>
</a>
<li>
Computer Networks
</li>
<li>
Web Design and Development
</li>
<li>
GE-Differential Equation
</li>
</ol><br>
</ul><br>
</div>
<div class="main">
<h2>Web Design and Development</h2>
<p>This course will introduce students to the fundamental concepts of web
development. This course will equip students with the ability to design
and develop a dynamic website using technologies like HTML, CSS, JavaScript,
PHP and MySQL on platform like WAMP/XAMP/LAMP.
</p><br>
<p>
<b>Introduction</b> :- Introduction to Static and Dynamic Websites (Website Designing and Anatomy of Webpage)<br><br>
<b>HTML, CSS & DOM </b>:- Introduction to HTML and CSS (Basic Tags, Lists, Handling Graphics, Tables, Linking, Frames, Forms), Introduction to DOM<br><br>
<b>JavaScript </b>:- Introduction to JavaScript (Basic Programming Techniques & Constructs, GET/POST Methods, Operators, Functions, DOM Event handling, Forms Validation, Cookies), Inter-page communication and form data handling using JavaScript<br><br>
<b>PHP: Backend Of Websites </b>:- Introduction to PHP (Working, Difference with other technologies like JSP and ASP), PHP Programming Techniques (Data types, Operators, Arrays, Loops, Conditional statements, Functions, Regular expressions)<br><br>
<b>Databases in Websites</b> :- Form Data Handling with PHP, Database connectivity and handling using PHP-MySQL
</p>
</div>
</div>
<!-- Footer -->
<div class="footer">
Contact Us: <email>abc@gmail.com</email>
</div>
</body>
</html>Also Read – https://codingtimes.in/how-to-install-and-configure-sass-locally/
