Skip to content

Commit

Permalink
Our programs sections
Browse files Browse the repository at this point in the history
I made the programs section of the landing page including responsive desing
  • Loading branch information
OmarRoBra committed Sep 15, 2021
1 parent 8c3d143 commit 0ba178c
Show file tree
Hide file tree
Showing 11 changed files with 163 additions and 57 deletions.
7 changes: 7 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,10 @@ yarn-debug.log*
yarn.lock

/config/database.yml

/public/packs
/public/packs-test
/node_modules
/yarn-error.log
yarn-debug.log*
.yarn-integrity
Binary file added app/assets/images/Group 48.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/assets/images/Shopify_logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/assets/images/logo-rails.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/assets/images/logo-react.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 35 additions & 36 deletions app/assets/stylesheets/home.scss
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
@import './variables.scss';

.lading-top{
background: rgb(2,0,36);
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,57,166,1) 0%, rgba(80,0,255,1) 100%);
.lading-top {
background: rgb(2, 0, 36);
background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(0, 57, 166, 1) 0%, rgba(80, 0, 255, 1) 100%);
height: 926px;
overflow: hidden;

.container{
.container {
width: 90%;
}

.hero{
.hero-info{
.hero {
.hero-info {
line-height: 220%;
&_heading{
&_heading {
color: $white;
display: block;
font-size: 40px;
margin: 0;

&-span{
&-span {
display: block;
color: $yellow;
font-size: 35px;
Expand All @@ -28,21 +28,21 @@
}
}

&_text-v1{
&_text-v1 {
color: $white;
line-height: 25px;
margin-bottom: 25px;
&_p{
&_p {
font-size: 22px;
margin: 0;
}
}

&_text-v2{
display: none
&_text-v2 {
display: none;
}

&_button{
&_button {
@include button($yellow, 15px, $blue, 15px, 20px);
display: block;
font-weight: bold;
Expand All @@ -52,8 +52,8 @@
}
}

.hero-image{
&_women{
.hero-image {
&_women {
height: auto;
margin: 0 auto;
position: relative;
Expand All @@ -63,19 +63,19 @@
z-index: 1;
}

&_rectangles{
&_rectangles {
bottom: 500px;
display: flex;
justify-content: center;
right: 106px;
position: relative;

&-colored1{
&-colored1 {
position: relative;
top: 84px;
}

&-colored2{
&-colored2 {
bottom: 100px;
right: 20px;
position: relative;
Expand All @@ -86,77 +86,76 @@
}
}

@media(min-width: 768px){
.lading-top{
@media (min-width: 768px) {
.lading-top {
height: 888px;
.container{
.container {
width: 85%;

.hero{
&-info{
.hero {
&-info {
line-height: 220%;

&_heading{
&_heading {
font-size: 50px;

&-span{
&-span {
display: block;
font-size: 45px;
font-weight: bolder;
margin-bottom: 20px;
}
}

&_text-v1{
&_text-v1 {
display: none;
}

&_text-v2{
&_text-v2 {
display: block;
color: $white;
line-height: 40px;
margin-bottom: 35px;

&_p{
&_p {
margin: 0;
font-size: 32px;
font-weight: lighter;
}
}

&_button{
&_button {
font-size: 20px;
margin: 0;
width: 55%;
}
}

&-image{
&_women{
&-image {
&_women {
top: -60px;
right: 15px;
}

&_rectangles{
&_rectangles {
bottom: 560px;
right: -1px;
gap: 20px;

&-colored1{
&-colored1 {
width: 50%;
left: 30px;
top: 63px;
}

&-colored2{
&-colored2 {
width: 70%;
bottom: 110px;
}
}

}
}
}
}
}
}

Expand Down
68 changes: 68 additions & 0 deletions app/assets/stylesheets/home/Our_Programs.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
@import './variables.scss';

.programs_container {
text-align: center;
margin: 1rem auto;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #f5f6f8;
align-items: center;

h1 {
margin: 1.5rem auto;
font-weight: 800;
}
}

.white_container {
margin: 1rem auto;
background-color: white;
border-radius: 15px;
width: 85vw;
}

.program {
margin: 1rem auto;
&_img {
margin: 2rem auto;
max-width: 13rem;
}
.ux {
margin: 2rem auto;
max-width: 6rem;
}
h4 {
font-weight: 700;
color: $blue;
}
p {
font-weight: 600;
}
}

@media (min-width: 768px) {
.white_container {
display: grid;
grid-template-columns: 50% 50%;
padding: 1rem;
}
.program {
max-width: 100%;
max-height: 40vh;
align-items: center;
display: flex;
flex-direction: column;

&_img {
margin: auto;
max-width: 60%;
}
}
}

@media (min-width: 1024px) {
.white_container {
grid-template-columns: 25% 25% 25% 25%;
}
}
34 changes: 34 additions & 0 deletions app/views/home/index.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,37 @@
</div>
</div>
<% end %>

<div class="programs_container">
<h1>Nuestros programas</h1>
<div class="white_container">

<div class="program">
<%=image_tag("logo-rails.png", alt: t('hero.image_background'), class:"program_img")%>
<h4>Web</h4>
<p>Ruby on rail Web Developer</p>
</div>

<div class="program">
<%=image_tag("logo-react.png", alt: t('hero.image_background'), class:"program_img")%>
<h4>Mobile</h4>
<p>React Native Mobile Developer</p>
</div>

<div class="program">
<%=image_tag("Shopify_logo.png", alt: t('hero.image_background'), class:"program_img")%>
<h4>E-commerce</h4>
<p>Shopify StoreFront Developer</p>
</div>

<div class="program">
<%=image_tag("Group 48.png", alt: t('hero.image_background'), class:" ux ")%>
<h4>Design</h4>
<p>UI/UX Designer</p>
</div>

</div>

<div>

</div>
19 changes: 9 additions & 10 deletions bin/webpack
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
#!/usr/bin/env ruby
# frozen_string_literal: true

ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
ENV['NODE_ENV'] ||= 'development'
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= "development"

require 'pathname'
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
Pathname.new(__FILE__).realpath)
require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
Pathname.new(__FILE__).realpath)

require 'bundler/setup'
require "bundler/setup"

require 'webpacker'
require 'webpacker/webpack_runner'
require "webpacker"
require "webpacker/webpack_runner"

APP_ROOT = File.expand_path('..', __dir__)
APP_ROOT = File.expand_path("..", __dir__)
Dir.chdir(APP_ROOT) do
Webpacker::WebpackRunner.run(ARGV)
end
19 changes: 9 additions & 10 deletions bin/webpack-dev-server
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
#!/usr/bin/env ruby
# frozen_string_literal: true

ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
ENV['NODE_ENV'] ||= 'development'
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= "development"

require 'pathname'
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
Pathname.new(__FILE__).realpath)
require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
Pathname.new(__FILE__).realpath)

require 'bundler/setup'
require "bundler/setup"

require 'webpacker'
require 'webpacker/dev_server_runner'
require "webpacker"
require "webpacker/dev_server_runner"

APP_ROOT = File.expand_path('..', __dir__)
APP_ROOT = File.expand_path("..", __dir__)
Dir.chdir(APP_ROOT) do
Webpacker::DevServerRunner.run(ARGV)
end
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"husky": "^7.0.2",
"prettier": "2.3.2",
"stylelint": "^13.13.1",
"webpack-dev-server": "^4.0.0"
"webpack-dev-server": "^4.2.1"
},
"scripts": {
"precommit": "lint-staged"
Expand Down

1 comment on commit 0ba178c

@cfcortes
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull reviewers stats for the lasts 30 days:

User Avg. time to first review Total pull reviews Total comments
YilKanda
πŸ₯‡
1h 26m
3
β–€β–€
8
β–€β–€β–€β–€β–€β–€β–€
AlejandroVI99
πŸ₯ˆ
9h 9m
β–€
3
β–€β–€
2
β–€β–€
xFerchoVJ
πŸ₯‰
13h 48m
β–€β–€
4
β–€β–€β–€
1
β–€
SampabloC
18h 21m
β–€β–€β–€
1
β–€
0
jairolan
12h 4m
β–€β–€
1
β–€
0
RobertoCarMed
14h 27m
β–€β–€
1
β–€
0

Please sign in to comment.