diff --git a/css/main.css b/css/main.css deleted file mode 100644 index aa561706..00000000 --- a/css/main.css +++ /dev/null @@ -1,3 +0,0 @@ -/* Add your CSS here */ - -/* Dont' forget to link this file to your HTML in the */ diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..930375f4 --- /dev/null +++ b/css/style.css @@ -0,0 +1,259 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + text-decoration: none; + list-style: none; + font-family: "Bebas Neue", cursive; + font-family: "Roboto", sans-serif; +} + +body { + margin: 0; + font-family: Helvetica, sans-serif; + background-color: #f4f4f4; +} + +a { + color: #000; +} + +.navbar { + width: 100%; + height: 150px; + background-color: #b6ad90cc; + display: flex; + justify-content: space-between; +} + +.logo { + margin: 20px 0px; + cursor: pointer; + transition: 0.5s; +} + +img:hover { + transform: translateY(-10px); +} + +.bar { + margin: 10px 10px; + font-size: 30px; + text-align: right; +} + +.ads { + font-size: 40px; + text-align: right; + margin:0px 40rem 0rem 0rem; + font-style: italic; + color: #00000017; +} + +.menu { + list-style: none; + display: flex; + justify-content: end; + margin: 0; +} + +.row { + background-color: #fff; + box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1); + position: absolute; + width: 100%; +} + +.row ul { + margin: 0; + padding: 0; + list-style: none; + overflow: hidden; + background-color: #fff; +} + +.row li a { + display: block; + padding: 20px 15px; + border-right: 2px solid #f4f4f4; + text-decoration: none; +} + +.row li a:hover, +.row .menu-btn:hover { + background-color: #f4f4f4; +} + +.row .menu { + clear: both; + max-height: 0; + transition: max-height 0.2s ease-out; +} + +.cake-3 { + height: 60vh; + width: 100%; + object-fit: cover; +} + +h1 { + font-size: 40px; +} + +p { + font-size: 20px; + font-weight: lighter; + margin-top: 30px; +} + +img { + height: 20vh; + width: 100%; + object-fit: cover; + border: 3px #b6ad90 solid; +} + +.content { + margin: 100px; + display: grid; + position: relative; + max-width: 100%; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-template-rows: minmax(200px, auto); + grid-gap: 10px; +} + +.content .details { + padding: 10px; + place-items: center; + text-align: right; + transition: 0.5s; +} + +.content .details:hover { + transform: translateY(-10); +} + +.content .details:nth-child(1) { + grid-column: span 2; +} + +.content .details:nth-child(2) { + grid-column: span 2; +} + +.content .details:nth-child(3) { + grid-column: span 1; +} + +.content .details:nth-child(4) { + grid-column: span 1; +} + +.content .details:nth-child(5) { + grid-column: span 1; +} + +.content .details:nth-child(6) { + grid-column: span 1; +} + +.footer { + background-color: #b6ad90; + padding: 10px 0px; + margin-top: 60px; + transition: 0.5s; +} + +.logos-footer { + font-size: 15px; + gap: 10px; + color: #020202; + margin: 10px 20px; +} + +i { + gap: 20px; + margin: 5px; +} + +.copyrights { + text-align: center; + margin: 20px; + color: #020202; +} + +@media (min-width: 90px) { + .container { + margin-top: 70px; + } + + .row .menu { + clear: none; + float: right; + max-height: none; + } + + .row ul { + margin: 0px 20px; + } + + .logo-menu { + visibility: hidden; + } + + .logos-footer { + display: flex; + margin-left: 80vh; + } + + .copyrights { + text-align: center; + margin-left: 100px; + } +} + +@media (max-width: 450px) { + .content { + object-fit: cover; + margin: 0px; + + max-width: 100%; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-template-rows: minmax(auto, auto); + } + + .logo-menu { + visibility: visible; + } + + .logos-footer { + display: block; + font-size: 15px; + gap: 10px; + color: #020202; + margin: 10px 20px; + } + + .row .menu { + visibility: hidden; + } + + p { + font-size: 15px; + margin-top: 5px; + } + .content .details { + text-align: left; + + } + + + h1 { + font-size: 30px; + } + + .content .details:nth-child(2) { + order: -1; + } +} diff --git a/designs/Business portfolio.png b/designs/Business portfolio.png deleted file mode 100644 index c26278ae..00000000 Binary files a/designs/Business portfolio.png and /dev/null differ diff --git a/designs/Cactus shop.png b/designs/Cactus shop.png deleted file mode 100644 index c543d741..00000000 Binary files a/designs/Cactus shop.png and /dev/null differ diff --git a/designs/Juice bar.png b/designs/Juice bar.png deleted file mode 100644 index 53869d3d..00000000 Binary files a/designs/Juice bar.png and /dev/null differ diff --git a/index.html b/index.html index cd704c69..90f97505 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,73 @@ - - - - - + + + + + My persnal page + + + + + + - Responsive grid project - + +
+ +
+ +
+
+
+
+
+
+ +
- - - - - - -

This website design was created by Wix.com, and is used here for strictly educational purposes.

- - - \ No newline at end of file +
+

Welcome

+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text + ever since the 1500s, when an unknown printer took a galley of type + and scrambled it to make a type specimen book. It has survived not + only five centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. It was popularised in the 1960s + with the release of Letraset sheets containing Lorem Ipsum passages, + and more recently with desktop publishing software like Aldus + PageMaker including versions of Lorem Ipsum +

+
+
+
+ + +