SlideShare a Scribd company logo
1 of 94
Download to read offline
CSS Lessons Learned
the Hard Way
Zoe Mickley Gillenwater
@zomigi
ConvergeSE
Columbia, SC, USA
15 April 2015
I make things…
…some of which come out
nicely…
Web sites
Books
Stunning CSS3:
A Project-based Guide
to the Latest in CSS
www.stunningcss3.com
Flexible Web Design:
Creating Liquid and Elastic
Layouts with CSS
www.flexiblewebbook.com
Kids
Cakes
…but sometimes I make
mistakes…
Gardening
Gardening
https://www.flickr.com/photos/coachjeff/3600883487/
Never compare your inside
with somebody else’s outside.
special people
vs.
normal people
Innovation requires a
mindset that rejects the
fear of failure and replaces
that fear of failure with the
joy of exploration and
experimental learning.
Dr. Edward D. Hess
We also need to accept and
embrace the concept of failure,
not because failure is a good thing but
because it’s a natural part of
the path of progress.
If you’re failing, at least that means you’re trying — not
remaining on the outside of the arena, looking in.
Helen Walters
Creative people
experiment a lot more,
therefore succeed a lot more,
therefore fail a lot more.
Some of my
helpful CSS mistakes
Flexbox demo
www.smoresday.us
Use Chrome,
Opera, Safari 7,
Firefox 28+, or IE
10+ for full effect
.action
.component
HTML without flexbox
<form class="builder">
<div class="wrap">
<section class="component">
<section class="component">
<section class="component">
<section class="component">
</div>
<section class="action">
</form>
HTML for flexbox version
<form class="builder">
<section class="component">
<section class="component">
<section class="component">
<section class="component">
<section class="action">
</form>
Allow boxes to wrap
.builder {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 40px -20px;
}
Using flex to control width/height
.flex-item {
flex: 1 0 100px;
}
flex-grow flex-shrink flex-basis
Defining the flex property
flex-grow
how much
flex item will
grow relative
to other items
if extra space
is available
(proportion
of extra space
that it gets)
flex-shrink
how much item
will shrink
relative to
others if there
is not enough
space
(proportion of
overflow that
gets shaved off)
flex-basis
the initial
starting size
before free
space is
distributed
(any standard
width/height
value, including
auto)
My first attempt
.component {
flex: 1;
}
.action {
flex: 1 1 100%;
}
Zoe’s Brain Said:
“Since .action starts
out at 100%, it won’t
have space to sit on
the first line with the
content preceding it,
and will wrap to a
second line.”
Flexbox fail
This fixed it
.component {
flex: 1;
margin-right: 1px;
}
/* this is needed to
make .action wrap to
second line. why??? */
My comment on the 1px margin
The hidden flex-basis value
.component {
flex: 1 1 0px;
}
.action {
flex: 1 1 100%;
}
Reality:
Since it’s fine for each
.component to shrink
to only 0px wide, a
100% wide element
can and will sit on the
same line as all the
components.
That’s why margin “fixed” it
.component {
flex: 1;
margin-right: 1px;
}
.action {
flex: 1 1 100%;
}
What’s happening:
Now each .component
starts out taking up
1px of space, so a
100% wide element
can’t and won’t sit on
the same line with any
of the components.
Fixing flex-basis to force the wrap
.component {
flex: 1 1 200px;
}
.action {
flex: 1 1 100%;
}
Fixed:
.action will always
wrap to new line,
and .component
boxes will wrap to
additional lines when
there’s less space
than their combined
flex-basis values
(plus margin, etc.).
This was not just a case of
succeeding despite a mistake.
It was a case of succeeding
because of a mistake.
Takeaway:
don’t use CSS shorthand
without understanding
all the pieces
Takeaway:
you are smarter than the
spec
Let’s talk about
another mistake
Shadow style inspiration
http://sliderpro.net/examples/minimal-slider/
The plan:
1. create shadow with generated content
2. skew it with CSS perspective
3. profit
My first attempt
.lightbox:before {
content: "";
position: absolute;
z-index: -2;
left: 2%;
bottom: 0;
width: 96%;
height: 1px;
box-shadow: 0 25px 30px 15px hsla(0,0%,0%,.4);
transform: perspective(20em);
}
Perspective fail
What does rotateX actually
do?
The 3 axes
X horizontal, left-right
Y vertical, up-down
Z away-towards you
A helpful diagram: your hand.
Photo: http://www.smashingmagazine.com/2012/01/06/adventures-in-the-third-dimension-css-3-d-transforms/
Or, if your hand is effed up:
http://architecture.gtu.ge/MPL/Multimodal%20Explorer/Acad_11/14control_workplane0/control_workplane.htm
?
Rotate around the axis not
in the direction of the axis
As explained well by Peter Gasston in
http://www.smashingmagazine.com/2012/01/06/adventures-
in-the-third-dimension-css-3-d-transforms/
My quick sketch
Adding rotateX with perspective
.lightbox:before {
content: "";
position: absolute;
z-index: -2;
left: 6%;
bottom: 0;
width: 88%;
height: 1px;
box-shadow: 0 25px 30px 15px hsla(0,0%,0%,.4);
transform: perspective(20em) rotateX(50deg);
}
Perspective working
Takeaway:
sometimes pen and paper
can make a new concept
real to you
A two-dimensional problem
Absolute positioning
https://www.flickr.com/photos/40325561@N04/8176648959/
Web layout is
horizontally biased
Flexbox is not row-centric
.container {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
min-height: 200px;
}
Correct
IE 11 min-height bug
Fixed with another flex wrapper
<div class="outer">
<div class="container">
<div class="bottom">...</div>
</div>
</div>
.outer {
display: flex;
}
Takeaway:
thinking about web layout in
rows can be limiting
A more public mistake
Sometimes you need to add
special content for
screen reader users…
…and occasionally you need to
hide content from
screen reader users.
I needed CSS classes to:
1. Hide content visually and aurally
2. Hide just the text of an element, not
whole element, but keep text spoken
3. Hide whole element visually but keep
its text spoken by screen readers
Hide content visually and aurally
.hidden-silent {
display: none;
visibility: hidden;
}
Hide text only but keep it spoken
.hidden-text-spoken {
text-indent: -999em;
overflow: hidden;
display: inline-block;
}
Hide element but keep it spoken
Yahoo! Accessibility blog said to use:
.hidden-spoken {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE 6-7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
Article now online at https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
Problem:
NVDA in Firefox wouldn’t read
<label> with this class
https://www.flickr.com/photos/87255087@N00/6261885005/
Delete half the code,
see if bug goes away,
repeat
I narrowed it down to
overflow: hidden
Removing this part caused labels to be read
correctly in Firefox by NVDA
But removing it still kept the
content hidden.
So why was it there to begin with?
This scrollbar is what overflow fixes
Now that I understood
what overflow did, I could
decide if I needed it.
How I fixed my mistake
• Removed overflow:hidden from new
instances going forward (but sadly not
fixed in existing style sheets)
• Updated documentation to advise
adding it on as-needed basis
(By the way, this FF/NVDA
bug seems to be gone now.)
Takeaway:
one-size-fits-all isn’t always
best for your needs
Takeaway:
you can get help when you
share your confusion
publicly
Be willing to fail…
…and then tell us about it.
Vulnerability is the birthplace of
innovation, creativity, and change.
To create is to make something
that has never existed before.
There's nothing
more vulnerable than that.
Dr. Brené Brown
Sharing mistakes has
benefits
http://www.flickr.com/photos/stilleben/49644790/
We all do imperfect work
/* this is needed to
make .action wrap to
second line. why??? */
The evidence in the comments
// Dear future me. Please forgive me.
// I can't even begin to express how
sorry I am.
// I am not sure if we need this, but
too scared to delete.
// Magic. Do not touch.
Revisiting comments
// TODO: Fix this. Fix what?
// somedev1 - 6/7/02
Adding temporary tracking of Login screen
// somedev2 - 5/22/07
Temporary my ass
99% of the population of the
world doesn’t know CSS.
Zoe’s made-up statistic
99% of the population of the
world doesn’t know ______.
This is probably true too.
You are awesome,
but and you make mistakes.
Let’s use our confidence in
our skills to build others up
and bravely admit our own
shortcomings.
Thank you
Zoe Mickley Gillenwater
@zomigi
Beyond Tellerand
Berlin
4 November 2014

More Related Content

Viewers also liked

Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Yandex
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
Aarti P
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
itc73
 
решение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте baрешение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте ba
ISsoft
 
Тестирование требований
Тестирование требованийТестирование требований
Тестирование требований
ISsoft
 
Css part2
Css part2Css part2
Css part2
ISsoft
 
Bdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проектеBdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проекте
ISsoft
 

Viewers also liked (20)

Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
 
WordPress as Rapid Prototyping Tool
WordPress as Rapid Prototyping ToolWordPress as Rapid Prototyping Tool
WordPress as Rapid Prototyping Tool
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
Joomla Request To Response
Joomla Request To ResponseJoomla Request To Response
Joomla Request To Response
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
 
Пингвины из калининграда
Пингвины из калининградаПингвины из калининграда
Пингвины из калининграда
 
решение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте baрешение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте ba
 
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)
 
