+
Ericka Herod is a veteran Graphic designer / Creative Director.
+ By the way of Los Angeles, California calling Austin, Texas her
+ home since 2008. Graduating top of her class from The Art Institute
+ of California-Los Angeles in 2003 with a bachelor's degree in Graphic
+ design. She has worked for top advertising agencies in Los Angeles.
+ Ericka has also worked for Trace Magazine New York/London from 2003-2009
+ where she had the chance to work with top photographers, journalist, artist,
+ and music icons.
+
+
WORK HISTORY:
ZENOSS (Enterprise Software)
+
+
SUNPOWER SOLAR SYSTEMS
+
Developed new brand standards and templates for global use and distribution
+
Designed themes for conferences, collateral print materials, conference materials, print and web banner ads
+
+
RAZORFISH
+
Samsung, Kellog, HSN.com, State Farm
+
Created interactive design concepts
+
Designed mood boards, storyboards and interactive page layouts
+
Provided quality assurance on creative deliverables
+
+
SANDERS/WINGO
+
+
Trace Magazine LA/NYC/UK
+
True Agency Los Angeles
+
TBWA Chiat/Day Los Angeles
+
Campbell-Ewald Los Angeles
+
+
+
diff --git a/02week/bio/css/Background-element-01.png b/02week/bio/css/Background-element-01.png
new file mode 100644
index 0000000000..ac5b6ae08e
Binary files /dev/null and b/02week/bio/css/Background-element-01.png differ
diff --git a/02week/bio/css/Background2.jpg b/02week/bio/css/Background2.jpg
new file mode 100644
index 0000000000..36c8de4146
Binary files /dev/null and b/02week/bio/css/Background2.jpg differ
diff --git a/02week/bio/css/Facebook.png b/02week/bio/css/Facebook.png
new file mode 100755
index 0000000000..9f415e2050
Binary files /dev/null and b/02week/bio/css/Facebook.png differ
diff --git a/02week/bio/css/Linkedin.png b/02week/bio/css/Linkedin.png
new file mode 100755
index 0000000000..16a3a13174
Binary files /dev/null and b/02week/bio/css/Linkedin.png differ
diff --git a/02week/bio/css/ericka-profile-landing-page.jpg b/02week/bio/css/ericka-profile-landing-page.jpg
new file mode 100644
index 0000000000..4d411ea623
Binary files /dev/null and b/02week/bio/css/ericka-profile-landing-page.jpg differ
diff --git a/02week/bio/css/style.css b/02week/bio/css/style.css
index e69de29bb2..0996375e56 100644
--- a/02week/bio/css/style.css
+++ b/02week/bio/css/style.css
@@ -0,0 +1,132 @@
+*{
+ margin: 0;
+ padding: 0;
+}
+body {
+ margin: 0;
+ font-family: 'Nanum Myeongjo', serif;
+ font-size: 17px;
+ line-height: 1.2;
+ font-weight: 100;
+}
+#bkimage {
+ background-image: url('../css/Background2.jpg');
+ height: 100vh;
+ background-size: cover;
+ background-position: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 0 100px;
+}
+#txtcontainer {
+ font-size: 20px;
+ line-height: 50px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ font-family: 'Nanum Myeongjo', serif;
+ padding-right: 0px;
+}
+#position {
+ font-size: 20px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ font-family: 'Nanum Myeongjo', serif;
+ padding-right: 0px;
+}
+#aboutmelink {
+ font-size:15px;
+ text-decoration: none;
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ padding-right: 0px;
+}
+nav {
+ text-align: center;
+ font-size: 13px;
+ font-family: Arial, Helvetica, sans-serif;
+ padding-top: 20px;
+ padding-bottom: 0px;
+}
+ ul {
+ list-style-type: none;
+ margin: 0px;
+ padding: 0px;
+ overflow: hidden;
+ background-color: none;
+}
+li {
+ display: inline;
+ padding: 8px;
+}
+a:link { text-decoration: none;}
+a:visited {text-decoration: none;}
+a:hover {text-decoration: none; color: red;}
+a:active { text-decoration: underline;}
+
+.box-2 {
+ background-image: url(../css/Background2.jpg);
+ display: flex;
+ flex-direction: column;
+ justify-content: left;
+ padding-left: 50px;
+ align-items: center;
+}
+#section-a {
+ padding: 75px;
+ background-color:#E6E6E6;
+ color: #333333;
+ text-align: left;
+ line-height: 2.3;
+}
+#section-b {
+ padding: 75px;
+ background-color:#666666;
+ color: #333333;
+ background-image: url(../css/Background2.jpg);
+ background-size: 100%;
+ line-height: 2.3;
+}
+#section-c {
+ display: flex;
+}
+
+#section-c div {
+ padding: 75px;
+ padding-bottom: 80px;
+ text-align: left;
+ flex-direction: column;
+}
+#section-c .box-1 {
+ background: #333333;
+ color:#E6E6E6;
+ font-size: 20px;
+ line-height: 50px;
+}
+#section-c .box-2 {
+ align-items: center;
+ line-height: 30px;
+ align-items: center;
+}
+footer {
+ text-align: center;
+ font-family: 'Nanum Myeongjo', serif;
+ background-image: url(../css/Background2.jpg);
+ padding: 30px;
+ background-size: 100%;
+}
+#social {
+ display: inline;
+}
+
+
diff --git a/02week/bio/index.html b/02week/bio/index.html
index e69de29bb2..dd542ea123 100644
--- a/02week/bio/index.html
+++ b/02week/bio/index.html
@@ -0,0 +1,72 @@
+
+
+
+
+
+
ericka herod
+
+
+
Creative /Graphic Deigner
+
+
+
+
+
+ Ericka Herod is a veteran Graphic designer / Creative Director.
+ By the way of Los Angeles, California calling Austin, Texas her
+ home since 2008. Graduating top of her class from The Art Institute
+ of California-Los Angeles in 2003 with a bachelor's degree in Graphic
+ design. She has worked for top advertising agencies in Los Angeles.
+
+
+
+
+
+ Ericka has also worked for Trace Magazine New York/London from 2003-2009
+ where she had the chance to work with top photographers, journalist, artist,
+ and music icons. Since 2008 she has worked for local Texas advertising agency
+ before stepping out into the technology realm in 2012. She
+ currently holds 2 positions as Creative Director in the tech
+ industry.
+
+
+
+
+
+ Whether she's creating branding for non-profits or
+ helping companies find their voice, Ericka is known for
+ building relationships with organizations and individuals.
+ P.S. Ericka is also a conductor of sound in Austin Texas music
+ culture since 2010 also-known as DJ I WANNA BE HER.
+
+
+
+
+
+
+
+
+
+
+
+ Ericka Blog
+
+
+ BLOG : ART . DESIGN . FASHION
+
+
+
+
+
Barbara Kruger a Hero for Heroes.
+
+
+
+ Barbara Kruger is best known for her silkscreen
+ prints where she placed a direct and concise
+ caption across the surface of a found photograph.
+ Her prints from the 1980s cleverly encapsulated the
+ era of "Reaganomics" with tongue-in-cheek satire;
+ especially in a work like (Untitled) I shop therefore
+ I am (1987), ironically adopted by the mall generation
+ as their mantra. As Kruger's career progressed, her work
+ expanded to include site-specific installations as well as
+ video and audio works, all the while maintaining a firm
+ basis in social, cultural, and political critique.
+ Since the 1990s, she has also returned to magazine design,
+ incorporating her confrontational phrases and images into
+ a wholly different realm from the art world. Associated with
+ postmodern Feminist art as well as Conceptual art, Kruger
+ combines tactics like appropriation with her characteristic
+ wit and direct commentary in order to communicate with the
+ viewer and encourage the interrogation of contemporary
+ circumstances.
+
+
+
+
+
+
Y3 = Master of Design
+
+
+
+ Yohji Yamamoto was born in 1943 in fashionable Yokohama
+ in the district of Tokyo. His mother was a dressmaker
+ and primarily responsible for opening the door to fashion
+ for her son. In 1966, he graduated with a degree in law
+ from Keio University in Tokyo but immediately enrolled
+ at the Bunka Fashion College to study fashion design.
+ He traveled to Paris on a student scholarship during his
+ time as a student there and when he graduated in 1969,
+ went to work for his mother as a dressmaker. Yamamoto’s
+ subsequent skill as a designer is connected to a great
+ extent to his first-hand understanding of dressmaking –
+ today, he is considered one of the master tailors of the
+ fashion world.
+
+
+
+
+
+
Naturalistic Calling
+
+
+
+ Los Angeles native and New York based visual artist,
+ Kehinde Wiley has firmly situated himself within art
+ history’s portrait painting tradition. As a contemporary
+ descendent of a long line of portraitists, including
+ Reynolds, Gainsborough, Titian, Ingres, among others,
+ Wiley, engages the signs and visual rhetoric of the h
+ eroic, powerful, majestic and the sublime in his r
+ epresentation of urban, black and brown men found
+ throughout the world. By applying the visual vocabulary
+ and conventions of glorification, history, wealth and
+ prestige to the subject matter drawn from the urban
+ fabric, the subjects and stylistic references for his
+ paintings are juxtaposed inversions of each other,
+ forcing ambiguity and provocative perplexity to pervade
+ his imagery. Wiley’s larger than life figures disturb
+ and interrupt tropes of portrait painting, often
+ blurring the boundaries between traditional and
+ contemporary modes of representation and the critical
+ portrayal of masculinity and physicality as it pertains
+ to the view of black and brown young men.
+
+
+
+
+
+
A Pair Made for Design
+
+
+
+ Charles Eames (1907–78) and Ray Eames (1912–88) gave
+ shape to America's twentieth century. Their lives and
+ work represented the nation's defining movements: the
+ West Coast's coming-of-age, the economy's shift from
+ making goods to producing information, and the global
+ expansion of American culture. The Eameses embraced the
+ era's visionary concept of modern design as an agent of
+ social change, elevating it to a national agenda. Their
+ evolution from furniture designers to cultural ambassadors
+ demonstrated their boundless talents and the overlap of
+ their interests with those of their country. In a rare era
+ of shared objectives, the Eameses partnered with the federal
+ government and the country's top businesses to lead the charge
+ to modernize postwar America. Born in St. Louis, Missouri, Charles Eames grew up in
+ America's industrial heartland. As a young man he worked
+ for engineers and manufacturers, anticipating his lifelong
+ interest in mechanics and the complex working of things.
+ Ray Kaiser, born in Sacramento, California, demonstrated her
+ fascination with the abstract qualities of ordinary objects
+ early on. She spent her formative years in the orbit of New
+ York's modern art movements and participated in the first
+ wave of American-born abstract artists.
+
+
+
+
+
+
+ ART . DESING . FASHION
+
+
+
\ No newline at end of file
diff --git a/02week/sites/css/style.css b/02week/sites/css/style.css
new file mode 100644
index 0000000000..0ecfe87087
--- /dev/null
+++ b/02week/sites/css/style.css
@@ -0,0 +1,120 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+.border-red{
+ border: 1px solid red;
+}
+
+.border-blue{
+ border: 1px solid blue;
+}
+
+.border-green{
+ border: 1px solid green;
+}
+
+body {
+ background-color: #DFDBE5;
+ background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20L0 20z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
+ height: 100vh;
+}
+
+nav {
+ height: 100px;
+ width: 100%;
+ display: block;
+ position: fixed;
+ padding: 10px 15px;
+ background-color: rgba(0, 0, 0, 0.639);
+ transition: background-color 0.3s ease;
+ z-index: 1;
+}
+
+nav:hover {
+ background-color: rgba(0, 0, 0, 0.187);
+}
+
+nav .logo{
+ display: inline-block;
+ height: 70px;
+ width: 70px;
+ text-align: center;
+}
+
+nav .logo i{
+ font-size: 65px;
+ margin: 15% 0;
+}
+
+nav ul{
+ height: 100%;
+ padding: 10px 0 0;
+ float: right;
+}
+
+
+ul li{
+ display: inline-block;
+ padding: 15px;
+ margin: 0 auto;
+}
+
+header {
+ height: 100vh;
+ background: white;
+ position: relative;
+
+}
+
+header .header_title {
+ background: aqua;
+ position: absolute;
+ /* height: 100%; */
+ display: inline-block;
+ width: 100%;
+ /* margin-top: 80px; */
+}
+
+header .parent_h1 {
+ background: red;
+ width: 50%;
+ height: 50%;
+ margin: 100px;
+ position: absolute;
+ text-align: center;
+}
+
+header h1 {
+
+
+}
+
+header section {
+ height: 100%;
+}
+
+.firstSection {
+ /* float: left; */
+ width: 33%;
+ background-color: royalblue;
+}
+
+.secondSection {
+ /* float: left; */
+ width: 33%;
+ background-color: purple;
+}
+
+.thridSection {
+ /* clear: both; */
+ background-color: black;
+ /* float: left; */
+ width: 33%;
+}
+ header section {
+ height: 300px;
+ display: inline-block;
+ }
\ No newline at end of file
diff --git a/02week/sites/index.html b/02week/sites/index.html
new file mode 100644
index 0000000000..6009374601
--- /dev/null
+++ b/02week/sites/index.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
wireframesite
+
+
+
+
+
+
+
+
+
+
+ link1
+ link2
+ link3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/03week/airplane/css/style.css b/03week/airplane/css/style.css
index e69de29bb2..f2ed5a6873 100644
--- a/03week/airplane/css/style.css
+++ b/03week/airplane/css/style.css
@@ -0,0 +1,345 @@
+* {
+ margin: 0;
+ padding:0;
+ box-sizing: border-box;
+}
+
+body {
+ background-image: url('../img/airline.jpg');
+ background-color: #193A55;
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+.ux-atlantic-logo {
+ float: left;
+ padding: 0px;
+}
+
+nav {
+ /* height: 90px; */
+ width: 100%;
+ /* padding: 10px 15px; */
+ background-color: #193A55;
+ display: block;
+ position: static;
+}
+
+nav a {
+ color: white;
+ text-decoration: none;
+ padding: 10px;
+ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+ display: block;
+ padding: 15px;
+ padding-right: 50px;
+ margin: 10px auto;
+ /* height: 100%; */
+ float: right;
+ position: static;
+}
+.container {
+ height: 100%;
+ border: 3px dotted black;
+}
+
+.airline_container {
+ border: 1px solid red;
+ height: 350px;
+ width: 500px;
+ margin-top: 30px;
+ margin-left: 50px;
+ border-radius: 10px;
+}
+
+.airline__container--row {
+ border: 1px solid blue;
+}
+
+.row1 {
+ height: 75px;
+ width: 100%;
+}
+.row2 {
+ height: 200px;
+}
+
+.row3 {
+ height: 75px;
+ padding: 0 15px;
+}
+
+.icon_col {
+ border: 1px solid pink;
+ background: #193A55;
+ display: inline-block;
+ height: 100%;
+ width: 33%;
+ text-align: center;
+ padding: 10px 0 0;
+ float: left;
+}
+
+.col1 {
+background-color: green;
+}
+
+button {
+ width: 100%;
+ height: 50%;
+ margin-top: 15px;
+ color: white;
+ background-color: blue;
+ border: none;
+ border-radius: 4px;
+}
+
+.input__row {
+ border: 1px solid red;
+}
+
+.input__row input {
+ width: 40%;
+}
+.input__row input:nth-child(2) {
+ margin-left: 15px;
+}
+
+.checkbox__div {
+ display: inline;
+ border: 1px solid blue;
+ float: right;
+}
+
+.checkbox__div span input {
+ width: 20px;
+
+}
+
+/* main {
+ height: 100vh;
+}
+
+}
+.wrapper {
+ /* display: block; */
+ /* clear:both; */
+/* }
+
+.box {
+ background-color: #193A55;
+ height: 400px;
+ width: 400px;
+ margin-top: 40px;
+ margin-left: 50px;
+ float: left;
+ border-radius: 5px;
+} */
+
+/* .button {
+ width: 50px;
+ height: 100px;
+ display: inline;
+} */
+
+
+/* .plane {
+ width: 92px;
+ margin-bottom: 25px;
+ /* margin-top: 0px;
+ margin-left: 0px; */
+ /* background: transparent; */
+ /* border: none; */
+ /* background-color: blue; */
+ /* padding: 0px; */
+ /* display: inline-block; */
+ /* border-radius: 5px;
+}
+
+.hotel {
+ width:150px;
+ margin: 0px;
+ background: transparent;
+ border: none;
+ background-color: green;
+ padding: 0px;
+ border-radius: 5px;
+
+}
+
+/* .car {
+ width:150px;
+ margin: 0px;
+ background: transparent;
+ border: none;
+ background-color: green;
+ padding: 0px;
+ border-radius: 5px;
+
+}
+
+input {
+ width: 150px;
+ height: 30px;
+ border-radius: 5px;
+ border: transparent;
+}
+
+.depart {
+ margin-left: 40px;
+ margin-right: 15px;
+ padding-left: 5px;
+}
+
+.arrive {
+ padding-left: 5px;
+}
+.date1 {
+ margin-left: 40px;
+ margin-top: 15px;
+ margin-right: 15px;
+ padding-left: 5px;
+
+}
+
+.passengers {
+ color: white;
+ margin-top: 25px;
+ margin-left: 40px;
+ display: inline-block;
+}
+
+.one {
+ margin-left: 150px;
+ display: inline-block;
+ margin-top: 0px;
+ height: 30px;
+ width: 30px;
+/* */
+/* } */
+/* .search {
+ margin-left: 130px;
+ margin-top: 30px;
+ border-radius: 5px;
+ border: transparent;
+ width: 150px;
+ height: 30px;
+
+}
+
+.circle {
+ float: right;
+ margin-left: 50px;
+ box-sizing: border-box;
+ height: 5px;
+}
+
+.container1 {
+ display: inline-block;
+ position: relative;
+ padding-left: 50px;
+ margin-bottom: 12px;
+ cursor: pointer;
+ font-size: 15px;
+ color: white;
+} */
+/*
+.container2 {
+ position: relative;
+ padding-left: 50px;
+ margin-bottom: 12px;
+ cursor: pointer;
+ font-size: 15px;
+ color: white;
+ display: inline;
+ float: right;
+} */
+
+/* article {
+ float: left;
+ margin-left: 50px;
+ margin-top: 60px;
+ background-color: #193A55;
+ height: 400px;
+ width: 30%;
+ padding: 0px;
+} */
+
+/* .button { */
+ /* background-color: #193A55 */
+/* } */
+/* .plane {
+ background-color: transparent;
+ display: inline-block;
+ width: 150px;
+ border: none;
+ background-color: blue
+}
+.car {
+ background-color: transparent;
+ display: inline-block;
+ width: 140px;
+ border: none;
+ background-color: green;
+}
+
+.hotel {
+ background-color: transparent;
+ display: inline-block;
+ width: 140px;
+ border: none;
+ background-color: green;
+}
+
+div .depart {
+ margin: 20px;
+}
+div .arrive {
+ margin: 20px;
+ float: right;
+}
+div .mm {
+ margin: 20px;
+}
+div .dd {
+ margin: 20px;
+ float: right;
+}
+
+.search {
+ margin-left: 118px;
+ height: 25px;
+ width: 100px;
+ margin-top: 60px;
+ border-style: solid;
+ background-color: transparent;
+ color: white;
+
+} */
+
+/* input .one {
+ margin-left: 118px;
+ height: 25px;
+ width: 100px;
+ margin-top: 60px;
+ border-style: solid;
+ background-color: transparent;
+ color: white;
+ float: right;
+
+}
+
+.one {
+ height: 30px;
+ width: 30px;
+ margin-left: 150px;
+ /* display: inline; */
+}
+
+/* p {
+ color: white;
+ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+ margin-left: 20px;
+ padding-top: 20px;
+ align-content: initial;
+} */
\ No newline at end of file
diff --git a/03week/airplane/index.html b/03week/airplane/index.html
index e69de29bb2..f257733929 100644
--- a/03week/airplane/index.html
+++ b/03week/airplane/index.html
@@ -0,0 +1,204 @@
+
+
+
+
+
+
+
UX Atlantic
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Search Flights
+
+
+
+
Contact List
+
+
+
+
+
+
+
+
+
+
+
Agent P
+
Los Angeles
+
+
+
+
+
+
Agent P
+
Los Angeles
+
+
+
+
+
+
Agent P
+
Los Angeles
+
+
+
+
+
+
Media-Query
+
+
+
+
+
+
+
+
+
Always Be Coding
+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+
Button
+
+
+
+
+
+
+
+
Always Be Coding
+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+
Button
+
+
+
+
+
+
+
+
Always Be Coding
+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+
Button
+
+
+
+
+
+
+
+
Always Be Coding
+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+
Button
+
+
+
+
+
+
+
+
Always Be Coding
+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+
Button
+
+
+
+
+
+
+
+
Always Be Coding
+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+
Button
+
+
+
+
+
+
First site
+
+
+
+
+
NASA
+
+
+
+ Social Media
+
+ Twitter - @nasa
+
+ Office Contact
+
+ Public Communications Office
+
+Contact Us
+ Name
+
+
+
+ Message
+
+
+
+ SEND
+
+
+
+
\ No newline at end of file
diff --git a/04week/tomorrows-technology/css/style.css b/04week/tomorrows-technology/css/style.css
index e69de29bb2..51a815074c 100644
--- a/04week/tomorrows-technology/css/style.css
+++ b/04week/tomorrows-technology/css/style.css
@@ -0,0 +1,14 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
+*{
+ box-sizing: border-box;
+}
+body {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ font-family: 'Open Sans', sans-serif;
+ border: 3px solid black;
+}
+.section-1 {
+
+}
\ No newline at end of file
diff --git a/04week/tomorrows-technology/index.html b/04week/tomorrows-technology/index.html
index e69de29bb2..2dc46a5d52 100644
--- a/04week/tomorrows-technology/index.html
+++ b/04week/tomorrows-technology/index.html
@@ -0,0 +1,25 @@
+
+
+ Document
+
+
+
Top Stories
+
+
Stanford Researchers Make Artificial Skin That Senses Touch
+
3 New Ways to Wear Your Favorite Chambray Shirt
+
Where to Buy Your Next Rug
+
Chukkas that offer Casual, Comfortable Style
+
Document
+
+
+
+
+
+
+
+
+
Title
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+ sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua.
+
+
+
+
Title
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+ sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua.
+
+
+
+
Title
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+ sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua.
+
+
+
+
+
Ericka-Portfolio
+
+
+
E.Herod
+
Graphic designer / Creative Director
+
+
+
+
+ about
+ work
+ freelance
+ contact
+
+
+
+
+
+
+
The Art Institute of California-Los Angeles
+ in 2003 with a bachelor's degree in Graphic design.
+
+
+
+
+ ZENOSS Creative Concept
+
+
+
+
+
AGENCY LIFE
+
+
+
+
+
+
+ CAMPBELL-EWALD Machanical layout Design
+
+
+
+
+
+
BALLOGY Creative Dirctor
+
+
+
+
+
+ SANDERS/WINGO Graphic Designer
+
+
+
+
+
+
GALAXZ 2018 Tech Tradeshow Design
+
+
+
+
+
+ BRAND ID Branding / Identity
+
+
+
+
+
+
+ FREELANCE Branding / Logo Design
+
+
+
+
+
+
BELLA GOODLIFE Creative Director
+
+
+
+
+
+ TRACE MAGAZINE Layout Designer 2003-2008
+
+
+
+
+
+
SKILLS
+
+
+
+
+
+
+
+ I WOULD LOVE TO CHAT CONTACT ME HERE: erickaherod@gmail.com
+
+
+
+
+
+
Grid landing page
+
+
+
+
cardigan
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
50% SALE
+
Lorem dolor sit amet, consectetur adipiscing elit,
+ sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua.
+
+
+
+
+
+
A
+
N
+
+
+
+
+
+
+
C
+
+
+
A
+
+
+
R
+
+
+
D
+
+
+
I
+
+
+
G
+
+
+
+
+
+
+
+
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+ sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua.
+
BUY NOW
+
+
+
+
+
+
+
+ NEW ARRIVAL
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Build-w-Grids
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
Grid Auto Placement
+
+
+
+
+
Welcome to the world!
+
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
+
Document
+
+
+
+
Places I visited
+
+
+
City Name
+
+
+
+
City Name
+
+
+
+
City Name
+
+
+
+
City Name
+
+
+
+
City Name
+
+
+
+
City Name
+
+
+
+
City Name
+
+
+
+
City Name
+
+
+
+
City Name
+
+
+
+
+
+
\ No newline at end of file
diff --git a/05week/in-class-execises/responsive-card/css/images/karly-gomez-360069-unsplash.jpg b/05week/in-class-execises/responsive-card/css/images/karly-gomez-360069-unsplash.jpg
new file mode 100644
index 0000000000..5ab321f0f3
Binary files /dev/null and b/05week/in-class-execises/responsive-card/css/images/karly-gomez-360069-unsplash.jpg differ
diff --git a/05week/in-class-execises/responsive-card/css/style.css b/05week/in-class-execises/responsive-card/css/style.css
new file mode 100644
index 0000000000..9bf9736636
--- /dev/null
+++ b/05week/in-class-execises/responsive-card/css/style.css
@@ -0,0 +1,124 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,700|Roboto+Slab:300,400');
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+/* .border-1 {
+ border: 2px solid red;
+}
+.border-2 {
+ border: 1px solid blue;
+} */
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+.card {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: 90%;
+ width: 80%;
+ flex: 1;
+ box-shadow: 1px 1px 1px 0px rgba(134,134,134.0.1);
+}
+.card__content {
+ display: flex;
+ flex-direction: column;
+ padding: 1em 2em 0;
+ flex: 1;
+ order: 2;
+}
+.card__content div {
+ margin-bottom: 1.3em;
+}
+.card__content .subtitle {
+ font-family: 'Roboto Slab', serif;
+ text-transform: uppercase;
+ font-size: 10px;
+ letter-spacing: 3px;
+
+}
+.card__content .title {
+ font-family: 'Montserrat', sans-serif;
+ font-size: 30px;
+ line-height: 30px;
+
+
+}
+.card__content .description {
+ font-family: 'Montserrat', sans-serif;
+ font-size: 11px;
+ line-height: 20px;
+
+}
+.card__content .link a {
+ font-family: 'Montserrat', sans-serif;
+ text-decoration: none;
+ letter-spacing: 2px;
+ font-size: 9px;
+ text-transform: uppercase;
+ font-weight: 600;
+
+
+}
+.card__image {
+ background: url(../css/images/karly-gomez-360069-unsplash.jpg);
+ background-size: cover;
+ background-repeat: no-repeat;
+ flex: 1;
+ order: 1;
+
+}
+
+
+
+
+@media (min-width: 576px) {
+.card__content {
+ padding: 2em;
+}
+.card__content .description {
+ line-height: 16px;
+}
+.card {
+ flex: 2;
+}
+}
+
+@media (min-width: 768px) {
+ .card {
+ flex-direction: row;
+ }
+.card__content {
+ order: 1;
+ padding: 6em 2em 0;
+}
+
+.card__content .description {
+ line-height: 22px;
+
+}
+
+.card__image {
+ order: 2;
+ flex:2;
+
+}
+}
+
+@media (min-width: 992px){
+ .card {
+ height: 550px;
+ width: 900px;;
+ }
+}
+
diff --git a/05week/in-class-execises/responsive-card/index.html b/05week/in-class-execises/responsive-card/index.html
new file mode 100644
index 0000000000..c2ff058950
--- /dev/null
+++ b/05week/in-class-execises/responsive-card/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
responsive-card
+
+
+
+
+
Tipsy the Season
+
Seanonal Cocktails
+
Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ore et dolore magna aliqua. Ut enim ad minim veniam, quis
+ nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/05week/transitions-and-transformations/css/style.css b/05week/transitions-and-transformations/css/style.css
index e69de29bb2..2510e5b872 100644
--- a/05week/transitions-and-transformations/css/style.css
+++ b/05week/transitions-and-transformations/css/style.css
@@ -0,0 +1,121 @@
+@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body {
+ height: 100%;
+ width: 100%;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.grid-container{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 150px;
+}
+.square{
+ height: 50px;
+ width: 50px;
+ color: white;
+ border-radius: 5px;
+ box-shadow: 2px 2px 7px 0px rgba(134, 134, 134, 0.63);
+ margin: 5px;
+ text-align: center;
+ display: flex;
+ /* flex-direction: column; */
+ align-items: center;
+ justify-content: center;
+ transition: all 500ms ease-in-out;
+
+}
+.grid-container {
+ border: 1px solid peru;
+}
+.grid-container:hover .square:nth-of-type(even) {
+ transform: scale(2);
+}
+.grid-container:hover .square:nth-of-type(odd) {
+ transform: scale(.5) rotate(90deg) translateX(-100em);
+
+}
+.square-1 {
+ background: #b03532;
+}
+.square-2 {
+ background: black;
+
+
+}
+.square-2:hover {
+ background: #b03532;
+ animation: change-background 4s ease infinite;
+
+
+
+}
+.square-3 {
+ background: #b03532;
+
+}
+.square-4 {
+ background: black;
+}
+.square-4:hover {
+ background: #b03532;
+}
+.square-5 {
+ background: #b03532;
+
+}
+.square-6 {
+ background: black;
+}
+.square-6:hover {
+ background: #b03532;
+}
+.square-7 {
+ background: #b03532;
+
+}
+.square-8 {
+ background:black;
+}
+.square-8:hover {
+ background: #b03532;
+}
+.square-9 {
+ background: #b03532;
+
+}
+.square-10 {
+ background: black;
+}
+.square-10:hover {
+ background: #b03532;
+}
+.square-11 {
+ background: #b03532;
+}
+.square-12 {
+ background: black;
+}
+.square-12:hover {
+ background: #b03532;
+}
+@keyframes change-background {
+ 0% {
+ background: rgba(0, 0, 0, 0.756);
+ }
+ 50% {
+ background: rgba(21, 33, 135, 0.626);
+ }
+ 100% {
+ background: #c811cbbd;
+ }
+}
\ No newline at end of file
diff --git a/05week/transitions-and-transformations/index.html b/05week/transitions-and-transformations/index.html
index 8b13789179..3bcb55ea07 100644
--- a/05week/transitions-and-transformations/index.html
+++ b/05week/transitions-and-transformations/index.html
@@ -1 +1,25 @@
-
+
+
+
+
+
+
Transition project Squares
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
+
+
diff --git a/05week/travel-gram/images/ales-nesetril-734016-unsplash.jpg b/05week/travel-gram/images/ales-nesetril-734016-unsplash.jpg
new file mode 100644
index 0000000000..90c3d06e25
Binary files /dev/null and b/05week/travel-gram/images/ales-nesetril-734016-unsplash.jpg differ
diff --git a/08week/tic-tac-toe/index.html b/08week/tic-tac-toe/index.html
index 37e4c9f386..d6506e2f33 100644
--- a/08week/tic-tac-toe/index.html
+++ b/08week/tic-tac-toe/index.html
@@ -23,7 +23,17 @@
Clear Board
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+