diff --git a/public/index.html b/public/index.html index 945a6c3..fa82423 100644 --- a/public/index.html +++ b/public/index.html @@ -15,7 +15,7 @@ <img src="logo-aoc.png" alt="aoc"> </header> - <div class='container'> + <div class='grid-container'> <div> <div class="part1"> @@ -97,7 +97,7 @@ </div> </div> <div class="part2"> - <!-- <img src="image-6.png" alt="image6" class="mainimage"> --> + <img src="image-6.png" alt="image6" class="mainimage"> </div> </div> diff --git a/src/App.css b/src/App.css index f074875..e402405 100644 --- a/src/App.css +++ b/src/App.css @@ -10,16 +10,19 @@ header>img { height: 20px; } -.container h4 { +.grid-container h4 { color: #f4f9fd; font-size: 24px; cursor: default; margin: 0; text-transform: uppercase; +} +.part2{ + display: grid; } -.container p { +.grid-container p { color: #f4f9fd; opacity: 0.5; font-weight: lighter; @@ -33,41 +36,39 @@ hr { border: 1px solid #faf8f8; } -.container>div { +.grid-container>div { padding: 40px; min-height: calc(100vh - 50px); box-sizing: border-box; } -.container> :nth-child(1) { +.grid-container> :nth-child(1) { background-color: #62c662; } -.container> :nth-child(2) { +.grid-container> :nth-child(2) { background-color: #f7b528; } -.container> :nth-child(3) { +.grid-container> :nth-child(3) { background-color: #8760f4; } -.container> :nth-child(4) { +.grid-container> :nth-child(4) { background-color: #f18451; } -.container> :nth-child(5) { +.grid-container> :nth-child(5) { background-color: #dd5465; } -.container> :nth-child(6) { +.grid-container> :nth-child(6) { background-color: #4dc1e9; } .mainimage { - display: block; margin: auto; - max-width: 100%; } .desc { @@ -81,9 +82,14 @@ hr { } @media screen and (min-width: 540px) { - .container>div { - float: left; - width: 50%; + .grid-container { + display: grid; + grid-template-columns: auto auto; + + } + + .grid-container>div { + width: 100%; height: 100vh; padding-top: 70px; overflow: hidden; @@ -97,19 +103,27 @@ hr { } @media screen and (min-width: 780px) { - .container>div { - width: 33.3%; + .grid-container { + display: grid; + grid-template-columns: auto auto auto; + + } + + .grid-container>div { + width: 100%; height: 50vh; overflow: hidden; } } @media screen and (min-width: 992px) { - .container>div { - width: 33.3%; - min-height: 50vh; - padding: 2%; + .grid-container>div { + display: flex; + min-height: 50px; + padding: 5%; overflow: hidden; + align-items: center; + justify-content: space-between; } header { @@ -120,58 +134,49 @@ hr { height: 25px; } - .part1 { - width: 50%; - float: left; - margin-top: 25px; + .mainimage { + max-width: 100%; + max-height: 300px; } - .part2 { - width: 50%; - float: right; + .part1 { + min-width: 300px; } - .subimage { - height: 50px; + .part2{ + max-width: fit-content; } - .mainimage { - margin-right: 0; - object-fit: contain; - max-height: 300px; - - } - - .container h4 { + .grid-container h4 { text-transform: initial; font-size: 18px; font-weight: normal; - margin: 2px; } - .container p { + .grid-container p { font-size: 15px; text-transform: uppercase; opacity: initial; font-weight: normal; - margin: 2px; - } - - .desc { - margin: 0px; } @media screen and (min-width: 1570px) { - .container h4 { - font-size: 25px; + .mainimage { + min-height: 300px; } + } - .container p { - font-size: 20px; + @media screen and (min-width: 2040px) { + .mainimage { + min-height:350px ; } + + } - .mainimage { - min-height: 370px; + @media screen and (min-width: 2380px) { + .grid-container >div { + padding-left: 100px; } + } } \ No newline at end of file