Тестирование требований
Тестирование требованийТестирование требований
Тестирование требований
 
Uwe usability evaluation
Uwe usability evaluationUwe usability evaluation
Uwe usability evaluation
 
Php Security
Php SecurityPhp Security
Php Security
 
6. таблицы и другие теги html
6. таблицы и другие теги html6. таблицы и другие теги html
6. таблицы и другие теги html
 
Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5
 
Box Model
Box ModelBox Model
Box Model
 
How Joomla Works
How Joomla WorksHow Joomla Works
How Joomla Works
 
FL Blog Con 2015: How To Find The Best WordPress Plugins For You
FL Blog Con 2015: How To Find The Best WordPress Plugins For YouFL Blog Con 2015: How To Find The Best WordPress Plugins For You
FL Blog Con 2015: How To Find The Best WordPress Plugins For You
 
Таблицы Html
Таблицы HtmlТаблицы Html
Таблицы Html
 
Css part2
Css part2Css part2
Css part2
 
Bdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проектеBdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проекте
 

Similar to CSS Lessons Learned the Hard Way (ConvergeSE)

Similar to CSS Lessons Learned the Hard Way (ConvergeSE) (20)

CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)
 
CSS Lessons Learned The Hard Way – Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe GillenwaterCSS Lessons Learned The Hard Way – Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe Gillenwater
 
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)
 
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)
 
Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)
 
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)
 
