CodeLeom · November 13, 2023 13:03
diff --git a/flexbox.html b/flexbox.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout</title>
    <style>
        body {
            max-width: 50rem;
            min-height: unset;
            padding: 1rem;
            border-color: grey;
            margin: 1rem auto;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            background: coral;
            border: 1px solid #eee;
        }
        
        .container > * {
            padding: 2px;
        }

        .sidebar {
            background: lightblue;
            outline: 1px solid red;
            flex-grow: 1;
            flex-basis: 7px;
        }
        .content {
            flex-basis: 0;
            flex-grow: 2;
            min-width: 70%;
        }

        .oreoluwa {
            display: flex;
            flex-direction: column;
            writing-mode: vertical-lr;
        }
    </style>
 </head>
 <body>
    <h1>FlexBox Layout Style</h1>

    <div class="container">
        <main class="content">
            <section>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum est suscipit cupiditate quibusdam earum molestiae itaque cumque sapiente magni corrupti amet eos debitis perferendis saepe vitae ipsum deleniti, dolores animi!

                </p>
            </section>
        </main>   
            <aside class="sidebar">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, beatae.
                </p>
            </aside>
        
    </div>

    <h1>Creating a Flex Container</h1>
    <div class="oreoluwa">
        <div>One</div>
        <div>Item two</div>
        <div>Let's refer to this as Item 3</div>
    </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Flexbox Layout</title>
	<style>
	body {
	max-width: 50rem;
	min-height: unset;
	padding: 1rem;
	border-color: grey;
	margin: 1rem auto;
	}
	.container {
	display: flex;
	flex-wrap: wrap;
	background: coral;
	border: 1px solid #eee;
	}

	.container > * {
	padding: 2px;
	}

	.sidebar {
	background: lightblue;
	outline: 1px solid red;
	flex-grow: 1;
	flex-basis: 7px;
	}
	.content {
	flex-basis: 0;
	flex-grow: 2;
	min-width: 70%;
	}

	.oreoluwa {
	display: flex;
	flex-direction: column;
	writing-mode: vertical-lr;
	}
	</style>
	</head>
	<body>
	<h1>FlexBox Layout Style</h1>

	<div class="container">
	<main class="content">
	<section>
	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum est suscipit cupiditate quibusdam earum molestiae itaque cumque sapiente magni corrupti amet eos debitis perferendis saepe vitae ipsum deleniti, dolores animi!

	</p>
	</section>
	</main>
	<aside class="sidebar">
	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, beatae.
	</p>
	</aside>

	</div>

	<h1>Creating a Flex Container</h1>
	<div class="oreoluwa">
	<div>One</div>
	<div>Item two</div>
	<div>Let's refer to this as Item 3</div>
	</div>
	</body>
	</html>
No results found