Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

London 10- Danny Romero-HTML-CSS-Coursework-Week4 #278

Open
Elenar9 wants to merge 7 commits into
base: master
Choose a base branch
from
Open

London 10- Danny Romero-HTML-CSS-Coursework-Week4 #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
07d60b0
HTML-CSS-Coursework-Week4
Elenar9 Feb 22, 2023
faa987e
Html-css-coursework-week4
Elenar9 Feb 23, 2023
6634d7d
html-css-coursework-week4
Elenar9 Feb 23, 2023
31e5db1
html-css-coursework-week4
Elenar9 Feb 24, 2023
ba031a5
update
Elenar9 Mar 28, 2023
a23bf7a
Html-Css-coursework-Week4
Elenar9 Apr 2, 2023
c59b6a4
Create settings.json
Elenar9 Apr 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
120 changes: 118 additions & 2 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,119 @@
/* Add your CSS here */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');/* use in headings */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Quicksand:wght@300&display=swap');/* use in the web*/

/* Dont' forget to link this file to your HTML in the <head> */
:root {
--beige-dark: #e6dacd;
--beige-light: #f4ece6;

--blue-royal: #0150fd;
--black: #000;
--white: #fff;

--heading-font: "Poppins", sans-serif;
--body-font: "Quicksand", sans-serif;
}

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
line-height: 1.4;
}

/*.grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
}*/
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}

.box2 {
display: grid;
justify-content: flex-end;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;

}

.box3 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 4;
}

.header {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.header-content {
display: flex;
flex-direction: column;

}
.square {
background-color: blue;
height: 2rem;
width: 2rem;
margin-right: 1rem;

}
.first-header {
display: flex;
flex-direction: row;
align-items: center;

}
.hidden{
display: flex;
flex-direction: row;
margin: 0 10px 0 0;

}
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 3px 2px;
}

.fa:hover {
opacity: 0.7;
}

.fa-facebook {
background: white;
color: #3B5998;
}

.fa-twitter {
background: white;
color: #55ACEE;
}

.fa-linkedin {
background: white;
color: #007bb5;
}

.fa-instagram {
background: white;
color: #125688;
}
.social-media{
display: flex;
flex-direction: row;
align-items:;
}
5 changes: 5 additions & 0 deletions css/week4.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
$(".menu-toggle").on('click', function () {
$(this).toggleClass("on");
$('.menu-section').toggleClass("on");
$("nav ul").toggleClass('hidden');
});
62 changes: 57 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,70 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Add a link to your custom CSS here -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">

<title>Responsive grid project</title>
</head>

<body>

<header class="header">
<div class="header-content" >
<div class="first-header">
<div class="square"></div>
<h1>Danny Romero</h1>
</div>
<h3 class="header2">Full Stack Developer Trainee at CYF.</h3>
</div>

<!-- Add your markup here -->
<div class="menu-section">
<div class="menu-toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<nav >
<ul role="navigation" class="hidden">
<li><a href="#https://www.wix.com/demone2/personal-resume">About me</a></li>
<li><a href="#https://www.wix.com/demone2/personal-resume/resume">Resume</a></li>
<li><a href="#https://www.wix.com/demone2/personal-resume/projects">Project</a></li>
<li><a href="#https://www.wix.com/demone2/personal-resume/contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="page_container">
<div class="box1"></div>
<div class="box2">
<h2>Hello Word</h2>
<h3>Welcome</h3>
<p>My name is Danny and I'm a full stack Software Engineer
and I'm looking for an opportunity in the industry
to gain experience</p>
<p>I am hard worked and my strength is teamwork and market analysis</p>
</div>
<div class="box3">
<section>
<img src="https://static.wixstatic.com/media/2e2a49_bd3a1599bc1b4265a01b2754b99b8536~mv2_d_5760_3840_s_4_2.jpeg/v1/crop/x_2703,y_43,w_2199,h_2205/fill/w_240,h_240,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/AdobeStock_230407429.jpeg" alt="Danny image">
<h2>Danny Romero</h2>
</section>
<div class="bt">
<button class="bt1"href="">Resume</button>
<button class="bt2"href="">Project</button>
</div>
</div>
<div class="social-media">
<ul>

<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
</ul>


<!-- Please leave this in to credit the creators of this design -->
<p>This website design was created by Wix.com, and is used here for strictly educational purposes.</p>
</div>
</main>
</body>

</html>