Merge pull request #207 from Elaniobro/iOS-landing-page

Gitcoin: Issue #174

README.md

@@ -236,8 +236,9 @@ _bountydetails function returns the following fields:
 git clone https://github.com/gitcoinco/web.git
 cd web
 cp app/app/local_settings.py.dist app/app/local_settings.py
-docker-compose up
+docker-compose up -d
 ```
+Navigate to `http://0.0.0.0:8000/`.
 
 ## Without Docker
 

app/app/sitemap.py

@@ -28,6 +28,7 @@ def items(self):
             'whitepaper',
             'whitepaper_access',
             '_leaderboard',
+            'ios',
         ]
 
     def location(self, item):

app/app/urls.py

@@ -100,6 +100,7 @@
     url(r'^slack/?', retail.views.slack, name='slack'),
     url(r'^iosfeedback/?', retail.views.iosfeedback, name='iosfeedback'),
     url(r'^ios/?', retail.views.ios, name='ios'),
+    url(r'^itunes/?', retail.views.itunes, name='itunes'),
     url(r'^ethdenver/?', retail.views.ethdenver, name='ethdenver'),
     url(r'^denver/?', retail.views.ethdenver, name='denver'),
     url(r'^casestudy/?', retail.views.casestudy, name='casestudy'),

app/assets/v2/css/gitcoin.css

@@ -322,4 +322,4 @@ div.button-pink {
 *:-ms-input-placeholder {
   /* IE 10+ */
   color: lightgray;
-}
+}

app/assets/v2/css/ios.css

@@ -0,0 +1,187 @@
+.ios {
+  background: #fefefe;
+}
+.ios .header{
+  background: none;
+}
+
+.ios-hero__container .nav-link:visited .nav-link--active,
+.ios-hero__container .nav-link--active {
+  background: #FFF;
+  border-radius: .5rem;
+  color: #8E2ABE !important;
+}
+
+.ios-hero__container .nav-link--active:hover {
+  color: #FFF !important;
+}
+
+.ios-hero__container {
+  background: -webkit-linear-gradient(138deg, #8E2ABE 0%, #37EA9C 100%);
+  background: -o-linear-gradient(138deg, #8E2ABE 0%, #37EA9C 100%);
+  background: linear-gradient(228deg, #8E2ABE 0%, #37EA9C 100%);
+  height: 750px;
+  min-height: 750px;
+  margin-bottom: 225px;
+}
+
+.ios-hero__container .header-line p {
+  font-family: Futura;
+  font-size: 2em;
+}
+.ios-hero__container .header-line {
+  letter-spacing: normal;
+  line-height: normal;
+  font-size:3rem;
+  font-style: normal;
+  padding-top: 150px;
+}
+.ios-hero__container .header-line h3 {
+  font-size: 1.75rem;
+}
+
+.ios .btn-outline-info {
+  color: white;
+  background: -webkit-linear-gradient(138deg, #37EA9C 0%, #8E2ABE 100%);
+  background: -o-linear-gradient(138deg, #37EA9C 0%, #8E2ABE 100%);
+  background: linear-gradient(228deg, #37EA9C 0%, #8E2ABE 100%);
+  border: 3px solid;
+  border-radius: .5rem;
+}
+
+.ios .footer {
+  border-top: 1px solid #eff3ee;
+  background: #fff;
+  padding: 0 15px;
+}
+
+.ios .footer .nav-link {
+  color: black !important;
+}
+
+.ios .footer img {
+  filter: none;
+}
+
+.ios .video {
+  width: 100%;
+}
+
+.ios .video__wrapper {
+  display:table;
+  width:auto;
+  position:relative;
+  width: 100%;
+}
+.ios .video__wrapper .playpause {
+  background-image:url(/static/v2/images/ios/play.png);
+  background-repeat:no-repeat;
+  width:50%;
+  height:50%;
+  position:absolute;
+  left:0%;
+  right:0%;
+  top:0%;
+  bottom:0%;
+  margin:auto;
+  background-size:contain;
+  background-position: center;
+}
+
+.card .content .title {
+  font-size: 2rem;
+  letter-spacing: normal;
+  font-weight: bold;
+}
+
+.card .content .description {
+  color: #474747;
+  font-size: 1.2rem;
+  height: auto;
+}
+
+.ios-emoji {
+  padding-top: 20px;
+  font-size: 4.5rem;
+}
+
+.ios .tag-line {
+  margin: 100px 0 50px 0;
+}
+
+.ios .tag-line h3 {
+  font-size: 3rem;
+  letter-spacing: normal;
+  font-weight: bold;
+}
+
+.cards {
+  display: block;
+}
+
+.card {
+  margin: 1em 0 1em 0;
+}
+
+.line-break {
+  display: inline-block;
+}
+
+@media (min-width: 1026px) {
+  .ios .visible-md-down {
+    display: none;
+  }
+}
+
+@media (max-width: 1025px) {
+  .ios-hero__container .header-line {
+    padding-top: 0;
+  }
+
+  .ios-hero__container {
+    height: auto;
+    min-height: min-content;
+    margin-bottom: 50px;
+  }
+
+  .hidden-lg {
+    display: none;
+  }
+
+  .visible-md-down {
+    display: inline;
+  }
+}
+
+@media (max-width: 991px) {
+  .col-md-4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .card {
+    width: 80%;
+    margin: 1em 0 1em 0;
+    padding: 2em;
+    height: auto;
+  }
+
+  .card .content .description {
+    font-size: 1.5rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .ios .btn-outline-info {
+    text-align: center;
+    margin: 15px 40% 0;
+  }
+
+  .hidden-lg {
+    display: none;
+  }
+
+  .visible-md-down {
+    display: inline;
+  }
+}