diff --git a/css/style.css b/css/style.css index e69de29..7c1565b 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,248 @@ +*{ + margin: 0; + padding: 0; +} +.container{ + background-color: rgb(237, 245, 229); + width: auto; + height: 200rem; + +} +.container .nav{ + background-color:rgb(231, 231, 94); + display: flex; + align-items: center; + text-decoration: none; + height: 5rem; + border-radius: 2rem; + + } + + .container .nav ul input{ + margin-top: 5px; + list-style-type: none; + width: 20rem; + height: 10px; + margin: 1rem 16rem 1rem 1rem ; + padding: 1rem; + border-radius: 5rem; + + } + +.container .nav h1{ + color: blueviolet; background-color: inherit; + padding-left: 1rem; + font-weight: bold; + font-size: x-large; + +} +.container .nav img{ + float: left; + border-radius: 50%; + width: 4rem; + height: 4rem; + margin-left: 2rem; + +} + + .container .nav ul{ + background-color: inherit; + display: flex; + justify-content: center; + + } + .container .nav ul li{ + background-color: inherit; + list-style-type: none; + padding: 1.5rem 1rem 1rem 1rem; + } + + .container .nav ul li a{ + background-color: inherit; + text-decoration: none; + color: rgb(105, 24, 211); + font-size: x-large; + + } + + .container .header{ + height: 10rem; + text-align: center; + margin: 2rem 20rem; + } + + .container .header h2{ + color: blueviolet; + padding: 1rem 0; + font-size: xx-large; + + } + + + .container .main{ + + background-color:rgb(232, 232, 197); width: 80%; + margin: 0 auto; + padding: 1rem 2rem ; + display: flex; + flex-direction: column; + justify-content: center; + + } + .container .main h1{ + color: blueviolet; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + padding: 2rem; + } + .container .main .article{ + background-color: lightblue; + height: 35rem; + display: flex; + flex-direction: column; + padding: 1rem; + border: 1px solid rgb(86, 55, 177); + border-radius: 2rem; + } + .container .main .article1{ + margin-bottom: 20px; + + } + .container .main .article img{ + height: 20rem; + width: 100%; + margin-top: 1rem; + margin-bottom: 1rem; + border-radius: 2rem 2rem 0rem 0rem; + +} +.container .main div { + text-align: center; + +} +.container .main div .btn1{ + background-color: blueviolet; + padding: 15px 50px; + font-size: large; + border-radius: 5rem; + margin-top: 2rem; + margin-bottom: 2rem; + color: white; +} + + +/* css form */ +.container .main .form{ + height: 30rem; + background-color: rgb(190, 138, 238) ; + margin: 0rem 15rem; + border-radius: 2rem; + display: flex; + font-size:x-large; + flex-direction: column; + margin-top: 2rem; + padding: 2rem; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} + +.container .main .form label{ + padding-top: 1.5rem; + padding-bottom: 0.5rem; + font-size:x-large; +} +.container .main .form input{ + padding: 15px; + border-radius: 20px; +} +.container .main .form input:last-child{ + padding: 50px 20px; + border: 1px solid rgb(192, 29, 29); +} +.container .main .form .btn button{ + + border-radius: 20px; + background-color:rgb(231, 231, 94); + padding: 20px 80px; + border-radius: 5rem; + margin-top: 2rem; + } + + + + + + + +/* footer */ +footer{ + padding: 20px; + background-color:rgb(231, 231, 94); + height: 200px; + display: flex; + flex-direction: column; + width: auto; + justify-content: space-between; + +} + +footer .container{ + display: flex; + width: auto; +flex-direction: row; +padding-left: 50px; +border-radius: 2rem; + +} +footer .container .blog-info{ + + padding: 2rem 2rem 0rem 0rem; +} +footer .container .blog-info h2{ + color: blueviolet; +} +footer .container .blog-info img{ + float: left; + border-radius: 50%; + width: 4rem; + height: 4rem; + margin: 1rem 1rem 2rem 1rem; + +} +footer .container .section{ + padding:10px 0 0 10px; + display: flex; + width: auto; + flex-direction: row; + justify-content: space-around; + + +} +footer .container .section .sub{ +padding-right: 50px; + +width: 150px; +display: flex; +flex-direction: column; +height: 150px; + + +} +footer .container .section .sub h4{ + color: blueviolet; + padding-bottom:10px ; + } + footer .container .section .sub ul li{ + padding-bottom:10px ; + } +li{ + list-style-type: none; +} +footer .container .qoraal h2 span{ + color: blueviolet; +} +footer h3{ + font-weight:400; + color: blueviolet; + padding-bottom: 10px; + padding-top:15px ; + font-weight:bolder ; +} \ No newline at end of file diff --git a/img/article2-img.jpg b/img/article2-img.jpg new file mode 100644 index 0000000..5c36530 Binary files /dev/null and b/img/article2-img.jpg differ diff --git a/img/img2.png b/img/img2.png new file mode 100644 index 0000000..7877750 Binary files /dev/null and b/img/img2.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..cbd4d08 Binary files /dev/null and b/img/logo.png differ diff --git a/index.html b/index.html index 3db679e..396bf72 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,149 @@ - - - - My Blog - - - - - - - - + + + + + My Blog + + + + + + + +
+ + +
+

zayid mohamedy blog

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat totam suscipit expedita. Molestiae, eligendi + cum nihil illum molestias exercitationem consequatur esse quisquam natus aut, sit nesciunt quae facere nulla + doloremque.

+
+
+

🚩Posts

+
+

🥇 deliver your order

+ article1 image +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ipsam distinctio odio incidunt et + veniam deserunt adipisci dolore architecto? Eos illum neque corporis laboriosam asperiores, facilis dicta quod + vel suscipit.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quasi temporibus + repudiandae distinctio. Minus rerum inventore sed nesciunt vitae quo vel exercitationem provident sapiente ea? + Eius vero mollitia possimus omnis? + , ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ipsam distinctio odio incidunt et veniam + deserunt adipisci dolore architecto? Eos illum neque corporis laboriosam asperiores, facilis dicta quod vel + suscipit.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quasi temporibus repudiandae + distinctio. Minus rerum inventore sed nesciunt vitae quo vel exercitationem provident sapiente ea? Eius vero + mollitia possimus omnis?

+
+
+

🥈customize your design

+ article2 image +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ipsam distinctio odio incidunt et + veniam deserunt adipisci dolore architecto? Eos illum neque corporis laboriosam asperiores, facilis dicta quod + vel suscipit.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quasi temporibus + repudiandae distinctio. Minus rerum inventore sed nesciunt vitae quo vel exercitationem provident sapiente ea? + Eius vero mollitia possimus omnis? + , ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ipsam distinctio odio incidunt et veniam + deserunt adipisci dolore architecto? Eos illum neque corporis laboriosam asperiores, facilis dicta quod vel + suscipit.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quasi temporibus repudiandae + distinctio. Minus rerum inventore sed nesciunt vitae quo vel exercitationem provident sapiente ea? Eius vero + mollitia possimus omnis?

+ +
+
+ +
+
+
+

💧location

+
+ +
+

📞contact

+
+
+

Fill this form

+ + + + + + +
+ +
+
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/my output design.png b/my output design.png new file mode 100644 index 0000000..bdc12c2 Binary files /dev/null and b/my output design.png differ