HTML/CSS responsive design
jay1996926
InterestSite.zipcontact.html
css/desktop.css
body{ background-color : white; } #wrap{ width : 1024px; margin : 0 auto; border : solid 2px grey; } header{ border : solid 1px orange; height : 100px; display : flex; flex-direction : row; /* when flex direction is a row, align-items moves on the Y axis*/ align-items : center; /* when flex direction is a row, justify-content moves on the X axis*/ justify-content: center; } nav{ border : solid 1px purple; width : 100%; } nav ul{ border : solid 1px black; list-style : none; padding : 0px; margin : 0px; display : flex; flex-direction :row; } nav ul li{ flex-grow : 1; text-align : center; } #news, #album{ border : solid 1px orange; min-height : 50vh; display : flex; } #news div{ border : solid 1px black; margin : 5px; padding : 5px; flex-grow : 2; max-width : 100%; } .cars{ float: left; width: 50%; padding: 10px; }
css/mobile.css
body{ background-color : white; } #sm_nav { width : 60px; height : 250px; background-color: black; position : fixed; right : 0px; top : 40%; display : none; } #wrap{ width : 100%; margin : 0 auto; border : solid 1px blue; } header{ border : solid 1px orange; min-height : 100px; display : flex; flex-direction : row; /* when flex direction is a row, align-items moves on the Y axis*/ align-items : center; /* when flex direction is a row, justify-content moves on the X axis*/ justify-content: center; } nav{ border : solid 1px purple; width : 100%; } nav ul{ border : solid 1px black; list-style : none; padding : 0px; margin : 0px; display : flex; flex-direction : column; } nav ul li{ flex-grow : 1; /* text-align : center; */ min-height : 60px; display : flex; justify-content: center; align-items : center; border : solid 1px pink; } #link_logo{ order : -1; } #news, #album{ border : solid 1px orange; min-height : 50vh; flex-direction : column; display : flex; } #news div{ border : solid 1px black; margin : 5px; padding : 5px; flex-grow : 2; min-height : 250px; max-width : 100%; } #news article{ border : solid 1px black; margin : 5px; padding : 5px; flex-grow : 1; max-width : 100%; } #album_cover{ border : solid 1px black; flex-grow : 1; min-height : 350px; } #album_stream{ border : solid 1px black; flex-grow : 1; min-height : 200px; } #merchandise{ border : solid 1px orange; display : flex; flex-wrap : wrap; justify-content : space-around; flex-direction : row; } .merchandise{ border : solid 1px black; width :300px; height : 300px; margin : 18px; }
css/tablet.css
body{ background-color : white; } #sm_nav { width : 60px; height : 250px; background-color: pink; position : fixed; right : 0px; top : 40%; display : none; } #wrap{ width : 100%; margin : 0 auto; border : solid 1px blue; } header{ border : solid 1px orange; height : 200px; display : flex; flex-direction : row; /* when flex direction is a row, align-items moves on the Y axis*/ align-items : center; /* when flex direction is a row, justify-content moves on the X axis*/ justify-content: center; } nav{ border : solid 1px purple; width : 100%; } nav ul{ border : solid 1px black; list-style : none; padding : 0px; margin : 0px; display : flex; flex-direction :row; } nav ul li{ flex-grow : 1; /* text-align : center; */ min-height : 60px; display : flex; justify-content: center; align-items : center; } #news, #album{ border : solid 1px orange; min-height : 50vh; display : flex; } #news{ flex-direction : column; } #news div{ border : solid 1px black; margin : 5px; padding : 5px; flex-grow : 2; min-height : 250px; max-width : 100%; } #news article{ border : solid 1px black; margin : 5px; padding : 5px; flex-grow : 1; max-width : 100%; } #album_cover{ border : solid 1px black; flex-grow : 1; } #album_stream{ border : solid 1px black; flex-grow : 1; } #merchandise{ border : solid 1px orange; display : flex; flex-wrap : wrap; justify-content : space-around; flex-direction : row; } .merchandise{ border : solid 1px black; width : 200px; height : 200px; margin : 18px; }
images/ml.jpg
images/mygle.jpg
index.html
Welcome to my interest page
Hello, this webstie is going to introduce a car-maker, Mercedes-Benz. This is my most favorite car producer. My fater's first car is ML 500, which has already companioned with our family more than 10 years and it has driven more than 10 thousand miles. This car witnessed the growth of my father's business. Therefore, we all have deep affection for this car and its brand. It is worth to mention that Mercedes-Benz produces the best quality cars in the world. Although this old car usually have some small problems, the engine of this car is always powerful.
I fully beieve in the quality of Mercedes-Benz, so that my first car is also a Mercedes-Benz. GLE 43 AMG COUPE is my first car, which is a new generation of ML 500. It's really meaningful to me because my father and I have the same first car. This car has accompanied my college time in the United States. Now I'm going to graduate and this car will be gifted to my younger sister. The driving experience of GLE is too perfect to describe. Whatever the power of engine or the stability is the best.
The following are the pictures of my father's ML 500 and my GLE 43.
