diff --git a/week1/1-advanced-css/Screenshot_2020-05-09 CSS Diner.png b/week1/1-advanced-css/Screenshot_2020-05-09 CSS Diner.png new file mode 100644 index 00000000..3ab36d1a Binary files /dev/null and b/week1/1-advanced-css/Screenshot_2020-05-09 CSS Diner.png differ diff --git a/week1/3-website/asteroid.jpg b/week1/3-website/asteroid.jpg new file mode 100644 index 00000000..7a3ac875 Binary files /dev/null and b/week1/3-website/asteroid.jpg differ diff --git a/week1/3-website/catgirls.jpg b/week1/3-website/catgirls.jpg new file mode 100644 index 00000000..ba07d1a7 Binary files /dev/null and b/week1/3-website/catgirls.jpg differ diff --git a/week1/3-website/coronavirus.jpg b/week1/3-website/coronavirus.jpg new file mode 100644 index 00000000..09a9631d Binary files /dev/null and b/week1/3-website/coronavirus.jpg differ diff --git a/week1/3-website/css/background.jpg b/week1/3-website/css/background.jpg new file mode 100644 index 00000000..a76f7e09 Binary files /dev/null and b/week1/3-website/css/background.jpg differ diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 75e9841e..e0841a20 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -1,8 +1,189 @@ -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - */ +@import url('https://fonts.googleapis.com/css2?family=Muli:wght@200;300;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap'); + +/* CSS for the navigation bar */ +#nav-bar +{ + position: fixed; + top: 0px; + background-color: #fff; + width: 100%; + height: 50px; + display: flex; + flex-direction: row; + justify-content: space-between; + padding-left: 50px; + font-family: "Muli:wght@200", sans-serif; +} + +#nav-bar > ul +{ + width: 50vw; + display: flex; + flex-direction: row; + justify-content: right; + padding-right: 100px; +} + +#nav-bar > ul > li +{ + padding-left: 10px; + padding-right: 10px; + list-style: none; +} + +a { + color: black; + text-decoration: none; + } + + +/* CSS for the main content */ +section +{ + margin-bottom: 100px; + margin-top: 100px; + max-width: 1200px; + text-align: center; + margin: auto; +} +h1 +{ + font-family: "Muli:wght@300", sans-serif; +} + +h2 +{ + font-family: "Muli:wght@300", sans-serif; +} + +h3 +{ + font-family: "Righteous", sans-serif; + font-size: 36px; + padding-top: 256px; + padding-bottom: 64px; +} + +p +{ + font-family: "Muli:wght@200", sans-serif; + text-align: left; +} + +/* CSS for the header */ +header +{ + color: #fff; + background-image: url("background.jpg"); + max-width: 100%; + margin-top: 50px; + padding-top: 150px; + padding-bottom: 150px; +} + +#home-box +{ + background-color: rgba(0, 0, 0, 0.5); + width: 512px; + margin: auto; + padding: 40px; +} + +#home-box > p +{ + text-align: center; +} + +/* CSS for the about section */ +#about > h3 +{ + text-align: right; +} + +#about-box +{ + background-color: #f2f2f2; + display:flex; + margin-left: 15px; + margin-right: 15px; + padding: 64px; +} + +#about-box p +{ + margin-left: 64px; +} + +.art-img +{ + width: 100%; + height: auto; +} + +/* CSS for the article section */ +#articles > h3 +{ + text-align: left; +} + +#art-box +{ + display:flex; + justify-content: center; +} + +article:first-child > a > button +{ + background-color: #daa520; +} + +button +{ + background-color: #c0c0c0; + font-family: "Muli:wght@200", sans-serif; + margin-bottom: 30px; + padding: 10px; + border: 1px solid #000; +} + +article +{ + background-color: #f2f2f2; + margin-left: 15px; + margin-right: 15px; + flex: 1 1 0; +} + +article > p +{ + margin: 20px; +} + +/* CSS for the footer */ +footer +{ + background-color: #808080; + margin-top: 256px; + padding-bottom: 10px; + text-align: center; +} + +#external +{ + display: flex; + flex-direction: row; + justify-content: center; +} + +.social-media +{ + width: 32px; + height: 32px; + padding: 20px; +} + +footer > p +{ + text-align: center; +} \ No newline at end of file diff --git a/week1/3-website/iconfinder_Circled_Facebook_svg_5279111.svg b/week1/3-website/iconfinder_Circled_Facebook_svg_5279111.svg new file mode 100644 index 00000000..4b9fc2fd --- /dev/null +++ b/week1/3-website/iconfinder_Circled_Facebook_svg_5279111.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/week1/3-website/iconfinder_Circled_Instagram_svg_5279112.svg b/week1/3-website/iconfinder_Circled_Instagram_svg_5279112.svg new file mode 100644 index 00000000..73a02f23 --- /dev/null +++ b/week1/3-website/iconfinder_Circled_Instagram_svg_5279112.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/week1/3-website/iconfinder_Circled_Twitter_svg_5279123.svg b/week1/3-website/iconfinder_Circled_Twitter_svg_5279123.svg new file mode 100644 index 00000000..99c66565 --- /dev/null +++ b/week1/3-website/iconfinder_Circled_Twitter_svg_5279123.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 67dfc7f5..b8fde3cb 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -12,11 +12,84 @@ rel="stylesheet" type="text/css" /> - - + + - - - + + + + +
+
+

This is my test blog website

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit nam libero tellus.

+
+
+ +
+

ABOUT

+
+ random inspirational picture +
+

Test Blog

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam libero tellus, tincidunt in turpis facilisis, rutrum dignissim nisl. Nulla at enim at eros ornare viverra ac vitae nibh. Donec tellus risus, scelerisque sed purus ut, molestie dignissim quam. Duis dapibus id neque ut aliquam.

+
+
+
+ +
+

ARTICLES

+
+
+ picture of catgirls +

Catgirls!

+

Mauris vitae placerat nisi. Mauris at erat enim. Morbi lorem tortor, tempor sit amet mauris a, iaculis convallis elit. Vivamus convallis aliquet fringilla. Nam dignissim arcu non sem luctus, ut convallis diam eleifend. Morbi iaculis sem ut neque elementum, et commodo enim gravida. Nulla maximus turpis faucibus elit condimentum facilisis.

+ + + +
+ +
+ picture of an asteroid hitting earth +

The end of the world?

+

Mauris vitae placerat nisi. Mauris at erat enim. Morbi lorem tortor, tempor sit amet mauris a, iaculis convallis elit. Vivamus convallis aliquet fringilla. Nam dignissim arcu non sem luctus, ut convallis diam eleifend. Morbi iaculis sem ut neque elementum, et commodo enim gravida. Nulla maximus turpis faucibus elit condimentum facilisis.

+ + + +
+ +
+ picture of coronaviruses +

Coronavirus

+

Mauris vitae placerat nisi. Mauris at erat enim. Morbi lorem tortor, tempor sit amet mauris a, iaculis convallis elit. Vivamus convallis aliquet fringilla. Nam dignissim arcu non sem luctus, ut convallis diam eleifend. Morbi iaculis sem ut neque elementum, et commodo enim gravida. Nulla maximus turpis faucibus elit condimentum facilisis.

+ + + +
+
+
+ + - + \ No newline at end of file diff --git a/week1/3-website/inspirational.jpg b/week1/3-website/inspirational.jpg new file mode 100644 index 00000000..28fb0455 Binary files /dev/null and b/week1/3-website/inspirational.jpg differ