Scribd
Upload
89 views26 pages

Lab Sheet 1-7

The document provides instructions for an assignment to create HTML pages with JavaScript code to calculate Fibonacci numbers and square numbers. It includes code snippets for: 1. A Fibonacci number calculator that prompts the user for a number n, then displays the first n Fibonacci numbers in headings. 2. A squares number table generator that prompts the user for a number n, then displays the numbers from 1 to n and their squares in an alert.

Uploaded by

susheeth24
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
89 views26 pages

Lab Sheet 1-7

The document provides instructions for an assignment to create HTML pages with JavaScript code to calculate Fibonacci numbers and square numbers. It includes code snippets for: 1. A Fibonacci number calculator that prompts the user for a number n, then displays the first n Fibonacci numbers in headings. 2. A squares number table generator that prompts the user for a number n, then displays the numbers from 1 to n and their squares in an alert.

Uploaded by

susheeth24
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 26

Course Code: CSE3193

Course Title: Front End Full Stack Development


Lab sheets
Introduction: Familiarization of HTML and CSS
Make an HTML page and use all the following html tags and CSS elements.
(Refer online tutorials if needed)
HTLML
<!DOCTYPE html>: Declaration of HTML5 document type.
<html>: Root element of an HTML page.
<head>: Contains meta-information about the HTML document.
<title>: Sets the title of the HTML document.
<body>: Contains the content of the HTML document.
<h1> to <h6>: Headings, with <h1> being the largest and <h6> the smallest.
<p>: Paragraph.
<br>: Line break.
<hr>: Horizontal rule (line).
<a>: Anchor, used for hyperlinks.
<img>: Image.
<ul>: Unordered list.
<li>: List item within an unordered or ordered list.
<ol>: Ordered list.
<li>: List item within an unordered or ordered list.
<table>: Table.
<tr>: Table row.
<td>: Table cell (data).
<th>: Table header cell.
<div>: Generic container or division.
<span>: Inline container.
<strong>: Strong importance, typically displayed as bold.
<em>: Emphasis, typically displayed as italic.
<b>: Bold text.
<i>: Italic text.
<u>: Underlined text.
<s> or <strike>: Strikethrough text.
<sub>: Subscript.
<sup>: Superscript.
<blockquote>: Block quotation.
<cite>: Citation.
<code>: Inline code.
<pre>: Preformatted text.
<address>: Contact information for the author or owner of a document.
<abbr>: Abbreviation or acronym.
<del>: Deleted text.
<ins>: Inserted text.

CSS
Color:
color: Sets the text color.
background-color: Sets the background color.
Typography:
font-family: Defines the font family.
font-size: Sets the font size.
font-weight: Specifies the font weight (e.g., bold).
font-style: Specifies the font style (e.g., italic).
Text:
text-align: Aligns text (left, right, center, justify).
text-decoration: Adds decoration to text (e.g., underline).
line-height: Sets the height of a line of text.
Spacing:
margin: Sets the margin outside an element.
padding: Sets the padding inside an element.
Borders:
border: Sets the border properties (width, style, color).
border-radius: Defines the radius of rounded corners.
Layout:
width: Sets the width of an element.
height: Sets the height of an element.
display: Defines the display behavior of an element (e.g., block, inline).

Try Internal CSS, external CSS and embedded CSS

P1 Experiment on HTML, CSS


Expand the following html structure to include your own biodata. Use HTML5 tags
and CSS to make it attractive.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
text-align: center;
}

