diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..b6e6b243a Binary files /dev/null and b/.DS_Store differ diff --git a/images/Fablogo.png b/images/Fablogo.png new file mode 100644 index 000000000..b558d1ea4 Binary files /dev/null and b/images/Fablogo.png differ diff --git a/images/cakee.avif b/images/cakee.avif new file mode 100644 index 000000000..b587c98a4 Binary files /dev/null and b/images/cakee.avif differ diff --git a/images/instalogo.jpeg b/images/instalogo.jpeg new file mode 100644 index 000000000..0c7f47366 Binary files /dev/null and b/images/instalogo.jpeg differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 000000000..3c3044427 Binary files /dev/null and b/images/logo.png differ diff --git a/images/package-lock.json b/images/package-lock.json new file mode 100644 index 000000000..60f6046e7 --- /dev/null +++ b/images/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "CSS", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/images/photo-1.png b/images/photo-1.png new file mode 100644 index 000000000..785229f52 Binary files /dev/null and b/images/photo-1.png differ diff --git a/images/photo-2.png b/images/photo-2.png new file mode 100644 index 000000000..3c2b6ae25 Binary files /dev/null and b/images/photo-2.png differ diff --git a/images/photo-3.png b/images/photo-3.png new file mode 100644 index 000000000..b72578273 Binary files /dev/null and b/images/photo-3.png differ diff --git a/images/photo-4.avif.webp b/images/photo-4.avif.webp new file mode 100644 index 000000000..11d84a48a Binary files /dev/null and b/images/photo-4.avif.webp differ diff --git a/images/photo-4.png b/images/photo-4.png new file mode 100644 index 000000000..11d84a48a Binary files /dev/null and b/images/photo-4.png differ diff --git a/images/photo-5.png b/images/photo-5.png new file mode 100644 index 000000000..dac83fd55 Binary files /dev/null and b/images/photo-5.png differ diff --git a/images/photo-6.png b/images/photo-6.png new file mode 100644 index 000000000..62a479e1b Binary files /dev/null and b/images/photo-6.png differ diff --git a/images/twetlog.png b/images/twetlog.png new file mode 100644 index 000000000..07f9f760d Binary files /dev/null and b/images/twetlog.png differ diff --git a/index.html b/index.html index 60b1afe13..34de1441d 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,60 @@ - +
+ cake-img-for-logo +

Lorem ipsum dolor, sit amet consectetur adipisicing elit. +
Similique vero tenetur voluptas ab minima, ex + voluptatum assumenda,! +

+
+
+ +
+
+ big-delishes-cake +
+
+

