diff --git a/.github/.keep b/.github/.keep new file mode 100644 index 0000000..e69de29 diff --git a/ex-1/index.html b/ex-1/index.html index 162adba..fa23726 100644 --- a/ex-1/index.html +++ b/ex-1/index.html @@ -2,6 +2,10 @@ + + + + @@ -9,8 +13,124 @@ Responsive Web Design - Ex 2 - - + +
+
+
Browse by
+
Job Categories
+
+
+
+
+ + campaign + +
+
Digital Marketing
+
XXX jobs opened
+
+ + arrow_forward + +
+
+
+
+ + palette + +
+
Art & Design
+
XXX jobs opened
+
+ + arrow_forward + +
+
+
+
+ + attach_money + +
+
Accounting
+
XXX jobs opened
+
+ + arrow_forward + +
+
+
+
+ + photo_camera + +
+
Photography
+
XXX jobs opened
+
+ + arrow_forward + +
+
+
+
+
+
+ + edit_document + +
+
Copy Writing
+
XXX jobs opened
+
+ + arrow_forward + +
+
+
+
+ + headphones + +
+
Music
+
XXX jobs opened
+
+ + arrow_forward + +
+
+
+
+ + groups + +
+
Human Resources
+
XXX jobs opened
+
+ + arrow_forward + +
+
+
+
Explore
30 More
Categories
+
+ + arrow_forward + +
+
+ +
+
\ No newline at end of file diff --git a/ex-1/style.css b/ex-1/style.css index 5fce21b..3dad160 100644 --- a/ex-1/style.css +++ b/ex-1/style.css @@ -1 +1,150 @@ -/* Start coding here */ \ No newline at end of file +:root { + --branding-color: #ff8345; + --background-branding-color: #ff83454f; + --box-border-color: rgba(128, 128, 128, 0.483); + --background-hover-color: rgba(187, 187, 187, 0.509); + --box-height: 268px; + --box-width: 333px; + --header-color: #183b56; + --text-margin: 10px; + +} +body{ + box-sizing: border-box; + font-family: "Poppins"; + display: flex; + align-items: center; + justify-content: center; +} +.container { + margin: 20px; + height: fit-content; + width: fit-content; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; +} +.header{ + position: relative; + z-index: 2; + color: var(--header-color); + font-weight: 800; + font-size: 35px; + width: 312px; + height: 100px; + text-align: center; + text-shadow: 2px 2px 5px rgba(255,131,69,0.79); + margin: var(--text-margin); +} +/ +.highlight{ + position: relative; + display: inline-block; +} +.highlight::before { + content: ""; + position: absolute; + bottom: 5px; + left: 20px; + width: 70px; + height: 10px; + background-color: var(--background-branding-color); + z-index: -1; +} +.content { + display: flex; + flex-direction: row; + width: fit-content; + height: fit-content; + justify-content: center; + align-items: center; + flex-wrap: wrap; + +} +.content2 { + display: flex; + flex-direction: row; + width: fit-content; + height: fit-content; + justify-content: center; + align-items: center; + flex-wrap: wrap; + +} +.explore { + position: relative; + margin: 5px; + display: flex; + flex-direction: column; + justify-content: center; + width: var(--box-width); + height: var(--box-height); + border: 1px solid var(--branding-color); +} +#box { + position: relative; + margin: 5px; + display: flex; + flex-direction: column; + justify-content: flex-end; + width: var(--box-width); + height: var(--box-height); + border: 1px solid var(--box-border-color); +} + +.subhead { + font-weight: 600; + font-size: 26px; + margin: var(--text-margin); +} +.detail { + margin: var(--text-margin); +} +.explore { + background-color: var(--branding-color); +} +.ex-subhead { + color: white; + margin: 50px; + font-size: 30px; + font-weight: 600; +} +#box:hover { + background-color: var(--background-hover-color); + .icon{background-color: var(--branding-color); + color: white; + box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.21); + } +} + .icon{ + position: absolute; + bottom: 170px; + left: 50px; + display: flex; + color: var(--branding-color); + background-color: var(--background-branding-color); + height: 50px; + width: 50px; + border-radius: 100%; + justify-content: center; + align-items: center; + scale: 2; +} +.arrow { + position: absolute; + top: 240px; + left: 280px; + cursor: pointer; +} +.arrow:hover{ + background-color: var(--background-hover-color); + border-radius: 100%; +} +.arrowex { + position: absolute; + left: 280px; + color: white; + cursor: pointer; +} +