Bootstrap Layout
Bootstrap Layout
create html, css and bootstrap code to design below image
<!DOCTYPE html>
<html>
<head>
<title>Activity 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.container{
margin-top: 10px;
width: 40%;
background-color: rgb(217,221,207);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12"><center>
<img src="assignemtn 1\girl.JPG" style="margin-top: 20px;" class="img-responsive" alt="girl"></center>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" style="font-weight: bold; text-align: center; font-family: arial black; font-size: 32px; margin-top: 10px;"><p>LAURYAN HOLDEN</p></div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" style="font-weight: bold; font-family: arial; font-size: 16.5px; text-align: center; margin-top: -10px;"><p>YOUNGEST CEO OF MARX WORLD WIDE</p></div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6" style="background-color: rgb(151,34,89); height: 5px;"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" style="font-weight: bold; font-family: calipri; font-size: 11.5px;"><p><center>Lauryn born 1986 is an accomplished economist. entrepreneur and<br>CEO of Marx Worldwide. a global courier delivery services company<br>headquartered in New York.</center></p></div>
<div class="col-md-2"></div>
</div>
<div class="row" style="margin-top: 10px; margin-bottom: 10px;">
<div class="col-md-6">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<img class="img-responsive" src="assignemtn 1\loc.jpg" alt="loc" width="30px;" height="40px;" style="margin-left: 30px;">
</div>
<div class="col-md-7" style="font-weight: bold; font-size: 9.5px; padding-right: 5px;">
<p>Lives in New York with her husband Frank with their 3 kids. Rocco, Walter and Ricci</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="assignemtn 1\IMG-20160921-WA0018.jpg" alt="Pic1" width="30px;" height="40px;">
</div>
<div class="col-md-8" style="font-weight: bold; font-size: 9.5px; margin-left: -30px;">
<p>Namedone of The Envy Index: 25 Under 25, Varity Fair, 2010</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-6">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<img class="img-responsive" src="assignemtn 1\IMG-20160921-WA0020.jpg" alt="Pic2" width="30px;" height="40px;" style="margin-left: 30px;">
</div>
<div class="col-md-7" style="font-weight: bold; font-size: 9.5px;">
<p>Happily married FrankHolden<br>since 2011</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="assignemtn 1\IMG-20160921-WA0012.jpg" alt="Pic3" width="30px;" height="40px;">
</div>
<div class="col-md-8" style="font-weight: bold; font-size: 9.5px; margin-left: -30px;">
<p>Graduated Valedictorian of her<br>class at Harvard, batch 2008</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-6">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<img class="img-responsive" src="assignemtn 1\IMG-20160921-WA0019.jpg" alt="Pic4" width="30px;" height="40px;" style="margin-left: 30px;">
</div>
<div class="col-md-7" style="font-weight: bold; font-size: 9.5px;">
<p>Caitllin Deveur. "Awesome,<br>Twisted and Beautiful:A Q&A<br>with Lauryn Holden</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="assignemtn 1\IMG-20160921-WA0014.jpg" alt="Pic5" width="30px;" height="40px;">
</div>
<div class="col-md-8" style="font-weight: bold; font-size: 9.5px; margin-left: -30px;">
<p>Shebelieves that<br>"A girl should be two things:<br>who and what she wants."</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" style="font-weight: bold; text-align: center; font-family: arial black; font-size: 24px;"><p>MAJOR MILESTONES</p></div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<img class="img-responsive" src="assignemtn 1\port.JPG" alt="Chania">
</div>
<div class="col-md-5" style="font-weight: bold; text-align: left; font-family: arial black; font-size: 13px; padding-top: 30px;">
<p>Marx Worldwide become<br>the biggest driver of sustainability in the industry.<br>with its commitment to<br>spend $500 million on<br>sustainability efforts.</p>
</div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5" style="font-weight: bold; text-align: left; font-family: arial black; font-size: 13px; padding-top: 30px;">
<p>She started a comprehensive<br>housing program for tenured<br>employees which become an<br>innovative model for other<br>employee housing programs.</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="assignemtn 1\house.JPG" alt="house">
</div>
<div class="col-md-1"></div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-md-1"></div>
<div class="col-md-5">
<img class="img-responsive" src="assignemtn 1\waterpump.jpg" alt="waterpump">
</div>
<div class="col-md-5" style="font-weight: bold; text-align: left; font-family: arial black; font-size: 13px; padding-left: 5px; padding-top: 30px;">
<p>She started the Clean Water<br>initiative in Kenya, Uganda &<br>Sierra Leone to repair many<br>of the broken well pumps in<br>the area.</p>
</div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
<p style="margin-left: 28px; font-size: 10px; font-weight: bold; font-family: arial black;">Follow her day to day at</p>
</div>
<div class="col-md-1">
<img class="img-responsive" src="assignemtn 1\IMG-20160921-WA0016.jpg" alt="Pic6" style="margin-left: -20px;">
</div>
<div class="col-md-1">
<img class="img-responsive" src="assignemtn 1\IMG-20160921-WA0021.jpg" alt="Pic7" style="margin-left: -47px;">
</div>
<div class="col-md-1">
<img class="img-responsive" src="assignemtn 1\IMG-20160921-WA0017.jpg" alt="Pic8" style="margin-left: -74px;">
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
Activity 2: Write html css and bootstrap code to design below image layout
<!DOCTYPE html>
<html>
<head>
<title>Activity 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.container{
margin-top: 10px;
width: 40%;
}
</style>
</head>
<body>
<div class="container">
<div class="row" style="background-color: none;">
<div class="col-md-12" style=" text-align: center;">
<p style=" font-size: 46px; font-family: Arial; font-weight: bold; padding-top: 5px;">CHICAGO</p>
<p style=" font-size: 16px; font-family: Arial; font-weight: bold; text-align: center; margin-top: -20px; color: gray; padding-bottom: 5px;">CITY GUIDE</p>
</div>
</div>
<div class="row" style="padding-top: 10px; padding-bottom: 10px; background-color: rgb(248,248,248);">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<table style="font-size: 14px;">
<tr>
<td style="text-align: right; padding-left: 20px;">State</td>
<td style="padding-left: 20px; font-weight: bold;">Illinois</td>
</tr>
<tr>
<td style="text-align: right; padding-left: 20px;">Population</td>
<td style="padding-left: 20px; font-weight: bold;">2,722,389</td>
</tr>
<tr>
<td style="text-align: right; padding-left: 20px;">Area</td>
<td style="padding-left: 20px; font-weight: bold;">234.0 sq. mi</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<table style="font-size: 14px;">
<tr>
<td style="text-align: right;">Time Zone</td>
<td style="padding-left: 20px; font-weight: bold;">Central (UTC-6)</td>
</tr>
<tr>
<td style="text-align: right;">Climate</td>
<td style="padding-left: 20px; font-weight: bold;">Humid Continental</td>
</tr>
<tr>
<td style="text-align: right;">Mayor</td>
<td style="padding-left: 20px; font-weight: bold;">Rahm Emanuel</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="background-color: rgb(186,221,251); font-family: Arial; font-weight: bold; color: rgb(64,111,155);">
<div class="col-md-12" style="text-align: center; font-size: 28px; padding-top: 20px; padding-bottom: 10px;">
<p>TOP REASONS TO VISIT</p>
<p style="margin-top: -16px;">THE WINDY CITY</p>
</div>
</div>
<div class="row" style="background-color: rgb(186,221,251); text-align: center; padding-left: 30px; padding-right: 30px;">
<div class="col-md-12">
<p>Alive with eclectric music, fine art, and stunning architecture, Chicago is a place not only city-lovers dream of, but also where nature lovers can find a bit of sanctuary amidst a bustling metropolis.</p>
</div>
</div>
<div class="row" style="background-color: rgb(186,221,251); padding-top: 10px; margin-bottom: -10px;">
<div class="col-md-6">
<p style="font-size: 20px; font-family: Arial black; padding-left: 20px;">Architecture</p>
<p style="font-size: 16px; font-family: calibri; padding-left: 20px;">Chicago's architecture is one of the most stunning in the world. Some Landmarks you shouldn't miss are the sears Tower,John Hancock Center, and Cloud Gate.</p>
<p style="font-size: 20px; font-family: Arial black; padding-left: 20px;">Food</p>
<p style="font-size: 16px; font-family: calibri; padding-left: 20px;">There are over 4,700 restaurants in Chicago. the city is home to some of the world's most elite chefs at the forefront of cutting. edge cuisine.</p>
<p style="font-size: 20px; font-family: Arial black; padding-left: 20px;">The Arts</p>
<p style="font-size: 16px; font-family: calibri; padding-left: 20px;">Chicago is home to the finest art galleries. The Art institute of Chicago has more than 300,000 works. tripadvisor hails it as the world's #1 museum.</p>
</div>
<div class="col-md-6">
<p style="font-size: 20px; font-family: Arial black;">Beaches</p>
<p style="font-size: 16px; font-family: calibri;">Think that Chicago is just for urban-dwellers? Think again. Chicago has 26 miles of shoreline, 26 beaches, and an 18.5-mile bike path along Lake Michigan.</p>
<p style="font-size: 20px; font-family: Arial black;">Green Spaces</p>
<p style="font-size: 16px; font-family: calibri;">There are over 500 gardens and parks to explore in Chicago. One of this is Millennium Park,where you will find the iconic Cloud Gate metal sculpture.</p>
<p style="font-size: 20px; font-family: Arial black;">Live music venues</p>
<p style="font-size: 16px; font-family: calibri;">This city is in love with jazz and blues, as well as music festivals and concerts of all kinds. If you're luckly, catch a show by the Chicago Symphony Orchestra.</p>
</div>
</div>
<div class="row">
<div class="col-md-12" style="background-color: rgb(186,221,251)">
<img style="margin-top: -10px; margin-bottom: -25px;" src="assignemtn 1\chicago_city.JPG" class="img-responsive" alt="girl">
</div>
</div>
<div class="row">
<div class="col-md-12" style="background-color: rgb(80,136,193); font-family: Arial; text-align: center; color: white; font-size: 24px; font-weight: bold; padding-top: 30px; padding-bottom: 10px;">
<p>FUN FACTS ABOUT CHICAGO</p>
</div>
</div>
<div class="row" style="background-color: rgb(80,136,193); color: white; padding-top: 20px;">
<div class="col-md-6">
<p style="padding-top: 10px; padding-right: 10px; padding-bottom: 5px; text-align: right;">An average of 35 million<br> visitors and tourist flock to<br> Chicago every year.</p>
</div>
<div class="col-md-6">
<img src="assignemtn 1\plane.JPG" class="img-responsive" alt="girl">
</div>
</div>
<div class="row" style="background-color: rgb(80,136,193); color: white;">
<div class="col-md-6">
<img src="assignemtn 1\chicago_states.JPG" class="img-responsive" alt="girl">
</div>
<div class="col-md-6">
<p style="padding-top: 5px; padding-right: 10px; padding-bottom: 20px; text-align: left;">4 states are visible from the<br>top of the Willis Tower:<br>Indiana, Illinois, Michigan,<br>and isconsin.</p>
</div>
</div>
<div class="row" style="background-color: rgb(80,136,193); color: white; padding-top: 20px;">
<div class="col-md-6">
<p style="padding-top: 5px; padding-right: 10px; padding-bottom: 5px; text-align: right;">One of the largest collections of<br>Impressionist paintings is found<br>at the Art institute of Chicago.</p>
</div>
<div class="col-md-6">
<img src="assignemtn 1\painting.JPG" class="img-responsive" alt="girl">
</div>
</div>
<div class="row" style="background-color: rgb(80,136,193); color: white;">
<div class="col-md-6">
<img style="" src="assignemtn 1\chicago_board.JPG" class="img-responsive" alt="girl" width="306" height="196">
</div>
<div class="col-md-6">
<p style="padding-top: 5px; padding-right: 10px; text-align: left;">At 23.5 miles, Chicago's<br>Western Avenue is the world's<br>longest continuous street.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Hello, my name is Muhammad Bin Jameel.
No comments:
Post a Comment