_juliettech juliettech13

👩‍💻

coding & talking about it

devrel | weekly newsletter (newsletter.juliet.tech)

juliettech13 / index.html

Created May 27, 2020 03:37

adding-fonts

	<html>
	<head>
	[...your code...]
	<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@300&family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
	</head>
	<body>
	[..your code..]
	</body>
	</html>

juliettech13 / bootstrap-grid-html-workshop.html

Created December 10, 2018 17:15

juliettech13 / bootstrap-link-html-workshop.html

Last active July 28, 2019 23:25

	<head>
	[...]
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link href='style.css' rel='stylesheet'>
	</head>

juliettech13 / footer-style-html-workshop.css

Created December 10, 2018 17:10

juliettech13 / footer-html-workshop.html

Last active July 28, 2019 23:22

	<ul class="social-media white-box">
	<li><a href="#"><i class="fab fa-twitter"></i></a></li>
	<li><a href="#"><i class="fab fa-instagram"></i></a></li>
	<li><a href="#"><i class="fab fa-medium-m"></i></a></li>
	<li><a href="#"><i class="fab fa-github"></i></a></li>
	</ul>

juliettech13 / fontawesome-html-workshop.html

Created December 10, 2018 17:07

	<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
	</head>

juliettech13 / div-naming-html-workshop.css

Last active July 29, 2019 14:06

	#banner{
	background-size: cover !important; /* `!important` se asegura de que esta regla se cumpla 100% de las veces */
	padding: 50px;
	background: linear-gradient(-225deg, rgba(0,101,168,0.6) 0%, rgba(0,36,61,0.6) 50%), url(images/banner-jch.png); /* esto es lo que le da el gradiente encima y le posiciona la imagen del banner */
	background-color: #1c2366;
	}

	#banner a{
	margin: 15px; /* ayuda a separar el link del resto del texto. al no pasarle una posición, pone 15px en top + bottom + left + right */
	}

juliettech13 / div-html-workshop.html

Last active July 28, 2019 23:02

	<body>
	<div id="banner">
	<img src="images/img.png" alt="{ tu_nombre }" class='my-img'>
	<h1>{ TU_NOMBRE [tu_emoji_favorito 🤪] }</h1>
	<h4>{ la_linea_que_mas_se_lee} </h4>
	<a href="mailto:{ [email protected] }">Contáctame</a>
	</div>
	<ul class="social-media white-box">
	<li><a href="#">Twitter</i></a></li>
	<li><a href="#">Instagram</a></li>

juliettech13 / head-html-workshop.html

Last active July 29, 2019 13:55

	<head>
	[...]
	<!-- aquí es donde también agregarías el link de Google Fonts para obtener sus fonts en tu página y el link al resto de los recursos externos que utilizaremos -->
	<link href='style.css' rel='stylesheet'>
	</head>

juliettech13 / html-workshop.html

Last active May 13, 2020 00:40

HTML intro - Step 2

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>{ YOUR_WEBSITES_NAME }</title>
	</head>

	<body>
	<img src="images/{ your_image.png }" alt="{ YOUR NAME }">
	<h1>{ YOUR_NAME [YOUR FAVORITE EMOJI 👩🏻‍🎤] }</h1>