Scribd
Upload
53 views

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
Available Formats
Download as PDF, TXT or read online on Scribd
53 views

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
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