diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 46c150e1..ef119718 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -16,21 +16,23 @@ Please complete the details below this message # Your Details -- Your Name: -- Your City: -- Your Slack Name: +- Your Name: Gulnihal +- Your City: Manchester +- Your Slack Name: Gulnihal # Homework Details -- Module: -- Week: +- Module: HTML & CSS +- Week: 1 # Notes - What did you find easy? +creating semantic elements in html - What did you find hard? - +positioning in css - What do you still not understand? - Any other notes? +positioning has not been finished yet diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 75e9841e..de3fe7e7 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,131 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ + + /*full page background color */ + html { + background-color:rgb(221, 240, 240) + } + + /*header styling*/ + .header-container { + + position: fixed; + top: 0; + left: 0; + +} +header { + + background-color:rgb(177, 245, 245); + top: 0; + display: flex; + width: 100%; + height: 100px; + +} +/*logo style*/ +.logo { + display: flex; + margin-left: 0; + +} +.logo img { + max-width: 100%; + display: block; + height: 100%; + } + + /* title*/ +h1 { + text-align: center; + justify-content:left ; +} +/* navbar style*/ +li { + list-style: none; +} +nav li { + display: inline; + padding: 2em; +} +nav { + display: flex; + justify-content: flex-end; + width: 100%; + text-align: center; + font-size: 20px; +} + +nav a { + text-decoration: none; + color: brown; + +} +/*body style*/ +body { + font-size: 16px; + margin: 160px 60px 0 100px; + line-height: 1.5; +} +h3{ + padding-left: 60px; +} +p { + text-align:left; + font-family: Cambria; + padding-left: 60px; +} + + +/* article style */ +article { + display: grid; + align-items: center; + justify-items: left; + + +} + +article:first-child { + background-color:rgba(253, 253, 253, 0.5); + font-family: 'Times New Roman'; + font-size: 18px; + word-spacing: 12px; + border: 2pßx solid rgb(255, 255, 255); + border-radius: 6px; + +} + +.article a { + border: none; + border-radius: 6px; + background-color: silver; + color: black; + font-family: initial ; + list-style: none; + text-decoration: none; + margin-left: 400px; + margin-bottom: 20px; + padding: 3px 5px 3px 5px; +} + +/* images' style */ + +img { + max-width: 280px; + float: left; + +} + + +/* footer styling*/ + +footer span { + color:rgb(137, 146, 146); + display: flex; + justify-content: flex-end; + font-size: 0.8em; + margin-left: 50px; + + } \ No newline at end of file diff --git a/index.html b/index.html index 67dfc7f5..35f6f674 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,72 @@ - + + - + + +
+ +
+ +
+
+

Recent posts

+
+
+

What do you do when your baby wakes up every hour

+ sleeping baby +

Curabitur eget nisl massa. Nam varius, ipsum eu faucibus fermentum, nisl orci pharetra neque, vel tincidunt purus mi non lorem. Ut commodo nunc nec suscipit dictum. Fusce magna lectus, porta non quam pellentesque, faucibus pellentesque felis. Etiam sollicitudin porttitor massa sed accumsan. Praesent et ex pellentesque, dictum orci a, porttitor neque. Etiam mattis eget mauris ut semper. Cras eu est eleifend, imperdiet justo sit amet, aliquam massa. Sed ac est eu ex auctor rutrum. Quisque elementum et augue at imperdiet. Pellentesque aliquet vitae elit in lobortis. In hac habitasse platea dictumst. Pellentesque congue tincidunt nibh eget aliquet.

+ Read more +
+ + +
+

Play ideas to encourage toddler talking

+

Cras nec hendrerit enim. Pellentesque maximus hendrerit ultricies. Sed ac dictum neque, ut placerat nulla. Duis dapibus nisi eget quam cursus, et ultrices eros aliquam. Nunc vitae felis in dolor lobortis congue posuere quis nisl. Aliquam nisi lacus, volutpat ut magna ut, faucibus aliquet ante. Cras egestas libero non dapibus lobortis. Suspendisse potenti. Suspendisse ultricies lacus mi, sit amet consectetur quam aliquet ac. Donec volutpat nisi ac orci hendrerit semper.

+ toddler talk + Read more +
+ + +
+

You're vaccinated, but your kids aren't...

+

Pellentesque nec nulla at lorem gravida convallis. Vestibulum nec ipsum arcu. Suspendisse a pulvinar sem. Suspendisse lobortis sit amet justo non viverra. Integer non sodales turpis. Integer sit amet dui id dui hendrerit pretium. Duis id ipsum nec felis convallis porta vel eu quam.

+ kid's vaccination + Read more +
+ +
+
+
+ + + + diff --git a/logo.png b/logo.png new file mode 100644 index 00000000..ff130393 Binary files /dev/null and b/logo.png differ