diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 75e9841e..c8c6e3a1 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -1,8 +1,61 @@ -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - */ +.body { + background-color: #4a4; + } + .blog-name { + text-align: center; + margin: 30px 8px; + padding: 15px; + border-radius: 5px; + background: #fca; + } + + .article-1 h3 { + text-align: center; + } + h3 { + display: block; + font-size: 1.17em; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + font-weight: bold; + } + .article { + display: grid; + grid-template-columns: 31vw 31vw 31vw; + grid-gap: 30px; + justify-items: center; + font: 1rem/1.56 "ubuntu", Verdana, Arial, sans-serif; + } + article:first-child { + color: #123; + background-color: #faa; + } + .article_1 { + border-radius: 1em; + text-align: center; + color: #aceef3; + + font-size: 1.5vw; + background-color: rgb(38, 107, 109); + } + + img { + max-width: 50%; + display: block; + height: auto; + margin: 0 auto; + } + + #img-div { + background: green; + padding: 10px; + margin: -10; + height: 10; + } + .rights { + text-align: center; + font: 1.2rem/1.56 "ubuntu", Verdana, Arial, sans-serif; + } + diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 67dfc7f5..a010fd2a 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -1,22 +1,83 @@ - - - - My Blog - - - - - - - - + + + + + + My Random Blog + + + + + + + +
+

Random Blog

+
+ Lorem Ipsum + +
+ +
+
+ +

Left

+ +
+ +

Donec efficitur massa justo, et dignissim ante pretium id. In lorem magna, commodo vel tristique at, + dignissim ac dui. Fusce ac diam a ex pellentesque porttitor malesuada eget ante. Nam finibus porta mauris. + Pellentesque convallis mi nec massa convallis bibendum. Aenean ornare augue vitae mattis posuere. Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Aliquam metus metus, ornare vitae vehicula ac, lobortis + in ligula.

+ Lorem Ipsum + +
+ +
+

Middle Article

+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis enim sapien, convallis id aliquet ut, + fermentum at velit. In auctor venenatis feugiat. Nullam pharetra ornare urna a elementum. In convallis + posuere pretium. Nulla mattis molestie tellus, eu gravida diam ultrices vitae. Nunc ultrices, nisl quis + varius fringilla, est ante pellentesque odio, id condimentum est justo nec quam. Orci varius natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum et purus ipsum. Maecenas + mauris nisl, fringilla a egestas et, tincidunt vel urna. +

+ Lorem Ipsum +
+
+ +
+

Right

+
+

+ Aenean lacinia, justo nec porta tincidunt, elit magna mollis nibh, at vulputate est sem eu lorem. Integer + leo turpis, cursus ut tincidunt at, accumsan quis enim. Donec malesuada porttitor gravida. Ut dictum mi + ornare, egestas tellus nec, euismod dolor. Curabitur ex arcu, consectetur ac porttitor sed, efficitur + placerat justo. Aliquam placerat viverra velit vitae egestas. Duis dapibus ex sem. Aliquam fringilla augue a + nibh aliquet, ut auctor dui rhoncus. Sed tincidunt aliquam ante nec venenatis. Integer aliquet tortor sed ex + pretium, viverra rutrum sem hendrerit. Nunc eu auctor elit, a fringilla risus. Mauris ornare velit sit amet + mi porta, non vestibulum augue faucibus. +

+ Lorem Ipsum +
+
+
+ +
+ + + + diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..cf1ec1af 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,9 +1,247 @@ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - +html{ + height: 100%; + width: 100%; +} body { + width: 100%; font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + margin: 0; + padding: 0; + +} +/* flexbox*/ +.parent { + background-color: #ffffff; + margin: 0; + padding: 30px; + height:100%; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content:center; + +} +.header { + + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content:center; + border-bottom: 1px solid #DDD; + +} +.header .logo{ +margin-right: 150px; +width: 40px; +height: 40px; + +} +.nav .nav-menu { + list-style: none; + display: flex; + flex-direction: row; + align-items: center; + justify-content:center; + text-decoration: none; + color: #838994 + +} +.nav-menu li.active { + color: #2c2e31; + font-weight: 500; +} + +.top_content { + /* background-color: #f800db;*/ + background-image: url(../img/first-background.jpg); + background-position: center bottom; + background-repeat: no-repeat; + background-size: cover; + height: 500px; + width: 100%; + margin: inherit; + padding: inherit; + display: flex; + justify-content: center; + +} +.top_content_container{ + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + +} +.top_content h1{ + + color: white; + text-align: center; + font-family: inherit; + + + + +} +.top_content h3{ + /*padding-left: 12.5rem;*/ + color: white; + text-align: center; + font-weight: 300; + + + + +} +.top_content .btn{ + /*padding-left: 12.5rem;*/ + color: white; + text-align: center; + margin-top: 1.563rem; +} +button{ + + width: 9.688rem; + background-color: #f15a29; + border-color: #f15a29; + text-shadow: none; + border-style: none; + border-radius: 4px; + padding: 1rem 1.5rem; + color: white; + font-size: 1.125rem; + +} +.bottom_content{ + display: flex; + flex-direction: column; + align-items: center; + justify-content:center; + width: 100%; + + +} +.bottom_content h2{ + font-size: 2.75rem; + margin: 1.625rem 0 3.125rem; + font-weight: 100; + +} +.case{ + display: flex; + flex-direction: row; + align-items: center; + justify-content:center; + width: 100%; + list-style: none; +} +.case_list{ + padding: 40px; + margin: 40px; + +} +.caption{ + + text-align: center; + font-size: 1.563rem; +} +.caption h5{ + text-align: center; + padding: 10px; +} +ul .case_list .caption { + /*background-color: lightcoral;*/ + display: block; + + width: 100%; + + +} +hr{ + width: 100%; +} +.footer { + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + justify-content: center; + +} +.footer h5{ + text-align: center; + margin-block-start: 1.67em; + margin-block-end: 1.67em; + margin-inline-start: 0px; + margin-inline-end: 0px; +} +.icons { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 20px; + margin: 20px; + border: 0; + +} +ul{ + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + padding-inline-start: 40px; + +} +li{ + list-style: none; + padding: 10px; + + +} +.footer .icons > li { + border-radius: 1.25rem; + width: 2.5rem; + height: 2.5rem; + display: inline-block; + margin: 1.25rem 5px; + border: 1px solid #eaebec; + padding: 0.625rem 0; + text-align: center; +} +.footer .twitter { + color: #55acee; +} +.footer .facebook { + color: #4c66a4; +} +.footer .instagram{ + color: #3f729b; +} +.fa { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +/****Media Queries****/ + + + +@media only screen and (min-width:400){ + .nav .nav-menu { + height: 200px; + flex-direction: column; + } + .header .logo{ + margin: 0; + } } /** diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..352e4598 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -1,21 +1,122 @@ + Karma - + - - + + + +
+ +
+ + + + +
+
    + +
  • Meet Karma
    • +
  • How it Works
    • +
  • Store
    • +
  • Blog
    • +
  • Help
    • +
  • Login
    • +
+
+ +
+ + + + +
+
+

Introducing Karma

+

Bring Wifi with you, everywhere you go.

+
+
+ +
+
+ +

Everyone needs a little karma.

+ + - - - +
+ + +
+ +
+ + +
+
Join us on
+
+ + + + + + + + + + +
© Karma Mobility, Inc.
+ +
+
- + + \ No newline at end of file diff --git a/week3/2-website/main.css b/week3/2-website/main.css new file mode 100644 index 00000000..56b378b2 --- /dev/null +++ b/week3/2-website/main.css @@ -0,0 +1,266 @@ + + /*---Main Container---*/ + .container{ + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + /*---Navigation Bar and Header ---*/ + .header{ + width: 100%; + } + .top-header .logo{ + background-color: darkgrey; + width: 200px; + height: 200px; + padding: 20px; + } + .top-header .contact-button{ + background-color:darkgrey; + font-size: 25px; + border-radius: 10px; + border-width: medium; + width: 125px; + height: 50px; + margin: 20px; + } + .nav-bar{ + background-color: lightgrey; + } + +.nav-list li{ + margin: 5px; + padding: 5px; + background-color: darkgrey; + } + main{ + width: 100%; + } + + .section{ + background-color: lightgrey; + } + + .cake-portrait{ + background-color: lightgrey; + } + + .cake-portrait .cakes{ + list-style: none; + padding: 20px; + width: 25%; + height:auto; + background-color: darkgrey; + margin: 20px; + } + +.footer .footer-list{ + background-color: lightgrey; + + } + .footer-list li{ + list-style: none; + padding: 20px; + background-color: darkgrey; + margin: 20px; + } + @media (max-width: 400px){ + .header .top-header { + background-color: lightgrey; + display: flex; + flex-direction: column; + align-items: center; + /*margin-bottom: 10px; + margin-top: 20px;*/ + width: 100%; + } + .nav-bar .nav-list{ + background-color: lightgrey; + list-style: none; + display: flex; + flex-direction: column; + align-items: center; + margin-right: 30px + } + + + .main-container{ + background-color: lightgrey; + display: flex; + flex-direction: column; + align-items: center; + + + } + + .info-section{ + width: 100%; + background-color: darkgrey; + + } + .info-section h2,p{ + text-align: center; + } + .image-section{ + width: 100%; + background-color: lightgrey; + align-items: center; + display: flex; + flex-direction: column; + + } + .image-carousel{ + margin: 10px; + width: 100%; + height:200px; + background-color: darkgrey; + + } + .carousel-list .carousel-item{ + + display: flex; + flex-direction: column; + align-items: center; + list-style: none; + } + .carousel-item li{ + width: 100px; + height: 100px; + margin: 10px; + padding: 10px; + margin-right: 50px; + background-color: darkgrey; + } + + .section{ + margin-top: 20px; + width: 100%; + } + .cake-samples{ + padding: 20px; + } + .cake-samples .cake-portrait{ + display: flex; + flex-direction: column; + align-items: center; + margin-right: 50px; + } + .cakes{ + align-self:center; + } + + footer{ + width: 100%; + + } + + .footer-list li{ + display: flex; + flex-direction: column; + align-items: center; + align-items: center; + background-color: darkgrey; + margin-right: 70px; + } + } + @media (min-width: 800px){ + .header .top-header { + background-color: lightgrey; + display: flex; + flex-direction: row; + justify-content: space-between; + /*margin-bottom: 10px; + margin-top: 20px;*/ + width: 100%; + } + .nav-bar .nav-list{ + background-color: lightgrey; + list-style: none; + display: flex; + flex-direction: row; + justify-content: space-around; + margin-right: 30px + } + + + .main-container{ + background-color: lightgrey; + display: flex; + padding: 20px; + + } + + .info-section{ + width: 30%; + background-color: darkgrey; + align-items: center; + + } + .info-section h2,p{ + text-align: center; + } + .image-section{ + width: 70%; + background-color: lightgrey; + align-items: center; + display: flex; + flex-direction: column; + margin-left: 10px; + + } + .image-carousel{ + width: 100%; + height: 400px; + background-color: darkgrey; + + } + .carousel-list .carousel-item{ + background-color: darkgrey; + display: flex; + flex-direction: row; + justify-content: space-between; + + + } + .carousel-item li{ + margin-top: 10px; + + height:100px; + list-style: none; + align-items: center; + padding: 20px; + margin: 20px; + + + } + .section{ + margin-top: 20px; + width: 100%; + } + .cake-samples{ + padding: 20px; + } + .cake-samples .cake-portrait{ + + display: flex; + flex-direction: row; + justify-content: space-between; + + } + .cakes{ + align-self:center; + } + + footer{ + width: 100%; + + } + + .footer-list li{ + display: flex; + flex-direction: row; + justify-content: center; + background-color: darkgrey; + } + } \ No newline at end of file diff --git a/week3/2-website/main.html b/week3/2-website/main.html new file mode 100644 index 00000000..b7b37158 --- /dev/null +++ b/week3/2-website/main.html @@ -0,0 +1,80 @@ + + + + + + Cake-Factory + + + + + +
+
+
+ + +
+
+ +
+
+
+
+
+
+

Hello

+

Information

+
+
+
IMAGE CAROUSEL
+
+
    +
  • IMG1
    • +
  • IMG2
    • +
  • IMG3
    • +
  • IMG4
    • +
+
+ + +
+ +
+
+ +
+
+
    +
  • cake1
    • +
  • cake2
    • +
  • cake3
    • +
  • cake4
    • +
+
+ +
+
+ +
+ + + + \ No newline at end of file