computer science project

profileCClate
project2.zip

project2/.DS_Store

__MACOSX/project2/._.DS_Store

project2/css/long-scrolly.css

/* **************************************** Base styles **************************************** */ html, body { height: 100%; /* magic for long scolly pages with sections, part 1 */ margin: 0; /* typical - gets rid of the default margin on the BODY */ } /* **************************************** Persistent (Fixed) Navigation **************************************** */ .main-menu { position: fixed; /* required - magic */ top: 0; /* required - makes sure the menu sits where it's supposed to sit */ z-index: 1000; /* required - makes sure the menu doesn't get covered by anything else */ width: 100%; /* required - makes the menu go all the way across the viewport */ background-color: white; border-top: 10px solid black; } .main-menu ul { /* standard removal of UL styles */ margin: 0; padding-left: 0; list-style-type: none; /* required - get LIs to line-up side-by-side */ display: flex; justify-content: center; /* optional - lots of options */ zoom: 90%; } .main-menu li{ padding-left: 10px; padding-right: 10px; } .ulnav a{ color: black; font-size: 16px; letter-spacing: 1.5px; } .main-menu a { /* typical - make links look/act like buttons */ display: block; padding: 15px; text-decoration: none; text-align: center; text-transform: uppercase; } #karl { font-size: 36px; color: black; letter-spacing: 4px; font-weight: 500; padding-bottom: 0px; } /* **************************************** Long-scrolly sections **************************************** */ section { min-height: 100%; /* magic for long scolly pages with sections, part 2 */ /*padding-top: 75px;*/ /* how tall is the persistent nav bar at the top? */ display: flex; } /* typical - alter the bg for every other section */

__MACOSX/project2/css/._long-scrolly.css

project2/css/.DS_Store

__MACOSX/project2/css/._.DS_Store

project2/css/styles.css

