Skip to content

Commit

Permalink
courses section
Browse files Browse the repository at this point in the history
  • Loading branch information
@crimanlor
crimanlor committed Jan 24, 2021
1 parent bf81b53 commit 981db75
Show file tree
Hide file tree
Showing 13 changed files with 13,421 additions and 91 deletions.
49 changes: 0 additions & 49 deletions .env.example
View file

This file was deleted.

6 changes: 6 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,9 @@ Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log
.DS_Store
app/.DS_Store
database/.DS_Store
public/.DS_Store
public/assets/.DS_Store
resources/.DS_Store
13,192 changes: 13,182 additions & 10 deletions package-lock.json
View file

Large diffs are not rendered by default.

Binary file added public/assets/course.png
View file
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 public/assets/course1.png
View file
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 public/assets/course2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/css/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import url(https://fonts.googleapis.com/css?family=Nunito);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap);
@charset "UTF-8";
/*!
* Bootstrap v4.6.0 (https://getbootstrap.com/)
Expand Down
68 changes: 67 additions & 1 deletion public/js/app.js
View file

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion resources/js/components/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import React from "react";
import ReactDOM from "react-dom";
import Example from "./Example";
import Course from "./course/Course";
// import "../components/course/Course.css";

function App() {
return (
<div className="container">
<Button />
<Course />
</div>
);
}
Expand Down
68 changes: 68 additions & 0 deletions resources/js/components/course/Course.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
:root {
--primary-color: #000000;
--secondary-color: #16c79a;
--terciary-color: #ffffff;
--quaternary-color: #19456b;
}

.courses-parent {
display: flex;
flex-direction: column;
justify-content: center;
/* flex-wrap: wrap; */
background-color: var(--quaternary-color);
height: 92.5vh;
width: 89.236vw;
}

.courses-parent-title {
font-family: "Roboto", sans-serif;
font-size: 28px;
color: var(--terciary-color);
padding-bottom: 20px;
text-align: center;
}

.courses-section {
display: flex;
justify-content: center;
}

.course-card {
padding: 20px;
}

.course-h3 {
color: var(--secondary-color);
font-size: 28px;
margin: 0;
font-family: "Roboto", sans-serif;
}

.course-p {
color: var(--terciary-color);
font-size: 20px;
font-family: "Roboto Mono", monospace;
}

.course-info-container {
display: flex;
align-items: center;
justify-content: space-between;
}

.course-h2 {
font-size: 35px;
margin: 0;
color: var(--secondary-color);
}

.course-button {
background-color: var(--secondary-color);
font-family: "Roboto", sans-serif;
color: var(--terciary-color);
font-size: 28px;
height: 59px;
width: 138px;
border-radius: 9px;
}
60 changes: 60 additions & 0 deletions resources/js/components/course/Course.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import React from "react";
import ReactDOM from "react-dom";
import "./Course.css";

function Course() {
return (
<div className="courses-parent">
<h2 className="courses-parent-title">Cursos destacados</h2>
<section className="courses-section">
<div className="course-card">
<img
className="course-img"
src="../assets/course.png"
alt="course image"
/>
<h3 className="course-h3">Curso básico portfolio</h3>
<p className="course-p">
Cómo realizar tu propio portfolio
</p>
<div className="course-info-container">
<h2 className="course-h2">30.0€</h2>
<button className="course-button">Comprar</button>
</div>
</div>
<div className="course-card">
<img
className="course-img"
src="../assets/course1.png"
alt="course image"
/>
<h3 className="course-h3">Curso trabajo en remoto</h3>
<p className="course-p">
Aprende a gestionar tu tiempo trabajando online
</p>
<div className="course-info-container">
<h2 className="course-h2">30.0€</h2>
<button className="course-button">Comprar</button>
</div>
</div>
<div className="course-card">
<img
className="course-img"
src="../assets/course2.png"
alt="course image"
/>
<h3 className="course-h3">Curso comunicación efectiva</h3>
<p className="course-p">
Aprende a comunicarte con tu equipo
</p>
<div className="course-info-container">
<h2 className="course-h2">30.0€</h2>
<button className="course-button">Comprar</button>
</div>
</div>
</section>
</div>
);
}

export default Course;
7 changes: 4 additions & 3 deletions resources/sass/app.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url("https://fonts.googleapis.com/css?family=Nunito");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap");

// Variables
@import 'variables';
@import "variables";

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import "~bootstrap/scss/bootstrap";
57 changes: 30 additions & 27 deletions resources/views/layouts/app.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Expand All @@ -15,10 +16,12 @@
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

<link rel="preconnect" href="[https://fonts.gstatic.com](https://fonts.gstatic.com/)">
<link href="[https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&amp;family=Roboto:wght@300;400&amp;display=swap](https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&amp;family=Roboto:wght@300;400&amp;display=swap)" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
Expand All @@ -40,35 +43,34 @@
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif

@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
{{ __('Logout') }}
</a>

<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
Expand All @@ -80,4 +82,5 @@
</main>
</div>
</body>
</html>

</html>

0 comments on commit 981db75

Please sign in to comment.