Build your website before you install wordpress.
Build your website before you install wordpress.Build your website before you install wordpress.
Build your website before you install wordpress.
 
High performance websites session1
High performance websites  session1High performance websites  session1
High performance websites session1
 
Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)
 
Making Web Accessibility Sexy
Making Web Accessibility SexyMaking Web Accessibility Sexy
Making Web Accessibility Sexy
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with libraries
 
The road to professional web development
The road to professional web developmentThe road to professional web development
The road to professional web development
 
Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Floats
FloatsFloats
Floats
 
Calc ii complete
Calc ii completeCalc ii complete
Calc ii complete
 
Look ma! No images!
Look ma! No images!Look ma! No images!
Look ma! No images!
 
Ego vs. Product Development
Ego vs. Product DevelopmentEgo vs. Product Development
Ego vs. Product Development
 
the 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp IIthe 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp II
 
Flexbox Will Shock You!
Flexbox Will Shock You!Flexbox Will Shock You!
Flexbox Will Shock You!
 

More from Zoe Gillenwater

Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
Zoe Gillenwater
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
Zoe Gillenwater
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
 

More from Zoe Gillenwater (20)

Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)
 
Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)
 
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
 
Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)
 
Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)
 
Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)
 
Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)
 
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)
 
Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into Practice
 
CSS3 Layout
CSS3 LayoutCSS3 Layout
CSS3 Layout
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
 
The Future of CSS Layout
The Future of CSS LayoutThe Future of CSS Layout
The Future of CSS Layout
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
CSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experienceCSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experience
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Real-world CSS3
Real-world CSS3Real-world CSS3
Real-world CSS3
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
 

Recently uploaded

如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
drmarathore
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
awasv46j
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
Sarbjit Bahga
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
Isadora Agency
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...
Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...
Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...
drmarathore
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 

Recently uploaded (20)

如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers Paris
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
 
Branding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdfBranding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdf
 
Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design
 
Solutions For Social Media App Development (1).pptx
Solutions For Social Media App Development (1).pptxSolutions For Social Media App Development (1).pptx
Solutions For Social Media App Development (1).pptx
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
Digital Marketing Company in Bangalore.pdf
Digital Marketing Company in Bangalore.pdfDigital Marketing Company in Bangalore.pdf
Digital Marketing Company in Bangalore.pdf
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...
18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...
18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...
 
Spring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers ParisSpring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers Paris
 
Edward Boginsky's Trailblazing Contributions to Printing
Edward Boginsky's Trailblazing Contributions to PrintingEdward Boginsky's Trailblazing Contributions to Printing
Edward Boginsky's Trailblazing Contributions to Printing
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 
Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...
Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...
Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
 

CSS Lessons Learned the Hard Way (ConvergeSE)