/* **************************************** Demo styles (for demo purposes only) **************************************** */ p { margin-top: 0; } /* Modules (reusable classes) **************************************** */ .container { margin: 0 auto; width: 100%; max-width: 960px; align-self: center; } .content { display: flex; flex-wrap: wrap; } #first { background-image: url(../images/bg.jpg); background-position: 50% 100%; background-size: 43%; background-repeat: no-repeat; background-color: white; color: black; zoom:75%; } .img1{ margin-left:5px; } /* State (for dynamic stuff) **************************************** */ .is-current a { border-bottom: 5px black solid; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } button { background: transparent; border: none; cursor: pointer; outline: none; } body { font: normal 16px/1.5 "Helvetica Neue", sans-serif; } /* .section SECTION –––––––––––––––––––––––––––––––––––––––––––––––––– */ .section { padding: 50px 0; } .section .container { width: 90%; max-width: 1200px; margin: 0 auto; } .section h1 { font-size: 2.5rem; } .section h2 { font-size: 1.3rem; } .secondContainer h2{ letter-spacing: 1px; font-size: 30px; margin-bottom: 0px; } /* Each page –––––––––––––––––––––––––––––––––––––––––––––––––– */ .firstCon { align-self: center; text-align: justify; width: 100%; margin-left: 13%; } #first h1{ font-size: 110px; text-transform: uppercase; letter-spacing: 5px; margin-bottom: 0px; padding-bottom: 0px; } .h1span { margin-left: 600px; } #first sub { font-size: 40px; margin-top: 0px; color: grey; font-weight: 300; text-transform: uppercase; letter-spacing: 25px; margin-left: 5px; } .sub1 { margin-left: 800px; } #second { color: #373737; text-align: left; zoom:75%; } #second img { box-shadow: -50px -45px lightgrey; } #second h2{ font-size: 32px; margin-bottom: 10px; } #second p{ font-size: 18px; line-height: 35px; } .secCon { display: grid; grid-template-columns: 1fr 1fr; padding-left: 10px; padding-right: 10px; } .secCont { text-align: left; align-self: center; margin-left: 10px; } #third { background-color: white; color: #373737; margin-bottom: 150px; zoom:75%; } #third h2 { margin: 0 auto; font-size: 32px; text-transform: uppercase; padding: 10px; border: 12px double white; border-radius: 100%; width: 150px; height: 140px; padding: 5px; background-color: grey; padding-top: 35px; color: white; padding-left: 9.5px; letter-spacing: 1.2px; } .left { text-align: right; } #third h3 { font-size: 22px; margin-bottom: 10px; } #third p{ font-size: 18px; line-height: 35px; } .fcontainer { max-width: 1400px; } #forth{ zoom:75%; } #forth h2 { font-size: 32px; color: #373737; padding-bottom: 10px; } #forth h3 { font-size: 24px; color: #3d3d3d; margin-bottom: 13px; } .forone { display: inline-flex; margin-bottom: 130px; } .foronetext{ padding: 30px 30px; position: relative; display: block; } .family { margin-left: 50px; } .family img { box-shadow: -30px -30px #f7efe7; } .fcontent p { font-size: 20px; color: #373737; line-height: 33px; } .familyt { background-color: #f7efe7; width: 900px; height: 77%; top: 13%; right: 8%; } .memory img{ box-shadow: 30px -30px #d8e0e2; } .memoryt{ background-color: #d8e0e2; width: 900px; height: 43%; text-align: right; top: 28%; left: 8%; } .later { margin-left: 50px; } .later img { box-shadow: -30px -30px #e0c4b3; } .latert{ background-color: #e0c4b3; width: 900px; height: 64%; top: 19%; right: 8%; } #fifth { color: #3d3d3d; margin: 0 auto; align-self: center; background-color: white; zoom:75%; } .fifcon { border: 5px solid grey; box-shadow: 30px 30px grey; padding: 80px; max-width: 55%; } #fifth ul{ list-style: none; display: block; } #fifth h2{ font-size: 32px; color: #373737; padding-bottom: 10px; } #fifth li{ background-image: url(../images/citation.png); background-repeat: no-repeat; background-position: left; background-size: contain; padding-left: 40px; font-size: 24px; margin-top: 20px; margin-bottom: 20px; } .tablecon { color: #3d3d3d; width: 100%; } #sixth th{ font-size: 28px; text-align: center; border-bottom: 2px solid #3d3d3d; } #sixth td{ font-size: 18px; padding: 20px; } #sixth{ zoom:75%; } footer { background-color: black; color: white; height: 500px; } footer h2{ font-size: 32px; margin-bottom: 10px; } footer li{ list-style-type: none; margin-bottom: 20px; margin-top: 20px; display: inline-block; } footer a { text-decoration: none; color: white; font-size: 18px; } .footerCon { align-self: center; position: relative; top: 25%; } /* Modules (reusable classes) **************************************** */ /* State (for dynamic stuff) **************************************** */ .timeline { position: relative; margin: 0 auto; padding-top: 50px; padding-bottom: 100px; } /* The actual timeline (the vertical ruler) */ .timeline::after { content: ''; position: absolute; width: 6px; background-color: darkgrey; top: 0; bottom: 0; left: 50%; margin-left: -6px; } /* Container around content */ .timecontainer { padding: 10px 40px; position: relative; } /* The circles on the timeline */ .timecontainer::after { content: ''; position: absolute; width: 25px; height: 25px; right: -17px; background-color: white; border: 4px solid grey; top: 15px; border-radius: 50%; z-index: 1; } /* Place the container to the left */ .left { left: -50.85%; } /* Place the container to the right */ .right { left: 50%; } /* Add arrows to the left container (pointing right) */ .left::before { content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 20px; border: medium solid darkgrey; border-width: 20px 0 20px 20px; border-color: transparent transparent transparent darkgrey; } /* Add arrows to the right container (pointing left) */ .right::before { content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 20px; border: medium solid darkgrey; border-width: 20px 20px 20px 0; border-color: transparent darkgrey transparent transparent; } /* Fix the circle for containers on the right side */ .right::after { left: -16px; } /* The actual content */ .timecontent { padding: 40px 50px; background-color: white; position: relative; border-radius: 6px; border: solid 5px darkgrey; } .leftc{ box-shadow: -10px 20px grey; } .righttc{ box-shadow: 10px 20px grey; } /* Media queries - Responsive timeline on screens less than 600px wide */ @media screen and (max-width: 600px) { /* Place the timelime to the left */ .timeline::after { left: 31px; } /* Full-width containers */ .timecontainer { width: 100%; padding-left: 70px; padding-right: 25px; } /* Make sure that all arrows are pointing leftwards */ .timecontainer::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; } /* Make sure all circles are at the same spot */ .left::after, .right::after { left: 15px; } /* Make all right containers behave like the left ones */ .right{ left: 0%; } } /* I have used long-scrolly as reference */ /* The timeline format is from W3C school */