Best Cake in World

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil suscipit totam quasi cupiditate quod + magnam vero + doloremque porro ullam voluptate. Voluptatibus, praesentium. Necessitatibus ducimus neque aliquid eos + quo, facilis + earum exercitationem voluptatibus culpa similique ratione architecto delectus? Deleniti quod + voluptatibus ab vero + labore! Mollitia nisi modi temporibus cum necessitatibus porro assumenda nulla officia, architecto ipsam + dicta, + libero nemo pariatur consequuntur, rem excepturi ullam quas a aspernatur iure minus iusto? Error + laudantium natus + nam, quos itaque nihil, corporis unde repudiandae inventore at hic autem tenetur excepturi facere + debitis aut + numquam iste molestias dolorum eos vitae dolore soluta harum maiores? Perferendis, eius? + +
+
+ choklit-ban-cake +
+
+ fruti-cake +
+
+ big-slice-cake +
+
+ slice-of-strawberry-cake +
+
+ + + + +
\ No newline at end of file diff --git a/style.css b/style.css index 6de1b3567..af1627457 100644 --- a/style.css +++ b/style.css @@ -1 +1,304 @@ -/* Add your styling here */ + /* Add your styling here */ +.container { + display: grid; + grid-auto-rows: minmax(100px, auto); + /* background-color: aquamarine; */ + grid-gap: 30px; + color: #f4a261; + grid-template-areas: + "h h h h h h h h" + "h h h h h h h h" + "ma ma ma ma nav nav nav nav" + "ma ma ma ma maa maa maa maa" + "ma ma ma ma maa maa maa maa" + "ma ma ma ma maa maa maa maa" + "ma ma ma ma maa maa maa maa" + "ma ma ma ma maa maa maa maa" + "s1 s1 s2 s2 s3 s3 s4 s4" + "s1 s1 s2 s2 s3 s3 s4 s4" + "foo foo foo foo foo foo foo foo" + "foo foo foo foo foo foo foo foo" + ; +} + +body { + background-color: #264653; +} + +.box { + display: flex; + color: #f4a261; + font-size: 3rem; +} + +.header { + grid-area: h; + display: flex; + justify-content: space-around; + align-items: center; + align-content: space-between; +} + +.header img { + border: 3px solid #2a9d8f; + border-radius: 9px; + padding: 5px; + width: 300px; +} + +.header p { + font-size: 2rem; +} + +.nav { + grid-area: nav; + justify-content: space-around; + font-size: 1.7rem; + align-items: center; + padding: 20px; + +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: #333; +} + +li { + float: left; + gap: 20px; +} + +li a { + display: block; + color: #f4a261; + text-align: center; + padding: 18px 22px; + text-decoration: none; +} + +li a:hover:not(.active) { + background-color: #111; +} + +.active { + background-color: #04AA6D; + color: #fff; +} + +.active:hover { + opacity: 0.8; +} + +.main { + grid-area: ma; + display: flex; + align-items: center; + justify-content: center; + margin: 0%; + padding: 0%; +} + +.main img { + border: 3px solid #2a9d8f; + border-radius: 9px; + width: 700px; + height: 600px; +} + +.main2 { + grid-area: maa; + display: flex; + flex-direction: column; + font-size: 1.6rem; + align-items: center; + justify-content: center; + padding: 30px +} + +.main2 h1 { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; +} + +.section1 { + grid-area: s1; + display: flex; + align-items: center; + justify-content: center; +} + +.section1 img { + border: 3px solid #2a9d8f; + border-radius: 9px; + padding: 5px; + width: 300px; + height: 200px; +} + +.section2 { + grid-area: s2; + display: flex; + align-items: center; + justify-content: center; +} + +.section2 img { + border: 3px solid #2a9d8f; + border-radius: 9px; + padding: 5px; + width: 300px; + height: 200px; +} + +.section3 { + grid-area: s3; + display: flex; + align-items: center; + justify-content: center; +} + +.section3 img { + border: 3px solid #2a9d8f; + border-radius: 9px; + padding: 5px; + width: 300px; + height: 200px; +} + +.section4 { + grid-area: s4; + display: flex; + align-items: center; + justify-content: center; +} + +.section4 img { + border: 3px solid #2a9d8f; + border-radius: 9px; + padding: 5px; + width: 300px; + height: 200px; +} + +.footer { + grid-area: foo; + display: flex; + justify-content: center; + align-items: center; +} + +.fa { + padding: 20px; + font-size: 40px; + width: 50px; + text-decoration: none; + margin: 5px 2px; + border-radius: 15px; + height: 40px; + width: 40px; +} + +.fa-facebook { + border: 1px solid #fff; + background: #3B5998; + color: white; +} + +.fa-twitter { + border: 1px solid #fff; + background: #55ACEE; + color: white; +} + +.fa-youtube { + border: 1px solid #fff; + background: #bb0000; + color: white; +} + +.fa-instagram { + border: 1px solid #fff; + background: #125688; + color: white; +} + +.fa:hover { + opacity: 0.7; +} + +/* add media */ +@media (max-width: 700px) { + .container .box { + background-color: black; + display: grid; + grid-auto-rows: minmax(100px, auto); + /* flex-direction:column; */ + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + /* background-color: rgb(9, 9, 22); */ + grid-template-areas: + "" + + ; + } + + .box { + display: flex; + } + + .header { + display: flex; + justify-content: space-around; + align-items: center; + align-content: space-between; + } + + .header p { + display: none; + } + + .main img { + width: 180px; + height: 180px; + } + + .section1 img { + width: 180px; + height: 180px; + } + + .section2 img { + width: 180px; + height: 180px; + } + + .section3 img { + width: 180px; + height: 180px; + } + + .section4 img { + width: 180px; + height: 180px; + } +} + +/* @media only screen and (min-width: 540px)and (max-width: 989px){ + .box{ + display: flex; + flex-direction: column; + } + + + .nav{ + display: none; + } + .nav ul{ + flex-direction: row; + justify-content: end; + } + + + } */ \ No newline at end of file