diff --git a/week1/3-website/.vscode/settings.json b/week1/3-website/.vscode/settings.json new file mode 100644 index 00000000..f673a71b --- /dev/null +++ b/week1/3-website/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/week1/3-website/banner1.jpg b/week1/3-website/banner1.jpg new file mode 100644 index 00000000..9b807025 Binary files /dev/null and b/week1/3-website/banner1.jpg differ diff --git a/week1/3-website/banner2.jpg b/week1/3-website/banner2.jpg new file mode 100644 index 00000000..26d40210 Binary files /dev/null and b/week1/3-website/banner2.jpg differ diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 75e9841e..acec7da9 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -6,3 +6,279 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ +/* Basic Reset */ +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; + font-family: "Roboto", sans-serif; +} +img { + max-width: 100%; +} + +.sidebar { + width: 8rem; + height: 100%; + background-color: #eee; + position: fixed; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + z-index: 10; +} +.menu-icon { + margin-top: 3rem; + cursor: pointer; +} +.line { + height: 0.2rem; + width: 2.5rem; + background-color: #222; + margin-bottom: 0.6rem; +} +.line-1, +.line-3 { + width: 1.8rem; + transition: all 0.4s; +} +.menu-icon:hover .line { + width: 2.5rem; +} +.social-icons-list { + list-style: none; + padding: 0; + height: 25rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; +} +.social-link { + font-size: 2rem; + color: #777; + transition: color 0.3s; +} +.social-link:hover { + color: #86debc; +} +.year { + margin-bottom: 1rem; + font-size: 1.5rem; + color: #555; +} +/* end of sidebar */ + +/* Navigation */ +.navigation-search { + position: relative; +} +.navigation { + position: fixed; + left: -32rem; + width: 40rem; + height: 100%; + background: linear-gradient( + to top, + rgba(34, 32, 41, 1), + rgba(34, 32, 41, 0.8) + ), + url(../nav-bg.jpg) center no-repeat; + background-size: cover; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + transition: left 0.8s cubic-bezier(1, 0, 0, 1); +} +.navigation-heading { + font-family: "Josefin Sans", sans-serif; + font-size: 3.5rem; + font-weight: 300; + letter-spacing: 0.2rem; + color: #86debc; + text-align: center; +} +.navigation-search-input { + width: 30rem; + padding: 1rem 2rem; + background-color: rgba(0, 0, 0, 0.3); + font-family: "Josefin Sans"; + font-size: 1.6rem; + color: #86debc; + letter-spacing: 0.4rem; + outline: none; + border: 0.1rem solid #555; + border-radius: 10rem; + transition: background-color 0.3s; +} +.navigation-search-input:focus { + background-color: rgba(0, 0, 0, 0.1); +} +.navigation-search-button { + border: none; + background-color: transparent; + color: #86debc; + font-size: 1.7rem; + position: absolute; + top: 1rem; + right: 1rem; + cursor: pointer; +} +.navigation-search-button:focus { + outline: none; +} +.navigation-list { + list-style: none; + padding: 0; + height: 18rem; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} +.navigation-item { + position: relative; +} +.navigation-link { + color: #fff; + font-size: 1.6rem; + font-weight: 400; + letter-spacing: 0.1rem; + text-transform: uppercase; + text-decoration: none; + transition: color 0.5s; +} + +.navigation-link:hover { + color: #86debc; +} + +/* .navigation-link:hover::before, +.navigation-link:hover::after { + width: 3rem; +} */ +.copyright { + color: #fff; + font-size: 1.2rem; + margin-bottom: 1.5rem; +} +.checkbox:checked ~ .navigation { + left: 8rem; +} + +/* header */ +.header { + margin-left: 8rem; + height: 100vh; + background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5)), + url(../banner1.jpg) center no-repeat; + background-size: cover; +} + +.brand { + display: flex; + cursor: pointer; +} + +.blog-heading { + font-family: "Josefin Sans", sans-serif; + font-size: 2.7rem; + font-weight: 400; + color: #86debc; + letter-spacing: 0.2rem; + margin-left: 2rem; +} + +.banner { + color: #ddd; + height: 65rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.banner-heading { + font-family: "Josefin Sans", sans-serif; + font-size: 7rem; + font-weight: 400; + margin-top: 0; + margin-bottom: 20; +} + +.banner-paragraph { + font-size: 3.5rem; + font-weight: 300; + margin-top: 0; +} + +.banner-button { + width: 21rem; + padding: 1.2rem 2rem; + font-size: 2rem; + color: #333; + letter-spacing: 0.1rem; + border: none; + border-radius: 10rem; + outline: none; + background: linear-gradient( + to right, + rgba(0, 247, 255, 0.658), + rgb(32, 206, 218) + ); + cursor: pointer; + margin-bottom: 10rem; +} + +.banner-button:hover { + background: linear-gradient(to left, rgb(0, 174, 255), rgb(32, 159, 218)); +} + +.banner-button:active { + transform: translateY(0.2rem); +} + +section { + font-size: 1.5rem; + display: flex; + flex-direction: column; + align-items: center; + padding: 5rem; + margin-left: 10rem; +} + +article:first-child { + font-weight: 400; + letter-spacing: 0.2rem; +} +article { + display: flex; + flex-direction: column; + align-content: center; +} +article img { + margin-bottom: 2rem; +} +article h2 { + text-align: center; + text-transform: uppercase; + font-family: "Josefin Sans", sans-serif; + font-size: 2.7rem; + font-weight: 400; +} +h2 a { + text-decoration: none; +} +h2 a:visited { + color: #555; +} +footer { + padding: 2.5rem; + text-align: center; +} diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 67dfc7f5..92e9d4c8 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -1,22 +1,189 @@ - - - - - My Blog - - - - - - - - - + + + + + + Study Blog + + + + + + + + +
+ + +
+ + + +
+

© 2020

+
+
+ + + + + + + + +
+
+ +

Study Blog

+
+ +
+ + +
+
+

What are you studying?

+ blog-1 + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Aspernatur asperiores non ab! Architecto eaque odit illum nobis + non quod unde ab voluptas, id impedit cumque praesentium neque + iusto asperiores totam atque possimus, eum, est repellendus? Omnis + culpa voluptatem enim rem ipsam distinctio vitae nesciunt id + tenetur dolor nam, illo velit nulla voluptate, maiores dolore + sunt, adipisci temporibus in! Placeat, porro maiores numquam modi + animi, accusamus ab ut perspiciatis earum expedita obcaecati, + minima fugit illum explicabo saepe? Necessitatibus eum maiores + deleniti quidem nemo magnam ducimus tempore, fugit impedit in vel + assumenda nesciunt magni minus! A autem, rem exercitationem iste + accusantium quae facere tempore eos corrupti? Tempora, quisquam + exercitationem quasi, aut veritatis at molestias excepturi ducimus + harum commodi, ut optio. Iusto est hic aliquid enim in molestias + error? Doloribus maxime quas eius soluta accusamus? Numquam sit + nesciunt culpa nulla placeat, inventore nostrum, reprehenderit + suscipit illo voluptas sunt dolorum recusandae, corporis optio + enim! +

+ Read More +
+
+

How are you studying?

+ blog-2 +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt + dolore dolores, voluptatibus, aspernatur libero possimus ut, + tempore itaque consequuntur illo accusamus aperiam? Autem, + laboriosam explicabo unde quia nisi blanditiis dolor itaque in + cumque rem veniam ipsum fuga quibusdam, exercitationem + consectetur! Nobis animi nihil saepe labore quae harum, quasi modi + impedit adipisci ab, expedita unde sit aperiam reiciendis + repudiandae fugit nostrum! Id tenetur totam voluptatum facere odio + quis architecto harum error atque inventore labore, eligendi + placeat modi omnis ducimus, at porro culpa voluptatem quos maiores + debitis laboriosam. Quis aperiam at alias, aliquid dolorum quidem + accusantium sequi asperiores, quo error perferendis perspiciatis + doloribus tempore expedita qui odit ut officiis odio cum molestiae + dolorem, facere nulla magni. Obcaecati alias cupiditate rem + laboriosam dolorum at quae dignissimos quisquam ducimus nobis + nesciunt adipisci quaerat tempora veniam illo quam nulla velit + aliquid, quas earum dolores illum. Commodi expedita nesciunt + laboriosam dignissimos vero, earum dolore quis ducimus! +

+ Read More +
+
+

How much are you studying?

+ blog-3 + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur + obcaecati explicabo assumenda, culpa dignissimos asperiores cum + rem, necessitatibus unde vel veniam harum enim dolorem vitae, + voluptates ut odio eos ea fuga? Molestias earum voluptatem + pariatur placeat, vero nihil cupiditate esse in tempora nesciunt + voluptates, perferendis molestiae ea soluta, numquam optio saepe + distinctio animi odit? Ipsum ipsam, praesentium quod delectus + error animi cumque explicabo tempora libero dignissimos hic saepe + vero modi! At molestiae doloribus recusandae quia quod illum + incidunt mollitia architecto, ut perspiciatis ipsa dolorem + nostrum, consequuntur saepe reprehenderit exercitationem iste + quidem iure, tenetur deserunt fugiat. Nesciunt nihil nam at + dolorem enim rem? Saepe, reprehenderit magnam iste nostrum + dolorem, ut at unde distinctio modi a error molestiae eius beatae, + sapiente aperiam. Consectetur ratione inventore, non + exercitationem quaerat, ipsam accusamus minus possimus et est + veritatis repudiandae ab excepturi? Perferendis dolor deserunt + nostrum vitae assumenda a aliquid blanditiis, possimus eligendi at + iure natus. +

+ Read More +
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/week1/3-website/nav-bg.jpg b/week1/3-website/nav-bg.jpg new file mode 100644 index 00000000..98155887 Binary files /dev/null and b/week1/3-website/nav-bg.jpg differ diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..b29a0f0e 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,11 +1,38 @@ +/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - +html { + font-size: 62.5%; + box-sizing: border-box; +} +h1, +h2, +h3, +h4 { + line-height: 1.3; +} body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; + margin: 0; + padding: 0; + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; + line-height: 1.6; + color: #333; + font-size: 2rem; +} +h1, +h2, +h3, +h4 { + line-height: 1.3; +} +ul, +li { + text-decoration: none; +} +a { + text-decoration: none; + color: #838994; } - /** * Add your custom styles below * @@ -15,5 +42,199 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +img { + max-width: 100%; +} +header { + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; + border-bottom: 1px solid #ddd; + width: 100%; +} +.logo { + width: 2.5rem; + margin-left: 15rem; +} + +.navbar { + display: flex; + justify-content: space-around; + margin-bottom: 0.5rem; + margin-right: 5rem; +} + +.navbar ul { + display: flex; + list-style: none; +} + +.navbar li { + padding: 1rem; + color: #838994; + font-size: 1.7rem; + letter-spacing: 0.1rem; + text-decoration: none; +} +.menu li a:hover { + color: #333333; +} +li a.active { + color: #4c5058; + font-weight: 500; +} +.card img { + width: 12.7rem; + margin-bottom: 2.5rem; + margin: 2.5rem; + padding: 2.5rem; +} +.about { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} +.about .container { + display: flex; + align-content: space-around; + align-items: center; + margin-bottom: 10rem; +} +.about h2 { + margin-top: 7rem; + font-size: 5rem; + font-weight: 300; +} +.card { + font-size: 2.5rem; +} +.card h3 { + font-size: 2.5rem; + font-weight: 300; + text-align: center; +} +.hero { + background-size: cover; + background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5)), + url(../img/first-background.jpg) center no-repeat; + margin-bottom: 3rem; + color: #ddd; + height: 65rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.hero-heading { + font-size: 5rem; + font-weight: 300; + margin-bottom: 0; +} +.hero-paragraph { + font-size: 2.5rem; + font-weight: 300; + letter-spacing: 0.2rem; + margin-top: 0; + margin-bottom: 2rem; +} +.hero-button { + width: 15rem; + padding: 1.2rem 2rem; + letter-spacing: 0.1rem; + border: none; + border-radius: 0.5rem; + outline: none; + cursor: pointer; + background-color: #f15a29; + border-color: #f15a29; + text-shadow: none; + color: white; + font-size: 1.5rem; +} +.hero-button:hover { + background-color: #d9400e; + border-color: #cf3d0e; + cursor: pointer; +} +hr { + border: 0; + border-top: 1px solid #eaebec; + max-width: 65%; + margin: auto; +} + +.social { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} +.social h3 { + font-size: 1.5rem; + font-weight: 300; + text-align: center; +} +.social ul { + list-style: none; + display: flex; + text-align: center; +} +.social li { + width: 4rem; + display: inline-block; + margin: 1.25rem; + padding: 1.5rem 0; + text-align: center; +} +i.fa { + display: inline-block; + border-radius: 6rem; + box-shadow: 0px 0px 2px #888; + padding: 0.5em 0.6em; +} +.footer { + margin-top: 0; + font-size: 1.5rem; + font-weight: 300; + color: #333; + padding: 2rem 0; + margin-bottom: 10rem; +} +.footer p { + margin-top: 0; + text-align: center; +} +@media(max-width: 500px) { + .header { + width: 50rem; + font-size:.5rem ; + } + .about .container { + flex-direction: column; + } + .about h2 { + font-size: 3rem; + } + .about h3 { + font-size: 2rem; + } + .navbar li { + font-size: 1.2rem; + } + .navbar { + margin-right: 2rem; + } + .logo { + margin-left: 3rem; + } + .hero-heading { + font-size: 4rem; + } + .hero-paragraph { + font-size:2rem ; + } \ No newline at end of file diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..7f30fd82 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -1,21 +1,83 @@ - - - + + + Karma - - - + + + + - - - - - + + + + - +
+ +
+
+

Introducing Karma

+

Bring WiFi with, everywhere you go.

+ +
+ + +
+

Everyone Needs A little Karma

+
+
+ all devices +

All devices

+
+
+ coffee icon +

Boost your Productivity

+
+
+ pay-as-you-go +

Pay as You Go

+
+
+
+
+
+

Join Us On

+ + +
+