__MACOSX/project2/css/._styles.css

__MACOSX/project2/._css

project2/images/karl4.png

__MACOSX/project2/images/._karl4.png

project2/images/karl4.jpg

__MACOSX/project2/images/._karl4.jpg

project2/images/karl7.jpeg

__MACOSX/project2/images/._karl7.jpeg

project2/images/karl5.jpg

__MACOSX/project2/images/._karl5.jpg

project2/images/secondimg.jpg

__MACOSX/project2/images/._secondimg.jpg

project2/images/karl6.jpg

__MACOSX/project2/images/._karl6.jpg

project2/images/karl2.jpg

__MACOSX/project2/images/._karl2.jpg

project2/images/.DS_Store

__MACOSX/project2/images/._.DS_Store

project2/images/karl1.jpg

__MACOSX/project2/images/._karl1.jpg

project2/images/The-Gloss-Magazine-Fashion-Feuds-Karl-Lagerfeld-Ines-de-la-Fressange-featured-821x654.jpg

__MACOSX/project2/images/._The-Gloss-Magazine-Fashion-Feuds-Karl-Lagerfeld-Ines-de-la-Fressange-featured-821x654.jpg

project2/images/citation.png

__MACOSX/project2/images/._citation.png

project2/images/karl3.jpeg

__MACOSX/project2/images/._karl3.jpeg

project2/images/bg1.jpg

__MACOSX/project2/images/._bg1.jpg

project2/images/karl8.png

__MACOSX/project2/images/._karl8.png

project2/images/karl8.jpg

__MACOSX/project2/images/._karl8.jpg

project2/images/bg.jpg

__MACOSX/project2/images/._bg.jpg

__MACOSX/project2/._images

project2/start.html

Karl Lagerfeld

KarlLagerfeld

Icon ofFashion Design scondimg

Brief Introduction

Karl Otto Lagerfeld was a German creative director, fashion designer, artist, photographer, and caricaturist who lived in Paris.He was known as the creative director of the French fashion house Chanel, a position held from 1983 until his death, and was also creative director of the Italian fur and leather goods fashion house Fendi, and of his own eponymous fashion label. He collaborated on a variety of fashion and art-related projects.Lagerfeld was recognized for his signature white hair, black sunglasses, fingerless gloves, and high, starched, detachable collars.

Start

Early career & Fendi (1955-1982)

In 1955, Lagerfeld befriended Yves Saint Laure. In 1958, Lagerfeld became the artistic director for Jean Patou. In 1964, he worked for a multitude of brands, including Charles Jourdan, Chloé, Krizia, and Valentino.In 1967, he was hired by Fendi to modernize their fur line.

International fame with Chanel (1982–2000)

In the 1980s, Lagerfeld was hired by Chanel. He brought life back into the company, making it a huge success by revamping its ready-to-wear fashion line. Lagerfeld integrated the interlocked "CC" monograph of Coco Chanel into a style pattern for the House of Chanel.In 1984, a year after his start at Chanel, Lagerfeld began his own eponymous "Karl Lagerfeld" brand. The brand was established to channel "intellectual sexiness".In 1993, US Vogue editor-in-chief Anna Wintour walked out of his Milan Fashion Week runway show, when he employed strippers and adult-film star Moana Pozzi to model his black-and-white collection for Fendi.

Collaboration in 2002

In 2002, Lagerfeld asked Renzo Rosso, the founder of Diesel, to collaborate with him on a special denim collection for the Lagerfeld Gallery

What an late 2000s

