MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES
++
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean + euismod bibendum laoreet. Proin gravida dolor sit amet lacus + accumsan et viverra justo commodo.
+Download
+diff --git a/css/axit.css b/css/axit.css
index 4cffb74..5ae34ee 100644
--- a/css/axit.css
+++ b/css/axit.css
@@ -117,11 +117,9 @@ textarea {
width: 80vw;
display: flex;
justify-content: space-between;
- background-color: blue;
-
}
- .centered img {
+ header .centered img {
height: 1.3em;
align-self: center;
}
@@ -142,10 +140,83 @@ textarea {
justify-content: flex-end;
list-style-type: none;
padding: 0;
+ margin: 16px 0;
}
.desktop li {
- margin: 0 20px;
+ margin-left: 20px;
+ }
+
+ main {
+ background-image: url(../img/axit_bg.jpg);
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ padding: 10vh 0;
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ }
+
+ main .centered {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ main .centered > * {
+ width: 50%;
+ }
+
+ #form-container {
+ display: flex;
+ justify-content: center;
+ }
+
+ form {
+ width: 250px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ background-color: white;
+ }
+
+ form h3 {
+ background-color: gray;
+ margin: 0;
+ }
+
+ form input {
+ background-color: transparent;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ border-bottom: 1px solid #f5f5f5;
+ margin-bottom: 25px;
+ }
+
+ #social-container {
+ display: flex;
+ justify-content: center;
+ }
+
+ #social-banner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ #social-text {
+ text-align: center;
+ }
+
+ #social-banner i {
+ margin: 10px;
+ }
+
+ #social-icons {
+ display: block;
+ font-size: 2em;
}
@media (min-width: 700px) {
@@ -155,8 +226,42 @@ textarea {
.desktop {
display: block;
}
-
+ }
+ @media (min-width: 768px) {
+ main {
+ text-align: left;
+ }
+ main .centered {
+ flex-direction: row;
+ }
+ #form-container {
+ justify-content: flex-end;
+ }
+ }
+
+ @media (min-width: 835px) {
+ #social-banner {
+ flex-direction: row;
+ justify-content: space-between;
+ }
+
+ #social-text {
+ width: 33.3333%;
+ text-align: left;
+ }
+
+ #social-icons {
+ width: 66.6667%;
+ text-align: center;
+ display: flex;
+ justify-content: space-around;
+
+ }
+
+ #social-icons i{
+ font-size: 40px;
+ }
}
diff --git a/img/axit_bg.jpg b/img/axit_bg.jpg
index 68165a2..7de4b2a 100644
Binary files a/img/axit_bg.jpg and b/img/axit_bg.jpg differ
diff --git a/wk3_axit.html b/wk3_axit.html
index 4dedb58..4c4856e 100644
--- a/wk3_axit.html
+++ b/wk3_axit.html
@@ -26,7 +26,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+ euismod bibendum laoreet. Proin gravida dolor sit amet lacus
+ accumsan et viverra justo commodo. DownloadMODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES
+
+
Social Media
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean euismod bibendum laoreet.
+