header {
background-color: #333;
color: #fff;
padding: 10px;
}
section {
margin: 20px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
background-color: #333;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>

<header>
<h1>Simple Web Page</h1>
</header>

<section>
<p>I am a computer science Engineer. I studied in Presidency University………………..</p>
<p> ………………………...</p>
</section>

<footer>
<p>&copy; 2024 Srivinay, computer Engineer</p>
</footer>

</body>
</html>
P2 Develop an interactive webpage using HTML5 and CSS3.

Problem Statement: You have been tasked with designing a webpage for a new restaurant that will be
opening soon. The webpage should showcase the restaurant's ambiance and cuisine using attractive
visual elements.
Note: To create an appealing webpage for the restaurant, you can use various CSS3 features such as
colors, text styles, transforms, and gradients. Here's a sample webpage design using these features:
Images and paragraphs can be taken from internet source

Code:index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>My Restaurant</title>
</head>
<body>
<header>
<h1>Welcome to My Restaurant</h1>
<nav>
<a href="#h1">Home</a>
<a href="#m1">Menu</a>
<a href="#c1">Contact Us</a>
</nav>
</header>

<main>
<div id="grad2">

<h2>About Us</h2></div>
<p>My Restaurant is a new restaurant opening soon in your city. Our mission is to
provide our customers with delicious food and excellent service in a comfortable and friendly
environment.</p>
<img src="restaurant-image.jpeg" alt="Restaurant Image">
</div>
</main>
<h2 id="m1">MENU</h2
<section>
<div class="menu-item">
<img src="menu-item1.jpeg" alt="Pizza image">
<h3>pizza</h3>
<p>If you’re a vegetarian, you’ll love Domino’s Veg Extravaganza, Indi
Tandoori Paneer, and Mexican Green Wave. For non-vegetarians, Non-Veg Supreme, Chicken Fiesta,
and Indi Chicken Tikka top the list. Though these are the most loved Domino’s pizzas along with the
cheesy Margherita pizza, you should check out the Domino’s menu to see what you like the most.</p>
</div>
<div class="menu-item">
<img src="menu-item1.jpeg" alt="burger image">
<h3>Burger</h3>
<p>Nine Different Types of Burgers to Make
Turkey burger. ...
Portobello mushroom burger. ...
Veggie burger. ...
Wild salmon burger. ...
Bean burger. ...
Cheeseburger</p>
</div>

// Make one division for pasta


</section>

<section>
<div id="grad1">
<h1 id="c1"> contact us</h1>

</div>
<div id="rot">
<h1> feedback</h1></div>
</section>
<footer>
<p>&copy; 2023 My Restaurant</p>
</footer>

</body>
</html>
Output : style.css

/* General styles */ ( use external CSS)


body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#rot{
transform: rotate(20deg);
}
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(blue, yellow);
background-image: conic-gradient(red, yellow, orange);
}
#grad2 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(black, red);
}

/* Header styles */
header {
background-color: #333;
color: white;
padding: 20px;
}
nav a {
color: white;
text-decoration: none;
margin-right: 20px;
}
nav a:hover {
color: #ffcc00;
}

/* Main section styles */


main {
background-color: #eee;
padding: 50px;
text-align: center;
}
main h2 {
color: #333;
font-size: 36px;
margin-bottom: 20px;
}
main p {
color: #666;
font-size: 18px;
line-height: 1.5;
margin-bottom: 50px;
}
main img {
max-width: 100%;
height: auto;
margin-top: 20px;
box-shadow: 0px 0px 10px #333;
}

/* Menu section styles */


section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: #fff;
padding: 50px;
}
.menu-item {
flex-basis: 30%;
margin-bottom: 50px;
box-shadow: 0px 0px 10px #999;
padding: 20px;
text-align: center;
}
.menu-item img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
.menu-item h3 {
color: #333;
font-size: 24px;
margin-bottom: 10px;
}
.menu-item p {
color: #666;
font-size: 16px;
line-height: 1.5;
}

