diff --git a/css/global.css b/css/global.css new file mode 100644 index 0000000..e8fb726 --- /dev/null +++ b/css/global.css @@ -0,0 +1,36 @@ +/* RESET */ +*{ + margin: 0; + padding: 0; + border: none; + outline: none; + font-size: 100%; + font-weight: 700; + box-sizing: border-box; + font-family: sans-serif; +} + +ul,li{ + list-style: none; +} + +a{ + text-decoration: none; +} + +.container { + display: flex; + margin: 0 auto; + max-width: 960px; + align-items: center; + justify-content: space-between; +} + + +/****** VARIABLES ******************/ +:root { + --header-color: #333; + --font-color: #fff; + --banner-color: #3479ba; + --button-color: #ffc001; +} \ No newline at end of file diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..c97136b --- /dev/null +++ b/css/index.css @@ -0,0 +1,123 @@ +/****** HEADER ******************/ +.header { + width: 100%; + background-color: var(--header-color); +} + +.header .container { + align-items: center; +} + +.header .container .logo { + color: var(--font-color); + font-size: 2em; +} + +.header .menu { + display: flex; +} + +.header .menu a { + color: var(--font-color); + font: 1.5em; + padding: 20px 10px; + display: inline-block; + text-transform: uppercase; + transition: .1s transform; +} + +.header .menu a:hover { + background-color: var(--banner-color); + transform: scale(1.1); +} + + +/****** BANNER ******************/ +.banner { + width: 100%; + padding: 0 10px; + background-color: var(--banner-color); +} + +.banner .title { + color: var(--font-color); +} + +.banner .title h2 { + font-size: 3em; +} + +.banner .title p { + margin: 10px 0; + font-size: 1.5em; +} + +.banner .title button { + cursor: pointer; + padding: 15px 30px; + border-radius: 4px; + background-color: var(--button-color); + transition: .2s transform; +} + +.banner .title button:hover { + filter: brightness(120%); + transform: scale(1.1); +} + + +/****** MAIN ******************/ +#products.container { + padding: 30px 0; + width: 1000px; + align-content: center; + flex-direction: column; +} + +#products.container h3 { + margin: 40px 0; + font-size: 1.5em; +} + +#products.container .img { + display: flex; + margin: 0 auto; + flex-wrap: wrap; + align-content: center; + justify-content: center; +} + +#products.container img { + padding: 5px; +} + + +/****** FOOTER ******************/ +.footer{ + color: var(--font-color); + padding: 10px; + text-align: center; + background-color: var(--banner-color); +} + + +/****** Media Queries ******************/ +@media (max-width: 720px){ + .banner .container { + padding: 0 20px; + } + + .logo { + padding: 10px; + } + + .container, + .menu { + flex-wrap: wrap; + } + + .banner img{ + width: 100%; + } + +} diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 6954472..0000000 --- a/css/style.css +++ /dev/null @@ -1,123 +0,0 @@ -*{ - margin: 0; - padding: 0; - border: none; - outline: none; - font-size: 100%; - font-weight: 700; - box-sizing: border-box; - font-family: sans-serif; -} -ul,li{ - list-style: none; -} -a{ - text-decoration: none; -} - -/*****************************************************/ -/*===============| HEADER |===============*/ -/*****************************************************/ -.header{ - width: 100%; - background-color: #333; -} -.container{ - display: flex; - margin: 0 auto; - max-width: 960px; - overflow: hidden; - align-items: center; - justify-content: space-between; -} -.container .logo{ - color: #fff; - font-size: 2em; -} -.menu{ - display: flex; -} -.menu a{ - color: #fff; - font: 1.5em; - padding: 20px 10px; - display: inline-block; - text-transform: uppercase; -} -.menu a:hover{ - background-color: #3479ba; -} -/*****************************************************/ -/*===============| BANNER |===============*/ -/*****************************************************/ -.banner{ - width: 100%; - background-color: #3479ba; -} -.title h2{ - color: #fff; - font-size: 3em; -} -.title p{ - color: #fff; - margin: 10px 0; - font-size: 1.5em; -} -.title button{ - cursor: pointer; - padding: 15px 30px; - border-radius: 4px; - background-color: #ffc001; -} -/*****************************************************/ -/*===============| MAIN |===============*/ -/*****************************************************/ -.banner{ - padding: 0 10px; -} -.container2{ - display: flex; - margin: 0 auto; - padding: 30px 0; - max-width: 1000px; - align-items: center; - align-content: center; - flex-direction: column; - justify-content: space-between; -} -.container2 h3{ - margin: 40px 0; - font-size: 1.5em; -} -.container2 img{ - padding: 5px; -} -.img{ - display: flex; - margin: 0 auto; - flex-wrap: wrap; - align-items: center; - align-content: center; - justify-content: center; -} -/*****************************************************/ -/*===============| FOOTER |===============*/ -/*****************************************************/ -.footer{ - color: #fff; - padding: 10px; - text-align: center; - background-color: #3479ba; -} -@media (max-width: 720px){ - .logo{ - padding: 10px; - } - .container, .menu{ - flex-wrap: wrap; - } - .banner img{ - width: 100%; - } - -} diff --git a/index.html b/index.html index d306ea3..510a70b 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,10 @@ - + - + + Praticando @@ -11,7 +12,6 @@ -

Logomarca

 @@ -26,7 +26,6 @@
-