HTML/CSS responsive design

jay1996926

20210727_interestSite.zip

Home >Computer Science homework help >HTML/CSS responsive design

__MACOSX/._interestSite

interestSite/index.html

Home
Discography
LOGO
Tour
Social Media

image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus augue, interdum nec risus a, dapibus tempus lacus. Nullam vitae iaculis nulla. Curabitur faucibus pretium dolor, quis dignissim sapien iaculis et. Ut iaculis sagittis posuere. Duis elementum imperdiet est quis tempus. Sed sodales mauris sed maximus dapibus. Fusce tincidunt volutpat tellus nec consectetur. Cras nec bibendum ante. Sed in massa ut ante egestas tempus. Curabitur scelerisque quis sapien id ornare. Nullam non luctus elit. Quisque venenatis urna non erat aliquam suscipit. Donec eu sagittis turpis.

ALBUM COVER STREAM MERCHANDISE 1 MERCHANDISE 2 MERCHANDISE 3 MERCHANDISE 4 MERCHANDISE 5 MERCHANDISE 6

__MACOSX/interestSite/._index.html

interestSite/.DS_Store

__MACOSX/interestSite/._.DS_Store

interestSite/discography.html

interestSite/tour.html

interestSite/css/desktop.css

body{ background-color : white; } #sm_nav { width : 60px; height : 250px; background-color: pink; position : fixed; right : 0px; top : 40%; } #wrap{ width : 1024px; 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; } #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 : 50%; } #news article{ border : solid 1px black; margin : 5px; padding : 5px; flex-grow : 1; max-width : 25%; } #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-between; flex-direction : row; } .merchandise{ border : solid 1px black; width : 200px; height : 200px; margin : 30px; }

interestSite/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; }

interestSite/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 : 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 : 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; }