diff --git a/week-3/.DS_Store b/week-3/.DS_Store new file mode 100644 index 0000000..1648ebe Binary files /dev/null and b/week-3/.DS_Store differ diff --git a/week-3/css/style.css b/week-3/css/style.css new file mode 100644 index 0000000..8dcfd35 --- /dev/null +++ b/week-3/css/style.css @@ -0,0 +1,287 @@ +body { + background-color: black; +} + +.section-2 { + background-color: white; +} + +.header-container { + background-color: black; +} + +nav ul li { + font-size: large; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + color: white; + list-style-type: none; + padding: 2.5px; +} + +ul { + padding: 0; + margin: 0; +} + +h1 { + font-family: Raleway; + text-transform: uppercase; + padding: 0; + margin: 0; + padding-top: 5px; + padding-bottom: 5px; +} + +h2 { + font-family: Raleway; + font-size: large; + padding: 0; + margin: 0; + padding-top: 5px; + padding-bottom: 5px; +} + +h3 { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + padding: 0; + margin: 0; + padding-top: 5px; + padding-bottom: 5px; +} + +p { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + padding: 0; + margin: 0; + padding-top: 5px; + padding-bottom: 5px; +} + +#dwnld-btn { + background-color: transparent; + border-color: white; + border-style: solid; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + color: white; + font-size: medium; +} + +form { + padding: 0; +} +.form-slots { + padding-left: 15px; + padding-right: 15px; +} +#free { + color: orange; + background-color: transparent; + padding-left: 5px; + padding-right: 5px; +} +.form-text { + padding-top: 20px; +} +input { + color: grey; + border: none; +} +input:focus::-webkit-input-placeholder { + color: transparent; +} +#form-btn { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: 20px; + color: white; + background-color: orange; + padding: 10px; + padding-left: 75px; + padding-right: 75px; + margin-top: 10px; +} + +footer { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + padding-top: 10px; +} +footer p { + color: grey; + padding: 10px; +} +footer img { + width: 1rem; + height: 1.2rem; + padding-top: 25px; + padding-left: 25px; +} +@media (min-width: 320px) { + .header-container { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + } + #header-img { + width: 3rem; + height: 1rem; + padding-top: 5px; + } + nav { + padding-top: 10px; + padding-bottom: 10px; + } + .section-1 { + color: white; + } + .row1-left { + padding: 10px; + padding-top: 25px; + } + #dwnld-btn { + padding: 5px; + margin-top: 10px; + margin-bottom: 10px; + } + .sign-up { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + background-color: white; + } + .sign-up h2 { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + color: black; + background-color: #f5f5f5; + padding: 15px; + } + + .section-2 { + padding: 10px; + padding-top: 25px; + } + .section-2 p { + color: grey; + } + .socials { + padding-top: 15px; + } + .sub-socials { + display: flex; + justify-content: space-evenly; + padding: 10px; + } + footer img { + padding-left: 20px; + } +} + +@media (min-width: 768px) { + .header-container { + display: flex; + justify-content: space-between; + flex-direction: row; + align-items: center; + } + #header-img { + padding-left: 4rem; + } + nav { + padding-right: 45px; + } + nav ul { + display: flex; + justify-content: space-evenly; + flex-direction: row; + } + nav ul li { + padding-right: 10px; + } + .section-1 { + display: flex; + justify-content: space-evenly; + flex-direction: row; + align-items: center; + background-color: transparent; + margin-left: -15px; + margin-right: -15px; + } + .row1-left { + width: 20rem; + } + .sign-up h2 { + padding: 10px; + } + + .section-2 { + display: flex; + justify-content: center; + margin-left: -15px; + margin-right: -15px; + } + .section-2-container { + display: flex; + justify-content: space-evenly; + flex-direction: column; + } + .socials { + display: flex; + justify-content: center; + flex-direction: row; + } + .sub-socials { + padding: 0; + } + .sub-socials img { + padding-left: 25px; + } +} + +@media (min-width: 1024px) { + body { + width: 1024px; + margin: 0 auto; + } + + #header-img { + padding-left: 8.5rem; + } + nav { + padding-right: 7rem; + } + .section-1 { + padding-top: 60px; + padding-bottom: 70px; + } + .row1-left { + width: 22rem; + } + .row1-left h1 { + font-size: x-large; + } + + .section-2-container { + display: flex; + justify-content: space-evenly; + flex-direction: row; + align-items: center; + padding-bottom: 10px; + } + .media { + width: 20rem; + padding-right: 10px; + } + .sub-socials img { + width: 2.2rem; + height: 2.5rem; + } +} diff --git a/week-3/images/.DS_Store b/week-3/images/.DS_Store new file mode 100644 index 0000000..d3bae0f Binary files /dev/null and b/week-3/images/.DS_Store differ diff --git a/week-3/images/Logo.png b/week-3/images/Logo.png new file mode 100644 index 0000000..3b46268 Binary files /dev/null and b/week-3/images/Logo.png differ diff --git a/week-3/images/icons/facebook.png b/week-3/images/icons/facebook.png new file mode 100644 index 0000000..230331e Binary files /dev/null and b/week-3/images/icons/facebook.png differ diff --git a/week-3/images/icons/google.png b/week-3/images/icons/google.png new file mode 100644 index 0000000..529ae35 Binary files /dev/null and b/week-3/images/icons/google.png differ diff --git a/week-3/images/icons/insta.png b/week-3/images/icons/insta.png new file mode 100644 index 0000000..877c1e2 Binary files /dev/null and b/week-3/images/icons/insta.png differ diff --git a/week-3/images/icons/pintrist.png b/week-3/images/icons/pintrist.png new file mode 100644 index 0000000..9f95259 Binary files /dev/null and b/week-3/images/icons/pintrist.png differ diff --git a/week-3/images/icons/su.png b/week-3/images/icons/su.png new file mode 100644 index 0000000..725e818 Binary files /dev/null and b/week-3/images/icons/su.png differ diff --git a/week-3/images/icons/twitter.png b/week-3/images/icons/twitter.png new file mode 100644 index 0000000..d7acc85 Binary files /dev/null and b/week-3/images/icons/twitter.png differ diff --git a/week-3/images/icons/wifi.png b/week-3/images/icons/wifi.png new file mode 100644 index 0000000..85291bc Binary files /dev/null and b/week-3/images/icons/wifi.png differ diff --git a/week-3/images/image.png b/week-3/images/image.png new file mode 100644 index 0000000..a30bed5 Binary files /dev/null and b/week-3/images/image.png differ diff --git a/week-3/index.html b/week-3/index.html new file mode 100644 index 0000000..167f63c --- /dev/null +++ b/week-3/index.html @@ -0,0 +1,98 @@ + + + + + + + AXIT + + +
+
+
+ Little logo +
+
+ +
+
+
+
+
+
+ Big logo +

Modern axure template for beautiful prototypes

+

______

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores + esse eligendi quae at quod, voluptatem eum voluptate, accusantium +

+ +
+ +
+
+
+
+

Social Media

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni + officiis, quas eum enim +

+
+
+
+ facebook + twitter + google plus +
+
+ pinterest + instagram + su + wifi +
+
+
+
+
+ + +