Scribd Logo
Upload

Welcome to Scribd!

  • Css Bootcamp Assignment 2

    Uploaded by

    Ramakrishnan Ramasubramanian
    15 views4 pages
    This document contains the CSS code for an assignment involving the styling of web page elements. The CSS code styles multiple elements including a box container with rounded borders, a banner image with overlay text, and a relative/absolute positioning layout for an image with descriptive text. It positions elements, sets colors, fonts, sizes and applies effects like image overlay.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains the CSS code for an assignment involving the styling of web page elements. The CSS code styles multiple elements including a box container with rounded borders, a banner image with overlay text, and a relative/absolute positioning layout for an image with descriptive text. It positions elements, sets colors, fonts, sizes and applies effects like image overlay.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    15 views4 pages

    Css Bootcamp Assignment 2

    Uploaded by

    Ramakrishnan Ramasubramanian
    This document contains the CSS code for an assignment involving the styling of web page elements. The CSS code styles multiple elements including a box container with rounded borders, a banner image with overlay text, and a relative/absolute positioning layout for an image with descriptive text. It positions elements, sets colors, fonts, sizes and applies effects like image overlay.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    File: Edit Selection View Go Run a552-1.

    c55 - lesrningdat-Visa Studio Code


    9 Assignment 2 X +
    O inkedinhtml O zomato.htmi {1 launchison # ass2-1.Cs X
    #as2-2cs # Untitl
    (Ccollege stuft > HTML zomatnhtm> html > boty> d h Ccolege tutt ) HTAL 3 # a2-1s
    TVBE html>
    TYPE .box
    rder: 2px solid Elightgray;
    hoad

    <title>Assignment 2</title>
    Ni dth: coloc:lighteray;
    so0nv
    <link rel="stylesheet" href-"ass2-1.css"> onder-radius: 14p%; Promoted
    ine: 40n

    ad
    Bargin: 20px auto;
    <div class="box">
    <div class="rel"> -relf
    <div class"abs"
    background -image: url("https:/lsource, unspla
    <P class="promo">promoted</p> background-size: cover:
    <h3 class="offer"se% OFF up to border: 8;
    <ha class"time">38 Minc/has border-radius: 14px;
    width: 508px;
    </div> height: 300px;
    /div> positions relative;
    Margin: 0; 509% OFF up to 100 38 Min
    <h>Center Point Restraunt </h13
    <p style"color: grey;" North indi. .abs(
    position: absolute;
    11

    chr style="margin-left: 9; margin-right


    Center Point Restraunt
    Kdiv class="under">cbrDELIVER
    <div class="over"s Max safety</div> North indian, Chinese
    c/divs promo
    </div> top:28px;
    p class="txt">Follow all max safety me: left:30px;
    background-color: Drgb(106, 106, 103);
    </div color: rgb(208, 208, 155); Max safery Follow all max safety measures to ensure your
    idy border:0; DELIVERY food is safe
    ml: Width:80px;
    margin: 3epx 20px;

    .offer
    backgrournd-color: Brgb(218, 29, 29);
    color: Irgb(168, 187, 218);
    i dth: 188px;

    0 A0 Löunch Crome (learninguart) Tab Moves Focus Ln 55, Col 15 Spaces:4 UTFS CRLE CSS iridoas
    25*C ENG 0105
    Cloudy
    Q Search IN 4x D 14-07-2023
    ass2-2.r55-lEsmingdat - Visual Stucio Code
    Assignment 2 +
    B ofilehtml O beach.htmlA # ass2-2 css X
    O Fle | C/college%20stuffHTML/beachhtml
    college stutt > HTML beachhtml > tmi ody C toliege sutt > HTNL3 # ar-2i5 )
    VDE
    TYPE html> POlatiuol
    elatavet
    S g e : url ("https://s
    hackoround
    head:
    <title> Assigniment 2</title> bordert
    link rel-"stylesheet" href-"ass2-2.+
    Ihead
    bord
    or.adius: 20p23
    on:
    DOsition: relat

    body>
    cdiy class="relative">
    <div clas5="absolute">
    nd-size: cover;
    height : 400px;
    Explore the diersities in Bali
    Loem ipsun dolor sit amet consectetur adip
    <h1>Explore the diversit. dolore velitgelit. Enim, aceusamus quasi. Sint cumqu-unlbucpeeetiathot
    .absolute dolouni
    <p stylo-"font-size: sma color:hite;
    14 <hutton class="btn">Explore i font-family: system-ui,-apple Explore Now
    ldiv> left: et;
    </div> top: 505;
    body> position: absolute;
    transform: translate(-50%, -50%)

    .align!
    argin: 300px 10pK:
    color: white;

    .text
    argin-bottom: 108px;
    btn
    border-radius: 24px;
    biorder 8;
    padding: 29px;
    height :5epx;
    width: 200px;
    font-size: 16px;
    background-color:white;
    color:Jblack;
    margin-bottom: 35px;
    *2A0 Launch Cromie (learningdart) Ln 24 Col 1 Spacess 4 U- CRLF CSS Windows (indows64)
    26°C ENG 22:54
    Mostly cloudy
    Q Search IN 13-07-2023
    1 File Edit Selection View Go Run zomato_search.htmi-learningdat-Visual 5tudis Codie X
    zomato_search.htm X +
    D Launch Chv O zomatahtml zomat #ass2-3css # ass24.cs5
    O File Cycollege%620stuff/-HTML/Zomato.A
    VARIABLES C2ccllege stutt HTMU> TomatoSeaTeh hml>hmi C26plege stutt >HTHL> #as2-45 )
    DOCTPE html> rell
    thtml> background-image: url("https://s
    <head harkor coVer;
    link rel="stylesheet" href nt relative;
    width: 6senxs
    </ head: height450
    <bouy bordon
    <div class="rel">

    WATCH
    cdiy class="abs"
    <center

    ch1 class=" text1">Zomato</h .abs


    border-radius: 14px;
    Zomato
    <h2 style="color: Ddarksla color: white;
    <p class"search
    </Center>
    search f argin: 29px auto;
    Discover he bestfood & drinks in Lucknow
    padding: sepx;
    </div>
    4/divs Search for Restraunt, cusine or dish
    4/body> texti{
    18 /html: font-fanily: Tmpact, Haettenschw
    CALL STACK font-size: 5epX;
    9Launc. BUNTING
    5earch
    color:gray;
    border: 2px;
    background-color: hite;
    border.radius: 5px;
    height: 48px;
    padding: 2px;
    argin: 40px auto;

    LOADED SCRIPTS
    321
    BREAKPoINTS

    Caught Exceptio
    Uncaught Excep,
    BROWSER BREAKPOINTS

    0A0 Läunch Chrome (learningdart) Ln 18, Col 87 selected) Spaces 4 UTEB CRLE HIML WVindows tondowis
    30°C ENG 14:59
    Mostly cloudy
    HQ Search IN
    ) 14-07-2023
    2
    Fle: Edit Selection View linioedin.htmi -lesrningdat -Visual Shudig Code
    S Assignment2 +
    Irofilehtml O beach.html O linkedinhtml EIDingss #mystylet.ss # ass23cs5
    O File | C/college20stuff HTMLAinkedirnhtnl
    (Ccolege suft 3 HTML inkedinhtmiboyColege stutt 2 HTML #2-3st bs
    vcTvPE html> box
    order: 2px solid Elighteray;
    <head>
    Nidth cOo. ightgray;
    <titlesAssignment 2</titles
    dink rel-"stylesheet" href-"ass2-3 bordee-radius: 14pK;
    Dadti
    /head> heioht 300
    body> argin: 20px auto;
    <div class="box"
    <div class="rel" .rel{
    <div class="abs" background-iage: url("https://source.ur
    background-size: cover;
    </div> border : 8:
    e/diy> border-radius: 14px;
    <diy class-"text"
    <centerch1>Areena Sarthajs/ht:
    Width: se8px;
    height: 129px;
    Areena Sarthaj
    <p style-"color:grey: position: relative;
    11
    BCA Data Science
    div> margin: 0;
    4/div>
    /body> abs
    21 Ihtml 23 background-image: url("https://source.ur
    position: absolute;
    top: 50;
    border : Spx solid white;
    border-color: hite;
    border-radius: 55px;
    Midth: 11epx;
    height:11epx;
    left: 503:
    margin: 40px auto;
    transform: translate(-58%,-50%):

    .text
    border: 0;
    margin: B8px auto;
    O0 A0 Lounch Chrome tlearningdart) Ln 17, Col 19 Spsces 4 UI-8 CRLE HIML Windows indos-4)
    25*C ENG 23:56
    Mostly cloudy
    Q Search IN 4x D 13-07-2023
    2

    You might also like