codepediair · March 2, 2023 18:43
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">

 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
 </head>

 <body>
    <div class="container my-container">
        <div class="row justify-content-around my-row">
            <div class="col-md-1 col-sm-2  my-col">Welcome</div>
            <div class="col-md-4 col-sm-4 my-col">
                Bulma and Bootstrap are both popular CSS frameworks used in web development, but they have some key
                differences:

                Design philosophy: Bulma is focused on simplicity and flexibility, while Bootstrap is designed to be a
                complete toolkit with a more opinionated approach to design. Bulma provides a set of basic styles and
                components that can be easily customized, while Bootstrap includes a more extensive set of components
                and styles with a more consistent design.
            </div>
            <div class="col-md-4 col-sm-4 my-col">Bootstrap is a popular front-end framework that provides a set of
                pre-designed HTML, CSS, and JavaScript components and styles, which make it easy to create responsive
                and mobile-first web pages and applications. Bootstrap was originally developed by Twitter, and it is
                now maintained by a team of developers and contributors.

                Bootstrap provides a variety of components such as navigation menus, forms, buttons, alerts, modals,
                carousels, and more, that can be easily customized to fit the design of your web project. Bootstrap also
                includes a responsive grid system that makes it easy to create layouts that work well on a range of
                devices and screen sizes.</div>
            <div class="col-md-2 col-sm-2 my-col"></div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
 </body>
 </html>
diff --git a/style.css b/style.css
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Rampart+One&display=swap');

 body {
    margin: 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;

 }

 .my-container {
    border: 1px solid #000;

 }

 .my-row {
    border: 1px solid #000;
    /* height: 550px; */
    padding: 15px 10px;
 }

 .my-col {
    border: 1px solid #000;
    text-align: left;
    text-justify: auto;
    overflow: hidden;
 }

 .my-col:first-child {
    text-orientation: upright;
    writing-mode: vertical-rl;
    font-family: 'Rampart One', cursive;
    font-size: 2rem;
 }

 .my-col:last-child {
    background-image: url('https://images.unsplash.com/photo-1677629322752-7045c2c04b5b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80');
    background-size: auto 100%;
    background-position: center;

 }



 @media (max-width:575px) {
    .my-col:first-child {
        text-orientation: upright;
        writing-mode: horizontal-tb;
        font-family: 'Rampart One', cursive;
        font-size: 2rem;
    }
 }
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap demo</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
	integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
	<link rel="stylesheet" href="./style.css">
	</head>

	<body>
	<div class="container my-container">
	<div class="row justify-content-around my-row">
	<div class="col-md-1 col-sm-2 my-col">Welcome</div>
	<div class="col-md-4 col-sm-4 my-col">
	Bulma and Bootstrap are both popular CSS frameworks used in web development, but they have some key
	differences:

	Design philosophy: Bulma is focused on simplicity and flexibility, while Bootstrap is designed to be a
	complete toolkit with a more opinionated approach to design. Bulma provides a set of basic styles and
	components that can be easily customized, while Bootstrap includes a more extensive set of components
	and styles with a more consistent design.
	</div>
	<div class="col-md-4 col-sm-4 my-col">Bootstrap is a popular front-end framework that provides a set of
	pre-designed HTML, CSS, and JavaScript components and styles, which make it easy to create responsive
	and mobile-first web pages and applications. Bootstrap was originally developed by Twitter, and it is
	now maintained by a team of developers and contributors.

	Bootstrap provides a variety of components such as navigation menus, forms, buttons, alerts, modals,
	carousels, and more, that can be easily customized to fit the design of your web project. Bootstrap also
	includes a responsive grid system that makes it easy to create layouts that work well on a range of
	devices and screen sizes.</div>
	<div class="col-md-2 col-sm-2 my-col"></div>
	</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
	crossorigin="anonymous"></script>
	</body>
	</html>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Rampart+One&display=swap');

	body {
	margin: 30px;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;

	}

	.my-container {
	border: 1px solid #000;

	}

	.my-row {
	border: 1px solid #000;
	/* height: 550px; */
	padding: 15px 10px;
	}

	.my-col {
	border: 1px solid #000;
	text-align: left;
	text-justify: auto;
	overflow: hidden;
	}

	.my-col:first-child {
	text-orientation: upright;
	writing-mode: vertical-rl;
	font-family: 'Rampart One', cursive;
	font-size: 2rem;
	}

	.my-col:last-child {
	background-image: url('https://images.unsplash.com/photo-1677629322752-7045c2c04b5b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80');
	background-size: auto 100%;
	background-position: center;

	}



	@media (max-width:575px) {
	.my-col:first-child {
	text-orientation: upright;
	writing-mode: horizontal-tb;
	font-family: 'Rampart One', cursive;
	font-size: 2rem;
	}
	}