diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 75e9841e..7e648444 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -6,3 +6,69 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ + +* { + box-sizing: border-box; +} + +body { + background-color: #4586de; + margin: 20px 80px; +} + +.wrapper { + width: 800px; + margin: 0 auto; + border-radius: 10px; + background-color: white; +} +header { + padding: 50px 50px 50px 50px; +} +/*Navigation Style*/ +nav { + font-weight: bold; +} +header > #logo { + font-size: 2em; +} + +main { + padding: 50px; + overflow: hidden; +} + +section { + float: left; + width: 60%; +} +aside { + float: right; + width: 30%; + background-color: rgba(255, 255, 128, 0.5); + padding: 10px; +} + +footer { + padding: 20px; + border-top: 1px solid blue; + text-align: center; +} + +h3 { + margin: 10px; + background-color: rgb(145, 145, 49); + color: rgb(182, 12, 12); +} +/*First Article's style*/ + +.articles:first-child { + background-color: gray; + border: 1px solid rgb(7, 7, 14); + padding: 20px 20px 20px 20px; +} + +/*general article styles*/ +article { + border-bottom: 1px solid blue; +} diff --git a/week1/3-website/img/minimal-imac-pro-desk-mockup.jpg b/week1/3-website/img/minimal-imac-pro-desk-mockup.jpg new file mode 100644 index 00000000..d33e4dd8 Binary files /dev/null and b/week1/3-website/img/minimal-imac-pro-desk-mockup.jpg differ diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 67dfc7f5..8fb4d570 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -16,7 +16,95 @@ - - +
+
+ + +
+
+ awesome graphics +
+
+
+
+

About Me

 +

+ It is a long established fact that a reader will be distracted by + the readable content of a page when looking at its layout. The + point of using Lorem Ipsum is that it has a more-or-less normal + distribution of letters, as opposed to using 'Content here, + content here', making it look like readable English. Many desktop + publishing packages and web page editors now use Lorem Ipsum as + their default model text, and a search for 'lorem ipsum' will + uncover many web sites still in their infancy. Various versions + have evolved over the years, sometimes by accident, sometimes on + purpose (injected humour and the like). +

+ Read more About Me +
+ +
+

My Hobbies

 +

+ It is a long established fact that a reader will be distracted by + the readable content of a page when looking at its layout. The + point of using Lorem Ipsum is that it has a more-or-less normal + distribution of letters, as opposed to using 'Content here, + content here', making it look like readable English. Many desktop + publishing packages and web page editors now use Lorem Ipsum as + their default model text, and a search for 'lorem ipsum' will + uncover many web sites still in their infancy. Various versions + have evolved over the years, sometimes by accident, sometimes on + purpose (injected humour and the like). +

+ Read more of my hobbies +
+
+ +

Food and Travel

+ +

+ It is a long established fact that a reader will be distracted by + the readable content of a page when looking at its layout. The + point of using Lorem Ipsum is that it has a more-or-less normal + distribution of letters, as opposed to using 'Content here, + content here', making it look like readable English. Many desktop + publishing packages and web page editors now use Lorem Ipsum as + their default model text, and a search for 'lorem ipsum' will + uncover many web sites still in their infancy. Various versions + have evolved over the years, sometimes by accident, sometimes on + purpose (injected humour and the like). +

+ Food and travel Diaries in detail +
+
+ +
+ +