/* Footer styles */
footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
footer p {
font-size: 14px;
margin: 0;
}
/* Gradient styles */
header {
background: linear-gradient(to bottom, #333 0%, #666 100%);
}
nav a:hover {
background: linear-gradient(to bottom, #ffcc00 0%, #ff9900 100%);
}
section {
background: radial-gradient(circle, #fff 0%, #eee 100%);
}
.menu-item:hover {
background: linear-gradient(to bottom, #eee 0%, #fff 100%);
transform: translateY(-5px);
}
footer {
background: linear-gradient(to bottom, #666 0%, #333 100%);
}

P3 Basic JavaScript Exercises


Problem Statement:
Ravi is trying to write a program in JavaScript to calculate the Fibonacci series of a given
number and the square of a given number series as the assignment is given by class
teacher, help Ravi to develop and demonstrate a HTML file that includes JavaScript
script for the following problems:
a) Input: A number n obtained using prompt
Output: The first n Fibonacci numbers
b) Input: A number n obtained using prompt
Output: A table of numbers from 1 to n and their squares using alert
a) <html>
<head>
<title>Fibonacci Series</title>
</head>
<body>
<script type="text/javascript">
var fib1=0,fib2=1,fib=0;
var num=prompt("Enter a number : \n", "");
if(num != null && num > 0 )
{
document.write("<h1>The first "+num+" numbers in the fibonacci series </h1>");
if(num==1)
document.write("<h2> "+ fib1 + "</h2>");
else
{
document.write("<h2>" + fib1 + "</h2>");
document.write("<h2>" + fib2 + "</h2>");
}
for(i=3;i<=num; i++)
{
fib= fib1 + fib2;
document.write("<h2> " + fib + "</h2>");
fib1=fib2;
fib2=fib;
}
}
else
alert("Invalid Input");
</script>
</body>
</html>

b) <!DOCTYPE html>
<html>
<head>
<title>Number and its squares</title>
</head>
<body>
<script type="text/javascript">
var num = prompt("Enter a number : \n", "");
var msgstr;
if(num > 0 && num !=null){
msgstr="Number and its Squares are \n";
for(i=1;i <= num; i++)
{
msgstr = msgstr + i + " ^ 2 = " + i*i + "\n";
}
alert(msgstr);
}
else
alert("Invalid Input");
</script>
</body>
</html>

P4 JavaScript Exercises
Design a web form for signing up with the following fields:
 Name: a required text input field for the user's name
 Date of Birth: a required date input field for the user's date of birth
 Age: a range input field for the user's age, with a minimum value of 18 and a maximum value of
100
 Email: a required email input field for the user's email address
 Website: an optional URL input field for the user's website
 Sign Up button: a submit button for submitting the form
The form also can include some JavaScript code that adds some functionality to the form:
Conditional logic to show or hide fields based on the user's age. If the user is under 18, the age range
input field, email input field, and website input field will be hidden. If the user is between 18 and 25,
the age range input field and email input field will be shown, but the website input field will be hidden.
If the user is over 25, all fields will be shown.
Inline validation for required fields. If a required field is left blank, a message will be displayed asking
the user to fill out the field. A helper function to calculate the user's age based on their date of birth.

Code:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required>

<div id="age-range">
<label for="age">Age:</label>
<input type="range" id="age" name="age" min="18" max="100">
</div>

<div id="email-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>

<div id="website-group">
<label for="website">Website:</label>
<input type="url" id="website" name="website">
</div>

<button type="submit">Sign Up</button>


</form>

<script>
// conditional logic to show or hide fields based on user input
const ageRange = document.getElementById("age-range");
const emailGroup = document.getElementById("email-group");
const websiteGroup = document.getElementById("website-group");

ageRange.style.display = "none";
emailGroup.style.display = "none";
websiteGroup.style.display = "none";

document.getElementById("dob").addEventListener("change", function() {
const age = calculateAge(this.value);
if (age < 18) {
ageRange.style.display = "none";
emailGroup.style.display = "none";
websiteGroup.style.display = "none";
} else if (age >= 18 && age <= 25) {
ageRange.style.display = "block";
emailGroup.style.display = "block";
websiteGroup.style.display = "none";
} else {
ageRange.style.display = "block";
emailGroup.style.display = "block";
websiteGroup.style.display = "block";
}
});

// inline validation
document.querySelectorAll("input[required]").forEach(input => {
input.addEventListener("invalid", function() {
this.setCustomValidity("Please fill out this field.");
});
input.addEventListener("input", function() {
this.setCustomValidity("");
});
});

// helper function to calculate age from date of birth


function calculateAge(birthday) {
const today = new Date();
const birthDate = new Date(birthday);
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
}
</script>

P5 JavaScript Exercises
Create an online student registration page for Presidency University. Registration page should contain
following fields in the specified format and develop the JavaScript validation Code as per the conditions
specified for each field.
a) First name (should not be empty, Name should contain only alphabets and the length should not be less
than 6 characters)
b) Lastname (only alphabets should be entered)
c) Email id (should not contain any invalid and must follow the standard pattern [email protected])
d)Password ((Password should not be less than 6 characters length and enter only numbers, letters)
e) Address (should not be empty)
f) Mobile number (Phone number should contain 10 digits only and it should accept only numbers)
g) gender
h) Submit and Cancel button
Data entry for all fields are mandatory as per validation conditions and if any of the condition is not
specified appropriate alert Message should be displayed or on successful entry of all the fields the
student should get the alert message “Registration done successfully”.

