diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/572.png b/572.png new file mode 100644 index 0000000..a5d2e42 Binary files /dev/null and b/572.png differ diff --git a/avatar_g.jpg b/avatar_g.jpg new file mode 100644 index 0000000..b3bf4cf Binary files /dev/null and b/avatar_g.jpg differ diff --git a/bridge.jpg b/bridge.jpg new file mode 100644 index 0000000..8b71989 Binary files /dev/null and b/bridge.jpg differ diff --git a/css/style.css b/css/style.css index e69de29..df41fc4 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,152 @@ +*{ + margin: 0; + padding: 0; + font-family: sans-serif; + box-sizing: border-box; +} +a{ + text-decoration: none; +} + +ul{ + list-style: none; +} +body{ + margin: 0; + padding: 0; + font-family: sans-serif; +} +/*----------nav bar--------------------*/ +.topnav { + background-color: #333; + overflow: hidden; + } + + /* Style the links inside the navigation bar */ + .topnav a { + flex-direction: column; + display: flex; + color: #f2f2f2; + text-align: center; + padding: 14px 56px; + text-decoration: none; + font-size: 17px; + justify-content: center; + align-items: center; + float: left; + margin-left: 150px; + } + + /* Change the color of links on hover */ + .topnav a:hover { + background-color: #ddd; + color: black; + } + + /* Add a color to the active/current link */ + .topnav a.active { + background-color: #04AA6D; + color: white; + } +/*--------------blog header section*/ +#blog{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 40px; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); +} +.blog-heading{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.blog-heading span{ + color: #f33c3c; +} +.blog-heading h3{ + font-size: 2.3rem; + color: #2b2b2b; + font-weight: 600; + padding-bottom: 15px; +} + +.blog-container{ + display: flex; + justify-content: center; + align-items: center; + margin: 20px 0px; + flex-wrap: wrap; +} +.blog-box{ + width: 650px; + background-color: white; + border: 1px solid #ececee; + margin: 20px; +} +.blog-img{ + width: 100%; + height: auto; +} +.blog-img img{ + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.blog-text{ + padding: 30px; + display: flex; + flex-direction: column; +} +.blog-text span{ + color: #f33c3c; + font-size: 0.9rem; +} +.blog-text .blog-title{ + font-size: 1.3rem; + font-weight: 500; + color: #272727; +} +.blog-text .blog-title:hover{ + color: #f33c3c; + transition: all ease 0.3s; +} + +.blog-text p{ + color: #9b9b9b; + font-size: 0.9rem; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + margin: 20px 0px; +} +.blog-text a{ + color: #0f0f0f; +} +.blog-text a:hover{ + color: #f33c3c; + transition: all ease 0.3s; +} +footer{ + background-color: #04AA6D; + width: 100%; + height: 60px; +} + +footer .footer-text{ + font-size: 2rem; + color: #a91919; + font-weight: 100; + padding-bottom: 15px; + justify-content: center; + align-items: center; + display: flex; + padding: 15px; +} \ No newline at end of file diff --git a/index.html b/index.html index 3db679e..b6e4c09 100644 --- a/index.html +++ b/index.html @@ -17,5 +17,74 @@ + +
+ Home + News + Contact + About +
+
+ +
+

My Blog

+ Welcome To The Blog Of Unknown +
+ +
+ + +
+ +
+ pic1 +
+
+ April 7, 2014 / web design + what happened of all of the web design ideas +

Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.

+ Read More +
+
+
+ +
+ + +
+ +
+ pic1 +
+
+ April 7, 2014 / web design + what happened of all of the web design ideas +

Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.

+ Read More +
+
+
+ +
+ + +
+ +
+ pic1 +
+
+ April 7, 2014 / web design + what happened of all of the web design ideas +

Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.

+ Read More +
+
+
+
+ diff --git a/woods.jpg b/woods.jpg new file mode 100644 index 0000000..c77bed2 Binary files /dev/null and b/woods.jpg differ