diff --git a/css/style.css b/css/style.css index 75e9841e..d35d609e 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,132 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ + + *{ + padding: 0; + margin: 0; + } + + body{ + font-family: 'Roboto Slab'; + } + + a, p, h1, h2, h3, h4, h5, h6 { + color:#333 + } + + h1, h2, h3, h4, h4, h5, h6 { + padding:10px 20px 10px 20px; + } + .container { + max-width:80%; + max-height: 100%; + margin:auto; + border-left: 1px solid #333; + border-right: 1px solid #333; + } + + header { + background-color: #333; + } + + header nav { + display: flex; + justify-content:center; + align-items:center; + padding: 20px; + } + + header nav a { + padding: 75px; + color: white; + text-decoration: none; + } + + header nav a:hover { + color: cyan; + text-decoration: underline overline; + } + + section{ + padding: 60px; + } + + main { + float: left; + width: 70%; + } + + main p { + font-size:1.1rem + line-height: 1.6rem; + padding:0px 20px 0px 5px; + } + + aside { + float: right; + width: 25%; + } + aside ul li { + font-size:1.1rem; + line-height:1.6rem; + list-style:none; + padding: 3px 0px 3px 0px + } + + aside ul{ + padding: 0px 20px 0px 20px; + } + + aside p { + font-size: 1.1rem; + line-height:1.6rem; + padding: 20px 0px 59px 0px; + + } + + article:first-child { + color:red; + } + + footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #333; + width: 100%; + } + + footer p{ + color: white; + font-size: 20px; + padding: 8px 60px 15px 100px; + } + + footer a { + color: white; + padding: 0px 40px 0px 20px; + } + + footer a:hover { + color: cyan; + } + + hr { + height: 12px; + border: 0; + box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5); +} + + @media(max-wdth: 700px) { + main { + float: none; + width: 100% + } + aside { + float: none; + width: 100%; + padding: 20px; + } + } \ No newline at end of file diff --git a/index.html b/index.html index 67dfc7f5..83804c41 100644 --- a/index.html +++ b/index.html @@ -18,5 +18,65 @@ +
+
+ +
+ +
+
+
+

My Blog

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum repellendus enim dolorum deleniti? Aperiam delectus officia libero? Eveniet rerum nemo, a ipsam rem necessitatibus sint quas voluptatibus debitis libero quidem?

+
+
+
+ +
+
+

My Blog

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum repellendus enim dolorum deleniti? Aperiam delectus officia libero? Eveniet rerum nemo, a ipsam rem necessitatibus sint quas voluptatibus debitis libero quidem?

+
+
+
+ +
+
+

My Blog

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum repellendus enim dolorum deleniti? Aperiam delectus officia libero? Eveniet rerum nemo, a ipsam rem necessitatibus sint quas voluptatibus debitis libero quidem?

+
+
+
+
+ + + + + + +