Main.html
<html>
<head><title>Registration Form Validation</title></head>
<body bgcolor="#E4F0F8">
<script type='text/javascript'>
function formValidator()
{
// Make quick references to our fields
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var email = document.getElementById('email');
var pass = document.getElementById('pass');
var addr = document.getElementById('addr');
var mobileno = document.getElementById('mobileno');
// Check each input in the order that it appears in the form!
if(notEmpty(firstname, "first name can not be empty")){
if(isAlphabet(firstname, "Please enter only letters for your Firstname")){
if(lengthRestriction(firstname, 6)){
if(isAlphabet(lastname, "Please enter only letters for your Lastname")){
if(emailValidator(email, "Please enter a valid email address")){
if(lengthRestriction(pass, 6)){
if(isAlphanumeric(pass, "please enter Numbers and Letters Only for password")){
if(notEmpty(addr, "please enter the address")){
if(isNumeric(mobileno, "Please enter a valid mobileno")){
if(lengthRestriction1(mobileno, 10 , 10)){
return true;
}}}}
}
}
}
}}}
return false;
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function lengthRestriction(elem, min){
var uInput = elem.value;
if(uInput.length >= min){
return true;
}else{
alert("Please enter minimum " +min+ " characters");
elem.focus();
return false;
}
}
function emailValidator(elem, helperMsg)
{
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp))
{
return true;
}
else{
alert(helperMsg);
elem.focus();
return false;
}
}
function lengthRestriction1(elem, min, max)
{
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max)
{
return true;
}
else {
alert("Please enter 10 numbers only");
elem.focus();
return false;
}
}
</script>
<center ><font color="blue" size="6" face="arial">Student Registration Form REVA
UNIVERSITY</font><br /><br /><br />

<form onsubmit='return formValidator()' action="right.html">


<fieldset>
First Name(Minimum 6 characters)<font color="red">* </font>
<input type='text' id='firstname' /><br /><br />
Last Name<font color="red"><font color="red">* </font> </font> &nbsp;&nbsp;&nbsp;
<input type='text' id='lastname' /><br /><br />
Email Address<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='text' id='email' /><br />
<font color="red">(one e-mail id only):</font> &nbsp;&nbsp;&nbsp;
<font color="redblue">e.g. [email protected]</font><br /><br/>
Password(minimum 6 characters)<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='password' id='pass'><br /><br/>
Address<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<textarea rows="2" cols="20" id='addr' /></textarea> <br /> <br/>
Mobile No<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='text' id='mobileno' /><br /><br /><br />
Gender: <input type='radio' name="gender">male
<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit' />
<input type='Reset' value='reset' />
<fielset>
</center>

</form>
</body>
</html>

Right.html
<html>
<body style="background-color:green;">
<h1> Registration done successfully </h1>
</body>
</html>

P6 Bootstrap’s form controls

Problem Statement:
Create a RSVP Form using the bootstrap’s form controls. The form includes fields are First name,
Last name, email, phone number, country, state, Zip, submit and other information from your guests
for event purpose. Each required form group has a validation state that can be triggered by
attempting to submit the form without completing it.
Note: Bootstrap’s form controls expand on our Rebooted form styles with classes. Make use of
classes to opt into their customized displays for a more consistent rendering across browsers and
devices. Be sure to use an appropriate type attribute on all inputs

Solution

<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Form With Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD
" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>

</head>
<body class="bg-info">
<style>
.container-sm {
max-width: 700px;
}
</style>
<div class="container-sm">
<main>
<div class="py-5 text-center">
<h1>RSVP form</h1>
<p class="lead">Using Bootstrap to create a RSVP form</p>
</div>
<div>
<div class="my-4">
<form class="needs-validation" novalidate>
<div class="row lg-3">
<div class="col-sm-6">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">Valid first name is required.</div>
</div>

