WD 21. UnderstandingFloat&Clear

-

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aligment</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Ubuntu', sans-serif;
        }

        .container {
            width: 900px;
            border: 3px solid purple;
            margin: 33px auto;
            background-color: sandybrown;
        }

        .item {
            border: 3px solid grey;
            margin: 12px 3px;
            padding: 12px 3px;
            background-color: rgb(248, 200, 200);
        }

        #fruit {
            float: left;
            width: 48%;
        }

        #computer {
            float: right;
            width: 48%;
        }

        #stationary {
            /* float: left; */
            /* clear: left; */
            clear: both;
            width: 100%;
        }

        p,
        h3 {
            /* text-align: right;
            text-align: left;
            text-align: center; */
            text-align: justify;
        }

        h1 {
            margin:23px auto;
            width: 455px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Welcome to my store</h1>
        <div id="fruit" class="item">
            <h3>Fruits</h3>
            <p id="fruitpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem iste
                corporis, autem quod totam laudantium fuga veritatis illo quia ea commodi saepe reprehenderit
                consequuntur sint molestiae perspiciatis impedit laboriosam corrupti? Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Quas, porro necessitatibus! Dolore aperiam animi voluptas, modi adipisci,
                molestias debitis repellendus assumenda dolorem expedita pariatur saepe et nihil. Consequatur nulla
                repudiandae ea itaque molestiae sequi?Lorem ipsum dolor sit amet.</p>
        </div>

        <div id="computer" class="item">
            <h3>Computer</h3>
            <p id="computerpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
                iste corporis, autem quod totam laudantium fuga veritatis illo quia ea commodi saepe reprehenderit
                consequuntur sint molestiae perspiciatis impedit laboriosam corrupti?Lorem ipsum dolor sit amet
                consectetur adipisicing elit. Corrupti provident architecto voluptate molestiae debitis magnam amet
                beatae, fugiat voluptatum velit ut corporis facere quod, qui, aspernatur adipisci ipsam nam accusantium
                blanditiis error omnis veniam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, esse.
            </p>
        </div>

        <div id="stationary" class="item">
            <h3>Stationary</h3>
            <p id="stationarypara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
                iste corporis, autem quod totam laudantium fuga veritatis illo quia ea commodi saepe reprehenderit
                consequuntur sint molestiae perspiciatis impedit laboriosam corrupti?</p>
        </div>

        <div id="glasses" class="item">
            <h3>Glasses</h3>
            <p id="glassespara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
                iste corporis, autem quod totam laudantium fuga veritatis illo quia ea commodi saepe reprehenderit
                consequuntur sint molestiae perspiciatis impedit laboriosam corrupti?</p>
        </div>
    </div>
</body>
</html>

#Output:


Comments

Post a Comment

Popular posts from this blog

JAVA Lab Programs

-
1. Calculator using switch case: import java.util.Scanner; public class Calculator{ public static void main (String[] args) { Scanner scanner = new Scanner(System. in ); System. out .println( "Calculator" ); System. out .println( "1. Addition" ); System. out .println( "2. Subtraction" ); System. out .println( "3. Multiplication" ); System. out .println( "4. Division" ); System. out .println( "5. Exit" ); System. out .println( "Enter your choice: " ); int choice = scanner.nextInt(); switch (choice){ case 1 : System. out .println( "Enter two numbers: " ); int num1 = scanner.nextInt(); int num2 = scanner.nextInt(); int sum = num1 + num2; System. out .println( "The sum is: " + sum); break ; case 2 : ...
Read more

HANGMAN GAME

-
import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.util.Random; public class Main extends JFrame { private static final String[] WORDS = { "HELLO" , "WORLD" , "COMPUTER" , "JAVA" , "PROGRAMMING" , "ECLIPSE" }; private static final int MAX_TRIES = 6 ; private String wordToGuess ; private char [] guessedLetters ; private int triesLeft ; private JLabel wordLabel ; private JLabel triesLabel ; private JTextField letterInput ; private JButton guessButton ; public Main () { setTitle( "Hangman Game" ); setDefaultCloseOperation(JFrame. EXIT_ON_CLOSE ); setSize( 400 , 300 ); setLocationRelativeTo( null ); // Center window on screen // Initialize game state wordToGuess = selectWord(); guessedLetters = new char [ wordToGuess .length()]; triesLeft = MAX_...
Read more

Flutter Lab Program

-
5a1 import 'package:flutter/material.dart' ; class MyStatelessWidget extends StatelessWidget {   @override   Widget build ( BuildContext context) {     return Scaffold (       appBar : AppBar (         title : Text ( 'Stateless Widget Example' ),       ),       body : Center (         child : Text (           'Hello, Flutter!' , // In this example, MyStatelessWidget does not change after it is built. The text "Hello, Flutter!" is static.           style : TextStyle (fontSize : 24 ),         ),       ),     );   } } void main () {   runApp ( MaterialApp (     home : MyStatelessWidget (),   )); } 5a2 import 'package:flutter/material.dart' ; class MyStatefulWidget extends StatefulWidget {   @ override   _MyStatefulWidgetState createState...
Read more