ALagerfeld and investments enterprise Dubai Infinity Holdings (DIH) signed a deal to design limited edition homes on the island of Isla Moda. A feature-length documentary film on the designer, Lagerfeld Confidential, was made by Vogue in 2007. Later in the year, Lagerfeld was made the host of the fictional radio station K109—the studio in the video game Grand Theft Auto IV, Grand Theft Auto IV: The Lost and Damned and Grand Theft Auto: The Ballad of Gay Tony.In 2008, he created a teddy bear in his likeness produced by Steiff in an edition of 2,500 that sold for $1,500. and has been immortalized in many forms, which include pins, shirts, dolls, and more. In 2009, Tra Tutti began selling Karl Lagermouse and Karl Lagerfelt, which are mini-Lagerfelds in the forms of mice and finger puppets, respectively.

karl1

About His Family

Lagerfeld was born on 10 September 1933 in Hamburg, to Elisabeth (née Bahlmann) and businessman Otto Lagerfeld. His father owned a company that produced and imported evaporated milk; while his maternal grandfather, Karl Bahlmann, was a local politician for the Catholic Centre Party. His family belonged to the Old Catholic Church. When Lagerfeld's mother met his father, she was a lingerie saleswoman from Berlin. His parents married in 1930.Lagerfeld was known to misrepresent his birth year, claiming to be younger than his actual age, and to misrepresent his parents' background. For example, he claimed that he was born in 1938 to "Elisabeth of Germany" and Otto Ludwig Lagerfeldt from Sweden.These claims have been conclusively proven to be false, as his father was from Hamburg and spent his entire life in Germany, with no Swedish connection. There is also no evidence that his mother Elisabeth Bahlmann, the daughter of a middle-class local politician, called herself "Elisabeth of Germany". He was known to insist that no one knows his real birth date. In an interview on French television in February 2009, Lagerfeld said that he was "born neither in 1933 nor 1938".

Childhood Memory

As a child, he showed great interest in visual arts, and former schoolmates recalled that he was always making sketches "no matter what we were doing in class". Lagerfeld told interviewers that he learned much more by constantly visiting the Kunsthalle Hamburg museum than he ever did in school. His greatest inspiration came from French artists, and he claimed to have only continued school in order to learn the French language so that he could move there. Lagerfeld finished his secondary school at the Lycée Montaigne in Paris, where he majored in drawing and history.

karl2 karl8

The Secret Revealed

In April 2013, he finally declared that he was born in 1935. A birth announcement was, however, published by his parents in 1933, and the baptismal register in Hamburg also lists him as born in that year, showing that he was born on 10 September 1933. Bild am Sonntag published his baptismal records in 2008 and interviewed his teacher and a classmate, who both confirmed that he was born in 1933. The same was later confirmed by his death record. Despite that, Karl Lagerfeld announced publicly that he was celebrating his "70th birthday" on 10 September 2008, despite actually turning 75.His older sister, Martha Christiane "Christel", was born in 1931. Lagerfeld had an older half-sister, Thea, from his father's first marriage. His family name has been spelled both Lagerfeldt (with a "t") and Lagerfeld. Like his father, he used the spelling Lagerfeld, considering it to "sound more commercial".His family was mainly shielded from the deprivations of World War II due to his father's business interests in Germany through the firm Glücksklee-Milch GmbH. His father had been in San Francisco during the 1906 earthquake.

His Words of Wisdom

  • What i like about photographs is that they capture a moment that’s gone forever.
  • The only love that I really believe in is a mother’s love for her children.
  • You can be the chicest thing in the world in a T-shirt and jeans — it’s up to you.
  • Dieting is the only game where you win when you lose!
  • A respectable appearance is sufficient to make people more interested in your soul
  • Don't look to the approval of others for your mental stability
  • Books are a hard-bound drug with no danger of an overdose.
  • Clear thinking at the wrong moment can stifle creativity.
Accomplishments Books Media
Art director of Jean Patou in Paris in 1957 Helmut Newtown Lolo
Designer for Fendi,Chole and Chanel The Karl Lagerfeld Diet The Valet
Launched his own brands The Little Black Jacket: Chanel's Classic Revisted Podium TV

Citations

__MACOSX/project2/._start.html

__MACOSX/._project2