Airbnb Project

EMC
WELCOME TO
ERROR MAKES CLEVER
ACADEMY
INTRODUCTION TO FLEX CONTAINER
WHAT IS FLEX?
Flexbox, or the Flexible Box
Layout, is a layout model in CSS
(Cascading Style Sheets). The
main goal of flexbox is to make
the container adjust its items'
width and height to fill the
available space in the best possible
way on different screen sizes and
devices.
DISPLAY:FLEX
<div class="one" style="display: flex;">
<h1>One</h1>
<h1>Two</h1>
<h1>Three</h1>
</div>
DISPLAY:FLEX
FLEX CONTAINER
FLEX ITEMS
MAIN AXIS VS CROSS AXIS
In flexbox:
1. **Main Axis:** The primary axis along which flex items

are distributed. It is defined by the `flex-direction` property
(e.g., `row` for a horizontal main axis, `column` for a
vertical main axis).
2. **Cross Axis:** The perpendicular axis to the main axis.

It is defined by the `flex-direction` property opposite to the
main axis (e.g., `column` for a horizontal main axis, `row`
for a vertical main axis).
MAIN AXIS VS CROSS AXIS
flex-direction: row
Here Main Axis is row and cross axis is column
flex-direction: column
Here Main Axis is column and cross axis is row

EXERCISE:1
FLEX WRAP
`flex-wrap` is a CSS property used in flex containers

to define whether the flex items should be forced onto
a single line or can wrap onto multiple lines.
• wrap
• no-wrap
EXERCISE:2
JUSTIFY CONTENT
center, flex-start,space-between
Align Items
Align-items is a CSS property used in flex containers to define
how flex items are aligned along the cross axis, which is
perpendicular to the main axis.
Justify + Align Exercise
Flex Basis
Flex-Basis is a property in CSS that defines the initial size

of a flex item along the main axis before any available
space is distributed.
Task 1:
WHAT IS CSS ANIMATION
CSS ANIMATION
CSS animations are a way to gradually

change an element's style or appearance over
a specified duration. Animations can be used
to create visually appealing effects on web
pages, enhancing the user experience.
HOVER
DO NOT ADD TOO MUCH ANIMATION
Adding more animations to a website can potentially slow it

down. Animations, especially complex ones or those
involving a large number of elements, require additional
computing resources.
This can lead to increased CPU and memory usage, longer

loading times, and reduced overall performance.
TRANSITION PROPERTY
TRANSITION PROPERTY
In CSS, a transition is a way to smoothly animate changes in
property values over a specified duration. Transitions are
commonly used to enhance the user experience by providing
smooth and visually appealing effects when elements change
state.
ANIMATIONS USING TRANSITION
.box{
background-color: black;
width: 200px;
height: 200px;
}
.box:hover{
background-color: red;
transition-duration: 2s;
transition-delay: 2s;
}
ANIMATIONS USING TRANSITION
TRANSFORM PROPERTY
The transform property in CSS is a powerful and versatile

property that allows you to apply various 2D and 3D
transformations to an element. Transformations can affect the
position, size, and rotation of an element, as well as skewing
and scaling.
TRANSFORM PROPERTY
transform: transform-funct i on ;
The transform-function is a function that defines the

transformation to be applied.
Translation (translate): Moves an element from its current

position along the X and/or Y axis.
Rotation (rotate): Rotates an element by a specified angle.
Scaling (scale): Changes the size of an element by a specified

scale factor.
ADVANCE ANIMATION USING
KEYFRAMES.
KEYFRAMES.
In CSS animations, keyframes are used to define a sequence of
styles to be applied to an element at various points in time during
the animation. Keyframes allow you to control the intermediate
steps between the starting and ending states of the animation.
KEYFRAMES.
.box{
background-color: black;
width: 200px; @keyframes left-to-right {
height: 200px; 0%{
animation-name: left-to-right; margin-left: 0;
animation-duration: 2s; }
} 100%{
margin-left: 200px;
}
}
KEYFRAMES.
KEYFRAMES.
MAKE TEXT DROP FROM TOP
MAKE A CIRCLE AND MAKE IT
RUN
AIRBNB PROJECT
FINAL
OUTPUT
STEP
Setting up the fonts, links, css
1:
<! DOCTYP E h t ml >
<h tml l an g ="en ">
<h ead>
<meta ch ar s et ="UTF - 8 ">
<meta n ame="v i ewp o r t " co n t en t ="wi d t h =d ev i ce- wi d t h , i n i t i al - s cal e=1 .0 ">
<t itle>Ai r b n b </ t i t l e>
<l ink r el ="p r eco n n ect " h r ef ="h t t p s: / / fo n t s.g o o g l eap i s .co m">
<l ink r el ="p r eco n n ect " h r ef ="h t t p s: / / fo n t s.g s t at i c.co m" cr o ss o r i g i n >
<l ink h r ef="h t t p s : / / f o n t s.g o o g l eap i s.co m/ css 2 ?f ami l y =P o p p i n s&d i sp l ay =s wap " r el ="s t y l esh eet ">
<l ink r el ="s t y l esh eet " h r ef ="h t t p s: / / cd n j s .cl o u d f l ar e.co m/ aj ax / l i b s/ f o n t -awes o me/ 6 .4 .0 / cs s/ al l .mi n .cs s">
<! - - I mag e S o u rce: h t t p s : / / so u r ce.u n sp l as h .co m/ 2 0 0 x 2 0 0 / ?ai r b n b ?1 - - >
<l ink r el ="s t y l esh eet " h r ef ="s t y l e.cs s">

</ head >
<b o dy >
</ bo d y >
</ html >

STEP 2:
Setting up Header in HTML
STEP 3:
Adding CSS for Logo & Search Icon
STEP 4:
Adding CSS for Search bar
STEP 5:
Adding CSS for header
STEP 6:
Adding CSS for header
STEP 7:
Creating a filter Section
STEP 8:
Adding few more filters
STEP 9:
Styling filter section
STEP 10:
Add hr tag
STEP
11:
Add more filters
OUTPUT
So far
STEP 12:
Set filter color to gray and change it when user hover
STEP 13:
Setup a hotel container with image and desc
STEP 14:
Set another one
STEP 15:
Setup style for card image
STEP 16:
Add 2 more images
STEP 17:
Set style for hotel container
STEP 18:
Output
STEP 19:
Setup Footer
STEP 19:
Setup Footer
STEP 20:
Final output
TAKE A SCREENSHOT &
UPLOAD IT ON LINKEDIN

Airbnb Project

Uploaded by

Copyright:

Available Formats

Airbnb Project

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Airbnb Project

Uploaded by

Copyright:

Available Formats

EMC

1. Main Axis: The primary axis along which flex items

2. Cross Axis: The perpendicular axis to the main axis.

Here Main Axis is row and cross axis is column

Here Main Axis is column and cross axis is row

`flex-wrap` is a CSS property used in flex containers

Flex-Basis is a property in CSS that defines the initial size

CSS animations are a way to gradually

Adding more animations to a website can potentially slow it

This can lead to increased CPU and memory usage, longer

The transform property in CSS is a powerful and versatile

The transform-function is a function that defines the

Translation (translate): Moves an element from its current

Rotation (rotate): Rotates an element by a specified angle.

Scaling (scale): Changes the size of an element by a specified

<! - - I mag e S o u rce: h t t p s : / / so u r ce.u n sp l as h .co m/ 2 0 0 x 2 0 0 / ?ai r b n b ?1 - - >

<l ink r el ="s t y l esh eet " h r ef ="s t y l e.cs s">

</ html >

You might also like