Dev

.gitignore

@@ -1,24 +1,43 @@
-# Compiled class file
-*.class
+/.ideas
 
-# Log file
-*.log
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
 
-# BlueJ files
-*.ctxt
+# Node
+/node_modules
 
-# Mobile Tools for Java (J2ME)
-.mtj.tmp/
+npm-debug.log
+yarn-error.log
 
-# Package Files #
-*.jar
-*.war
-*.nar
-*.ear
-*.zip
-*.tar.gz
-*.rar
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
 
-# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
-hs_err_pid*
-replay_pid*
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

angular-blog/src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { HomeComponent } from './pages/home/home.component';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, HomeComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

angular-blog/src/app/components/big-card/big-card.component.css

@@ -0,0 +1,26 @@
+.container__big-card{
+    border: solid white 2px;
+    width: 453px;
+    height: 750px;
+    margin-left: 10px;
+    margin-right: 10px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+.big-card__title > h1{
+    font-size: 40px;
+    margin-top: 15px;
+}
+
+.big-card__description > p{
+    color: grey;
+    margin-top: 10px;
+}
+
+.big-card__image{
+    width: 453px;
+}

angular-blog/src/app/components/big-card/big-card.component.html

@@ -0,0 +1,19 @@
+<div class="container__big-card">
+    <div class="big-card__image">
+        <img 
+            src="https://digest.med.br/wp-content/uploads/2024/07/no-image.jpg"
+            alt=""
+            height="450px"
+            srcset=""
+        >
+    </div>
+    <div class="big-card__title">
+        <h1>News:</h1>
+    </div>
+    <div class="big-card__description">
+        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
+    </div>
+</div>

angular-blog/src/app/components/big-card/big-card.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-big-card',
+  imports: [],
+  templateUrl: './big-card.component.html',
+  styleUrl: './big-card.component.css'
+})
+export class BigCardComponent {
+
+}

angular-blog/src/app/components/menu-bar/menu-bar.component.html

@@ -0,0 +1 @@
+<p>menu-bar works!</p>

angular-blog/src/app/components/menu-bar/menu-bar.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-bar',
+  imports: [],
+  templateUrl: './menu-bar.component.html',
+  styleUrl: './menu-bar.component.css'
+})
+export class MenuBarComponent {
+
+}

angular-blog/src/app/components/menu-title/menu-title.component.css

@@ -0,0 +1,18 @@
+.container__menu-title{
+    color: white;
+}
+
+.container__menu-title > h1 {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-size: 150px;
+    font-weight: bolder;
+    font-family:'Trebuchet MS';
+    display: flex;
+    justify-content: center;
+}
+
+.container__menu-title > hr {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}

angular-blog/src/app/components/menu-title/menu-title.component.html

@@ -0,0 +1,5 @@
+<div class="container__menu-title">
+<hr>
+<h1>TESTING 1,2,3...</h1>
+<hr>
+</div>

angular-blog/src/app/components/menu-title/menu-title.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-title',
+  templateUrl: './menu-title.component.html', 
+  styleUrls: ['./menu-title.component.css']
+})
+export class MenuTitleComponent implements OnInit{
+  nconstructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

angular-blog/src/app/components/small-card/small-card.component.html

@@ -0,0 +1 @@
+<p>small-card works!</p>

angular-blog/src/app/components/small-card/small-card.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-small-card',
+  templateUrl: './small-card.component.html',
+  styleUrls: ['./small-card.component.css']
+})
+export class SmallCardComponent {
+
+}

angular-blog/src/app/pages/home/home.component.html

@@ -0,0 +1,9 @@
+<app-menu-title></app-menu-title>
+<div class="articles">
+    <div class="articles__main">
+        <app-big-card></app-big-card>
+    </div>
+    <div class="articles__others">
+
+    </div>
+</div>

angular-blog/src/app/pages/home/home.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { MenuTitleComponent } from '../../components/menu-title/menu-title.component';
+import { BigCardComponent } from '../../components/big-card/big-card.component';
+
+@Component({
+  selector: 'app-home',
+  imports: [MenuTitleComponent, BigCardComponent],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.css'
+})
+export class HomeComponent {
+
+}

angular-blog/src/styles.css

@@ -1 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background-color:midnightblue;
+    color: white;
+    font-family:'Trebuchet MS';
+}