Scribd
Upload
70 views4 pages

Css Bootcamp Assignment 2

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.

Uploaded by

Ramakrishnan Ramasubramanian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
70 views4 pages

Css Bootcamp Assignment 2

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.

Uploaded by

Ramakrishnan Ramasubramanian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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