<div class="col-sm-6">
<label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
<div class="col-sm-6">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]"
required>
<div class="invalid-feedback">
Please enter a valid email address.
</div>
</div>
<div class="col-sm-6">
<label for="phone" class="form-label">Phone Number <span
class="text-muted"></span></label>
<input type="tel" class="form-control" id="phone" pattern="[0-9]{10,12}" required>
<div class="invalid-feedback">
Please enter a valid phone number.
</div>
</div>
<div class="col-md-5">
<label for="country" class="form-label">Country</label>
<select class="form-select" id="country" required>
<option value="">Choose...</option>
<option>India</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>

<div class="col-md-4">
<label for="state" class="form-label">State</label>
<select class="form-select" id="state" required>
<option value="">Choose...</option>
<option>Karnataka</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>

<div class="col-md-3">
<label for="zip" class="form-label">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
Zip code required.
</div>
</div>
<div class="form-check">
<h3>Will you attend</h3>
<input class="form-check-input" type="radio" name="flexRadioDefault"
id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault"
id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
No
</label>
</div>
<div class="col-mb-3">
<label for="plus">And with how many guests?</label><br>
<select class="form-select" aria-label="Default select example">
<option value="1">Zero</option>
<option value="2">One</option>
<option value="3">Two</option>
<option value="4">Three</option>
</select>
</div>
<div class="form-group">
<label for="textarea" class="form-label">Additional Comments</label>
<textarea class="form-control" id="textarea" rows="8"></textarea>
</div>
<hr class="my-4">
<button class="w-100 btn btn-primary btn-lg" type="submit">Submit</button>
</form>
</div>
</div>
</main>
</div>

</body>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'

// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')

// Loop over them and prevent submission


Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}

form.classList.add('was-validated')
}, false)
})
})()
</script>
</html>

P7 Bootstrap
Problem Statement:
Create a Responsive image grid using Bootstrap 5. Bootstrap image grid is a simple construction
that allows you to create a responsive layout for your images. To create an image grid, use a series
of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully
responsive.

Hint: Use predefined grid class such as . container, .row, .col and default grid tiers to create a
grid.

Solution:
<!doctype html>

<html lang="en">

<head>

<title>Grid Image</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6g
D" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>

</head>

<style>

img {

height: 100%;

.wrapper {

max-width: 800px;

</style>

<body class="bg-light">

<div class="wrapper mx-auto py-4">

<div class="container">

<!-- Stack the columns on mobile by making one full-width and the other half-width -->

<div class="row ">

<div class="col-md-8 pb-4">

<img class=" d-block w-100 object-fit-fill" src="https://images.unsplash.com/photo-


1426604966848-d7adac402bff?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bmF0dXJlfGVufDB8fDB8fA%3D
%3D&auto=format&fit=crop&w=500&q=60" alt="">

</div>

<div class="col-12 col-md-4 pb-4">

<img class=" d-block w-100 object-fit-fill" src="https://images.unsplash.com/photo-


1501854140801-50d01698950b?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w
=1275&q=80" alt="">

</div>

</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->

<div class="row">

<div class="col-6 col-md-4 pb-4">

<img class="d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-


1470252649378-9c29740c9fa8?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w
=1170&q=80" alt="">

</div>

<div class="col-6 col-md-4 pb-4">

<img class=" d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-


1431794062232-2a99a5431c6c?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w
=1170&q=80" alt="">

</div>

<div class="col-12 col-md-4 pb-4">

<img class="d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-


1470770903676-69b98201ea1c?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w
=1170&q=80" alt="">

</div>

</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">

<div class="col-6 pb-4" >

<img class="d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-


1552083375-1447ce886485?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w
=1170&q=80" alt="">

</div>

<div class="col-6 pb-4" >

<img class="d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-


1565118531796-763e5082d113?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w
=1170&q=80" alt="">

</div>

</div>

</div>

</div>

</body>

</html>

You might also like